mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
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 <github-actions@github.com>
72 lines
2.6 KiB
TypeScript
72 lines
2.6 KiB
TypeScript
import { describe, expect, it, vi } from 'vitest'
|
|
|
|
import { legacyMenuCompat } from '@/lib/litegraph/src/contextMenuCompat'
|
|
import { LGraphCanvas } from '@/lib/litegraph/src/litegraph'
|
|
|
|
/**
|
|
* Test that demonstrates the extension name appearing in deprecation warnings
|
|
*/
|
|
describe('Context Menu Extension Name in Warnings', () => {
|
|
it('should include extension name in deprecation warning', () => {
|
|
const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
|
|
|
|
// Install compatibility layer
|
|
legacyMenuCompat.install(LGraphCanvas.prototype, 'getCanvasMenuOptions')
|
|
|
|
// Simulate what happens during extension setup
|
|
legacyMenuCompat.setCurrentExtension('MyCustomExtension')
|
|
|
|
// Extension monkey-patches the method
|
|
const original = LGraphCanvas.prototype.getCanvasMenuOptions
|
|
LGraphCanvas.prototype.getCanvasMenuOptions = function (...args: any[]) {
|
|
const items = (original as any).apply(this, args)
|
|
items.push({ content: 'My Custom Menu Item', callback: () => {} })
|
|
return items
|
|
}
|
|
|
|
// Clear extension (happens after setup completes)
|
|
legacyMenuCompat.setCurrentExtension(null)
|
|
|
|
// Verify the warning includes the extension name
|
|
expect(warnSpy).toHaveBeenCalled()
|
|
const warningMessage = warnSpy.mock.calls[0][0]
|
|
|
|
expect(warningMessage).toContain('[DEPRECATED]')
|
|
expect(warningMessage).toContain('getCanvasMenuOptions')
|
|
expect(warningMessage).toContain('"MyCustomExtension"')
|
|
|
|
vi.restoreAllMocks()
|
|
})
|
|
|
|
it('should include extension name for node menu patches', () => {
|
|
const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
|
|
|
|
// Install compatibility layer
|
|
legacyMenuCompat.install(LGraphCanvas.prototype, 'getNodeMenuOptions')
|
|
|
|
// Simulate what happens during extension setup
|
|
legacyMenuCompat.setCurrentExtension('AnotherExtension')
|
|
|
|
// Extension monkey-patches the method
|
|
const original = LGraphCanvas.prototype.getNodeMenuOptions
|
|
LGraphCanvas.prototype.getNodeMenuOptions = function (...args: any[]) {
|
|
const items = (original as any).apply(this, args)
|
|
items.push({ content: 'My Node Menu Item', callback: () => {} })
|
|
return items
|
|
}
|
|
|
|
// Clear extension (happens after setup completes)
|
|
legacyMenuCompat.setCurrentExtension(null)
|
|
|
|
// Verify the warning includes extension info
|
|
expect(warnSpy).toHaveBeenCalled()
|
|
const warningMessage = warnSpy.mock.calls[0][0]
|
|
|
|
expect(warningMessage).toContain('[DEPRECATED]')
|
|
expect(warningMessage).toContain('getNodeMenuOptions')
|
|
expect(warningMessage).toContain('"AnotherExtension"')
|
|
|
|
vi.restoreAllMocks()
|
|
})
|
|
})
|