>
- Shared across all components
- }
-
- useReactiveLayout --> Singleton : implements
-```
-
-## useVueNodeInteraction
-
-Handles individual node interactions with CSS transforms.
-
-```mermaid
-flowchart LR
- subgraph "Drag State"
- DS[isDragging
dragDelta
dragStartPos]
- end
-
- subgraph "Event Handlers"
- SD[startDrag]
- HD[handleDrag]
- ED[endDrag]
- end
-
- subgraph "Computed Styles"
- NS[nodeStyle
- position
- dimensions
- z-index]
- DGS[dragStyle
- transform
- transition]
- end
-
- SD --> DS
- HD --> DS
- ED --> DS
-
- DS --> NS
- DS --> DGS
-```
-
-### Transform Calculation
-
-```mermaid
-graph TB
- subgraph "Mouse Delta"
- MD[event.clientX/Y - startMouse]
- end
-
- subgraph "Canvas Transform"
- CT[screenToCanvas conversion]
- end
-
- subgraph "Drag Delta"
- DD[Canvas-space delta]
- end
-
- subgraph "CSS Transform"
- CSS[translate(deltaX, deltaY)]
- end
-
- MD --> CT
- CT --> DD
- DD --> CSS
-```
-
-## useLiteGraphSync
-
-Bidirectional synchronization between LiteGraph and the reactive layout tree.
-
-```mermaid
-stateDiagram-v2
- [*] --> Initialize
-
- Initialize --> SyncFromLiteGraph
- SyncFromLiteGraph --> WatchLayoutTree
-
- state WatchLayoutTree {
- [*] --> Listening
- Listening --> PositionChanged: Layout tree update
- PositionChanged --> UpdateLiteGraph
- UpdateLiteGraph --> TriggerRedraw
- TriggerRedraw --> Listening
- }
-
- state SyncFromLiteGraph {
- [*] --> ReadNodes
- ReadNodes --> UpdateLayoutTree
- UpdateLayoutTree --> [*]
- }
-```
-
-## Integration Example
-
-```typescript
-// In GraphCanvas.vue
-const { initializeSync } = useLiteGraphSync()
-onMounted(() => {
- initializeSync() // Start bidirectional sync
-})
-
-// In LGraphNode.vue
-const {
- isDragging,
- startDrag,
- handleDrag,
- endDrag,
- dragStyle,
- updatePosition
-} = useVueNodeInteraction(props.nodeData.id)
-
-// Template
-
-```
-
-## Performance Considerations
-
-1. **CSS Transforms During Drag**: No layout recalculation, GPU accelerated
-2. **Batch Position Updates**: Layout tree updates trigger single LiteGraph sync
-3. **Reactive Efficiency**: Vue's computed properties cache results
-4. **Spatial Indexing**: QuadTree integration for fast hit testing
-
-## Future Migration Path
-
-Currently: Vue nodes use CSS transforms, commit to layout tree on drag end
-Future: Each renderer owns complete interaction handling and layout state
\ No newline at end of file