From 255a7fe4133ec8b14722472de3349beaed60db47 Mon Sep 17 00:00:00 2001
From: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Date: Mon, 26 Aug 2024 21:10:01 +0100
Subject: [PATCH] Enhancements to the queue image feed  - Change flat list icon
  - Add cover/contain mode  - Add right click -> go to node  - Add go to node
 link on detail

---
 src/components/common/ComfyImage.vue          | 71 ++++++++++++++++---
 .../sidebar/tabs/QueueSidebarTab.vue          | 35 ++++++++-
 .../sidebar/tabs/queue/ResultGallery.vue      |  7 +-
 .../sidebar/tabs/queue/ResultItem.vue         | 21 +++---
 .../sidebar/tabs/queue/TaskItem.vue           | 20 +++++-
 src/i18n.ts                                   |  5 +-
 src/stores/queueStore.ts                      |  9 ++-
 src/stores/settingStore.ts                    |  8 +++
 8 files changed, 148 insertions(+), 28 deletions(-)

diff --git a/src/components/common/ComfyImage.vue b/src/components/common/ComfyImage.vue
index 978aeec1..c2480e66 100644
--- a/src/components/common/ComfyImage.vue
+++ b/src/components/common/ComfyImage.vue
@@ -1,10 +1,24 @@
 <!-- A image with placeholder fallback on error -->
 <template>
-  <img
-    :src="src"
-    @error="handleImageError"
-    :class="[{ 'broken-image': imageBroken }, ...classArray]"
-  />
+  <span
+    v-if="!imageBroken"
+    class="comfy-image-wrap"
+    :class="[{ contain: contain }]"
+  >
+    <img
+      v-if="contain"
+      :src="src"
+      :data-test="src"
+      class="comfy-image-blur"
+      :style="{ 'background-image': `url(${src})` }"
+    />
+    <img
+      :src="src"
+      @error="handleImageError"
+      class="comfy-image-main"
+      :class="[...classArray]"
+    />
+  </span>
   <div v-if="imageBroken" class="broken-image-placeholder">
     <i class="pi pi-image"></i>
     <span>{{ $t('imageFailedToLoad') }}</span>
