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)

src/core/graph/subgraph/proxyWidgetUtils.ts

@@ -0,0 +1,132 @@
+import {
+  type ProxyWidgetsProperty,
+  parseProxyWidgets
+} from '@/core/schemas/proxyWidget'
+import type {
+  IContextMenuValue,
+  LGraphNode
+} from '@/lib/litegraph/src/litegraph'
+import type { SubgraphNode } from '@/lib/litegraph/src/subgraph/SubgraphNode'
+import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets.ts'
+import { useLitegraphService } from '@/services/litegraphService'
+import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
+
+export type WidgetItem = [LGraphNode, IBaseWidget]
+
+function getProxyWidgets(node: SubgraphNode) {
+  return parseProxyWidgets(node.properties.proxyWidgets)
+}
+export function promoteWidget(
+  node: LGraphNode,
+  widget: IBaseWidget,
+  parents: SubgraphNode[]
+) {
+  for (const parent of parents) {
+    const proxyWidgets = [
+      ...getProxyWidgets(parent),
+      widgetItemToProperty([node, widget])
+    ]
+    parent.properties.proxyWidgets = proxyWidgets
+  }
+  widget.promoted = true
+}
+
+export function demoteWidget(
+  node: LGraphNode,
+  widget: IBaseWidget,
+  parents: SubgraphNode[]
+) {
+  for (const parent of parents) {
+    const proxyWidgets = getProxyWidgets(parent).filter(
+      (widgetItem) => !matchesPropertyItem([node, widget])(widgetItem)
+    )
+    parent.properties.proxyWidgets = proxyWidgets
+  }
+  widget.promoted = false
+}
+
+export function matchesWidgetItem([nodeId, widgetName]: [string, string]) {
+  return ([n, w]: WidgetItem) => n.id == nodeId && w.name === widgetName
+}
+export function matchesPropertyItem([n, w]: WidgetItem) {
+  return ([nodeId, widgetName]: [string, string]) =>
+    n.id == nodeId && w.name === widgetName
+}
+export function widgetItemToProperty([n, w]: WidgetItem): [string, string] {
+  return [`${n.id}`, w.name]
+}
+
+function getParentNodes(): SubgraphNode[] {
+  //NOTE: support for determining parents of a subgraph is limited
+  //This function will require rework to properly support linked subgraphs
+  //Either by including actual parents in the navigation stack,
+  //or by adding a new event for parent listeners to collect from
+  const { navigationStack } = useSubgraphNavigationStore()
+  const subgraph = navigationStack.at(-1)
+  if (!subgraph) throw new Error("Can't promote widget when not in subgraph")
+  const parentGraph = navigationStack.at(-2) ?? subgraph.rootGraph
+  return parentGraph.nodes.filter(
+    (node): node is SubgraphNode =>
+      node.type === subgraph.id && node.isSubgraphNode()
+  )
+}
+
+export function addWidgetPromotionOptions(
+  options: (IContextMenuValue<unknown> | null)[],
+  widget: IBaseWidget,
+  node: LGraphNode
+) {
+  const parents = getParentNodes()
+  const promotableParents = parents.filter(
+    (s) => !getProxyWidgets(s).some(matchesPropertyItem([node, widget]))
+  )
+  if (promotableParents.length > 0)
+    options.unshift({
+      content: `Promote Widget: ${widget.label ?? widget.name}`,
+      callback: () => {
+        promoteWidget(node, widget, promotableParents)
+      }
+    })
+  else {
+    options.unshift({
+      content: `Un-Promote Widget: ${widget.label ?? widget.name}`,
+      callback: () => {
+        demoteWidget(node, widget, parents)
+      }
+    })
+  }
+}
+const recommendedNodes = [
+  'CLIPTextEncode',
+  'LoadImage',
+  'SaveImage',
+  'PreviewImage'
+]
+const recommendedWidgetNames = ['seed']
+export function isRecommendedWidget([node, widget]: WidgetItem) {
+  return (
+    !widget.computedDisabled &&
+    (recommendedNodes.includes(node.type) ||
+      recommendedWidgetNames.includes(widget.name))
+  )
+}
+
+function nodeWidgets(n: LGraphNode): WidgetItem[] {
+  return n.widgets?.map((w: IBaseWidget) => [n, w]) ?? []
+}
+export function promoteRecommendedWidgets(subgraphNode: SubgraphNode) {
+  const { updatePreviews } = useLitegraphService()
+  const interiorNodes = subgraphNode.subgraph.nodes
+  for (const node of interiorNodes) {
+    node.updateComputedDisabled()
+    //NOTE: Since this operation is async, previews still don't exist after the single frame
+    //Add an onLoad callback to updatePreviews?
+    updatePreviews(node)
+  }
+  const filteredWidgets: WidgetItem[] = interiorNodes
+    .flatMap(nodeWidgets)
+    .filter(isRecommendedWidget)
+  const proxyWidgets: ProxyWidgetsProperty =
+    filteredWidgets.map(widgetItemToProperty)
+  subgraphNode.properties.proxyWidgets = proxyWidgets
+}