Show convert to widget option slot context menu (#2538)

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.77",
+        "@comfyorg/litegraph": "^0.8.78",
         "@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.77",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.77.tgz",
-      "integrity": "sha512-PMMJBishdaB/Nz3wYV/iC0qO8lqzoG5r+Zky/hCFt2LLCrRhktn+HciT4Kimk6ekldWiridNY165sazQLKQWGQ==",
+      "version": "0.8.78",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.78.tgz",
+      "integrity": "sha512-wnSM9yPL6GmMTwfEvGGOiJBGIRuxHdj/tM+FjK7ksO/yJY42yPpQYWlY9DoLfCCP0O+sEijeKCYpR4B+Rz1XPA==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

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.77",
+    "@comfyorg/litegraph": "^0.8.78",
     "@primevue/forms": "^4.2.5",
     "@primevue/themes": "^4.2.5",
     "@sentry/vue": "^8.48.0",

src/extensions/core/widgetInputs.ts

@@ -5,8 +5,10 @@ import type {
   IWidget,
   LiteGraphCanvasEvent
 } from '@comfyorg/litegraph'
+import type { IFoundSlot } from '@comfyorg/litegraph'
 
 import { useNodeDefStore } from '@/stores/nodeDefStore'
+import { useSettingStore } from '@/stores/settingStore'
 import type { InputSpec } from '@/types/apiTypes'
 
 import { app } from '../../scripts/app'
@@ -718,17 +720,16 @@ export function mergeIfValid(
   return { customConfig }
 }
 
-let useConversionSubmenusSetting
 app.registerExtension({
   name: 'Comfy.WidgetInputs',
-  init() {
-    useConversionSubmenusSetting = app.ui.settings.addSetting({
+  settings: [
+    {
       id: 'Comfy.NodeInputConversionSubmenus',
       name: 'In the node context menu, place the entries that convert between input/widget in sub-menus.',
       type: 'boolean',
       defaultValue: true
-    })
-  },
+    }
+  ],
   setup() {
     app.canvas.getWidgetLinkType = function (widget, node) {
       const nodeDefStore = useNodeDefStore()
@@ -777,6 +778,23 @@ app.registerExtension({
       convertToInput(this, widget, config)
       return true
     }
+
+    nodeType.prototype.getExtraSlotMenuOptions = function (
+      this: LGraphNode,
+      slot: IFoundSlot
+    ) {
+      if (!slot.input || !slot.input.widget) return []
+
+      const widget = this.widgets.find((w) => w.name === slot.input.widget.name)
+      if (!widget) return []
+      return [
+        {
+          content: `Convert to widget`,
+          callback: () => convertToWidget(this, widget)
+        }
+      ]
+    }
+
     nodeType.prototype.getExtraMenuOptions = function (_, options) {
       const r = origGetExtraMenuOptions
         ? origGetExtraMenuOptions.apply(this, arguments)
@@ -832,7 +850,7 @@ app.registerExtension({
 
         //Convert.. main menu
         if (toInput.length) {
-          if (useConversionSubmenusSetting.value) {
+          if (useSettingStore().get('Comfy.NodeInputConversionSubmenus')) {
             options.push({
               content: 'Convert Widget to Input',
               submenu: {
@@ -844,7 +862,7 @@ app.registerExtension({
           }
         }
         if (toWidget.length) {
-          if (useConversionSubmenusSetting.value) {
+          if (useSettingStore().get('Comfy.NodeInputConversionSubmenus')) {
             options.push({
               content: 'Convert Input to Widget',
               submenu: {