diff --git a/browser_tests/assets/widgets/all_load_widgets.json b/browser_tests/assets/widgets/all_load_widgets.json new file mode 100644 index 000000000..55c60c73c --- /dev/null +++ b/browser_tests/assets/widgets/all_load_widgets.json @@ -0,0 +1,221 @@ +{ + "id": "e74f5af9-b886-4a21-abbf-ed535d12e2fb", + "revision": 0, + "last_node_id": 8, + "last_link_id": 0, + "nodes": [ + { + "id": 1, + "type": "LoadAudio", + "pos": [ + 41.52964782714844, + 16.930862426757812 + ], + "size": [ + 444, + 125 + ], + "flags": {}, + "order": 0, + "mode": 0, + "inputs": [], + "outputs": [ + { + "name": "AUDIO", + "type": "AUDIO", + "links": null + } + ], + "properties": { + "Node name for S&R": "LoadAudio" + }, + "widgets_values": [ + null, + null, + "" + ] + }, + { + "id": 2, + "type": "LoadVideo", + "pos": [ + 502.28570556640625, + 16.857147216796875 + ], + "size": [ + 444, + 525 + ], + "flags": {}, + "order": 1, + "mode": 0, + "inputs": [], + "outputs": [ + { + "name": "VIDEO", + "type": "VIDEO", + "links": null + } + ], + "properties": { + "Node name for S&R": "LoadVideo" + }, + "widgets_values": [ + "Dying for the right cause, is the most human thing we can do [sOBtQofXPDA].mp4", + "image" + ] + }, + { + "id": 3, + "type": "DevToolsLoadAnimatedImageTest", + "pos": [ + 41.71427917480469, + 188.0000457763672 + ], + "size": [ + 444, + 553 + ], + "flags": {}, + "order": 2, + "mode": 0, + "inputs": [], + "outputs": [ + { + "name": "IMAGE", + "type": "IMAGE", + "links": null + }, + { + "name": "MASK", + "type": "MASK", + "links": null + } + ], + "properties": { + "Node name for S&R": "DevToolsLoadAnimatedImageTest" + }, + "widgets_values": [ + "l0isitzgugt41.webp", + "image" + ] + }, + { + "id": 5, + "type": "LoadImage", + "pos": [ + 958.285888671875, + 16.57145118713379 + ], + "size": [ + 444, + 553 + ], + "flags": {}, + "order": 3, + "mode": 0, + "inputs": [], + "outputs": [ + { + "name": "IMAGE", + "type": "IMAGE", + "links": null + }, + { + "name": "MASK", + "type": "MASK", + "links": null + } + ], + "properties": { + "Node name for S&R": "LoadImage" + }, + "widgets_values": [ + "ComfyUI_00084_.png", + "image" + ] + }, + { + "id": 6, + "type": "LoadImageMask", + "pos": [ + 503.4285888671875, + 588 + ], + "size": [ + 444, + 563 + ], + "flags": {}, + "order": 4, + "mode": 0, + "inputs": [], + "outputs": [ + { + "name": "MASK", + "type": "MASK", + "links": null + } + ], + "properties": { + "Node name for S&R": "LoadImageMask" + }, + "widgets_values": [ + "01. a lot.mp3", + "alpha", + "image" + ] + }, + { + "id": 7, + "type": "LoadImageOutput", + "pos": [ + 965.1429443359375, + 612 + ], + "size": [ + 444, + 553 + ], + "flags": {}, + "order": 5, + "mode": 0, + "inputs": [], + "outputs": [ + { + "name": "IMAGE", + "type": "IMAGE", + "links": null + }, + { + "name": "MASK", + "type": "MASK", + "links": null + } + ], + "properties": { + "Node name for S&R": "LoadImageOutput" + }, + "widgets_values": [ + "ComfyUI_00509_.png [output]", + false, + "refresh", + "image" + ] + } + ], + "links": [], + "groups": [], + "config": {}, + "extra": { + "ds": { + "scale": 1, + "offset": [ + 0, + 0 + ] + }, + "frontendVersion": "1.28.3" + }, + "version": 0.4 +} \ No newline at end of file diff --git a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png index 446a50c99..0a7817cd9 100644 Binary files a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png and b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png index 0302d8a8f..955397d55 100644 Binary files a/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png and b/browser_tests/tests/vueNodes/groups/groups.spec.ts-snapshots/vue-groups-fit-to-contents-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png index d0a0c000d..8fd456924 100644 Binary files a/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png and b/browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png differ diff --git a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png index 1f47aab5c..e23bdb168 100644 Binary files a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png index a30e4b2c0..c4db539bc 100644 Binary files a/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png and b/browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png index 64898a216..ceb84698c 100644 Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png index ac6a841ae..5997ea26e 100644 Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png index c89b8b240..0df00782f 100644 Binary files a/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/colors.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png index cf8384a03..c61bcbc46 100644 Binary files a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-default-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-active-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-active-chromium-linux.png index ee051f5df..2bbaeaa64 100644 Binary files a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-active-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-active-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png index cf8384a03..57bca67fa 100644 Binary files a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts-snapshots/vue-nodes-lod-inactive-chromium-linux.png differ diff --git a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts new file mode 100644 index 000000000..8fcc3360d --- /dev/null +++ b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts @@ -0,0 +1,21 @@ +import { + comfyExpect as expect, + comfyPageFixture as test +} from '../../../../fixtures/ComfyPage' + +test.describe('Vue Upload Widgets', () => { + test.beforeEach(async ({ comfyPage }) => { + await comfyPage.setSetting('Comfy.VueNodes.Enabled', true) + await comfyPage.vueNodes.waitForNodes() + }) + + test('should hide canvas-only upload buttons', async ({ comfyPage }) => { + await comfyPage.setup() + await comfyPage.loadWorkflow('widgets/all_load_widgets') + await comfyPage.vueNodes.waitForNodes() + + await expect(comfyPage.canvas).toHaveScreenshot( + 'vue-nodes-upload-widgets.png' + ) + }) +}) diff --git a/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png new file mode 100644 index 000000000..fc4c3f929 Binary files /dev/null and b/browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png differ diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts index 55b06cabd..7c19c53c4 100644 --- a/src/composables/graph/useGraphNodeManager.ts +++ b/src/composables/graph/useGraphNodeManager.ts @@ -241,7 +241,7 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager { } /** - * Sets up widget callbacks for a node - now with reduced nesting + * Sets up widget callbacks for a node */ const setupNodeWidgetCallbacks = (node: LGraphNode) => { if (!node.widgets) return diff --git a/src/extensions/core/uploadAudio.ts b/src/extensions/core/uploadAudio.ts index 4c0e25b2c..80e648d4a 100644 --- a/src/extensions/core/uploadAudio.ts +++ b/src/extensions/core/uploadAudio.ts @@ -241,7 +241,7 @@ app.registerExtension({ inputName, '', openFileSelection, - { serialize: false } + { serialize: false, canvasOnly: true } ) uploadWidget.label = t('g.choose_file_to_upload') @@ -398,7 +398,7 @@ app.registerExtension({ mediaRecorder.stop() } }, - { serialize: false } + { serialize: false, canvasOnly: true } ) recordWidget.label = t('g.startRecording') diff --git a/src/extensions/core/webcamCapture.ts b/src/extensions/core/webcamCapture.ts index 7e3a79e58..723b1098d 100644 --- a/src/extensions/core/webcamCapture.ts +++ b/src/extensions/core/webcamCapture.ts @@ -106,7 +106,8 @@ app.registerExtension({ 'button', 'waiting for camera...', 'capture', - capture + capture, + { canvasOnly: true } ) btn.disabled = true btn.serializeValue = () => undefined diff --git a/src/lib/litegraph/src/types/widgets.ts b/src/lib/litegraph/src/types/widgets.ts index 1b01b66b0..8027a1b61 100644 --- a/src/lib/litegraph/src/types/widgets.ts +++ b/src/lib/litegraph/src/types/widgets.ts @@ -25,6 +25,8 @@ export interface IWidgetOptions { property?: string /** If `true`, an input socket will not be created for this widget. */ socketless?: boolean + /** If `true`, the widget will not be rendered by the Vue renderer. */ + canvasOnly?: boolean values?: TValues callback?: IWidget['callback'] diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts index 28b1228cd..df461e0f4 100644 --- a/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts +++ b/src/renderer/extensions/vueNodes/widgets/composables/useImageUploadWidget.ts @@ -91,7 +91,8 @@ export const useImageUploadWidget = () => { 'image', () => openFileSelection(), { - serialize: false + serialize: false, + canvasOnly: true } ) uploadWidget.label = t('g.choose_file_to_upload') diff --git a/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts b/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts index 36134e928..41db11808 100644 --- a/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts +++ b/src/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.ts @@ -219,7 +219,9 @@ export function useRemoteWidget< * Add a refresh button to the node that, when clicked, will force the widget to refresh */ function addRefreshButton() { - node.addWidget('button', 'refresh', 'refresh', widget.refresh) + node.addWidget('button', 'refresh', 'refresh', widget.refresh, { + canvasOnly: true + }) } /** @@ -244,7 +246,8 @@ export function useRemoteWidget< autoRefreshEnabled = value }, { - serialize: false + serialize: false, + canvasOnly: true } ) diff --git a/src/scripts/widgets.ts b/src/scripts/widgets.ts index d87f650dd..e61edb509 100644 --- a/src/scripts/widgets.ts +++ b/src/scripts/widgets.ts @@ -134,7 +134,8 @@ export function addValueControlWidgets( function () {}, { values: ['fixed', 'increment', 'decrement', 'randomize'], - serialize: false // Don't include this in prompt. + serialize: false, // Don't include this in prompt. + canvasOnly: true } ) as IComboWidget diff --git a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts index e5c957085..08c9ac141 100644 --- a/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts +++ b/tests-ui/tests/renderer/extensions/vueNodes/widgets/composables/useRemoteWidget.test.ts @@ -542,7 +542,8 @@ describe('useRemoteWidget', () => { false, expect.any(Function), { - serialize: false + serialize: false, + canvasOnly: true } ) })