From 08a1fd00567dec72e8d9aaa828574537f6fe2aa2 Mon Sep 17 00:00:00 2001
From: bymyself <abolkonsky.rem@gmail.com>
Date: Fri, 6 Sep 2024 23:32:56 -0700
Subject: [PATCH] Dismiss gallery lightbox on background click  (#752)

* Dismiss gallery on background click

* Add vitest tests
---
 .../sidebar/tabs/queue/ResultGallery.vue      | 25 ++++++
 .../queue/__tests__/ResultGallery.spec.ts     | 81 +++++++++++++++++++
 2 files changed, 106 insertions(+)
 create mode 100644 src/components/sidebar/tabs/queue/__tests__/ResultGallery.spec.ts

diff --git a/src/components/sidebar/tabs/queue/ResultGallery.vue b/src/components/sidebar/tabs/queue/ResultGallery.vue
index fdc94b0c7..c842976ef 100644
--- a/src/components/sidebar/tabs/queue/ResultGallery.vue
+++ b/src/components/sidebar/tabs/queue/ResultGallery.vue
@@ -11,6 +11,13 @@
     fullScreen
     circular
     :showThumbnails="false"
+    :pt="{
+      mask: {
+        onMousedown: onMaskMouseDown,
+        onMouseup: onMaskMouseUp,
+        'data-mask': true
+      }
+    }"
   >
     <template #item="{ item }">
       <ComfyImage
@@ -40,6 +47,24 @@ const props = defineProps<{
   activeIndex: number
 }>()
 
+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) => {
diff --git a/src/components/sidebar/tabs/queue/__tests__/ResultGallery.spec.ts b/src/components/sidebar/tabs/queue/__tests__/ResultGallery.spec.ts
new file mode 100644
index 000000000..80e1a4cbe
--- /dev/null
+++ b/src/components/sidebar/tabs/queue/__tests__/ResultGallery.spec.ts
@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import ResultGallery from '../ResultGallery.vue'
+import Galleria from 'primevue/galleria'
+import ComfyImage from '@/components/common/ComfyImage.vue'
+import PrimeVue from 'primevue/config'
+import { ResultItemImpl } from '@/stores/queueStore'
+
+type ResultGalleryProps = typeof ResultGallery.__props
+
+describe('ResultGallery', () => {
+  let mockResultItem: ResultItemImpl
+
+  beforeEach(() => {
+    mockResultItem = {
+      filename: 'test.jpg',
+      type: 'images',
+      nodeId: 'test',
+      mediaType: 'images',
+      url: 'https://picsum.photos/200/300',
+      urlWithTimestamp: 'https://picsum.photos/200/300?t=123456',
+      supportsPreview: true
+    }
+  })
+
+  const mountResultGallery = (props: ResultGalleryProps, options = {}) => {
+    return mount(ResultGallery, {
+      global: {
+        plugins: [PrimeVue],
+        components: { Galleria, ComfyImage }
+      },
+      props,
+      ...options
+    })
+  }
+
+  const clickElement = async (element: Element) => {
+    element.dispatchEvent(new MouseEvent('mousedown'))
+    element.dispatchEvent(new MouseEvent('mouseup'))
+  }
+
+  it('is dismissed when overlay mask is clicked', async () => {
+    const wrapper = mountResultGallery({
+      activeIndex: 0,
+      allGalleryItems: [mockResultItem]
+    })
+    wrapper.vm.galleryVisible = true
+    await wrapper.vm.$nextTick()
+    expect(wrapper.findComponent(Galleria).exists()).toBe(true)
+    expect(wrapper.vm.galleryVisible).toBe(true)
+
+    // Since Galleria uses teleport, we need to query the mask in the global document
+    const mask = document.querySelector('[data-mask]')
+    expect(mask).not.toBeNull()
+
+    // Click the overlay mask to dismiss the gallery
+    await clickElement(mask)
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.galleryVisible).toBe(false)
+  })
+
+  it('is not dismissed when gallery is clicked', async () => {
+    const wrapper = mountResultGallery({
+      activeIndex: 0,
+      allGalleryItems: [mockResultItem]
+    })
+    wrapper.vm.galleryVisible = true
+    await wrapper.vm.$nextTick()
+    expect(wrapper.findComponent(Galleria).exists()).toBe(true)
+    expect(wrapper.vm.galleryVisible).toBe(true)
+
+    // Since Galleria uses teleport, we need to query the mask in the global document
+    const gallery = document.querySelector('.p-galleria-content')
+    expect(gallery).not.toBeNull()
+
+    // The gallery should not be dismissed when the gallery itself is clicked
+    await clickElement(gallery)
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.galleryVisible).toBe(true)
+  })
+})