mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-29 18:52:19 +00:00
[refactor] extract clipboard target check to shared helper - addresses review feedback
Co-authored-by: Myestery <Myestery@users.noreply.github.com>
This commit is contained in:
@@ -1,6 +1,7 @@
|
|||||||
import { useEventListener } from '@vueuse/core'
|
import { useEventListener } from '@vueuse/core'
|
||||||
|
|
||||||
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
||||||
|
import { isEventTargetInGraph } from '@/workbench/eventHelpers'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Adds a handler on copy that serializes selected nodes to JSON
|
* Adds a handler on copy that serializes selected nodes to JSON
|
||||||
@@ -21,19 +22,13 @@ export const useCopy = () => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
// Check if target is graph canvas or within graph UI (minimap, controls, etc.)
|
// Check if target is graph canvas or within graph UI (minimap, controls, etc.)
|
||||||
const isTargetInGraph =
|
if (!isEventTargetInGraph(e.target)) {
|
||||||
e.target.id === 'graph-canvas' ||
|
return
|
||||||
e.target.id === 'comfy-minimap' ||
|
}
|
||||||
e.target.id === 'graph-canvas-controls' ||
|
|
||||||
e.target.classList.contains('graph-canvas-container') ||
|
|
||||||
e.target.classList.contains('litegraph') ||
|
|
||||||
e.target.closest('#comfy-minimap') !== null ||
|
|
||||||
e.target.closest('#graph-canvas-controls') !== null ||
|
|
||||||
e.target.closest('#graph-canvas-container') !== null
|
|
||||||
|
|
||||||
// copy nodes and clear clipboard
|
// copy nodes and clear clipboard
|
||||||
const canvas = canvasStore.canvas
|
const canvas = canvasStore.canvas
|
||||||
if (isTargetInGraph && canvas?.selectedItems) {
|
if (canvas?.selectedItems) {
|
||||||
canvas.copyToClipboard()
|
canvas.copyToClipboard()
|
||||||
// clearData doesn't remove images from clipboard
|
// clearData doesn't remove images from clipboard
|
||||||
e.clipboardData?.setData('text', ' ')
|
e.clipboardData?.setData('text', ' ')
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
|||||||
import { app } from '@/scripts/app'
|
import { app } from '@/scripts/app'
|
||||||
import { useWorkspaceStore } from '@/stores/workspaceStore'
|
import { useWorkspaceStore } from '@/stores/workspaceStore'
|
||||||
import { isAudioNode, isImageNode, isVideoNode } from '@/utils/litegraphUtil'
|
import { isAudioNode, isImageNode, isVideoNode } from '@/utils/litegraphUtil'
|
||||||
|
import { isEventTargetInGraph } from '@/workbench/eventHelpers'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Adds a handler on paste that extracts and loads images or workflows from pasted JSON data
|
* Adds a handler on paste that extracts and loads images or workflows from pasted JSON data
|
||||||
@@ -39,19 +40,9 @@ export const usePaste = () => {
|
|||||||
|
|
||||||
useEventListener(document, 'paste', async (e) => {
|
useEventListener(document, 'paste', async (e) => {
|
||||||
// Check if target is graph canvas or within graph UI (minimap, controls, etc.)
|
// Check if target is graph canvas or within graph UI (minimap, controls, etc.)
|
||||||
const isTargetInGraph =
|
if (!isEventTargetInGraph(e.target)) {
|
||||||
e.target instanceof Element &&
|
return
|
||||||
(e.target.id === 'graph-canvas' ||
|
}
|
||||||
e.target.id === 'comfy-minimap' ||
|
|
||||||
e.target.id === 'graph-canvas-controls' ||
|
|
||||||
e.target.classList.contains('graph-canvas-container') ||
|
|
||||||
e.target.classList.contains('litegraph') ||
|
|
||||||
e.target.closest('#comfy-minimap') !== null ||
|
|
||||||
e.target.closest('#graph-canvas-controls') !== null ||
|
|
||||||
e.target.closest('#graph-canvas-container') !== null)
|
|
||||||
|
|
||||||
// If the target is not in the graph, we don't want to handle the paste event
|
|
||||||
if (!isTargetInGraph) return
|
|
||||||
|
|
||||||
// ctrl+shift+v is used to paste nodes with connections
|
// ctrl+shift+v is used to paste nodes with connections
|
||||||
// this is handled by litegraph
|
// this is handled by litegraph
|
||||||
|
|||||||
31
src/workbench/eventHelpers.ts
Normal file
31
src/workbench/eventHelpers.ts
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
/**
|
||||||
|
* Utility functions for handling workbench events
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checks if an event target is within the graph canvas or related UI elements
|
||||||
|
* (minimap, canvas controls, etc.)
|
||||||
|
*
|
||||||
|
* Used by clipboard handlers to determine if copy/paste events should be
|
||||||
|
* intercepted for graph operations vs. allowing default browser behavior
|
||||||
|
* for text inputs and other UI elements.
|
||||||
|
*
|
||||||
|
* @param target - The event target to check
|
||||||
|
* @returns true if the target is within graph-related UI elements
|
||||||
|
*/
|
||||||
|
export function isEventTargetInGraph(target: EventTarget | null): boolean {
|
||||||
|
if (!(target instanceof Element)) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
target.id === 'graph-canvas' ||
|
||||||
|
target.id === 'comfy-minimap' ||
|
||||||
|
target.id === 'graph-canvas-controls' ||
|
||||||
|
target.classList.contains('graph-canvas-container') ||
|
||||||
|
target.classList.contains('litegraph') ||
|
||||||
|
target.closest('#comfy-minimap') !== null ||
|
||||||
|
target.closest('#graph-canvas-controls') !== null ||
|
||||||
|
target.closest('#graph-canvas-container') !== null
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user