Merge branch 'main' into fix-ogg-syntax-9256

Author: xeinherjer-dev

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -155,15 +155,17 @@ const unifiedWidth = computed(() =>
 
 const { focusMode } = storeToRefs(workspaceStore)
 
-const { isSelectMode } = useAppMode()
+const { isSelectMode, isBuilderMode } = useAppMode()
 const { activeSidebarTabId, activeSidebarTab } = storeToRefs(sidebarTabStore)
 const { bottomPanelVisible } = storeToRefs(useBottomPanelStore())
 const { isOpen: rightSidePanelVisible } = storeToRefs(rightSidePanelStore)
 const showOffsideSplitter = computed(
   () => rightSidePanelVisible.value || isSelectMode.value
 )
 
-const sidebarPanelVisible = computed(() => activeSidebarTab.value !== null)
+const sidebarPanelVisible = computed(
+  () => activeSidebarTab.value !== null && !isBuilderMode.value
+)
 
 const sidebarStateKey = computed(() => {
   return unifiedWidth.value

src/components/appMode/AppModeToolbar.vue

@@ -9,11 +9,13 @@ import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { cn } from '@/utils/tailwindUtil'
 import { useAppMode } from '@/composables/useAppMode'
+import { useAppModeStore } from '@/stores/appModeStore'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()
 const workspaceStore = useWorkspaceStore()
-const { enableAppBuilder, setMode } = useAppMode()
+const { enableAppBuilder } = useAppMode()
+const { enterBuilder } = useAppModeStore()
 const tooltipOptions = { showDelay: 300, hideDelay: 300 }
 
 const isAssetsActive = computed(
@@ -23,10 +25,6 @@ const isWorkflowsActive = computed(
   () => workspaceStore.sidebarTab.activeSidebarTab?.id === 'workflows'
 )
 
-function enterBuilderMode() {
-  setMode('builder:select')
-}
-
 function openAssets() {
   void commandStore.execute('Workspace.ToggleSidebarTab.assets')
 }
@@ -75,7 +73,7 @@ function openTemplates() {
       size="unset"
       :aria-label="t('linearMode.appModeToolbar.appBuilder')"
       class="size-10 rounded-lg"
-      @click="enterBuilderMode"
+      @click="enterBuilder"
     >
       <i class="icon-[lucide--hammer] size-4" />
     </Button>

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">

src/components/rightSidePanel/layout/PropertiesAccordionItem.vue

@@ -11,13 +11,15 @@ const {
   enableEmptyState,
   tooltip,
   size = 'default',
+  tooltipDelay = 1000,
   class: className
 } = defineProps<{
   disabled?: boolean
   label?: string
   enableEmptyState?: boolean
   tooltip?: string
   size?: 'default' | 'lg'
+  tooltipDelay?: number
   class?: string
 }>()
 
@@ -27,7 +29,7 @@ const isExpanded = computed(() => !isCollapse.value && !disabled)
 
 const tooltipConfig = computed(() => {
   if (!tooltip) return undefined
-  return { value: tooltip, showDelay: 1000 }
+  return { value: tooltip, showDelay: tooltipDelay }
 })
 </script>
 

src/composables/graph/useMoreOptionsMenu.ts

@@ -1,7 +1,12 @@
 import { computed, ref } from 'vue'
 import type { Ref } from 'vue'
 
-import type { LGraphGroup, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { isPromotedWidgetView } from '@/core/graph/subgraph/promotedWidgetTypes'
+import type {
+  LGraphGroup,
+  LGraphNode,
+  NodeId
+} from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { getExtraOptionsForWidget } from '@/services/litegraphService'
 import { isLGraphGroup } from '@/utils/litegraphUtil'
@@ -46,7 +51,7 @@ export enum BadgeVariant {
 // Global singleton for NodeOptions component reference
 let nodeOptionsInstance: null | NodeOptionsInstance = null
 
-const hoveredWidgetName = ref<string>()
+const hoveredWidget = ref<[string, NodeId | undefined]>()
 
 /**
  * Toggle the node options popover
@@ -63,14 +68,12 @@ export function toggleNodeOptions(event: Event) {
  * Use this for contextmenu events where we always want to show at the new position
  * @param event - The trigger event (must be MouseEvent for position)
  */
-export function showNodeOptions(event: MouseEvent) {
-  hoveredWidgetName.value = undefined
-  const target = event.target
-  if (target instanceof HTMLElement) {
-    const widgetEl = target.closest('.lg-node-widget')
-    if (widgetEl instanceof HTMLElement)
-      hoveredWidgetName.value = widgetEl.dataset.widgetName
-  }
+export function showNodeOptions(
+  event: MouseEvent,
+  widgetName?: string,
+  nodeId?: NodeId
+) {
+  hoveredWidget.value = widgetName ? [widgetName, nodeId] : undefined
   if (nodeOptionsInstance?.show) {
     nodeOptionsInstance.show(event)
   }
@@ -259,8 +262,16 @@ export function useMoreOptionsMenu() {
       options.push(...getImageMenuOptions(selectedNodes.value[0]))
       options.push({ type: 'divider' })
     }
-    const rawName = hoveredWidgetName.value
-    const widget = node?.widgets?.find((w) => w.name === rawName)
+    const [widgetName, nodeId] = hoveredWidget.value ?? []
+    const widget =
+      nodeId !== undefined
+        ? node?.widgets?.find(
+            (w) =>
+              isPromotedWidgetView(w) &&
+              w.sourceWidgetName === widgetName &&
+              w.sourceNodeId === nodeId
+          )
+        : node?.widgets?.find((w) => w.name === widgetName)
     if (widget) {
       const widgetOptions = convertContextMenuToOptions(
         getExtraOptionsForWidget(node, widget)

src/locales/en/main.json

@@ -3056,11 +3056,11 @@
       "promptAddInputs": "Click on node parameters to add them here as inputs",
       "noInputs": "No inputs added yet",
       "inputsDesc": "Users will interact and adjust these to generate their outputs.",
-      "inputsExample": "Examples: “Load image”, “Text prompt”, “Steps”",
+      "inputsExample": "Examples: “Load\u00a0image”, “Text\u00a0prompt”, “Steps”",
       "promptAddOutputs": "Click on output nodes to add them here. These will be the generated results.",
       "noOutputs": "No output nodes added yet",
       "outputsDesc": "Connect at least one output node so users can see results after running.",
-      "outputsExample": "Examples: “Save Image” or “Save Video”"
+      "outputsExample": "Examples: “Save\u00a0Image” or “Save\u00a0Video”"
     },
     "queue": {
       "clickToClear": "Click to clear queue",

src/renderer/extensions/linearMode/AppInput.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { remove } from 'es-toolkit'
+import { computed } from 'vue'
+
+import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
+import { useAppModeStore } from '@/stores/appModeStore'
+import { cn } from '@/utils/tailwindUtil'
+
+const { id, name } = defineProps<{
+  id: string
+  isSelectMode: boolean
+  name: string
+}>()
+
+const appModeStore = useAppModeStore()
+const isPromoted = computed(() => appModeStore.selectedInputs.some(matchesThis))
+
+function matchesThis([nodeId, widgetName]: [NodeId, string]) {
+  return id == nodeId && name === widgetName
+}
+function togglePromotion() {
+  if (isPromoted.value) remove(appModeStore.selectedInputs, matchesThis)
+  else appModeStore.selectedInputs.push([id, name])
+}
+</script>
+<template>
+  <div
+    v-if="isSelectMode"
+    class="col-span-2 flex flex-row pointer-events-auto cursor-pointer gap-1 relative"
+    @pointerdown.capture.stop.prevent="togglePromotion"
+    @click.capture.stop.prevent
+    @pointerup.capture.stop.prevent
+    @pointermove.capture.stop.prevent
+    @contextmenu.capture.stop.prevent
+  >
+    <div
+      :class="
+        cn(
+          'border-primary-background border rounded-sm size-4 self-center m-1',
+          isPromoted && 'bg-primary-background flex items-center'
+        )
+      "
+    >
+      <i
+        v-if="isPromoted"
+        class="icon-[lucide--check] bg-primary-foreground place-center"
+      />
+    </div>
+    <div
+      :class="
+        cn(
+          'grid grid-cols-2 items-stretch ring-primary-background rounded-lg pointer-events-none flex-1',
+          isPromoted && 'ring-2'
+        )
+      "
+    >
+      <slot />
+    </div>
+    <div class="absolute size-full hover:bg-primary-background/10 rounded-lg" />
+  </div>
+  <slot v-else />
+</template>