Select Vue Nodes After Drag (#5863)

This pull request refactors the node selection logic in the Vue nodes
event handler composable to simplify the function signature and improve
single vs. multi-selection behavior. The main change is the removal of
the `wasDragging` parameter from the `handleNodeSelect` function, with
selection logic now determined by the current selection state. Related
test code is updated to match the new function signature.

**Node selection logic improvements:**

* Refactored the `handleNodeSelect` function in
`useNodeEventHandlersIndividual` to remove the `wasDragging` parameter,
making the function signature simpler and relying on selection state to
handle single vs. multi-selection.
* Updated the selection logic to check if multiple nodes are already
selected using `isLGraphNode`, and only perform single selection if not.

**Code and test updates:**

* Updated all calls to `handleNodeSelect` in the composable to remove
the `wasDragging` argument, ensuring consistent usage throughout the
codebase.
[[1]](diffhunk://#diff-8d3820a1ca9c569bce00671fdd6290af81315ae11b8f3d6f29a5a9d30379d084L125-R123)
[[2]](diffhunk://#diff-8d3820a1ca9c569bce00671fdd6290af81315ae11b8f3d6f29a5a9d30379d084L146-R144)
[[3]](diffhunk://#diff-8d3820a1ca9c569bce00671fdd6290af81315ae11b8f3d6f29a5a9d30379d084L173-R171)
* Updated all related test cases to use the new `handleNodeSelect`
signature without the third parameter.
[[1]](diffhunk://#diff-89bfc2a05201c6ff7116578efa45f96097594eb346f18446c70aa7125ab1811aL105-R105)
[[2]](diffhunk://#diff-89bfc2a05201c6ff7116578efa45f96097594eb346f18446c70aa7125ab1811aL125-R125)
[[3]](diffhunk://#diff-89bfc2a05201c6ff7116578efa45f96097594eb346f18446c70aa7125ab1811aL144-R144)
[[4]](diffhunk://#diff-89bfc2a05201c6ff7116578efa45f96097594eb346f18446c70aa7125ab1811aL162-R162)
[[5]](diffhunk://#diff-89bfc2a05201c6ff7116578efa45f96097594eb346f18446c70aa7125ab1811aL174-R174)
[[6]](diffhunk://#diff-89bfc2a05201c6ff7116578efa45f96097594eb346f18446c70aa7125ab1811aL187-R187)

**Utility import:**

* Added an import for `isLGraphNode` from `@/utils/litegraphUtil` to
support the updated selection logic.## Summary

<!-- One sentence describing what changed and why. -->


## Screenshots (if applicable)



https://github.com/user-attachments/assets/71e856d3-afc2-497d-826e-5b485066e7fe

---------

Co-authored-by: github-actions <[email protected]>

Author: 2 people

browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png

@@ -49,4 +49,36 @@ test.describe('Vue Node Selection', () => {
       expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(0)
     })
   }
+
+  test('should select pinned node without dragging', async ({ comfyPage }) => {
+    const PIN_HOTKEY = 'p'
+    const PIN_INDICATOR = '[data-testid="node-pin-indicator"]'
+
+    // Select a node by clicking its title
+    const checkpointNodeHeader = comfyPage.page.getByText('Load Checkpoint')
+    await checkpointNodeHeader.click()
+
+    // Pin it using the hotkey (as a user would)
+    await comfyPage.page.keyboard.press(PIN_HOTKEY)
+
+    const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint')
+    const pinIndicator = checkpointNode.locator(PIN_INDICATOR)
+    await expect(pinIndicator).toBeVisible()
+
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+
+    const initialPos = await checkpointNodeHeader.boundingBox()
+    if (!initialPos) throw new Error('Failed to get header position')
+
+    await comfyPage.dragAndDrop(
+      { x: initialPos.x + 10, y: initialPos.y + 10 },
+      { x: initialPos.x + 100, y: initialPos.y + 100 }
+    )
+
+    const finalPos = await checkpointNodeHeader.boundingBox()
+    if (!finalPos) throw new Error('Failed to get header position after drag')
+    expect(finalPos).toEqual(initialPos)
+
+    expect(await comfyPage.vueNodes.getSelectedNodeCount()).toBe(1)
+  })
 })

browser_tests/tests/vueNodes/interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png

@@ -15,6 +15,24 @@ import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCanvasInteractions } from '@/renderer/core/canvas/useCanvasInteractions'
 import { useNodeZIndex } from '@/renderer/extensions/vueNodes/composables/useNodeZIndex'
+import { isLGraphNode } from '@/utils/litegraphUtil'
+
+/**
+ * Check if multiple nodes are selected
+ * Optimized to return early when 2+ nodes found
+ */
+function hasMultipleNodesSelected(selectedItems: unknown[]): boolean {
+  let count = 0
+  for (let i = 0; i < selectedItems.length; i++) {
+    if (isLGraphNode(selectedItems[i])) {
+      count++
+      if (count >= 2) {
+        return true
+      }
+    }
+  }
+  return false
+}
 
 function useNodeEventHandlersIndividual() {
   const canvasStore = useCanvasStore()
@@ -26,11 +44,7 @@ function useNodeEventHandlersIndividual() {
    * Handle node selection events
    * Supports single selection and multi-select with Ctrl/Cmd
    */
-  const handleNodeSelect = (
-    event: PointerEvent,
-    nodeData: VueNodeData,
-    wasDragging: boolean
-  ) => {
+  const handleNodeSelect = (event: PointerEvent, nodeData: VueNodeData) => {
     if (!shouldHandleNodePointerEvents.value) return
 
     if (!canvasStore.canvas || !nodeManager.value) return
@@ -48,12 +62,14 @@ function useNodeEventHandlersIndividual() {
         canvasStore.canvas.select(node)
       }
     } else {
-      // If it wasn't a drag: single-select the node
-      if (!wasDragging) {
+      const selectedMultipleNodes = hasMultipleNodesSelected(
+        canvasStore.selectedItems
+      )
+      if (!selectedMultipleNodes) {
+        // Single-select the node
         canvasStore.canvas.deselectAll()
         canvasStore.canvas.select(node)
       }
-      // Regular click -> single select
     }
 
     // Bring node to front when clicked (similar to LiteGraph behavior)
@@ -122,7 +138,7 @@ function useNodeEventHandlersIndividual() {
     // TODO: add custom double-click behavior here
     // For now, ensure node is selected
     if (!node.selected) {
-      handleNodeSelect(event, nodeData, false)
+      handleNodeSelect(event, nodeData)
     }
   }
 
@@ -143,7 +159,7 @@ function useNodeEventHandlersIndividual() {
 
     // Select the node if not already selected
     if (!node.selected) {
-      handleNodeSelect(event, nodeData, false)
+      handleNodeSelect(event, nodeData)
     }
 
     // Let LiteGraph handle the context menu
@@ -170,7 +186,7 @@ function useNodeEventHandlersIndividual() {
         metaKey: event.metaKey,
         bubbles: true
       })
-      handleNodeSelect(syntheticEvent, nodeData, false)
+      handleNodeSelect(syntheticEvent, nodeData)
     }
 
     // Set drag data for potential drop operations