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/components/graph/SelectionToolbox.vue

@@ -22,7 +22,8 @@
         <ColorPickerButton v-if="showColorPicker" />
         <FrameNodes v-if="showFrameNodes" />
         <ConvertToSubgraphButton v-if="showConvertToSubgraph" />
-        <PublishSubgraphButton v-if="showPublishSubgraph" />
+        <ConfigureSubgraph v-if="showSubgraphButtons" />
+        <PublishSubgraphButton v-if="showSubgraphButtons" />
         <MaskEditorButton v-if="showMaskEditor" />
         <VerticalDivider
           v-if="showAnyPrimaryActions && showAnyControlActions"
@@ -50,6 +51,7 @@ import { computed, ref } from 'vue'
 
 import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
+import ConfigureSubgraph from '@/components/graph/selectionToolbox/ConfigureSubgraph.vue'
 import ConvertToSubgraphButton from '@/components/graph/selectionToolbox/ConvertToSubgraphButton.vue'
 import DeleteButton from '@/components/graph/selectionToolbox/DeleteButton.vue'
 import ExecuteButton from '@/components/graph/selectionToolbox/ExecuteButton.vue'
@@ -112,7 +114,7 @@ const showInfoButton = computed(() => !!nodeDef.value)
 const showColorPicker = computed(() => hasAnySelection.value)
 const showConvertToSubgraph = computed(() => hasAnySelection.value)
 const showFrameNodes = computed(() => hasMultipleSelection.value)
-const showPublishSubgraph = computed(() => isSingleSubgraph.value)
+const showSubgraphButtons = computed(() => isSingleSubgraph.value)
 
 const showBypass = computed(
   () =>
@@ -130,7 +132,7 @@ const showAnyPrimaryActions = computed(
     showColorPicker.value ||
     showConvertToSubgraph.value ||
     showFrameNodes.value ||
-    showPublishSubgraph.value
+    showSubgraphButtons.value
 )
 
 const showAnyControlActions = computed(() => showBypass.value)

src/components/graph/selectionToolbox/ConfigureSubgraph.vue

@@ -0,0 +1,17 @@
+<template>
+  <Button
+    v-tooltip.top="{
+      value: $t('Edit Subgraph Widgets'),
+      showDelay: 1000
+    }"
+    severity="secondary"
+    text
+    icon="icon-[lucide--settings-2]"
+    @click="showSubgraphNodeDialog"
+  />
+</template>
+<script setup lang="ts">
+import Button from 'primevue/button'
+
+import { showSubgraphNodeDialog } from '@/core/graph/subgraph/useSubgraphNodeDialog'
+</script>

src/components/graph/widgets/DomWidget.vue

@@ -68,7 +68,7 @@ const updateDomClipping = () => {
     return
   }
 
-  const isSelected = selectedNode === widget.node
+  const isSelected = selectedNode === widgetState.widget.node
   const renderArea = selectedNode?.renderArea
   const offset = lgCanvas.ds.offset
   const scale = lgCanvas.ds.scale