Add UI code for configuring subgraphNode widgets (#5826)

The third PR for managing display of widgets on subgraph nodes. This is
the one that actually makes the functionality usable and user visible.

Adds
- A right-side modal for configuring which widgets are promoted,
accessed by right click or selection toolbar
- This menu allows for re-arranging widget order by dragging and
dropping.
- Indicators inside the subgraph for which widgets have been promoted.
- Context menu options for promoting or demoting widget inside of a
subgraph.
<img width="767" height="694" alt="image"
src="https://github.com/user-attachments/assets/4f78645d-7b26-48ba-8c49-78f4807e89e8"
/>
<img width="784" height="435" alt="image"
src="https://github.com/user-attachments/assets/7005c730-a732-481e-befb-57019a8a31a7"
/>


Known issues
- Some preview widgets are not added to a node until a draw operation
occurs. The code does not yet have a way of determining which nodes
should have draw operations forced to facilitate initial widget
creation.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5826-Add-UI-code-for-configuring-subgraphNode-widgets-27c6d73d36508146accbf395e5bcd36a)
by [Unito](https://www.unito.io)

tests-ui/tests/litegraph/core/__snapshots__/litegraph.test.ts.snap

@@ -134,6 +134,7 @@ LiteGraphGlobal {
   "WIDGET_BGCOLOR": "#222",
   "WIDGET_DISABLED_TEXT_COLOR": "#666",
   "WIDGET_OUTLINE_COLOR": "#666",
+  "WIDGET_PROMOTED_OUTLINE_COLOR": "#BF00FF",
   "WIDGET_SECONDARY_TEXT_COLOR": "#999",
   "WIDGET_TEXT_COLOR": "#DDD",
   "allow_multi_output_for_events": true,

tests-ui/tests/widgets/proxyWidget.test.ts

@@ -1,21 +1,30 @@
 import { describe, expect, test, vi } from 'vitest'
 
-import '@/core/graph/subgraph/proxyWidget'
-//import { ComponentWidgetImpl, DOMWidgetImpl } from '@/scripts/domWidget'
-
-import { LGraphNode, type SubgraphNode } from '@/lib/litegraph/src/litegraph'
+import { registerProxyWidgets } from '@/core/graph/subgraph/proxyWidget'
+import {
+  type LGraphCanvas,
+  LGraphNode,
+  type SubgraphNode
+} from '@/lib/litegraph/src/litegraph'
 
 import {
   createTestSubgraph,
   createTestSubgraphNode
 } from '../litegraph/subgraph/fixtures/subgraphHelpers'
 
+const canvasEl: Partial<HTMLCanvasElement> = { addEventListener() {} }
+const canvas: Partial<LGraphCanvas> = { canvas: canvasEl as HTMLCanvasElement }
+registerProxyWidgets(canvas as LGraphCanvas)
+
 vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: () => ({})
 }))
 vi.mock('@/stores/domWidgetStore', () => ({
   useDomWidgetStore: () => ({ widgetStates: new Map() })
 }))
+vi.mock('@/services/litegraphService', () => ({
+  useLitegraphService: () => ({ updatePreviews: () => ({}) })
+}))
 
 function setupSubgraph(
   innerNodeCount: number = 0
@@ -38,22 +47,20 @@ describe('Subgraph proxyWidgets', () => {
   test('Can add simple widget', () => {
     const [subgraphNode, innerNodes] = setupSubgraph(1)
     innerNodes[0].addWidget('text', 'stringWidget', 'value', () => {})
-    subgraphNode.properties.proxyWidgets = JSON.stringify([
+    subgraphNode.properties.proxyWidgets = [['1', 'stringWidget']]
+    expect(subgraphNode.widgets.length).toBe(1)
+    expect(subgraphNode.properties.proxyWidgets).toStrictEqual([
       ['1', 'stringWidget']
     ])
-    expect(subgraphNode.widgets.length).toBe(1)
-    expect(subgraphNode.properties.proxyWidgets).toBe(
-      JSON.stringify([['1', 'stringWidget']])
-    )
   })
   test('Can add multiple widgets with same name', () => {
     const [subgraphNode, innerNodes] = setupSubgraph(2)
     for (const innerNode of innerNodes)
       innerNode.addWidget('text', 'stringWidget', 'value', () => {})
-    subgraphNode.properties.proxyWidgets = JSON.stringify([
+    subgraphNode.properties.proxyWidgets = [
       ['1', 'stringWidget'],
       ['2', 'stringWidget']
-    ])
+    ]
     expect(subgraphNode.widgets.length).toBe(2)
     expect(subgraphNode.widgets[0].name).not.toEqual(
       subgraphNode.widgets[1].name
@@ -63,19 +70,15 @@ describe('Subgraph proxyWidgets', () => {
     const [subgraphNode, innerNodes] = setupSubgraph(1)
     innerNodes[0].addWidget('text', 'stringWidget', 'value', () => {})
     subgraphNode.addWidget('text', 'stringWidget', 'value', () => {})
-    subgraphNode.properties.proxyWidgets = JSON.stringify([
-      ['1', 'stringWidget']
-    ])
+    subgraphNode.properties.proxyWidgets = [['1', 'stringWidget']]
     expect(subgraphNode.widgets.length).toBe(2)
-    subgraphNode.properties.proxyWidgets = JSON.stringify([])
+    subgraphNode.properties.proxyWidgets = []
     expect(subgraphNode.widgets.length).toBe(1)
   })
   test('Will mirror changes to value', () => {
     const [subgraphNode, innerNodes] = setupSubgraph(1)
     innerNodes[0].addWidget('text', 'stringWidget', 'value', () => {})
-    subgraphNode.properties.proxyWidgets = JSON.stringify([
-      ['1', 'stringWidget']
-    ])
+    subgraphNode.properties.proxyWidgets = [['1', 'stringWidget']]
     expect(subgraphNode.widgets.length).toBe(1)
     expect(subgraphNode.widgets[0].value).toBe('value')
     innerNodes[0].widgets![0].value = 'test'
@@ -86,9 +89,7 @@ describe('Subgraph proxyWidgets', () => {
   test('Will not modify position or sizing of existing widgets', () => {
     const [subgraphNode, innerNodes] = setupSubgraph(1)
     innerNodes[0].addWidget('text', 'stringWidget', 'value', () => {})
-    subgraphNode.properties.proxyWidgets = JSON.stringify([
-      ['1', 'stringWidget']
-    ])
+    subgraphNode.properties.proxyWidgets = [['1', 'stringWidget']]
     if (!innerNodes[0].widgets) throw new Error('node has no widgets')
     innerNodes[0].widgets[0].y = 10
     innerNodes[0].widgets[0].last_y = 11
@@ -103,9 +104,7 @@ describe('Subgraph proxyWidgets', () => {
   test('Can detach and re-attach widgets', () => {
     const [subgraphNode, innerNodes] = setupSubgraph(1)
     innerNodes[0].addWidget('text', 'stringWidget', 'value', () => {})
-    subgraphNode.properties.proxyWidgets = JSON.stringify([
-      ['1', 'stringWidget']
-    ])
+    subgraphNode.properties.proxyWidgets = [['1', 'stringWidget']]
     if (!innerNodes[0].widgets) throw new Error('node has no widgets')
     expect(subgraphNode.widgets[0].value).toBe('value')
     const poppedWidget = innerNodes[0].widgets.pop()