-
Notifications
You must be signed in to change notification settings - Fork 393
Description
Problem
Copy and paste functionality stops working after switching from legacy LiteGraph nodes to Vue nodes via keybinding. The issue demonstrates a broader interaction state management problem during mode transitions.
Screen.Recording.2025-09-20.at.13.25.16.mov
Sequence:
- Legacy mode: Copy/paste works normally
- Switch to Vue nodes via
Experimental.ToggleVueNodeskeybinding - Vue mode: Copy/paste completely broken
Root Cause
DOM Event Target Mismatch: The useCopy and usePaste composables fail to detect valid targets when Vue nodes are active.
Copy Detection Logic (useCopy.ts:23-30):
const isTargetInGraph =
e.target.classList.contains('litegraph') ||
e.target.classList.contains('graph-canvas-container') ||
e.target.id === 'graph-canvas'
if (isTargetInGraph && canvas?.selectedItems) {
canvas.copyToClipboard() // Never executes in Vue mode
}Problem: When Vue nodes are active, DOM focus shifts to Vue component elements that don't have the required classes/IDs, so isTargetInGraph returns false.
Technical Analysis
Mode Switching Works Correctly
- Vue node toggle: useCoreCommands.ts:299-309
- Selection sync: Vue nodes properly call
canvas.select()and updatecanvas.selectedItems - State management: Mode transitions preserve graph state correctly
Event Handling Breaks
- Legacy mode: LiteGraph canvas handles copy/paste directly
- Vue mode: Relies on Vue composables with DOM target detection
- Failure point: Target detection logic doesn't account for Vue component DOM structure
Selection System Comparison
Legacy Mode:
- Selection handled by
LGraphCanvas.select()/deselect() - Copy/paste handled by canvas event listeners
- Target always matches
#graph-canvas
Vue Mode:
- Selection handled by
useNodeEventHandlerscomposable - Copy/paste handled by separate Vue composables
- Target becomes Vue component elements (no required classes)
Reproduction
- Load any workflow in legacy mode
- Select and copy a node (Ctrl+C) - works
- Press keybinding for
Experimental.ToggleVueNodescommand - Try to select and copy nodes - fails silently
- Same issue affects paste (Ctrl+V)
Solution
Fix DOM target detection to work with Vue node elements:
Option 1: Expand Target Detection
const isTargetInGraph =
e.target.closest('.litegraph') ||
e.target.closest('.graph-canvas-container') ||
e.target.closest('#graph-canvas') ||
e.target.closest('[data-vue-node]') // Vue node containerOption 2: Use Canvas Focus State
const canvas = canvasStore.canvas
const isCanvasFocused = document.activeElement?.closest('.graph-canvas-container')
if (isCanvasFocused && canvas?.selectedItems) {
canvas.copyToClipboard()
}Option 3: Unified Event Handling
Move copy/paste handling to a layer that works consistently across both modes.
Files Affected
- useCopy.ts:23-30 - Broken target detection
- usePaste.ts:41-44 - Same issue
- Vue node components - Need consistent DOM structure/classes
Impact
This affects all keyboard shortcuts that use similar DOM target detection, not just copy/paste. Users lose core functionality when switching to Vue nodes.
Related
- v1.27.2 / 1.28.0 / v1.26.13 Copy+paste nodes broken #5449 - General copy/paste issues in recent versions
- Lots of widget translations are missing in the Vue nodes. #5697 - Vue node widget translation issues
- Other Vue migration interaction problems