@@ -14,10 +28,16 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 
-const props = defineProps<{
-  src: string
-  class?: string | string[] | object
-}>()
+const props = withDefaults(
+  defineProps<{
+    src: string
+    class?: string | string[] | object
+    contain: boolean
+  }>(),
+  {
+    contain: false
+  }
+)
 
 const imageBroken = ref(false)
 const handleImageError = (e: Event) => {
@@ -37,8 +57,37 @@ const classArray = computed(() => {
 </script>
 
 <style scoped>
-.broken-image {
-  display: none;
+.comfy-image-wrap {
+  display: contents;
+}
+
+.comfy-image-blur {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.comfy-image-main {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  z-index: 1;
+}
+
+.contain .comfy-image-wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.contain .comfy-image-main {
+  object-fit: contain;
+  backdrop-filter: blur(10px);
+  position: absolute;
 }
 
 .broken-image-placeholder {
diff --git a/src/components/sidebar/tabs/QueueSidebarTab.vue b/src/components/sidebar/tabs/QueueSidebarTab.vue
index 0c0af661..71180f61 100644
--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -1,6 +1,18 @@
 <template>
   <SidebarTabTemplate :title="$t('sideToolbar.queue')">
     <template #tool-buttons>
+      <Button
+        :icon="
+          imageFit === 'cover'
+            ? 'pi pi-arrow-down-left-and-arrow-up-right-to-center'
+            : 'pi pi-arrow-up-right-and-arrow-down-left-from-center'
+        "
+        text
+        severity="secondary"
+        @click="toggleImageFit"
+        class="toggle-expanded-button"
+        v-tooltip="$t(`sideToolbar.queueTab.${imageFit}ImagePreview`)"
+      />
       <Button
         v-if="isInFolderView"
         icon="pi pi-arrow-left"
@@ -12,7 +24,7 @@
       />
       <template v-else>
         <Button
-          :icon="isExpanded ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
+          :icon="isExpanded ? 'pi pi-images' : 'pi pi-image'"
           text
           severity="secondary"
           @click="toggleExpanded"
@@ -80,10 +92,14 @@ import SidebarTabTemplate from './SidebarTabTemplate.vue'
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { TaskItemImpl, useQueueStore } from '@/stores/queueStore'
 import { api } from '@/scripts/api'
+import { ComfyNode } from '@/types/comfyWorkflow'
+import { useSettingStore } from '@/stores/settingStore'
 
+const IMAGE_FIT = 'Comfy.Queue.ImageFit'
 const confirm = useConfirm()
 const toast = useToast()
 const queueStore = useQueueStore()
+const settingStore = useSettingStore()
 const { t } = useI18n()
 
 // Expanded view: show all outputs in a flat list.
@@ -95,6 +111,7 @@ const galleryActiveIndex = ref(-1)
 // Folder view: only show outputs from a single selected task.
 const folderTask = ref<TaskItemImpl | null>(null)
 const isInFolderView = computed(() => folderTask.value !== null)
+const imageFit = computed<string>(() => settingStore.get(IMAGE_FIT))
 
 const ITEMS_PER_PAGE = 8
 const SCROLL_THRESHOLD = 100 // pixels from bottom to trigger load
@@ -204,6 +221,7 @@ const onStatus = async () => {
 
 const menu = ref(null)
 const menuTargetTask = ref<TaskItemImpl | null>(null)
+const menuTargetNode = ref<ComfyNode | null>(null)
 const menuItems = computed<MenuItem[]>(() => [
   {
     label: t('delete'),
@@ -215,17 +233,26 @@ const menuItems = computed<MenuItem[]>(() => [
     label: t('loadWorkflow'),
     icon: 'pi pi-file-export',
     command: () => menuTargetTask.value?.loadWorkflow()
+  },
+  {
+    label: t('goToNode'),
+    icon: 'pi pi-arrow-circle-right',
+    command: () => menuTargetTask.value?.goToNode(menuTargetNode.value),
+    visible: !!menuTargetNode.value
   }
 ])
 
 const handleContextMenu = ({
   task,
-  event
+  event,
+  node
 }: {
   task: TaskItemImpl
   event: Event
+  node?: ComfyNode
 }) => {
   menuTargetTask.value = task
+  menuTargetNode.value = node
   menu.value?.show(event)
 }
 
@@ -245,6 +272,10 @@ const exitFolderView = () => {
   updateVisibleTasks()
 }
 
+const toggleImageFit = () => {
+  settingStore.set(IMAGE_FIT, imageFit.value === 'cover' ? 'contain' : 'cover')
+}
+
 onMounted(() => {
   api.addEventListener('status', onStatus)
   queueStore.update()
diff --git a/src/components/sidebar/tabs/queue/ResultGallery.vue b/src/components/sidebar/tabs/queue/ResultGallery.vue
index a8964cc6..f0d9870b 100644
--- a/src/components/sidebar/tabs/queue/ResultGallery.vue
+++ b/src/components/sidebar/tabs/queue/ResultGallery.vue
@@ -13,7 +13,12 @@
     :showThumbnails="false"
   >
     <template #item="{ item }">
-      <ComfyImage :key="item.url" :src="item.url" class="galleria-image" />
+      <ComfyImage
+        :key="item.url"
+        :src="item.url"
+        :contain="false"
+        class="galleria-image"
+      />
     </template>
   </Galleria>
 </template>
diff --git a/src/components/sidebar/tabs/queue/ResultItem.vue b/src/components/sidebar/tabs/queue/ResultItem.vue
index 1769f029..b2759337 100644
--- a/src/components/sidebar/tabs/queue/ResultItem.vue
+++ b/src/components/sidebar/tabs/queue/ResultItem.vue
@@ -3,6 +3,11 @@
     <template
       v-if="result.mediaType === 'images' || result.mediaType === 'gifs'"
     >
+      <ComfyImage
+        :src="result.url"
+        class="task-output-image"
+        :contain="imageFit === 'contain'"
+      />
       <div class="image-preview-mask">
         <Button
           icon="pi pi-eye"
@@ -11,7 +16,6 @@
           rounded
         />
       </div>
-      <ComfyImage :src="result.url" class="task-output-image" />
     </template>
     <!-- TODO: handle more media types -->
     <div v-else class="task-result-preview">
@@ -25,7 +29,8 @@
 import { ResultItemImpl } from '@/stores/queueStore'
 import ComfyImage from '@/components/common/ComfyImage.vue'
 import Button from 'primevue/button'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { useSettingStore } from '@/stores/settingStore'
 
 const props = defineProps<{
   result: ResultItemImpl
@@ -36,6 +41,10 @@ const emit = defineEmits<{
 }>()
 
 const resultContainer = ref<HTMLElement | null>(null)
+const settingStore = useSettingStore()
+const imageFit = computed<string>(() =>
+  settingStore.get('Comfy.Queue.ImageFit')
+)
 
 onMounted(() => {
   if (props.result.mediaType === 'images') {
@@ -58,13 +67,6 @@ onMounted(() => {
   align-items: center;
 }
 
-:deep(.task-output-image) {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-}
-
 .image-preview-mask {
   position: absolute;
   left: 50%;
@@ -75,6 +77,7 @@ onMounted(() => {
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
+  z-index: 1;
 }
 
 .result-container:hover .image-preview-mask {
diff --git a/src/components/sidebar/tabs/queue/TaskItem.vue b/src/components/sidebar/tabs/queue/TaskItem.vue
index 1d6772fe..39ca6c4b 100644
--- a/src/components/sidebar/tabs/queue/TaskItem.vue
+++ b/src/components/sidebar/tabs/queue/TaskItem.vue
@@ -28,7 +28,13 @@
     <div class="task-item-details">
       <div class="tag-wrapper status-tag-group">
         <Tag v-if="isFlatTask && task.isHistory" class="node-name-tag">
-          {{ node?.type }} (#{{ node?.id }})
+          <Button
+            class="task-node-link"
+            :label="`${node?.type} (#${node?.id})`"
+            link
+            size="small"
+            @click="task.goToNode(node?.id)"
+          />
         </Tag>
         <Tag :severity="taskTagSeverity(task.displayStatus)">
           <span v-html="taskStatusText(task.displayStatus)"></span>
@@ -77,13 +83,16 @@ const node: ComfyNode | null = flatOutputs.length
   : null
 
 const emit = defineEmits<{
-  (e: 'contextmenu', value: { task: TaskItemImpl; event: MouseEvent }): void
+  (
+    e: 'contextmenu',
+    value: { task: TaskItemImpl; event: MouseEvent; node?: ComfyNode }
+  ): void
   (e: 'preview', value: TaskItemImpl): void
   (e: 'task-output-length-clicked', value: TaskItemImpl): void
 }>()
 
 const handleContextMenu = (e: MouseEvent) => {
-  emit('contextmenu', { task: props.task, event: e })
+  emit('contextmenu', { task: props.task, event: e, node })
 }
 
 const handlePreview = () => {
@@ -164,6 +173,11 @@ const formatTime = (time?: number) => {
   justify-content: space-between;
   align-items: center;
   width: 100%;
+  z-index: 1;
+}
+
+.task-node-link {
+  padding: 2px;
 }
 
 /* In dark mode, transparent background color for tags is not ideal for tags that
diff --git a/src/i18n.ts b/src/i18n.ts
index d2b12194..efca5cf3 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -27,6 +27,7 @@ const messages = {
     experimental: 'BETA',
     deprecated: 'DEPR',
     loadWorkflow: 'Load Workflow',
+    goToNode: 'Go to Node',
     settings: 'Settings',
     searchSettings: 'Search Settings',
     searchNodes: 'Search Nodes',
@@ -45,7 +46,9 @@ const messages = {
       },
       queueTab: {
         showFlatList: 'Show Flat List',
-        backToAllTasks: 'Back to All Tasks'
+        backToAllTasks: 'Back to All Tasks',
+        containImagePreview: 'Fill Image Preview',
+        coverImagePreview: 'Fit Image Preview'
       }
     }
   },
diff --git a/src/stores/queueStore.ts b/src/stores/queueStore.ts
index 6ca70e48..1627a63a 100644
--- a/src/stores/queueStore.ts
+++ b/src/stores/queueStore.ts
@@ -9,7 +9,7 @@ import type {
   TaskOutput,
   ResultItem
 } from '@/types/apiTypes'
-import type { NodeId } from '@/types/comfyWorkflow'
+import type { ComfyNode, NodeId } from '@/types/comfyWorkflow'
 import { plainToClass } from 'class-transformer'
 import _ from 'lodash'
 import { defineStore } from 'pinia'
@@ -220,6 +220,13 @@ export class TaskItemImpl {
     }
   }
 
+  public goToNode(node: ComfyNode | string | number) {
+    const id = typeof node === 'object' ? node.id : node
+    const graphNode = app.graph.getNodeById(id as number)
+    if (!graphNode) return
+    app.canvas.centerOnNode(graphNode)
+  }
+
   public flatten(): TaskItemImpl[] {
     if (this.displayStatus !== TaskItemDisplayStatus.Completed) {
       return [this]
diff --git a/src/stores/settingStore.ts b/src/stores/settingStore.ts
index 65ed2b5d..cee7f764 100644
--- a/src/stores/settingStore.ts
+++ b/src/stores/settingStore.ts
@@ -219,6 +219,14 @@ export const useSettingStore = defineStore('setting', {
         type: 'hidden',
         defaultValue: {}
       })
+
+      // Hidden setting used by the queue for how to fit images
+      app.ui.settings.addSetting({
+        id: 'Comfy.Queue.ImageFit',
+        name: 'Queue image fit',
+        type: 'hidden',
+        defaultValue: 'cover'
+      })
     },
 
     set<K extends keyof Settings>(key: K, value: Settings[K]) {