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 <noreply@anthropic.com>
This commit is contained in:
Benjamin Lu
2025-08-20 16:25:13 -04:00
parent 5a74c019c7
commit 5171decd8b
9 changed files with 562 additions and 26 deletions

View File

@@ -6,9 +6,12 @@
*/
import { computed, inject } from 'vue'
import { registerNodeSlots } from '@/renderer/core/canvas/litegraph/SlotCalculations'
import type { SlotPositionContext } from '@/renderer/core/canvas/litegraph/SlotCalculations'
import { layoutMutations } from '@/renderer/core/layout/operations/LayoutMutations'
import { layoutStore } from '@/renderer/core/layout/store/LayoutStore'
import type { Point } from '@/renderer/core/layout/types'
import { app } from '@/scripts/app'
/**
* Composable for individual Vue node components
@@ -136,6 +139,34 @@ export function useNodeLayout(nodeId: string) {
mutations.resizeNode(nodeId, newSize)
}
/**
* Update slot layouts for this node
* Should be called whenever the node's slots or position changes
*/
function updateSlotLayouts() {
if (!layoutRef.value || !app.graph) return
const node = app.graph.getNodeById(Number(nodeId))
if (!node) return
// Create context for slot position calculation
const context: SlotPositionContext = {
nodeX: layoutRef.value.position.x,
nodeY: layoutRef.value.position.y,
nodeWidth: layoutRef.value.size.width,
nodeHeight: layoutRef.value.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
}
// Register all slots for this node
registerNodeSlots(nodeId, context)
}
return {
// Reactive state (via customRef)
layoutRef,
@@ -148,6 +179,7 @@ export function useNodeLayout(nodeId: string) {
// Mutations
moveTo,
resize,
updateSlotLayouts,
// Drag handlers
startDrag,