Contextmenu extension migration (#5993)

This pull request refactors how context menu items are contributed by
extensions in the LiteGraph-based canvas. The legacy monkey-patching
approach for adding context menu options is replaced by a new, explicit
API (`getCanvasMenuItems` and `getNodeMenuItems`) for extensions. A
compatibility layer is added to support legacy extensions and warn
developers about deprecated usage. The changes improve maintainability,
extension interoperability, and migration to the new context menu
system.

### Context Menu System Refactor

* Introduced a new API for extensions to contribute context menu items
via `getCanvasMenuItems` and `getNodeMenuItems` methods, replacing
legacy monkey-patching of `LGraphCanvas.prototype.getCanvasMenuOptions`.
Major extension files (`groupNode.ts`, `groupOptions.ts`,
`nodeTemplates.ts`) now use this new API.
[[1]](diffhunk://#diff-b29f141b89433027e7bb7cde57fad84f9e97ffbe5c58040d3e0fdb7905022917L1779-R1771)
[[2]](diffhunk://#diff-91169f3a27ff8974d5c8fc3346bd99c07bdfb5399984484630125fdd647ff02fL232-R239)
[[3]](diffhunk://#diff-04c18583d2dbfc013888e4c02fd432c250acbcecdef82bf7f6d9fd888e632a6eL447-R458)
* Added a compatibility layer (`legacyMenuCompat` in
`contextMenuCompat.ts`) to detect and warn when legacy monkey-patching
is used, and to extract legacy-added menu items for backward
compatibility.
[[1]](diffhunk://#diff-2b724cb107c04e290369fb927e2ae9fad03be9e617a7d4de2487deab89d0d018R2-R45)
[[2]](diffhunk://#diff-d3a8284ec16ae3f9512e33abe44ae653ed1aa45c9926485ef6270cc8d2b94ae6R1-R115)

### Extension Migration

* Refactored core extensions (`groupNode`, `groupOptions`, and
`nodeTemplates`) to implement the new context menu API, moving menu item
logic out of monkey-patched methods and into explicit extension methods.
[[1]](diffhunk://#diff-b29f141b89433027e7bb7cde57fad84f9e97ffbe5c58040d3e0fdb7905022917L1633-L1683)
[[2]](diffhunk://#diff-91169f3a27ff8974d5c8fc3346bd99c07bdfb5399984484630125fdd647ff02fL19-R77)
[[3]](diffhunk://#diff-04c18583d2dbfc013888e4c02fd432c250acbcecdef82bf7f6d9fd888e632a6eL366-R373)

### Type and Import Cleanup

* Updated imports for context menu types (`IContextMenuValue`) across
affected files for consistency with the new API.
[[1]](diffhunk://#diff-b29f141b89433027e7bb7cde57fad84f9e97ffbe5c58040d3e0fdb7905022917R4-L7)
[[2]](diffhunk://#diff-91169f3a27ff8974d5c8fc3346bd99c07bdfb5399984484630125fdd647ff02fL1-R11)
[[3]](diffhunk://#diff-04c18583d2dbfc013888e4c02fd432c250acbcecdef82bf7f6d9fd888e632a6eL2-R6)
[[4]](diffhunk://#diff-bde0dce9fe2403685d27b0e94a938c3d72824d02d01d1fd6167a0dddc6e585ddR10)

### Backward Compatibility and Migration Guidance

* The compatibility layer logs a deprecation warning to the console when
legacy monkey-patching is detected, helping developers migrate to the
new API.

---

These changes collectively modernize the context menu extension
mechanism, improve code clarity, and provide a migration path for legacy
extensions.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5993-Contextmenu-extension-migration-2876d73d3650813fae07c1141679637a)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <[email protected]>

Author: Myestery

browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png

@@ -1,23 +1,46 @@
 import { st, te } from '@/i18n'
+import { legacyMenuCompat } from '@/lib/litegraph/src/contextMenuCompat'
 import type {
   IContextMenuOptions,
   IContextMenuValue,
   INodeInputSlot,
   IWidget
 } from '@/lib/litegraph/src/litegraph'
 import { LGraphCanvas, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import { app } from '@/scripts/app'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 /**
  * Add translation for litegraph context menu.
  */
 export const useContextMenuTranslation = () => {
-  const f = LGraphCanvas.prototype.getCanvasMenuOptions
+  // Install compatibility layer BEFORE any extensions load
+  legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
+
+  const { getCanvasMenuOptions } = LGraphCanvas.prototype
   const getCanvasCenterMenuOptions = function (
     this: LGraphCanvas,
-    ...args: Parameters<typeof f>
+    ...args: Parameters<typeof getCanvasMenuOptions>
   ) {
-    const res = f.apply(this, args) as ReturnType<typeof f>
+    const res: IContextMenuValue[] = getCanvasMenuOptions.apply(this, args)
+
+    // Add items from new extension API
+    const newApiItems = app.collectCanvasMenuItems(this)
+    for (const item of newApiItems) {
+      res.push(item)
+    }
+
+    // Add legacy monkey-patched items
+    const legacyItems = legacyMenuCompat.extractLegacyItems(
+      'getCanvasMenuOptions',
+      this,
+      ...args
+    )
+    for (const item of legacyItems) {
+      res.push(item)
+    }
+
+    // Translate all items
     for (const item of res) {
       if (item?.content) {
         item.content = st(`contextMenu.${item.content}`, item.content)
@@ -28,6 +51,33 @@ export const useContextMenuTranslation = () => {
 
   LGraphCanvas.prototype.getCanvasMenuOptions = getCanvasCenterMenuOptions
 
+  legacyMenuCompat.registerWrapper(
+    'getCanvasMenuOptions',
+    getCanvasCenterMenuOptions,
+    getCanvasMenuOptions,
+    LGraphCanvas.prototype
+  )
+
+  // Wrap getNodeMenuOptions to add new API items
+  const nodeMenuFn = LGraphCanvas.prototype.getNodeMenuOptions
+  const getNodeMenuOptionsWithExtensions = function (
+    this: LGraphCanvas,
+    ...args: Parameters<typeof nodeMenuFn>
+  ) {
+    const res = nodeMenuFn.apply(this, args)
+
+    // Add items from new extension API
+    const node = args[0]
+    const newApiItems = app.collectNodeMenuItems(node)
+    for (const item of newApiItems) {
+      res.push(item)
+    }
+
+    return res
+  }
+
+  LGraphCanvas.prototype.getNodeMenuOptions = getNodeMenuOptionsWithExtensions
+
   function translateMenus(
     values: readonly (IContextMenuValue | string | null)[] | undefined,
     options: IContextMenuOptions

browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png

@@ -1,10 +1,10 @@
 import { PREFIX, SEPARATOR } from '@/constants/groupNodeConstants'
 import { t } from '@/i18n'
 import { type NodeId } from '@/lib/litegraph/src/LGraphNode'
+import type { IContextMenuValue } from '@/lib/litegraph/src/interfaces'
 import {
   type ExecutableLGraphNode,
   type ExecutionId,
-  LGraphCanvas,
   LGraphNode,
   LiteGraph,
   SubgraphNode
@@ -1630,57 +1630,6 @@ export class GroupNodeHandler {
   }
 }
 
-function addConvertToGroupOptions() {
-  // @ts-expect-error fixme ts strict error
-  function addConvertOption(options, index) {
-    const selected = Object.values(app.canvas.selected_nodes ?? {})
-    const disabled =
-      selected.length < 2 ||
-      selected.find((n) => GroupNodeHandler.isGroupNode(n))
-    options.splice(index, null, {
-      content: `Convert to Group Node (Deprecated)`,
-      disabled,
-      callback: convertSelectedNodesToGroupNode
-    })
-  }
-
-  // @ts-expect-error fixme ts strict error
-  function addManageOption(options, index) {
-    const groups = app.graph.extra?.groupNodes
-    const disabled = !groups || !Object.keys(groups).length
-    options.splice(index, null, {
-      content: `Manage Group Nodes`,
-      disabled,
-      callback: () => manageGroupNodes()
-    })
-  }
-
-  // Add to canvas
-  const getCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions
-  LGraphCanvas.prototype.getCanvasMenuOptions = function () {
-    // @ts-expect-error fixme ts strict error
-    const options = getCanvasMenuOptions.apply(this, arguments)
-    const index = options.findIndex((o) => o?.content === 'Add Group')
-    const insertAt = index === -1 ? options.length - 1 : index + 2
-    addConvertOption(options, insertAt)
-    addManageOption(options, insertAt + 1)
-    return options
-  }
-
-  // Add to nodes
-  const getNodeMenuOptions = LGraphCanvas.prototype.getNodeMenuOptions
-  LGraphCanvas.prototype.getNodeMenuOptions = function (node) {
-    // @ts-expect-error fixme ts strict error
-    const options = getNodeMenuOptions.apply(this, arguments)
-    if (!GroupNodeHandler.isGroupNode(node)) {
-      const index = options.findIndex((o) => o?.content === 'Properties')
-      const insertAt = index === -1 ? options.length - 1 : index
-      addConvertOption(options, insertAt)
-    }
-    return options
-  }
-}
-
 const replaceLegacySeparators = (nodes: ComfyNode[]): void => {
   for (const node of nodes) {
     if (typeof node.type === 'string' && node.type.startsWith('workflow/')) {
@@ -1718,6 +1667,9 @@ async function convertSelectedNodesToGroupNode() {
   return await GroupNodeHandler.fromNodes(nodes)
 }
 
+const convertDisabled = (selected: LGraphNode[]) =>
+  selected.length < 2 || !!selected.find((n) => GroupNodeHandler.isGroupNode(n))
+
 function ungroupSelectedGroupNodes() {
   const nodes = Object.values(app.canvas.selected_nodes ?? {})
   for (const node of nodes) {
@@ -1776,8 +1728,46 @@ const ext: ComfyExtension = {
       }
     }
   ],
-  setup() {
-    addConvertToGroupOptions()
+
+  getCanvasMenuItems(canvas): IContextMenuValue[] {
+    const items: IContextMenuValue[] = []
+    const selected = Object.values(canvas.selected_nodes ?? {})
+    const convertEnabled = !convertDisabled(selected)
+
+    items.push({
+      content: `Convert to Group Node (Deprecated)`,
+      disabled: !convertEnabled,
+      // @ts-expect-error fixme ts strict error - async callback
+      callback: () => convertSelectedNodesToGroupNode()
+    })
+
+    const groups = canvas.graph?.extra?.groupNodes
+    const manageDisabled = !groups || !Object.keys(groups).length
+    items.push({
+      content: `Manage Group Nodes`,
+      disabled: manageDisabled,
+      callback: () => manageGroupNodes()
+    })
+
+    return items
+  },
+
+  getNodeMenuItems(node): IContextMenuValue[] {
+    if (GroupNodeHandler.isGroupNode(node)) {
+      return []
+    }
+
+    const selected = Object.values(app.canvas.selected_nodes ?? {})
+    const convertEnabled = !convertDisabled(selected)
+
+    return [
+      {
+        content: `Convert to Group Node (Deprecated)`,
+        disabled: !convertEnabled,
+        // @ts-expect-error fixme ts strict error - async callback
+        callback: () => convertSelectedNodesToGroupNode()
+      }
+    ]
   },
   async beforeConfigureGraph(
     graphData: ComfyWorkflowJSON,