feat: Implement DOM-based slot registration with unified position system

- Add centralized getSlotPosition() function in SlotCalculations
- Create SlotIdentifier utilities for consistent slot key generation
- Implement DOM-based slot registration composable with performance optimizations:
  - Cache slot offsets to avoid DOM reads during drag operations
  - Batch measurements via requestAnimationFrame
  - Skip redundant updates when bounds unchanged
- Update Vue slot components to register DOM positions
- Fix widget-to-input index mapping in NodeWidgets
- Prevent double registration when Vue nodes enabled

This improves slot hit-detection accuracy by using actual DOM positions
while maintaining performance through intelligent caching and batching.

🤖 Generated with Claude Code

Co-Authored-By: Claude <[email protected]>

Author: benceruleanlu

src/renderer/core/canvas/litegraph/LitegraphLinkAdapter.ts

@@ -32,11 +32,7 @@ import {
   type Point,
   type RenderMode
 } from '@/renderer/core/canvas/PathRenderer'
-import {
-  type SlotPositionContext,
-  calculateInputSlotPos,
-  calculateOutputSlotPos
-} from '@/renderer/core/canvas/litegraph/SlotCalculations'
+import { getSlotPosition } from '@/renderer/core/canvas/litegraph/SlotCalculations'
 import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
 import type { Bounds } from '@/renderer/core/layout/types'
 
@@ -108,12 +104,12 @@ export class LitegraphLinkAdapter {
     }
 
     // Get positions using layout tree data if available
