Support selection of app inputs and outputs from vue mode (#9259)

- The input and output indicators are now plugged directly into the
`LGraphNode.vue` template. Care was taken to make implementation to have
low cost for performance and complexity when not in app mode setup.
- Context menu event handlers are added to each widget in vue mode
instead of resolving the target widget of an event
- Swap the nodeId passed by `useGraphNodeManager` to not include the
locator id. This id was never used and was incorrect since it didn't
resolve across nested subgraphs.
- Continued bug fixes for app mode as a whole.

Known issue: There is disparity of nodeId between litegraph (which
references the widget in the root graph) and vue (which promotes the
original widget). Efforts to reconcile are ongoing.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9259-Support-selection-app-inputs-and-outputs-from-vue-mode-3136d73d365081ae8e56e35bf6322409)
by [Unito](https://www.unito.io)

---------

Co-authored-by: pythongosssss <125205205+pythongosssss@users.noreply.github.com>

src/components/builder/AppBuilder.vue

@@ -38,20 +38,28 @@ const workflowStore = useWorkflowStore()
 const { t } = useI18n()
 const canvas: LGraphCanvas = canvasStore.getCanvas()
 
-const { mode, isArrangeMode } = useAppMode()
+const { isSelectMode, isArrangeMode } = useAppMode()
 const hoveringSelectable = ref(false)
 
 provide(HideLayoutFieldKey, true)
 
 workflowStore.activeWorkflow?.changeTracker?.reset()
 
+function resolveNode(nodeId: NodeId) {
+  return (
+    app.rootGraph.getNodeById(nodeId) ??
+    [...app.rootGraph.subgraphs.values()]
+      .flatMap((sg) => sg.nodes)
+      .find((n) => n.id == nodeId)
+  )
+}
+
 // Prune stale entries whose node/widget no longer exists, so the
 // DraggableList model always matches the rendered items.
 watchEffect(() => {
-  const valid = appModeStore.selectedInputs.filter(([nodeId, widgetName]) => {
-    const node = app.rootGraph.getNodeById(nodeId)
-    return node?.widgets?.some((w) => w.name === widgetName)
-  })
+  const valid = appModeStore.selectedInputs.filter(([nodeId, widgetName]) =>
+    resolveNode(nodeId)?.widgets?.some((w) => w.name === widgetName)
+  )
   if (valid.length < appModeStore.selectedInputs.length) {
     appModeStore.selectedInputs = valid
   }
@@ -60,7 +68,7 @@ watchEffect(() => {
 const arrangeInputs = computed(() =>
   appModeStore.selectedInputs
     .map(([nodeId, widgetName]) => {
-      const node = app.rootGraph.getNodeById(nodeId)
+      const node = resolveNode(nodeId)
       const widget = node?.widgets?.find((w) => w.name === widgetName)
       if (!node || !widget) return null
       return { nodeId, widgetName, node, widget }
@@ -70,7 +78,7 @@ const arrangeInputs = computed(() =>
 
 const inputsWithState = computed(() =>
   appModeStore.selectedInputs.map(([nodeId, widgetName]) => {
-    const node = app.rootGraph.getNodeById(nodeId)
+    const node = resolveNode(nodeId)
     const widget = node?.widgets?.find((w) => w.name === widgetName)
     if (!node || !widget) return { nodeId, widgetName }
 
@@ -168,14 +176,14 @@ function handleClick(e: MouseEvent) {
   if (!widget) {
     if (!node.constructor.nodeData?.output_node)
       return canvasInteractions.forwardEventToCanvas(e)
-    const index = appModeStore.selectedOutputs.findIndex((id) => id === node.id)
+    const index = appModeStore.selectedOutputs.findIndex((id) => id == node.id)
     if (index === -1) appModeStore.selectedOutputs.push(node.id)
     else appModeStore.selectedOutputs.splice(index, 1)
     return
   }
 
   const index = appModeStore.selectedInputs.findIndex(
-    ([nodeId, widgetName]) => node.id === nodeId && widget.name === widgetName
+    ([nodeId, widgetName]) => node.id == nodeId && widget.name === widgetName
   )
   if (index === -1) appModeStore.selectedInputs.push([node.id, widget.name])
   else appModeStore.selectedInputs.splice(index, 1)
@@ -239,6 +247,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     :disabled="!appModeStore.selectedInputs.length"
     class="border-border-subtle border-b"
     :tooltip="`${t('linearMode.builder.inputsDesc')}\n${t('linearMode.builder.inputsExample')}`"
+    :tooltip-delay="100"
   >
     <template #label>
       <div class="flex gap-3">
@@ -274,7 +283,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
           () =>
             remove(
               appModeStore.selectedInputs,
-              ([id, name]) => nodeId === id && widgetName === name
+              ([id, name]) => nodeId == id && widgetName === name
             )
         "
       />
@@ -286,6 +295,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     enable-empty-state
     :disabled="!appModeStore.selectedOutputs.length"
     :tooltip="`${t('linearMode.builder.outputsDesc')}\n${t('linearMode.builder.outputsExample')}`"
+    :tooltip-delay="100"
   >
     <template #label>
       <div class="flex gap-3">
@@ -319,12 +329,15 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
         "
         :title
         :sub-title="String(key)"
-        :remove="() => remove(appModeStore.selectedOutputs, (k) => k === key)"
+        :remove="() => remove(appModeStore.selectedOutputs, (k) => k == key)"
       />
     </DraggableList>
   </PropertiesAccordionItem>
 
-  <Teleport v-if="mode === 'builder:select'" to="body">
+  <Teleport
+    v-if="isSelectMode && !settingStore.get('Comfy.VueNodes.Enabled')"
+    to="body"
+  >
     <div
       :class="
         cn(
@@ -358,13 +371,19 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
           <div class="absolute top-0 right-0 size-8">
             <div
               v-if="isSelected"
-              class="absolute -top-1/2 -right-1/2 size-full p-2 bg-warning-background rounded-lg"
+              class="absolute -top-1/2 -right-1/2 size-full p-2 bg-warning-background rounded-lg cursor-pointer pointer-events-auto"
+              @click.stop="
+                remove(appModeStore.selectedOutputs, (k) => k == key)
+              "
+              @pointerdown.stop
             >
               <i class="icon-[lucide--check] bg-text-foreground size-full" />
             </div>
             <div
               v-else
-              class="absolute -top-1/2 -right-1/2 size-full ring-warning-background/50 ring-4 ring-inset bg-component-node-background rounded-lg"
+              class="absolute -top-1/2 -right-1/2 size-full ring-warning-background/50 ring-4 ring-inset bg-component-node-background rounded-lg cursor-pointer pointer-events-auto"
+              @click.stop="appModeStore.selectedOutputs.push(key)"
+              @pointerdown.stop
             />
           </div>
         </div>

src/components/builder/IoItem.vue

@@ -33,8 +33,11 @@ const entries = computed(() => {
 </script>
 <template>
   <div class="p-2 my-2 rounded-lg flex items-center-safe">
-    <span class="mr-auto" v-text="title" />
-    <span class="text-muted-foreground mr-2 text-end" v-text="subTitle" />
+    <span class="mr-auto truncate shrink-1" v-text="title" />
+    <span
+      class="text-muted-foreground mr-2 text-end truncate shrink-3"
+      v-text="subTitle"
+    />
     <Popover :entries>
       <template #button>
         <Button variant="muted-textonly">