Fix clipboard (#100)

* Fix clipboard

* Add clipboard tests

* Update test expectations [skip ci]

---------

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

Author: huchenlei

browser_tests/ComfyPage.ts

@@ -149,6 +149,17 @@ export class ComfyPage {
     await this.nextFrame();
   }
 
+  async clickEmptyLatentNode() {
+    await this.canvas.click({
+      position: {
+        x: 724,
+        y: 625
+      },
+    });
+    this.page.mouse.move(10, 10);
+    await this.nextFrame();
+  }
+
   async rightClickEmptyLatentNode() {
     await this.canvas.click({
       position: {
@@ -169,6 +180,20 @@ export class ComfyPage {
     await this.page.keyboard.up('Control');
     await this.nextFrame();
   }
+
+  async ctrlC() {
+    await this.page.keyboard.down('Control');
+    await this.page.keyboard.press('KeyC');
+    await this.page.keyboard.up('Control');
+    await this.nextFrame();
+  }
+
+  async ctrlV() {
+    await this.page.keyboard.down('Control');
+    await this.page.keyboard.press('KeyV');
+    await this.page.keyboard.up('Control');
+    await this.nextFrame();
+  }
 }
 
 export const comfyPageFixture = base.extend<{ comfyPage: ComfyPage }>({

browser_tests/copyPaste.spec.ts

@@ -0,0 +1,56 @@
+import { expect } from "@playwright/test";
+import { comfyPageFixture as test } from "./ComfyPage";
+
+test.describe("Copy Paste", () => {
+  test("Can copy and paste node", async ({ comfyPage }) => {
+    await comfyPage.clickEmptyLatentNode();
+    await comfyPage.page.mouse.move(10, 10);
+    await comfyPage.ctrlC();
+    await comfyPage.ctrlV();
+    await expect(comfyPage.canvas).toHaveScreenshot("copied-node.png");
+  });
+
+  test("Can copy and paste text", async ({ comfyPage }) => {
+    const textBox = comfyPage.widgetTextBox;
+    await textBox.click();
+    const originalString = await textBox.inputValue();
+    await textBox.selectText();
+    await comfyPage.ctrlC();
+    await comfyPage.ctrlV();
+    await comfyPage.ctrlV();
+    const resultString = await textBox.inputValue();
+    expect(resultString).toBe(originalString + originalString);
+  });
+
+  /**
+   * https://github.com/Comfy-Org/ComfyUI_frontend/issues/98
+   */
+  test("Paste in text area with node previously copied", async ({
+    comfyPage,
+  }) => {
+    await comfyPage.clickEmptyLatentNode();
+    await comfyPage.ctrlC();
+    const textBox = comfyPage.widgetTextBox;
+    await textBox.click();
+    await textBox.inputValue();
+    await textBox.selectText();
+    await comfyPage.ctrlC();
+    await comfyPage.ctrlV();
+    await comfyPage.ctrlV();
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      "paste-in-text-area-with-node-previously-copied.png"
+    );
+  });
+
+  test("Copy text area does not copy node", async ({ comfyPage }) => {
+    const textBox = comfyPage.widgetTextBox;
+    await textBox.click();
+    await textBox.inputValue();
+    await textBox.selectText();
+    await comfyPage.ctrlC();
+    // Unfocus textbox.
+    await comfyPage.page.mouse.click(10, 10);
+    await comfyPage.ctrlV();
+    await expect(comfyPage.canvas).toHaveScreenshot("no-node-copied.png");
+  });
+});

browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png

@@ -1115,8 +1115,9 @@ export class ComfyApp {
         await this.loadGraphData(workflow);
       } else {
         if (
-          e.target instanceof HTMLInputElement &&
-          (e.target.type === "text" || e.target.type === "textarea")
+          (e.target instanceof HTMLTextAreaElement &&
+            e.target.type === "textarea") ||
+          (e.target instanceof HTMLInputElement && e.target.type === "text")
         ) {
           return;
         }
@@ -1133,16 +1134,17 @@ export class ComfyApp {
   #addCopyHandler() {
     document.addEventListener("copy", (e) => {
       if (
-        e.target instanceof HTMLInputElement &&
-        (e.target.type === "text" || e.target.type === "textarea")
+        (e.target instanceof HTMLTextAreaElement &&
+          e.target.type === "textarea") ||
+        (e.target instanceof HTMLInputElement && e.target.type === "text")
       ) {
         // Default system copy
         return;
       }
 
       // copy nodes and clear clipboard
       if (
-        e.target instanceof HTMLElement &&
+        e.target instanceof Element &&
         e.target.className === "litegraph" &&
         this.canvas.selected_nodes
       ) {
@@ -1269,7 +1271,7 @@ export class ComfyApp {
 
       var block_default = false;
 
-      if (e.target instanceof HTMLElement && e.target.localName == "input") {
+      if (e.target instanceof Element && e.target.localName == "input") {
         return;
       }