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

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: {