From eee096120a794d98dac722441dc73d09762e6baa Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Wed, 31 Dec 2025 11:41:07 -0800
Subject: [PATCH] Preview dimensions for images

Need to put some further thought into handling other types

Adding a global ref here is bad.
Creating stub components for each preview type is bad
Each preview type needs different handling for calculation of it's
dimensions/type
---
 .../extensions/linearMode/ImagePreview.vue    | 24 +++++++++++++++++++
 src/views/LinearView.vue                      | 24 ++++++++-----------
 2 files changed, 34 insertions(+), 14 deletions(-)
 create mode 100644 src/renderer/extensions/linearMode/ImagePreview.vue

diff --git a/src/renderer/extensions/linearMode/ImagePreview.vue b/src/renderer/extensions/linearMode/ImagePreview.vue
new file mode 100644
index 000000000..23d6c7c15
--- /dev/null
+++ b/src/renderer/extensions/linearMode/ImagePreview.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+
+import ZoomPane from '@/components/ui/ZoomPane.vue'
+
+const { src } = defineProps<{
+  src: string
+}>()
+
+const imageRef = useTemplateRef('imageRef')
+</script>
+<template>
+  <ZoomPane v-slot="slotProps" class="flex-1 w-full">
+    <img ref="imageRef" :src v-bind="slotProps" />
+  </ZoomPane>
+  <span
+    class="self-center z-10"
+    v-text="
+      imageRef?.naturalWidth && imageRef?.naturalHeight
+        ? `${imageRef.naturalWidth} x ${imageRef.naturalHeight}`
+        : ''
+    "
+  />
+</template>
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index 4388f9fe6..9b19c64e9 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -18,7 +18,6 @@ import { downloadFile } from '@/base/common/downloadUtil'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import Popover from '@/components/ui/Popover.vue'
-import ZoomPane from '@/components/ui/ZoomPane.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { safeWidgetMapper } from '@/composables/graph/useGraphNodeManager'
 import { d, t } from '@/i18n'
@@ -36,6 +35,7 @@ import { useWorkflowStore } from '@/platform/workflow/management/stores/workflow
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import DropZone from '@/renderer/extensions/linearMode/DropZone.vue'
+import ImagePreview from '@/renderer/extensions/linearMode/ImagePreview.vue'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
 import WidgetInputNumberInput from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
 import { app } from '@/scripts/app'
@@ -461,12 +461,12 @@ onKeyStroke('ArrowUp', gotoPreviousOutput)
       </SplitterPanel>
       <SplitterPanel
         :size="98"
-        class="flex flex-col min-w-min gap-4 mx-2 px-10 py-8 relative"
+        class="flex flex-col min-w-min gap-4 mx-2 px-10 py-8 relative text-muted-foreground"
         @wheel.capture="handleCenterWheel"
       >
         <linear-output-info
           v-if="activeItem"
-          class="flex gap-2 p-1 text-muted-foreground w-full items-center z-10"
+          class="flex gap-2 p-1 w-full items-center z-10"
         >
           <div
             v-for="({ content, iconClass }, index) in itemStats"
@@ -509,18 +509,14 @@ onKeyStroke('ArrowUp', gotoPreviousOutput)
             icon="icon-[lucide--ellipsis]"
           />
         </linear-output-info>
-        <ZoomPane
+        <ImagePreview
           v-if="preview?.mediaType === 'images'"
-          v-slot="slotProps"
-          class="flex-1 w-full"
-        >
-          <img
-            v-if="activeLoad[0] === -1 && activeLoad[1] === -1 && hasPreview"
-            :src="nodeOutputStore.latestPreview[0]"
-            v-bind="slotProps"
-          />
-          <img v-else :src="preview.url" v-bind="slotProps" />
-        </ZoomPane>
+          :src="
+            activeLoad[0] === -1 && activeLoad[1] === -1 && hasPreview
+              ? nodeOutputStore.latestPreview[0]
+              : preview.url
+          "
+        />
         <!--FIXME: core videos are type 'images', VHS still wrapped as 'gifs'-->
         <video
           v-else-if="preview?.mediaType === 'gifs'"