designate canvasOnly on runtime-generated virtual widgets so they are hidden in Vue renderer (#5831)

## Summary

Added `canvasOnly` flag to runtime-generated widgets to prevent Vue
renderer from displaying them while keeping canvas functionality intact.

## Changes

- **What**: Added `canvasOnly` widget option to hide upload, webcam, and
refresh widgets from Vue renderer

In the Canvas (LiteGraph) system, there was a small set of widgets with
strictly defined components. There, if we wanted some unique or
relatively complex behavior (like an upload butotn), we needed to create
a separate widget that would be coupled to the original widget at
runtime (and would not be serialized).

In the Vue renderer system, we can simply add flags to the inputSpec or
widget options and conditionally render complex UI additions -- i.e.,
there is no need for the hard-to-maintain runtime widget associations.
Expressing such things entirely in the view layer simplifies business
logic related to graph state, as we no longer need to account for
preserving the connections between runtime widgets and their special
siblings -- we also do not need to worry about the implications for
state serialization.

## Related

- https://github.com/Comfy-Org/ComfyUI_frontend/pull/5798

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5831-designate-canvasOnly-on-runtime-generated-virtual-widgets-so-they-are-hidden-in-Vue-ren-27c6d73d365081fb8641feec010190df)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>

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
+}

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'
+    )
+  })
+})

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

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')

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

src/lib/litegraph/src/types/widgets.ts

@@ -25,6 +25,8 @@ export interface IWidgetOptions<TValues = unknown[]> {
   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']

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')

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
       }
     )
 

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
 

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
         }
       )
     })