Fix/vue nodes snap to grid (#5973)

## Summary

Enable node snap to grid in vue nodes mirroring the same behavior as
litegraph.

- Show node snap preview (semi transparent white box target behind node)
- Resize snap to grid
- Shift + drag / Auto snap 
- Multi select + group snap

## Changes

- **What**: useNodeSnap.ts useShifyKeySync.ts setups the core hooks into
both the vue node positioning/resizing system and the event forwarding
technique for communicating to litegraph.

## Review Focus

Both new composables and specifically the useNodeLayout modifications to
batch the mutations when snapping.
A key tradeoff/note is why we are using the useShifyKeySync.ts which
dispatches a new shift event to the canvas layer. This approach is the
cleaner / more declaritive method mimicking how other vue node ->
litegraph realtime events are passed.

<!-- If this PR fixes an issue, uncomment and update the line below -->
<!-- Fixes #ISSUE_NUMBER -->

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5973-Fix-vue-nodes-snap-to-grid-2866d73d365081c1a058d223c8c52576)
by [Unito](https://www.unito.io)

src/renderer/extensions/vueNodes/layout/useNodeLayout.ts

@@ -7,7 +7,9 @@ import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { LayoutSource } from '@/renderer/core/layout/types'
-import type { Point } from '@/renderer/core/layout/types'
+import type { NodeBoundsUpdate, Point } from '@/renderer/core/layout/types'
+import { useNodeSnap } from '@/renderer/extensions/vueNodes/composables/useNodeSnap'
+import { useShiftKeySync } from '@/renderer/extensions/vueNodes/composables/useShiftKeySync'
 
 /**
  * Composable for individual Vue node components
@@ -21,6 +23,12 @@ export function useNodeLayout(nodeIdMaybe: MaybeRefOrGetter<string>) {
   // Get transform utilities from TransformPane if available
   const transformState = inject(TransformStateKey)
 
+  // Snap-to-grid functionality
+  const { shouldSnap, applySnapToPosition } = useNodeSnap()
+
+  // Shift key sync for LiteGraph canvas preview
+  const { trackShiftKey } = useShiftKeySync()
+
   // Get the customRef for this node (shared write access)
   const layoutRef = layoutStore.getNodeLayoutRef(nodeId)
 
@@ -50,6 +58,8 @@ export function useNodeLayout(nodeIdMaybe: MaybeRefOrGetter<string>) {
   let dragStartPos: Point | null = null
   let dragStartMouse: Point | null = null
   let otherSelectedNodesStartPositions: Map<string, Point> | null = null
+  let rafId: number | null = null
+  let stopShiftSync: (() => void) | null = null
 
   /**
    * Start dragging the node
@@ -57,6 +67,9 @@ export function useNodeLayout(nodeIdMaybe: MaybeRefOrGetter<string>) {
   function startDrag(event: PointerEvent) {
     if (!layoutRef.value || !transformState) return
 
+    // Track shift key state and sync to canvas for snap preview
+    stopShiftSync = trackShiftKey(event)
+
     isDragging.value = true
     dragStartPos = { ...position.value }
     dragStartMouse = { x: event.clientX, y: event.clientY }
@@ -100,42 +113,54 @@ export function useNodeLayout(nodeIdMaybe: MaybeRefOrGetter<string>) {
       return
     }
 
-    // Calculate mouse delta in screen coordinates
-    const mouseDelta = {
-      x: event.clientX - dragStartMouse.x,
-      y: event.clientY - dragStartMouse.y
-    }
+    // Throttle position updates using requestAnimationFrame for better performance
+    if (rafId !== null) return // Skip if frame already scheduled
 
-    // Convert to canvas coordinates
-    const canvasOrigin = transformState.screenToCanvas({ x: 0, y: 0 })
-    const canvasWithDelta = transformState.screenToCanvas(mouseDelta)
-    const canvasDelta = {
-      x: canvasWithDelta.x - canvasOrigin.x,
-      y: canvasWithDelta.y - canvasOrigin.y
-    }
+    rafId = requestAnimationFrame(() => {
+      rafId = null
 
-    // Calculate new position for the current node
-    const newPosition = {
-      x: dragStartPos.x + canvasDelta.x,
-      y: dragStartPos.y + canvasDelta.y
-    }
+      if (!dragStartPos || !dragStartMouse || !transformState) return
 
-    // Apply mutation through the layout system
-    mutations.moveNode(nodeId, newPosition)
-
-    // If we're dragging multiple selected nodes, move them all together
-    if (
-      otherSelectedNodesStartPositions &&
-      otherSelectedNodesStartPositions.size > 0
-    ) {
-      for (const [otherNodeId, startPos] of otherSelectedNodesStartPositions) {
-        const newOtherPosition = {
-          x: startPos.x + canvasDelta.x,
-          y: startPos.y + canvasDelta.y
-        }
-        mutations.moveNode(otherNodeId, newOtherPosition)
+      // Calculate mouse delta in screen coordinates
+      const mouseDelta = {
+        x: event.clientX - dragStartMouse.x,
+        y: event.clientY - dragStartMouse.y
       }
-    }
+
+      // Convert to canvas coordinates
+      const canvasOrigin = transformState.screenToCanvas({ x: 0, y: 0 })
+      const canvasWithDelta = transformState.screenToCanvas(mouseDelta)
+      const canvasDelta = {
+        x: canvasWithDelta.x - canvasOrigin.x,
+        y: canvasWithDelta.y - canvasOrigin.y
+      }
+
+      // Calculate new position for the current node
+      const newPosition = {
+        x: dragStartPos.x + canvasDelta.x,
+        y: dragStartPos.y + canvasDelta.y
+      }
+
+      // Apply mutation through the layout system (Vue batches DOM updates automatically)
+      mutations.moveNode(nodeId, newPosition)
+
+      // If we're dragging multiple selected nodes, move them all together
+      if (
+        otherSelectedNodesStartPositions &&
+        otherSelectedNodesStartPositions.size > 0
+      ) {
+        for (const [
+          otherNodeId,
+          startPos
+        ] of otherSelectedNodesStartPositions) {
+          const newOtherPosition = {
+            x: startPos.x + canvasDelta.x,
+            y: startPos.y + canvasDelta.y
+          }
+          mutations.moveNode(otherNodeId, newOtherPosition)
+        }
+      }
+    })
   }
 
   /**
@@ -144,11 +169,82 @@ export function useNodeLayout(nodeIdMaybe: MaybeRefOrGetter<string>) {
   function endDrag(event: PointerEvent) {
     if (!isDragging.value) return
 
+    // Apply snap to final position if snap was active (matches LiteGraph behavior)
+    if (shouldSnap(event)) {
+      const boundsUpdates: NodeBoundsUpdate[] = []
+
+      // Snap main node
+      const currentLayout = layoutStore.getNodeLayoutRef(nodeId).value
+      if (currentLayout) {
+        const currentPos = currentLayout.position
+        const snappedPos = applySnapToPosition({ ...currentPos })
+
+        // Only add update if position actually changed
+        if (snappedPos.x !== currentPos.x || snappedPos.y !== currentPos.y) {
+          boundsUpdates.push({
+            nodeId,
+            bounds: {
+              x: snappedPos.x,
+              y: snappedPos.y,
+              width: currentLayout.size.width,
+              height: currentLayout.size.height
+            }
+          })
+        }
+      }
+
+      // Also snap other selected nodes
+      // Capture all positions at the start to ensure consistent state
+      if (
+        otherSelectedNodesStartPositions &&
+        otherSelectedNodesStartPositions.size > 0
+      ) {
+        for (const otherNodeId of otherSelectedNodesStartPositions.keys()) {
+          const nodeLayout = layoutStore.getNodeLayoutRef(otherNodeId).value
+          if (nodeLayout) {
+            const currentPos = { ...nodeLayout.position }
+            const snappedPos = applySnapToPosition(currentPos)
+
+            // Only add update if position actually changed
+            if (
+              snappedPos.x !== currentPos.x ||
+              snappedPos.y !== currentPos.y
+            ) {
+              boundsUpdates.push({
+                nodeId: otherNodeId,
+                bounds: {
+                  x: snappedPos.x,
+                  y: snappedPos.y,
+                  width: nodeLayout.size.width,
+                  height: nodeLayout.size.height
+                }
+              })
+            }
+          }
+        }
+      }
+
+      // Apply all snap updates in a single batched transaction
+      if (boundsUpdates.length > 0) {
+        layoutStore.batchUpdateNodeBounds(boundsUpdates)
+      }
+    }
+
     isDragging.value = false
     dragStartPos = null
     dragStartMouse = null
     otherSelectedNodesStartPositions = null
 
+    // Stop tracking shift key state
+    stopShiftSync?.()
+    stopShiftSync = null
+
+    // Cancel any pending animation frame
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+      rafId = null
+    }
+
     // Release pointer
     if (!(event.target instanceof HTMLElement)) return
     event.target.releasePointerCapture(event.pointerId)