-    const startPos = this.getSlotPosition(
+    const startPos = getSlotPosition(
       sourceNode,
       link.origin_slot,
       false // output
     )
-    const endPos = this.getSlotPosition(
+    const endPos = getSlotPosition(
       targetNode,
       link.target_slot,
       true // input
@@ -503,42 +499,6 @@ export class LitegraphLinkAdapter {
     }
   }
 
-  /**
-   * Get slot position using layout tree if available, fallback to node's position
-   */
-  private getSlotPosition(
-    node: LGraphNode,
-    slotIndex: number,
-    isInput: boolean
-  ): ReadOnlyPoint {
-    // Try to get position from layout tree
-    const nodeLayout = layoutStore.getNodeLayoutRef(String(node.id)).value
-
-    if (nodeLayout) {
-      // Create context from layout tree data
-      const context: SlotPositionContext = {
-        nodeX: nodeLayout.position.x,
-        nodeY: nodeLayout.position.y,
-        nodeWidth: nodeLayout.size.width,
-        nodeHeight: nodeLayout.size.height,
-        collapsed: node.flags.collapsed || false,
-        collapsedWidth: node._collapsed_width,
-        slotStartY: node.constructor.slot_start_y,
-        inputs: node.inputs,
-        outputs: node.outputs,
-        widgets: node.widgets
-      }
-
-      // Use helper to calculate position
-      return isInput
-        ? calculateInputSlotPos(context, slotIndex)
-        : calculateOutputSlotPos(context, slotIndex)
-    }
-
-    // Fallback to node's own methods if layout not available
-    return isInput ? node.getInputPos(slotIndex) : node.getOutputPos(slotIndex)
-  }
-
   /**
    * Render a link being dragged from a slot to mouse position
    * Used during link creation/reconnection
@@ -559,7 +519,7 @@ export class LitegraphLinkAdapter {
     if (!fromNode) return
 
     // Get slot position using layout tree if available
-    const slotPos = this.getSlotPosition(
+    const slotPos = getSlotPosition(
       fromNode,
       fromSlotIndex,
       options.fromInput || false

src/renderer/core/canvas/litegraph/SlotCalculations.ts

@@ -5,14 +5,18 @@
  * This allows both litegraph nodes and the layout system to use the same
  * calculation logic while providing their own position data.
  */
+import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type {
   INodeInputSlot,
   INodeOutputSlot,
   INodeSlot,
-  Point
+  Point,
+  ReadOnlyPoint
 } from '@/lib/litegraph/src/interfaces'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { isWidgetInputSlot } from '@/lib/litegraph/src/node/slotUtils'
+import { getSlotKey } from '@/renderer/core/layout/slots/SlotIdentifier'
+import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
 
 export interface SlotPositionContext {
   /** Node's X position in graph coordinates */
@@ -147,6 +151,54 @@ export function calculateOutputSlotPos(
   return [nodeX + nodeWidth + 1 - offsetX, nodeY + slotY + nodeOffsetY]
 }
 
+/**
+ * Get slot position using layout tree if available, fallback to node's position
+ * Unified implementation used by both LitegraphLinkAdapter and useLinkLayoutSync
+ * @param node The LGraphNode
+ * @param slotIndex The slot index
+ * @param isInput Whether this is an input slot
+ * @returns Position of the slot center in graph coordinates
+ */
+export function getSlotPosition(
+  node: LGraphNode,
+  slotIndex: number,
+  isInput: boolean
+): ReadOnlyPoint {
+  // Try to get precise position from slot layout (DOM-registered)
+  const slotKey = getSlotKey(String(node.id), slotIndex, isInput)
+  const slotLayout = layoutStore.getSlotLayout(slotKey)
+  if (slotLayout) {
+    return [slotLayout.position.x, slotLayout.position.y]
+  }
+
+  // Fallback: derive position from node layout tree and slot model
+  const nodeLayout = layoutStore.getNodeLayoutRef(String(node.id)).value
+
+  if (nodeLayout) {
+    // Create context from layout tree data
+    const context: SlotPositionContext = {
+      nodeX: nodeLayout.position.x,
+      nodeY: nodeLayout.position.y,
+      nodeWidth: nodeLayout.size.width,
+      nodeHeight: nodeLayout.size.height,
+      collapsed: node.flags.collapsed || false,
+      collapsedWidth: node._collapsed_width,
+      slotStartY: node.constructor.slot_start_y,
+      inputs: node.inputs,
+      outputs: node.outputs,
+      widgets: node.widgets
+    }
+
+    // Use helper to calculate position
+    return isInput
+      ? calculateInputSlotPos(context, slotIndex)
+      : calculateOutputSlotPos(context, slotIndex)
+  }
+
+  // Fallback to node's own methods if layout not available
+  return isInput ? node.getInputPos(slotIndex) : node.getOutputPos(slotIndex)
+}
+
 /**
  * Get the inputs that are not positioned with absolute coordinates
  */

src/renderer/core/layout/slots/SlotIdentifier.ts

@@ -0,0 +1,76 @@
+/**
+ * Slot identifier utilities for consistent slot key generation and parsing
+ *
+ * Provides a centralized interface for slot identification across the layout system
+ *
+ * @TODO Replace this concatenated string with root cause fix
+ */
+
+export interface SlotIdentifier {
+  nodeId: string
+  index: number
+  isInput: boolean
+}
+
+/**
+ * Generate a unique key for a slot
+ * Format: "{nodeId}-{in|out}-{index}"
+ */
+export function getSlotKey(identifier: SlotIdentifier): string
+export function getSlotKey(
+  nodeId: string,
+  index: number,
+  isInput: boolean
+): string
+export function getSlotKey(
+  nodeIdOrIdentifier: string | SlotIdentifier,
+  index?: number,
+  isInput?: boolean
+): string {
+  if (typeof nodeIdOrIdentifier === 'object') {
+    const { nodeId, index, isInput } = nodeIdOrIdentifier
+    return `${nodeId}-${isInput ? 'in' : 'out'}-${index}`
+  }
+
+  if (index === undefined || isInput === undefined) {
+    throw new Error('Missing required parameters for slot key generation')
+  }
+
+  return `${nodeIdOrIdentifier}-${isInput ? 'in' : 'out'}-${index}`
+}
+
+/**
+ * Parse a slot key back into its components
+ */
+export function parseSlotKey(key: string): SlotIdentifier | null {
+  const match = key.match(/^(.+)-(in|out)-(\d+)$/)
+  if (!match) return null
+
+  return {
+    nodeId: match[1],
+    isInput: match[2] === 'in',
+    index: parseInt(match[3], 10)
+  }
+}
+
+/**
+ * Check if a key represents an input slot
+ */
+export function isInputSlotKey(key: string): boolean {
+  return key.includes('-in-')
+}
+
+/**
+ * Check if a key represents an output slot
+ */
+export function isOutputSlotKey(key: string): boolean {
+  return key.includes('-out-')
+}
+
+/**
+ * Get the node ID from a slot key
+ */
+export function getNodeIdFromSlotKey(key: string): string | null {
+  const parsed = parseSlotKey(key)
+  return parsed?.nodeId ?? null
+}

src/renderer/core/layout/slots/register.ts

@@ -15,6 +15,8 @@ import {
 import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
 import type { SlotLayout } from '@/renderer/core/layout/types'
 
+import { getSlotKey } from './SlotIdentifier'
+
 /**
  * Register slot layout with the layout store for hit testing
  * @param nodeId The node ID
@@ -28,7 +30,7 @@ export function registerSlotLayout(
   isInput: boolean,
   position: Point
 ): void {
-  const slotKey = `${nodeId}-${isInput ? 'in' : 'out'}-${slotIndex}`
+  const slotKey = getSlotKey(nodeId, slotIndex, isInput)
 
   // Calculate bounds for the slot using LiteGraph's standard slot height
   const slotSize = LiteGraph.NODE_SLOT_HEIGHT