Dismiss gallery lightbox on background click (#752)

* Dismiss gallery on background click

* Add vitest tests

Author: christian-byrne

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) => {

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)
+  })
+})