From af7a6601e07a25a6f6ec2304c14caaf815c4055f Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Thu, 6 Feb 2025 13:22:48 -0500
Subject: [PATCH] [Refactor] Move copy handling to useCopy composable (#2451)

---
 src/components/graph/GraphCanvas.vue |  2 ++
 src/composables/useCopy.ts           | 39 ++++++++++++++++++++++++++++
 src/scripts/app.ts                   | 33 -----------------------
 3 files changed, 41 insertions(+), 33 deletions(-)
 create mode 100644 src/composables/useCopy.ts

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 4d62b785f..c6ce24919 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -43,6 +43,7 @@ import SideToolbar from '@/components/sidebar/SideToolbar.vue'
 import SecondRowWorkflowTabs from '@/components/topbar/SecondRowWorkflowTabs.vue'
 import { useCanvasDrop } from '@/composables/useCanvasDrop'
 import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
+import { useCopy } from '@/composables/useCopy'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
@@ -263,6 +264,7 @@ useCanvasDrop(canvasRef)
 onMounted(async () => {
   useGlobalLitegraph()
   useContextMenuTranslation()
+  useCopy()
 
   comfyApp.vueAppReady = true
 
diff --git a/src/composables/useCopy.ts b/src/composables/useCopy.ts
new file mode 100644
index 000000000..15f6183de
--- /dev/null
+++ b/src/composables/useCopy.ts
@@ -0,0 +1,39 @@
+import { useEventListener } from '@vueuse/core'
+
+import { useCanvasStore } from '@/stores/graphStore'
+
+/**
+ * Adds a handler on copy that serializes selected nodes to JSON
+ */
+export const useCopy = () => {
+  const canvasStore = useCanvasStore()
+
+  useEventListener(document, 'copy', (e) => {
+    if (!(e.target instanceof Element)) {
+      return
+    }
+    if (
+      (e.target instanceof HTMLTextAreaElement &&
+        e.target.type === 'textarea') ||
+      (e.target instanceof HTMLInputElement && e.target.type === 'text')
+    ) {
+      // Default system copy
+      return
+    }
+    const isTargetInGraph =
+      e.target.classList.contains('litegraph') ||
+      e.target.classList.contains('graph-canvas-container') ||
+      e.target.id === 'graph-canvas'
+
+    // copy nodes and clear clipboard
+    const canvas = canvasStore.canvas
+    if (isTargetInGraph && canvas?.selectedItems) {
+      canvas.copyToClipboard()
+      // clearData doesn't remove images from clipboard
+      e.clipboardData?.setData('text', ' ')
+      e.preventDefault()
+      e.stopImmediatePropagation()
+      return false
+    }
+  })
+}
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index c2d1d3b7a..15e02919a 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -553,38 +553,6 @@ export class ComfyApp {
     })
   }
 
-  /**
-   * Adds a handler on copy that serializes selected nodes to JSON
-   */
-  #addCopyHandler() {
-    document.addEventListener('copy', (e) => {
-      if (!(e.target instanceof Element)) {
-        return
-      }
-      if (
-        (e.target instanceof HTMLTextAreaElement &&
-          e.target.type === 'textarea') ||
-        (e.target instanceof HTMLInputElement && e.target.type === 'text')
-      ) {
-        // Default system copy
-        return
-      }
-      const isTargetInGraph =
-        e.target.classList.contains('litegraph') ||
-        e.target.classList.contains('graph-canvas-container') ||
-        e.target.id === 'graph-canvas'
-
-      // copy nodes and clear clipboard
-      if (isTargetInGraph && this.canvas.selected_nodes) {
-        this.canvas.copyToClipboard()
-        e.clipboardData.setData('text', ' ') //clearData doesn't remove images from clipboard
-        e.preventDefault()
-        e.stopImmediatePropagation()
-        return false
-      }
-    })
-  }
-
   /**
    * Handle mouse
    *
@@ -1009,7 +977,6 @@ export class ComfyApp {
     this.#addDrawNodeHandler()
     this.#addDrawGroupsHandler()
     this.#addDropHandler()
-    this.#addCopyHandler()
     this.#addPasteHandler()
 
     await useExtensionService().invokeExtensionsAsync('setup')