Merge remote-tracking branch 'origin/main' into bl-update-slots

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -168,13 +168,18 @@ interface LGraphNodeProps {
 const props = defineProps<LGraphNodeProps>()
 
 const emit = defineEmits<{
-  'node-click': [event: PointerEvent, nodeData: VueNodeData]
+  'node-click': [
+    event: PointerEvent,
+    nodeData: VueNodeData,
+    wasDragging: boolean
+  ]
   'slot-click': [
     event: PointerEvent,
     nodeData: VueNodeData,
     slotIndex: number,
     isInput: boolean
   ]
+  dragStart: [event: DragEvent, nodeData: VueNodeData]
   'update:collapsed': [nodeId: string, collapsed: boolean]
   'update:title': [nodeId: string, newTitle: string]
 }>()
@@ -231,6 +236,10 @@ const isDragging = ref(false)
 const dragStyle = computed(() => ({
   cursor: isDragging.value ? 'grabbing' : 'grab'
 }))
+const lastY = ref(0)
+const lastX = ref(0)
+// Treat tiny pointer jitter as a click, not a drag
+const DRAG_THRESHOLD_PX = 4
 
 // Track collapsed state
 const isCollapsed = ref(props.nodeData.flags?.collapsed ?? false)
@@ -276,9 +285,8 @@ const handlePointerDown = (event: PointerEvent) => {
   // Start drag using layout system
   isDragging.value = true
   startDrag(event)
-
-  // Emit node-click for selection handling in GraphCanvas
-  emit('node-click', event, props.nodeData)
+  lastY.value = event.clientY
+  lastX.value = event.clientX
 }
 
 const handlePointerMove = (event: PointerEvent) => {
@@ -292,6 +300,11 @@ const handlePointerUp = (event: PointerEvent) => {
     isDragging.value = false
     void endDrag(event)
   }
+  // Emit node-click for selection handling in GraphCanvas
+  const dx = event.clientX - lastX.value
+  const dy = event.clientY - lastY.value
+  const wasDragging = Math.hypot(dx, dy) > DRAG_THRESHOLD_PX
+  emit('node-click', event, props.nodeData, wasDragging)
 }
 
 const handleCollapse = () => {

src/renderer/extensions/vueNodes/composables/useNodeEventHandlers.ts

@@ -26,7 +26,11 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
    * Handle node selection events
    * Supports single selection and multi-select with Ctrl/Cmd
    */
-  const handleNodeSelect = (event: PointerEvent, nodeData: VueNodeData) => {
+  const handleNodeSelect = (
+    event: PointerEvent,
+    nodeData: VueNodeData,
+    wasDragging: boolean
+  ) => {
     if (!canvasStore.canvas || !nodeManager.value) return
 
     const node = nodeManager.value.getNode(nodeData.id)
@@ -42,9 +46,12 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
         canvasStore.canvas.select(node)
       }
     } else {
+      // If it wasn't a drag: single-select the node
+      if (!wasDragging) {
+        canvasStore.canvas.deselectAll()
+        canvasStore.canvas.select(node)
+      }
       // Regular click -> single select
-      canvasStore.canvas.deselectAll()
-      canvasStore.canvas.select(node)
     }
 
     // Bring node to front when clicked (similar to LiteGraph behavior)
@@ -107,7 +114,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
     // TODO: add custom double-click behavior here
     // For now, ensure node is selected
     if (!node.selected) {
-      handleNodeSelect(event, nodeData)
+      handleNodeSelect(event, nodeData, false)
     }
   }
 
@@ -126,7 +133,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
 
     // Select the node if not already selected
     if (!node.selected) {
-      handleNodeSelect(event, nodeData)
+      handleNodeSelect(event, nodeData, false)
     }
 
     // Let LiteGraph handle the context menu
@@ -151,7 +158,7 @@ export function useNodeEventHandlers(nodeManager: Ref<NodeManager | null>) {
         metaKey: event.metaKey,
         bubbles: true
       })
-      handleNodeSelect(syntheticEvent, nodeData)
+      handleNodeSelect(syntheticEvent, nodeData, false)
     }
 
     // Set drag data for potential drop operations

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

@@ -6,6 +6,7 @@
  */
 import { computed, inject } from 'vue'
 
+import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
 import { TransformStateKey } from '@/renderer/core/layout/injectionKeys'
 import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations'
 import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
@@ -50,6 +51,9 @@ export function useNodeLayout(nodeId: string) {
   let isDragging = false
   let dragStartPos: Point | null = null
   let dragStartMouse: Point | null = null
+  let otherSelectedNodesStartPositions: Map<string, Point> | null = null
+
+  const selectedNodeIds = inject(SelectedNodeIdsKey, null)
 
   /**
    * Start dragging the node
@@ -61,6 +65,24 @@ export function useNodeLayout(nodeId: string) {
     dragStartPos = { ...position.value }
     dragStartMouse = { x: event.clientX, y: event.clientY }
 
+    // capture the starting positions of all other selected nodes
+    if (selectedNodeIds?.value?.has(nodeId) && selectedNodeIds.value.size > 1) {
+      otherSelectedNodesStartPositions = new Map()
+
+      // Iterate through all selected node IDs
+      for (const id of selectedNodeIds.value) {
+        // Skip the current node being dragged
+        if (id === nodeId) continue
+
+        const nodeLayout = layoutStore.getNodeLayoutRef(id).value
+        if (nodeLayout) {
+          otherSelectedNodesStartPositions.set(id, { ...nodeLayout.position })
+        }
+      }
+    } else {
+      otherSelectedNodesStartPositions = null
+    }
+
     // Set mutation source
     mutations.setSource(LayoutSource.Vue)
 
@@ -91,7 +113,7 @@ export function useNodeLayout(nodeId: string) {
       y: canvasWithDelta.y - canvasOrigin.y
     }
 
-    // Calculate new position
+    // Calculate new position for the current node
     const newPosition = {
       x: dragStartPos.x + canvasDelta.x,
       y: dragStartPos.y + canvasDelta.y
@@ -99,6 +121,20 @@ export function useNodeLayout(nodeId: string) {
 
     // 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)
+      }
+    }
   }
 
   /**
@@ -110,6 +146,7 @@ export function useNodeLayout(nodeId: string) {
     isDragging = false
     dragStartPos = null
     dragStartMouse = null
+    otherSelectedNodesStartPositions = null
 
     // Release pointer
     const target = event.target as HTMLElement