Skip to content

Copy and paste node isn't working. #5683

@comfyui-wiki

Description

@comfyui-wiki

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:

  1. Legacy mode: Copy/paste works normally
  2. Switch to Vue nodes via Experimental.ToggleVueNodes keybinding
  3. 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 update canvas.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 useNodeEventHandlers composable
  • Copy/paste handled by separate Vue composables
  • Target becomes Vue component elements (no required classes)

Reproduction

  1. Load any workflow in legacy mode
  2. Select and copy a node (Ctrl+C) - works
  3. Press keybinding for Experimental.ToggleVueNodes command
  4. Try to select and copy nodes - fails silently
  5. 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 container

Option 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

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

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions