Add support for hidden & advanced widgets (#1389)

* Add support for hidden & advanced widgets

* Fix

* Update package

* Remove ts-expect-error

* Fix test, tidy

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.3.30",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-        "@comfyorg/litegraph": "^0.8.13",
+        "@comfyorg/litegraph": "^0.8.14",
         "@primevue/themes": "^4.0.5",
         "@vueuse/core": "^11.0.0",
         "axios": "^1.7.4",
@@ -1911,10 +1911,9 @@
       "dev": true
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.8.13",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.13.tgz",
-      "integrity": "sha512-WT0wlouwGQhjcvd+kQfAXooKTPWMu3CUb2bw702Hs3ctFnVEm8+Z9kaK6z1KRg45GkjhajCdlEuQ9XFQ5A0nVA==",
-      "license": "MIT"
+      "version": "0.8.14",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.14.tgz",
+      "integrity": "sha512-47699IXTu3RSPaAzGAumFJKIydWp84ePLYRIuxMNB4772pjhI2stOD+ex5Eo6kVwkdBzeikLq1scCGgFzxGdsQ=="
     },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",

package.json

@@ -68,7 +68,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/litegraph": "^0.8.13",
+    "@comfyorg/litegraph": "^0.8.14",
     "@primevue/themes": "^4.0.5",
     "@vueuse/core": "^11.0.0",
     "axios": "^1.7.4",

src/components/graph/NodeTooltip.vue

@@ -23,35 +23,6 @@ const tooltipText = ref('')
 const left = ref<string>()
 const top = ref<string>()
 
-const getHoveredWidget = () => {
-  const node = comfyApp.canvas.node_over
-  if (!node.widgets) return
-
-  const graphPos = comfyApp.canvas.graph_mouse
-  const x = graphPos[0] - node.pos[0]
-  const y = graphPos[1] - node.pos[1]
-
-  for (const w of node.widgets) {
-    let widgetWidth: number, widgetHeight: number
-    if (w.computeSize) {
-      ;[widgetWidth, widgetHeight] = w.computeSize(node.size[0])
-    } else {
-      widgetWidth = (w as { width?: number }).width || node.size[0]
-      widgetHeight = LiteGraph.NODE_WIDGET_HEIGHT
-    }
-
-    if (
-      w.last_y !== undefined &&
-      x >= 6 &&
-      x <= widgetWidth - 12 &&
-      y >= w.last_y &&
-      y <= w.last_y + widgetHeight
-    ) {
-      return w
-    }
-  }
-}
-
 const hideTooltip = () => (tooltipText.value = null)
 
 const showTooltip = async (tooltip: string | null | undefined) => {
@@ -111,7 +82,7 @@ const onIdle = () => {
     return showTooltip(nodeDef.output.all?.[outputSlot]?.tooltip)
   }
 
-  const widget = getHoveredWidget()
+  const widget = comfyApp.canvas.getWidgetAtCursor()
   // Dont show for DOM widgets, these use native browser tooltips as we dont get proper mouse events on these
   if (widget && !widget.element) {
     return showTooltip(

src/scripts/app.ts

@@ -57,6 +57,7 @@ import { useExtensionStore } from '@/stores/extensionStore'
 import { KeyComboImpl, useKeybindingStore } from '@/stores/keybindingStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { shallowReactive } from 'vue'
+import { type IBaseWidget } from '@comfyorg/litegraph/dist/types/widgets'
 
 export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview'
 
@@ -2013,7 +2014,11 @@ export class ComfyApp {
             nodeData['input']['optional']
           )
         }
-        const config = { minWidth: 1, minHeight: 1 }
+        const config: {
+          minWidth: number
+          minHeight: number
+          widget?: IBaseWidget
+        } = { minWidth: 1, minHeight: 1 }
         for (const inputName in inputs) {
           const inputData = inputs[inputName]
           const type = inputData[0]
@@ -2042,27 +2047,23 @@ export class ComfyApp {
             widgetCreated = false
           }
 
-          // @ts-expect-error
-          if (widgetCreated && !inputIsRequired && config?.widget) {
-            // @ts-expect-error
-            if (!config.widget.options) config.widget.options = {}
-            // @ts-expect-error
-            config.widget.options.inputIsOptional = true
-          }
-
-          // @ts-expect-error
-          if (widgetCreated && inputData[1]?.forceInput && config?.widget) {
-            // @ts-expect-error
-            if (!config.widget.options) config.widget.options = {}
-            // @ts-expect-error
-            config.widget.options.forceInput = inputData[1].forceInput
-          }
-          // @ts-expect-error
-          if (widgetCreated && inputData[1]?.defaultInput && config?.widget) {
-            // @ts-expect-error
-            if (!config.widget.options) config.widget.options = {}
-            // @ts-expect-error
-            config.widget.options.defaultInput = inputData[1].defaultInput
+          if (widgetCreated && config?.widget) {
+            config.widget.options ??= {}
+            if (!inputIsRequired) {
+              config.widget.options.inputIsOptional = true
+            }
+            if (inputData[1]?.forceInput) {
+              config.widget.options.forceInput = true
+            }
+            if (inputData[1]?.defaultInput) {
+              config.widget.options.defaultInput = true
+            }
+            if (inputData[1]?.advanced) {
+              config.widget.advanced = true
+            }
+            if (inputData[1]?.hidden) {
+              config.widget.hidden = true
+            }
           }
         }
 

src/types/apiTypes.ts

@@ -244,7 +244,9 @@ const zBaseInputSpecValue = z
     forceInput: z.boolean().optional(),
     lazy: z.boolean().optional(),
     rawLink: z.boolean().optional(),
-    tooltip: z.string().optional()
+    tooltip: z.string().optional(),
+    hidden: z.boolean().optional(),
+    advanced: z.boolean().optional()
   })
   .passthrough()