diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts index f2315a328..bcc22025a 100644 --- a/browser_tests/ComfyPage.ts +++ b/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 }>({ diff --git a/browser_tests/copyPaste.spec.ts b/browser_tests/copyPaste.spec.ts new file mode 100644 index 000000000..f475b0e4c --- /dev/null +++ b/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"); + }); +}); diff --git a/browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png b/browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png new file mode 100644 index 000000000..7a4472d97 Binary files /dev/null and b/browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-linux.png differ diff --git a/browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-win32.png b/browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-win32.png new file mode 100644 index 000000000..fdf3ae2e7 Binary files /dev/null and b/browser_tests/copyPaste.spec.ts-snapshots/copied-node-chromium-win32.png differ diff --git a/browser_tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png b/browser_tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png new file mode 100644 index 000000000..29a74441b Binary files /dev/null and b/browser_tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-linux.png differ diff --git a/browser_tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-win32.png b/browser_tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-win32.png new file mode 100644 index 000000000..7c8323b4c Binary files /dev/null and b/browser_tests/copyPaste.spec.ts-snapshots/no-node-copied-chromium-win32.png differ diff --git a/browser_tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png b/browser_tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png new file mode 100644 index 000000000..36b30a66e Binary files /dev/null and b/browser_tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-linux.png differ diff --git a/browser_tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-win32.png b/browser_tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-win32.png new file mode 100644 index 000000000..9ea44c555 Binary files /dev/null and b/browser_tests/copyPaste.spec.ts-snapshots/paste-in-text-area-with-node-previously-copied-chromium-win32.png differ diff --git a/src/scripts/app.ts b/src/scripts/app.ts index d1e0b9616..7dadf294d 100644 --- a/src/scripts/app.ts +++ b/src/scripts/app.ts @@ -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,8 +1134,9 @@ 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; @@ -1142,7 +1144,7 @@ export class ComfyApp { // 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; }