feat: Add slot registration and spatial indexing for hit detection

- Implement slot registration for all nodes (Vue and LiteGraph)
- Add spatial indexes for slots and reroutes to improve hit detection performance
- Register slots when nodes are drawn via new registerSlots() method
- Update LayoutStore to use spatial indexing for O(log n) queries instead of O(n)

Resolves #5125

🤖 Generated with [Claude Code](https://claude.ai/code)

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

Author: benceruleanlu

src/lib/litegraph/src/LGraph.ts

@@ -6,6 +6,7 @@ import {
 } from '@/lib/litegraph/src/constants'
 import type { UUID } from '@/lib/litegraph/src/utils/uuid'
 import { createUuidv4, zeroUuid } from '@/lib/litegraph/src/utils/uuid'
+import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
 
 import type { DragAndScaleState } from './DragAndScale'
 import { LGraphCanvas } from './LGraphCanvas'
@@ -2245,6 +2246,8 @@ export class LGraph
         // Drop broken links, and ignore reroutes with no valid links
         if (!reroute.validateLinks(this._links, this.floatingLinks)) {
           this.reroutes.delete(reroute.id)
+          // Clean up layout store
+          layoutStore.deleteRerouteLayout(String(reroute.id))
         }
       }
 

src/lib/litegraph/src/LGraphCanvas.ts

@@ -6,6 +6,7 @@ import {
   type LinkRenderContext,
   LitegraphLinkAdapter
 } from '@/renderer/core/canvas/litegraph/LitegraphLinkAdapter'
+import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
 
 import { CanvasPointer } from './CanvasPointer'
 import type { ContextMenu } from './ContextMenu'
