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/scripts/app.ts

@@ -5,6 +5,7 @@ import { reactive, unref } from 'vue'
 import { shallowRef } from 'vue'
 
 import { useCanvasPositionConversion } from '@/composables/element/useCanvasPositionConversion'
+import { registerProxyWidgets } from '@/core/graph/subgraph/proxyWidget'
 import { st, t } from '@/i18n'
 import {
   LGraph,
@@ -883,6 +884,7 @@ export class ComfyApp {
         }
       }
     )
+    registerProxyWidgets(this.canvas)
 
     this.graph.start()
 

src/scripts/domWidget.ts

@@ -173,6 +173,18 @@ abstract class BaseDOMWidgetImpl<V extends object | string>
       )
       ctx.fill()
       ctx.fillStyle = originalFillStyle
+    } else if (this.promoted && this.isVisible()) {
+      ctx.save()
+      const adjustedMargin = this.margin - 1
+      ctx.beginPath()
+      ctx.strokeStyle = LiteGraph.WIDGET_PROMOTED_OUTLINE_COLOR
+      ctx.strokeRect(
+        adjustedMargin,
+        y + adjustedMargin,
+        widget_width - adjustedMargin * 2,
+        (this.computedHeight ?? widget_height) - 2 * adjustedMargin
+      )
+      ctx.restore()
     }
     this.options.onDraw?.(this)
   }

src/scripts/ui/draggableList.ts

@@ -23,11 +23,8 @@
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
     SOFTWARE.
 */
-import { $el } from '../ui'
-
-$el('style', {
-  parent: document.head,
-  textContent: `
+const styleElement = document.createElement('style')
+styleElement.textContent = `
         .draggable-item {
             position: relative;
             will-change: transform;
@@ -40,7 +37,7 @@ $el('style', {
             z-index: 10;
         }
     `
-})
+document.head.append(styleElement)
 
 export class DraggableList extends EventTarget {
   listContainer

src/scripts/widgets.ts

@@ -1,4 +1,3 @@
-import '@/core/graph/subgraph/proxyWidget'
 import { t } from '@/i18n'
 import { type LGraphNode, isComboWidget } from '@/lib/litegraph/src/litegraph'
 import type {