diff --git a/browser_tests/assets/widgets/seed_widget.json b/browser_tests/assets/widgets/seed_widget.json new file mode 100644 index 000000000..a554b3eb9 --- /dev/null +++ b/browser_tests/assets/widgets/seed_widget.json @@ -0,0 +1,43 @@ +{ + "last_node_id": 10, + "last_link_id": 9, + "nodes": [ + { + "id": 10, + "type": "DevToolsNodeWithSeedInput", + "pos": [ + 20, + 50 + ], + "size": [ + 315, + 82 + ], + "flags": {}, + "order": 1, + "mode": 0, + "inputs": [], + "outputs": [], + "properties": { + "Node name for S&R": "DevToolsNodeWithSeedInput" + }, + "widgets_values": [ + 0, + "randomize" + ] + } + ], + "links": [], + "groups": [], + "config": {}, + "extra": { + "ds": { + "scale": 1, + "offset": [ + 0, + 0 + ] + } + }, + "version": 0.4 +} \ No newline at end of file diff --git a/browser_tests/fixtures/utils/litegraphUtils.ts b/browser_tests/fixtures/utils/litegraphUtils.ts index 2906a27d1..da47b4fe9 100644 --- a/browser_tests/fixtures/utils/litegraphUtils.ts +++ b/browser_tests/fixtures/utils/litegraphUtils.ts @@ -62,6 +62,9 @@ export class NodeWidgetReference { readonly node: NodeReference ) {} + /** + * @returns The position of the widget's center + */ async getPosition(): Promise { const pos: [number, number] = await this.node.comfyPage.page.evaluate( ([id, index]) => { @@ -89,6 +92,22 @@ export class NodeWidgetReference { position: await this.getPosition() }) } + + async dragHorizontal(delta: number) { + const pos = await this.getPosition() + const canvas = this.node.comfyPage.canvas + const canvasPos = (await canvas.boundingBox())! + this.node.comfyPage.dragAndDrop( + { + x: canvasPos.x + pos.x, + y: canvasPos.y + pos.y + }, + { + x: canvasPos.x + pos.x + delta, + y: canvasPos.y + pos.y + } + ) + } } export class NodeReference { diff --git a/browser_tests/widget.spec.ts b/browser_tests/widget.spec.ts index 3c17ea1e0..7f6d6c9bb 100644 --- a/browser_tests/widget.spec.ts +++ b/browser_tests/widget.spec.ts @@ -40,3 +40,47 @@ test.describe('Boolean widget', () => { ) }) }) + +test.describe('Slider widget', () => { + test('Can drag adjust value', async ({ comfyPage }) => { + await comfyPage.loadWorkflow('simple_slider') + await comfyPage.page.waitForTimeout(300) + const node = (await comfyPage.getFirstNodeRef())! + const widget = await node.getWidget(0) + + await comfyPage.page.evaluate(() => { + const widget = window['app'].graph.nodes[0].widgets[0] + widget.callback = (value: number) => { + window['widgetValue'] = value + } + }) + await widget.dragHorizontal(50) + await expect(comfyPage.canvas).toHaveScreenshot('slider_widget_dragged.png') + + expect( + await comfyPage.page.evaluate(() => window['widgetValue']) + ).toBeDefined() + }) +}) + +test.describe('Number widget', () => { + test('Can drag adjust value', async ({ comfyPage }) => { + await comfyPage.loadWorkflow('widgets/seed_widget') + await comfyPage.page.waitForTimeout(300) + + const node = (await comfyPage.getFirstNodeRef())! + const widget = await node.getWidget(0) + await comfyPage.page.evaluate(() => { + const widget = window['app'].graph.nodes[0].widgets[0] + widget.callback = (value: number) => { + window['widgetValue'] = value + } + }) + await widget.dragHorizontal(50) + await expect(comfyPage.canvas).toHaveScreenshot('seed_widget_dragged.png') + + expect( + await comfyPage.page.evaluate(() => window['widgetValue']) + ).toBeDefined() + }) +}) diff --git a/browser_tests/widget.spec.ts-snapshots/seed-widget-dragged-chromium-2x-linux.png b/browser_tests/widget.spec.ts-snapshots/seed-widget-dragged-chromium-2x-linux.png new file mode 100644 index 000000000..5c47ccc03 Binary files /dev/null and b/browser_tests/widget.spec.ts-snapshots/seed-widget-dragged-chromium-2x-linux.png differ diff --git a/browser_tests/widget.spec.ts-snapshots/seed-widget-dragged-chromium-linux.png b/browser_tests/widget.spec.ts-snapshots/seed-widget-dragged-chromium-linux.png new file mode 100644 index 000000000..dc3f9da8c Binary files /dev/null and b/browser_tests/widget.spec.ts-snapshots/seed-widget-dragged-chromium-linux.png differ diff --git a/browser_tests/widget.spec.ts-snapshots/slider-widget-dragged-chromium-2x-linux.png b/browser_tests/widget.spec.ts-snapshots/slider-widget-dragged-chromium-2x-linux.png new file mode 100644 index 000000000..73766cd05 Binary files /dev/null and b/browser_tests/widget.spec.ts-snapshots/slider-widget-dragged-chromium-2x-linux.png differ diff --git a/browser_tests/widget.spec.ts-snapshots/slider-widget-dragged-chromium-linux.png b/browser_tests/widget.spec.ts-snapshots/slider-widget-dragged-chromium-linux.png new file mode 100644 index 000000000..ea1c55ed3 Binary files /dev/null and b/browser_tests/widget.spec.ts-snapshots/slider-widget-dragged-chromium-linux.png differ diff --git a/package-lock.json b/package-lock.json index 32e00bf33..80d941c6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@atlaskit/pragmatic-drag-and-drop": "^1.3.1", "@comfyorg/comfyui-electron-types": "^0.4.16", - "@comfyorg/litegraph": "^0.8.75", + "@comfyorg/litegraph": "^0.8.76", "@primevue/forms": "^4.2.5", "@primevue/themes": "^4.2.5", "@sentry/vue": "^8.48.0", @@ -1944,9 +1944,9 @@ "license": "GPL-3.0-only" }, "node_modules/@comfyorg/litegraph": { - "version": "0.8.75", - "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.75.tgz", - "integrity": "sha512-qHb8koYnsOWJ5659v6ydL7D/q69gmqnpj6W2yvSXxplsuqsNUeCskxfyazNeIApE5GvVQz+2VB8+RXb0XFfZcA==", + "version": "0.8.76", + "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.76.tgz", + "integrity": "sha512-trYJ9mw7rTjS2Aq/cqUgbIiNC3urx4aELpfFTbuS/NuTKP4SMeReGabSTTyTUOctwdz7uEPuFmkTTBqf5pBT3g==", "license": "MIT" }, "node_modules/@cspotcode/source-map-support": { diff --git a/package.json b/package.json index 71192a04c..850b179ab 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,7 @@ "dependencies": { "@atlaskit/pragmatic-drag-and-drop": "^1.3.1", "@comfyorg/comfyui-electron-types": "^0.4.16", - "@comfyorg/litegraph": "^0.8.75", + "@comfyorg/litegraph": "^0.8.76", "@primevue/forms": "^4.2.5", "@primevue/themes": "^4.2.5", "@sentry/vue": "^8.48.0", diff --git a/scripts/update-litegraph.js b/scripts/update-litegraph.js index 4e2612435..88f6a0c3e 100644 --- a/scripts/update-litegraph.js +++ b/scripts/update-litegraph.js @@ -26,8 +26,10 @@ try { // Create the PR console.log('Creating PR...') + const prBody = `Automated update of litegraph to version ${newVersion}. +Ref: https://github.com/Comfy-Org/litegraph.js/releases/tag/v${newVersion}` execSync( - `gh pr create --title "Update litegraph ${newVersion}" --label "dependencies" --body "Automated update of litegraph to version ${newVersion}"`, + `gh pr create --title "Update litegraph ${newVersion}" --label "dependencies" --body "${prBody}"`, { stdio: 'inherit' } )