From c730bbce6b3138b32c23109ece910b0c372799b8 Mon Sep 17 00:00:00 2001
From: ComfyUI Wiki <contact@comfyui-wiki.com>
Date: Sun, 20 Jul 2025 09:14:14 +0800
Subject: [PATCH] refactor: extract markdown image gallery to separate
 component

- Create new MarkdownImageGallery component using PrimeVue Galleria directly
- Remove dependency on ResultGallery and ResultItemImpl
- Simplify image data structure with simple ImageItem interface
- Improve separation of concerns and maintainability
- Address review feedback to use dedicated component wrapper
---
 .../tabs/nodeLibrary/MarkdownImageGallery.vue | 148 ++++++++++++++++++
 .../sidebar/tabs/nodeLibrary/NodeHelpPage.vue |  45 ++----
 2 files changed, 162 insertions(+), 31 deletions(-)
 create mode 100644 src/components/sidebar/tabs/nodeLibrary/MarkdownImageGallery.vue

diff --git a/src/components/sidebar/tabs/nodeLibrary/MarkdownImageGallery.vue b/src/components/sidebar/tabs/nodeLibrary/MarkdownImageGallery.vue
new file mode 100644
index 000000000..f48b279e4
--- /dev/null
+++ b/src/components/sidebar/tabs/nodeLibrary/MarkdownImageGallery.vue
@@ -0,0 +1,148 @@
+<template>
+  <Galleria
+    v-model:visible="galleryVisible"
+    :active-index="activeIndex"
+    :value="imageItems"
+    :show-indicators="false"
+    change-item-on-indicator-hover
+    show-item-navigators
+    full-screen
+    circular
+    :show-thumbnails="false"
+    :pt="{
+      mask: {
+        onMousedown: onMaskMouseDown,
+        onMouseup: onMaskMouseUp,
+        'data-mask': true
+      },
+      prevButton: {
+        style: 'position: fixed !important'
+      },
+      nextButton: {
+        style: 'position: fixed !important'
+      }
+    }"
+    @update:visible="handleVisibilityChange"
+    @update:active-index="handleActiveIndexChange"
+  >
+    <template #item="{ item }">
+      <img
+        :src="item.url"
+        :alt="item.filename"
+        class="galleria-image"
+      />
+    </template>
+  </Galleria>
+</template>
+
+<script setup lang="ts">
+import Galleria from 'primevue/galleria'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+interface ImageItem {
+  url: string
+  filename: string
+}
+
+const props = defineProps<{
+  imageItems: ImageItem[]
+  activeIndex: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:activeIndex', value: number): void
+}>()
+
+const galleryVisible = ref(false)
+let maskMouseDownTarget: EventTarget | null = null
+
+const onMaskMouseDown = (event: MouseEvent) => {
+  maskMouseDownTarget = event.target
+}
+
+const onMaskMouseUp = (event: MouseEvent) => {
+  const maskEl = document.querySelector('[data-mask]')
+  if (
+    galleryVisible.value &&
+    maskMouseDownTarget === event.target &&
+    maskMouseDownTarget === maskEl
+  ) {
+    galleryVisible.value = false
+    handleVisibilityChange(false)
+  }
+}
+
+watch(
+  () => props.activeIndex,
+  (index) => {
+    if (index !== -1) {
+      galleryVisible.value = true
+    }
+  }
+)
+
+const handleVisibilityChange = (visible: boolean) => {
+  if (!visible) {
+    emit('update:activeIndex', -1)
+  }
+}
+
+const handleActiveIndexChange = (index: number) => {
+  emit('update:activeIndex', index)
+}
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (!galleryVisible.value) return
+
+  switch (event.key) {
+    case 'ArrowLeft':
+      navigateImage(-1)
+      break
+    case 'ArrowRight':
+      navigateImage(1)
+      break
+    case 'Escape':
+      galleryVisible.value = false
+      handleVisibilityChange(false)
+      break
+  }
+}
+
+const navigateImage = (direction: number) => {
+  const newIndex =
+    (props.activeIndex + direction + props.imageItems.length) %
+    props.imageItems.length
+  emit('update:activeIndex', newIndex)
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown)
+})
+</script>
+
+<style>
+/* PrimeVue's galleria teleports the fullscreen gallery out of subtree so we
+cannot use scoped style here. */
+img.galleria-image {
+  max-width: 100vw;
+  max-height: 100vh;
+  object-fit: contain;
+}
+
+.p-galleria-close-button {
+  /* Set z-index so the close button doesn't get hidden behind the image when image is large */
+  z-index: 1;
+}
+
+/* Mobile/tablet specific fixes */
+@media screen and (max-width: 768px) {
+  .p-galleria-prev-button,
+  .p-galleria-next-button {
+    z-index: 2;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
index 69633768c..efa977efe 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
@@ -84,9 +84,9 @@
   </div>
 
   <!-- Image Gallery for markdown images -->
-  <ResultGallery
+  <MarkdownImageGallery
     v-model:activeIndex="galleryActiveIndex"
-    :all-gallery-items="galleryItems"
+    :image-items="imageItems"
   />
 </template>
 
@@ -97,33 +97,13 @@ import ProgressSpinner from 'primevue/progressspinner'
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 
 import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
-import { ResultItemImpl } from '@/stores/queueStore'
 import { useNodeHelpStore } from '@/stores/workspace/nodeHelpStore'
 
-import ResultGallery from '../queue/ResultGallery.vue'
+import MarkdownImageGallery from './MarkdownImageGallery.vue'
 
-// Custom class for external markdown images
-class MarkdownImageItem extends ResultItemImpl {
-  private _externalUrl: string
-
-  constructor(externalUrl: string, filename: string, index: number) {
-    super({
-      filename,
-      subfolder: '',
-      type: 'output',
-      nodeId: `markdown-${index}`,
-      mediaType: 'images'
-    })
-    this._externalUrl = externalUrl
-  }
-
-  override get url(): string {
-    return this._externalUrl
-  }
-
-  override get urlWithTimestamp(): string {
-    return this._externalUrl
-  }
+interface ImageItem {
+  url: string
+  filename: string
 }
 
 const { node } = defineProps<{ node: ComfyNodeDefImpl }>()
@@ -137,7 +117,7 @@ defineEmits<{
 
 // Gallery state for image preview
 const markdownContainer = ref<HTMLElement | null>(null)
-const galleryItems = ref<MarkdownImageItem[]>([])
+const imageItems = ref<ImageItem[]>([])
 const galleryActiveIndex = ref(-1)
 
 const inputList = computed(() =>
@@ -168,13 +148,16 @@ function setupImagePreview() {
   // Only setup if there are images
   if (imgs.length === 0) return
 
-  // Update gallery items - create proper MarkdownImageItem instances
-  galleryItems.value = imgs.map((img, index) => {
+  // Update gallery items - create simple image items
+  imageItems.value = imgs.map((img, index) => {
     // Extract filename from URL
     const url = new URL(img.src, window.location.origin)
     const filename = url.pathname.split('/').pop() || `image-${index}.jpg`
 
-    return new MarkdownImageItem(img.src, filename, index)
+    return {
+      url: img.src,
+      filename
+    }
   })
 
   // Add click handlers to images
@@ -192,7 +175,7 @@ function setupImagePreview() {
 // Reset setup flag when content changes
 function resetImagePreviewSetup() {
   imagePreviewSetup.value = false
-  galleryItems.value = []
+  imageItems.value = []
   galleryActiveIndex.value = -1
 }