Further linear fixes (#8074)

┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8074-Further-linear-fixes-2e96d73d365081efb74bf150982c7a66) by [Unito](https://www.unito.io)
2026-03-06 13:40:25 +00:00 · 2026-01-15 14:45:19 -08:00
parent aff7f2a296
commit 0d5ca96a2b
11 changed files with 122 additions and 76 deletions
--- a/src/renderer/extensions/linearMode/DropZone.vue
+++ b/src/renderer/extensions/linearMode/DropZone.vue
@@ -7,8 +7,9 @@ defineProps<{
  onDragOver?: (e: DragEvent) => boolean
  onDragDrop?: (e: DragEvent) => Promise<boolean> | boolean
  dropIndicator?: {
-    label?: string
    iconClass?: string
+    imageUrl?: string
+    label?: string
    onClick?: (e: MouseEvent) => void
  }
 }>()
@@ -44,8 +45,15 @@ const canAcceptDrop = ref(false)
      "
      @click.prevent="dropIndicator?.onClick?.($event)"
    >
-      <span v-if="dropIndicator.label" v-text="dropIndicator.label" />
-      <i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />
+      <img
+        v-if="dropIndicator?.imageUrl"
+        class="h-23"
+        :src="dropIndicator?.imageUrl"
+      />
+      <template v-else>
+        <span v-if="dropIndicator.label" v-text="dropIndicator.label" />
+        <i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />
+      </template>
    </div>
  </div>
  <slot v-else />
--- a/src/renderer/extensions/linearMode/LinearControls.vue
+++ b/src/renderer/extensions/linearMode/LinearControls.vue
@@ -18,6 +18,7 @@ import DropZone from '@/renderer/extensions/linearMode/DropZone.vue'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
 import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeStyleUtils'
 import WidgetInputNumberInput from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
+import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
 import { useCommandStore } from '@/stores/commandStore'
 import { useExecutionStore } from '@/stores/executionStore'
@@ -50,15 +51,26 @@ useEventListener(
  () => (graphNodes.value = app.rootGraph.nodes)
 )

+function getDropIndicator(node: LGraphNode) {
+  if (node.type !== 'LoadImage') return undefined
+
+  const filename = node.widgets?.[0]?.value
+  const resultItem = { type: 'input', filename: `${filename}` }
+
+  return {
+    iconClass: 'icon-[lucide--image]',
+    imageUrl: filename
+      ? api.apiURL(
+          `/view?${new URLSearchParams(resultItem)}${app.getPreviewFormatParam()}`
+        )
+      : undefined,
+    label: t('linearMode.dragAndDropImage'),
+    onClick: () => node.widgets?.[1]?.callback?.(undefined)
+  }
+}
+
 function nodeToNodeData(node: LGraphNode) {
-  const dropIndicator =
-    node.type !== 'LoadImage'
-      ? undefined
-      : {
-          iconClass: 'icon-[lucide--image]',
-          label: t('linearMode.dragAndDropImage'),
-          onClick: () => node.widgets?.[1]?.callback?.(undefined)
-        }
+  const dropIndicator = getDropIndicator(node)
  const nodeData = extractVueNodeData(node)
  for (const widget of nodeData.widgets ?? []) widget.slotMetadata = undefined

@@ -107,7 +119,7 @@ async function runButtonClick(e: Event) {
      : 'Comfy.QueuePrompt'

    useTelemetry()?.trackUiButtonClicked({
-      button_id: 'queue_run_linear'
+      button_id: props.mobile ? 'queue_run_linear_mobile' : 'queue_run_linear'
    })
    if (batchCount.value > 1) {
      useTelemetry()?.trackUiButtonClicked({
@@ -196,7 +208,7 @@ defineExpose({ runButtonClick })
            <NodeWidgets
              :node-data
              :style="{ background: applyLightThemeColor(nodeData.bgcolor) }"
-              class="py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0 rounded-lg"
+              class="py-3 gap-y-3 **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0 rounded-lg max-w-100"
            />
          </template>
        </div>
--- a/src/renderer/extensions/linearMode/LinearPreview.vue
+++ b/src/renderer/extensions/linearMode/LinearPreview.vue
@@ -159,7 +159,7 @@ async function rerun(e: Event) {
  <VideoPreview
    v-else-if="getMediaType(selectedOutput) === 'video'"
    :src="selectedOutput!.url"
-    class="object-contain flex-1 contain-size"
+    class="object-contain flex-1 md:contain-size"
  />
  <audio
    v-else-if="getMediaType(selectedOutput) === 'audio'"
@@ -178,7 +178,7 @@ async function rerun(e: Event) {
  />
  <img
    v-else
-    class="pointer-events-none object-contain flex-1 max-h-full brightness-50 opacity-10"
+    class="pointer-events-none object-contain flex-1 max-h-full md:contain-size brightness-50 opacity-10"
    src="/assets/images/comfy-logo-mono.svg"
  />
 </template>
--- a/src/renderer/extensions/linearMode/OutputHistory.vue
+++ b/src/renderer/extensions/linearMode/OutputHistory.vue
@@ -217,7 +217,7 @@ useEventListener(document.body, 'keydown', (e: KeyboardEvent) => {
      <ModeToggle />
    </div>
    <div class="border-border-subtle md:border-r" />
-    <WorkflowsSidebarTab v-if="displayWorkflows" class="min-w-50" />
+    <WorkflowsSidebarTab v-if="displayWorkflows" class="min-w-50 grow-1" />
    <article
      v-else
      ref="outputsRef"
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.test.ts
@@ -215,7 +215,8 @@ describe('useComboWidget', () => {
      'asset',
      'ckpt_name',
      'model1.safetensors',
-      expect.any(Function)
+      expect.any(Function),
+      expect.any(Object)
    )
    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
    expect(vi.mocked(assetService.isAssetBrowserEligible)).toHaveBeenCalledWith(
@@ -250,7 +251,8 @@ describe('useComboWidget', () => {
      'asset',
      'ckpt_name',
      'fallback.safetensors',
-      expect.any(Function)
+      expect.any(Function),
+      expect.any(Object)
    )
    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
    expect(widget).toBe(mockWidget)
@@ -280,7 +282,8 @@ describe('useComboWidget', () => {
      'asset',
      'ckpt_name',
      'Select model', // Should fallback to this instead of undefined
-      expect.any(Function)
+      expect.any(Function),
+      expect.any(Object)
    )
    expect(mockSettingStoreGet).toHaveBeenCalledWith('Comfy.Assets.UseAssetAPI')
    expect(widget).toBe(mockWidget)
--- a/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
+++ b/src/renderer/extensions/vueNodes/widgets/composables/useComboWidget.ts
@@ -4,7 +4,10 @@ import MultiSelectWidget from '@/components/graph/widgets/MultiSelectWidget.vue'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { isAssetWidget, isComboWidget } from '@/lib/litegraph/src/litegraph'
-import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
+import type {
+  IBaseWidget,
+  IWidgetAssetOptions
+} from '@/lib/litegraph/src/types/widgets'
 import { useAssetBrowserDialog } from '@/platform/assets/composables/useAssetBrowserDialog'
 import {
  assetFilenameSchema,
@@ -91,55 +94,59 @@ const createAssetBrowserWidget = (
  const displayLabel = currentValue ?? t('widgets.selectModel')
  const assetBrowserDialog = useAssetBrowserDialog()

+  async function openModal(this: IBaseWidget) {
+    if (!isAssetWidget(widget)) {
+      throw new Error(`Expected asset widget but received ${widget.type}`)
+    }
+    await assetBrowserDialog.show({
+      nodeType: node.comfyClass || '',
+      inputName: inputSpec.name,
+      currentValue: widget.value,
+      onAssetSelected: (asset) => {
+        const validatedAsset = assetItemSchema.safeParse(asset)
+
+        if (!validatedAsset.success) {
+          console.error(
+            'Invalid asset item:',
+            validatedAsset.error.errors,
+            'Received:',
+            asset
+          )
+          return
+        }
+
+        const filename = validatedAsset.data.user_metadata?.filename
+        const validatedFilename = assetFilenameSchema.safeParse(filename)
+
+        if (!validatedFilename.success) {
+          console.error(
+            'Invalid asset filename:',
+            validatedFilename.error.errors,
+            'for asset:',
+            validatedAsset.data.id
+          )
+          return
+        }
+
+        const oldValue = widget.value
+        this.value = validatedFilename.data
+        node.onWidgetChanged?.(
+          widget.name,
+          validatedFilename.data,
+          oldValue,
+          widget
+        )
+      }
+    })
+  }
+  const options: IWidgetAssetOptions = { openModal }
+
  const widget = node.addWidget(
    'asset',
    inputSpec.name,
    displayLabel,
-    async function (this: IBaseWidget) {
-      if (!isAssetWidget(widget)) {
-        throw new Error(`Expected asset widget but received ${widget.type}`)
-      }
-      await assetBrowserDialog.show({
-        nodeType: node.comfyClass || '',
-        inputName: inputSpec.name,
-        currentValue: widget.value,
-        onAssetSelected: (asset) => {
-          const validatedAsset = assetItemSchema.safeParse(asset)
-
-          if (!validatedAsset.success) {
-            console.error(
-              'Invalid asset item:',
-              validatedAsset.error.errors,
-              'Received:',
-              asset
-            )
-            return
-          }
-
-          const filename = validatedAsset.data.user_metadata?.filename
-          const validatedFilename = assetFilenameSchema.safeParse(filename)
-
-          if (!validatedFilename.success) {
-            console.error(
-              'Invalid asset filename:',
-              validatedFilename.error.errors,
-              'for asset:',
-              validatedAsset.data.id
-            )
-            return
-          }
-
-          const oldValue = widget.value
-          this.value = validatedFilename.data
-          node.onWidgetChanged?.(
-            widget.name,
-            validatedFilename.data,
-            oldValue,
-            widget
-          )
-        }
-      })
-    }
+    () => undefined,
+    options
  )

  return widget