@@ -2197,11 +2198,14 @@ export class LGraphCanvas
           this.processSelect(node, e, true)
         } else if (this.links_render_mode !== LinkRenderType.HIDDEN_LINK) {
           // Reroutes
-          const reroute = graph.getRerouteOnPos(
-            e.canvasX,
-            e.canvasY,
-            this.#visibleReroutes
-          )
+          // Try layout store first, fallback to old method
+          const rerouteLayout = layoutStore.queryRerouteAtPoint({
+            x: e.canvasX,
+            y: e.canvasY
+          })
+          const reroute = rerouteLayout
+            ? graph.getReroute(Number(rerouteLayout.id))
+            : graph.getRerouteOnPos(e.canvasX, e.canvasY, this.#visibleReroutes)
           if (reroute) {
             if (e.altKey) {
               pointer.onClick = (upEvent) => {
@@ -2402,16 +2406,21 @@ export class LGraphCanvas
       this.ctx.lineWidth = this.connections_width + 7
       const dpi = Math.max(window?.devicePixelRatio ?? 1, 1)
 
+      // Try layout store for link hit testing first
+      const hitLinkId = layoutStore.queryLinkAtPoint({ x, y }, this.ctx)
+
       for (const linkSegment of this.renderedPaths) {
         const centre = linkSegment._pos
         if (!centre) continue
 
+        // Check if this link was hit (using layout store or fallback to old method)
+        const isLinkHit = hitLinkId
+          ? String(linkSegment.id) === hitLinkId
+          : linkSegment.path &&
+            this.ctx.isPointInStroke(linkSegment.path, x * dpi, y * dpi)
+
         // If we shift click on a link then start a link from that input
-        if (
-          (e.shiftKey || e.altKey) &&
-          linkSegment.path &&
-          this.ctx.isPointInStroke(linkSegment.path, x * dpi, y * dpi)
-        ) {
+        if ((e.shiftKey || e.altKey) && isLinkHit) {
           this.ctx.lineWidth = lineWidth
 
           if (e.shiftKey && !e.altKey) {
@@ -3139,8 +3148,27 @@ export class LGraphCanvas
         // For input/output hovering
         // to store the output of isOverNodeInput
         const pos: Point = [0, 0]
-        const inputId = isOverNodeInput(node, x, y, pos)
-        const outputId = isOverNodeOutput(node, x, y, pos)
+
+        // Try to use layout store for hit testing first, fallback to old method
+        let inputId: number = -1
+        let outputId: number = -1
+
+        const slotLayout = layoutStore.querySlotAtPoint({ x, y })
+        if (slotLayout && slotLayout.nodeId === String(node.id)) {
+          if (slotLayout.type === 'input') {
+            inputId = slotLayout.index
+            pos[0] = slotLayout.position.x
+            pos[1] = slotLayout.position.y
+          } else {
+            outputId = slotLayout.index
+            pos[0] = slotLayout.position.x
+            pos[1] = slotLayout.position.y
+          }
+        } else {
+          // Fallback to old method
+          inputId = isOverNodeInput(node, x, y, pos)
+          outputId = isOverNodeOutput(node, x, y, pos)
+        }
         const overWidget = node.getWidgetOnPos(x, y, true) ?? undefined
 
         if (!node.mouseOver) {
@@ -5026,6 +5054,7 @@ export class LGraphCanvas
       node._setConcreteSlots()
       if (!node.collapsed) {
         node.arrange()
+        node.registerSlots() // Register slots for hit detection
       }
       // Skip all node body/widget/title rendering. Vue overlay handles visuals.
       return
@@ -5117,6 +5146,7 @@ export class LGraphCanvas
     node._setConcreteSlots()
     if (!node.collapsed) {
       node.arrange()
+      node.registerSlots() // Register slots for hit detection
       node.drawSlots(ctx, {
         fromSlot: this.linkConnector.renderLinks[0]?.fromSlot as
           | INodeOutputSlot
@@ -5131,6 +5161,7 @@ export class LGraphCanvas
 
       this.drawNodeWidgets(node, null, ctx)
     } else if (this.render_collapsed_slots) {
+      node.registerSlots() // Register slots for collapsed nodes too
       node.drawCollapsedSlots(ctx)
     }
 
@@ -5522,6 +5553,19 @@ export class LGraphCanvas
       }
       reroute.draw(ctx, this._pattern)
 
+      // Register reroute layout with layout store for hit testing
+      layoutStore.updateRerouteLayout(String(reroute.id), {
+        id: String(reroute.id),
+        position: { x: reroute.pos[0], y: reroute.pos[1] },
+        radius: 8, // Reroute.radius
+        bounds: {
+          x: reroute.pos[0] - 8,
+          y: reroute.pos[1] - 8,
+          width: 16,
+          height: 16
+        }
+      })
+
       // Never draw slots when the pointer is down
       if (!this.pointer.isDown) reroute.drawSlots(ctx)
     }
@@ -6040,6 +6084,8 @@ export class LGraphCanvas
               : segment.id
           if (linkId !== undefined) {
             graph.removeLink(linkId)
+            // Clean up layout store
+            layoutStore.deleteLinkLayout(String(linkId))
           }
           break
         }
@@ -8117,11 +8163,18 @@ export class LGraphCanvas
 
       // Check for reroutes
       if (this.links_render_mode !== LinkRenderType.HIDDEN_LINK) {
-        const reroute = this.graph.getRerouteOnPos(
-          event.canvasX,
-          event.canvasY,
-          this.#visibleReroutes
-        )
+        // Try layout store first, fallback to old method
+        const rerouteLayout = layoutStore.queryRerouteAtPoint({
+          x: event.canvasX,
+          y: event.canvasY
+        })
+        const reroute = rerouteLayout
+          ? this.graph.getReroute(Number(rerouteLayout.id))
+          : this.graph.getRerouteOnPos(
+              event.canvasX,
+              event.canvasY,
+              this.#visibleReroutes
+            )
         if (reroute) {
           menu_info.unshift(
             {

src/lib/litegraph/src/LGraphNode.ts

@@ -3,7 +3,8 @@ import {
   type SlotPositionContext,
   calculateInputSlotPos,
   calculateInputSlotPosFromSlot,
-  calculateOutputSlotPos
+  calculateOutputSlotPos,
+  registerNodeSlots
 } from '@/renderer/core/canvas/litegraph/SlotCalculations'
 
 import type { DragAndScale } from './DragAndScale'
@@ -4109,6 +4110,13 @@ export class LGraphNode
     this.#arrangeWidgetInputSlots()
   }
 
+  /**
+   * Register all slots with the layout store for hit detection
+   */
+  registerSlots(): void {
+    registerNodeSlots(String(this.id), this.#getSlotPositionContext())
+  }
+
   /**
    * Draws a progress bar on the node.
    * @param ctx The canvas context to draw on

src/lib/litegraph/src/LLink.ts

@@ -2,6 +2,7 @@ import {
   SUBGRAPH_INPUT_ID,
   SUBGRAPH_OUTPUT_ID
 } from '@/lib/litegraph/src/constants'
+import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
 
 import type { LGraphNode, NodeId } from './LGraphNode'
 import type { Reroute, RerouteId } from './Reroute'
@@ -459,9 +460,13 @@ export class LLink implements LinkSegment, Serialisable<SerialisableLLink> {
       reroute.linkIds.delete(this.id)
       if (!keepReroutes && !reroute.totalLinks) {
         network.reroutes.delete(reroute.id)
+        // Clean up layout store
+        layoutStore.deleteRerouteLayout(String(reroute.id))
       }
     }
     network.links.delete(this.id)
+    // Clean up layout store
+    layoutStore.deleteLinkLayout(String(this.id))
   }
 
   /**

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

@@ -38,6 +38,7 @@ import {
   calculateOutputSlotPos
 } from '@/renderer/core/canvas/litegraph/SlotCalculations'
 import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
+import type { LinkLayout } from '@/renderer/core/layout/types'
 
 export interface LinkRenderContext {
   // Canvas settings
@@ -139,6 +140,25 @@ export class LitegraphLinkAdapter {
 
     // Store path for hit detection
     link.path = path
+
+    // Register link layout with layout store
+    if (path && linkData.centerPos) {
+      const linkLayout: LinkLayout = {
+        id: String(link.id),
+        path,
+        bounds: this.calculateLinkBounds(
+          linkData.startPoint,
+          linkData.endPoint,
+          linkData.controlPoints
+        ),
+        centerPos: linkData.centerPos,
+        sourceNodeId: String(link.origin_id),
+        targetNodeId: String(link.target_id),
+        sourceSlot: link.origin_slot,
+        targetSlot: link.target_slot
+      }
+      layoutStore.updateLinkLayout(String(link.id), linkLayout)
+    }
   }
 
   /**
@@ -434,6 +454,25 @@ export class LitegraphLinkAdapter {
           linkSegment._centreAngle = linkData.centerAngle
         }
       }
+
+      // Register link layout with layout store if this is a real link
+      if (link && path && linkData.centerPos) {
+        const linkLayout: LinkLayout = {
+          id: String(link.id),
+          path,
+          bounds: this.calculateLinkBounds(
+            linkData.startPoint,
+            linkData.endPoint,
+            linkData.controlPoints
+          ),
+          centerPos: linkData.centerPos,
+          sourceNodeId: String(link.origin_id),
+          targetNodeId: String(link.target_id),
+          sourceSlot: link.origin_slot,
+          targetSlot: link.target_slot
+        }
+        layoutStore.updateLinkLayout(String(link.id), linkLayout)
+      }
     }
   }
 
@@ -522,4 +561,38 @@ export class LitegraphLinkAdapter {
     // Render using pure renderer
     this.pathRenderer.drawDraggingLink(ctx, dragData, pathContext)
   }
+
+  /**
+   * Calculate bounding box for a link
+   */
+  private calculateLinkBounds(
+    startPoint: Point,
+    endPoint: Point,
+    controlPoints?: Point[]
+  ): { x: number; y: number; width: number; height: number } {
+    // Start with endpoints
+    let minX = Math.min(startPoint.x, endPoint.x)
+    let maxX = Math.max(startPoint.x, endPoint.x)
+    let minY = Math.min(startPoint.y, endPoint.y)
+    let maxY = Math.max(startPoint.y, endPoint.y)
+
+    // Include control points if present (for spline links)
+    if (controlPoints) {
+      for (const cp of controlPoints) {
+        minX = Math.min(minX, cp.x)
+        maxX = Math.max(maxX, cp.x)
+        minY = Math.min(minY, cp.y)
+        maxY = Math.max(maxY, cp.y)
+      }
+    }
+
+    // Add some padding for hit detection
+    const padding = 10
+    return {
+      x: minX - padding,
+      y: minY - padding,
+      width: maxX - minX + 2 * padding,
+      height: maxY - minY + 2 * padding
+    }
+  }
 }

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

@@ -13,6 +13,8 @@ import type {
 } from '@/lib/litegraph/src/interfaces'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { isWidgetInputSlot } from '@/lib/litegraph/src/node/slotUtils'
+import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
+import type { SlotLayout } from '@/renderer/core/layout/types'
 
 export interface SlotPositionContext {
   /** Node's X position in graph coordinates */
@@ -229,3 +231,60 @@ function calculateVueSlotPosition(
 
   return [nodeX + slotCenterX, nodeY + slotCenterY]
 }
+
+/**
+ * Register slot layout with the layout store for hit testing
+ * @param nodeId The node ID
+ * @param slotIndex The slot index
+ * @param isInput Whether this is an input slot
+ * @param position The slot position in graph coordinates
+ */
+export function registerSlotLayout(
+  nodeId: string,
+  slotIndex: number,
+  isInput: boolean,
+  position: Point
+): void {
+  const slotKey = `${nodeId}-${isInput ? 'in' : 'out'}-${slotIndex}`
+
+  // Calculate bounds for the slot (20x20 area around center)
+  const slotSize = 20
+  const halfSize = slotSize / 2
+
+  const slotLayout: SlotLayout = {
+    nodeId,
+    index: slotIndex,
+    type: isInput ? 'input' : 'output',
+    position: { x: position[0], y: position[1] },
+    bounds: {
+      x: position[0] - halfSize,
+      y: position[1] - halfSize,
+      width: slotSize,
+      height: slotSize
+    }
+  }
+
+  layoutStore.updateSlotLayout(slotKey, slotLayout)
+}
+
+/**
+ * Register all slots for a node
+ * @param nodeId The node ID
+ * @param context The slot position context
+ */
+export function registerNodeSlots(
+  nodeId: string,
+  context: SlotPositionContext
+): void {
+  // Register input slots
+  context.inputs.forEach((_, index) => {
+    const position = calculateInputSlotPos(context, index)
+    registerSlotLayout(nodeId, index, true, position)
+  })
+
+  // Register output slots
+  context.outputs.forEach((_, index) => {
+    const position = calculateOutputSlotPos(context, index)
+    registerSlotLayout(nodeId, index, false, position)
+  })
+}