From 3ca396417143f9d0a322f986cda9785b2ddfc445 Mon Sep 17 00:00:00 2001
From: Kubuxu <kubuxu@protonmail.ch>
Date: Sat, 8 Jul 2023 22:10:21 +0100
Subject: [PATCH] Fix image viewer

Short click (<100 ms) will keep the image open.
Click and hold will close the image after the mouse button is released.
Click, hold and move mouse won't close the image.
No changes regarding mobile, it will still need work in that regard.
---
 javascript/imageViewer.js | 28 ++++++++++++++++++++--------
 javascript/style.css      | 13 ++++++++-----
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/javascript/imageViewer.js b/javascript/imageViewer.js
index b046b0503..7e1001225 100644
--- a/javascript/imageViewer.js
+++ b/javascript/imageViewer.js
@@ -3,6 +3,8 @@ function closeModal() {
   gradioApp().getElementById('lightboxModal').style.display = 'none';
 }
 
+let preventImmediateClose = false;
+
 function showModal(event) {
   const source = event.target || event.srcElement;
   const modalImage = gradioApp().getElementById('modalImage');
@@ -16,6 +18,12 @@ function showModal(event) {
   // show the save button in modal only on txt2img or img2img tabs
   if (tabTxt2Img.style.display != 'none' || tabImg2Img.style.display != 'none') gradioApp().getElementById('modal_save').style.display = 'inline';
   else gradioApp().getElementById('modal_save').style.display = 'none';
+  const ignoreEvent = (ev) => {ev.stopImmediatePropagation()}
+  
+  preventImmediateClose = true
+  setTimeout(() => {
+    preventImmediateClose = false
+  }, 100)
   event.stopPropagation();
 }
 
@@ -107,9 +115,7 @@ function setupImageForLightbox(e) {
   e.style.cursor = 'pointer';
   e.style.userSelect = 'none';
 
-  const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-  const event = isFirefox ? 'mousedown' : 'click';
-  e.addEventListener(event, (evt) => {
+  e.addEventListener('mousedown', (evt) => {
     if (evt.button != 0) return;
     const initialZoom = (localStorage.getItem('modalZoom') || true) == 'yes';
     modalZoomSet(gradioApp().getElementById('modalImage'), initialZoom);
@@ -154,6 +160,10 @@ document.addEventListener('DOMContentLoaded', () => {
   modal.tabIndex = 0;
   modal.addEventListener('keydown', modalKeyHandler, true);
 
+  const modalPreviewZone = document.createElement('div');
+  modalPreviewZone.className = 'lightboxModalPreviewZone'
+  modalPreviewZone.tabIndex = 0;
+
   const modalControls = document.createElement('div');
   modalControls.className = 'modalControls gradio-container';
   modal.append(modalControls);
@@ -184,14 +194,14 @@ document.addEventListener('DOMContentLoaded', () => {
   modalImage.id = 'modalImage';
   modalImage.tabIndex = 0;
   modalImage.addEventListener('keydown', modalKeyHandler, true);
-  modal.appendChild(modalImage);
+  modalPreviewZone.appendChild(modalImage);
   modalImage.onload = () => panzoom(modalImage, { zoomSpeed: 0.025, minZoom: 0.25, maxZoom: 4.0 });
 
   let drag = false;
-  modal.addEventListener('mousedown', () => drag = false);
-  modal.addEventListener('mousemove', () => drag = true);
-  modal.addEventListener('scroll', () => drag = true);
-  modal.addEventListener('mouseup', () => { if (!drag) closeModal(); });
+  modalPreviewZone.addEventListener('mousedown', () => drag = false);
+  modalPreviewZone.addEventListener('mousemove', () => drag = true);
+  modalPreviewZone.addEventListener('scroll', () => drag = true);
+  modalPreviewZone.addEventListener('mouseup', () => { if (!drag && !preventImmediateClose) closeModal(); });
   
   const modalPrev = document.createElement('a');
   modalPrev.className = 'modalPrev';
@@ -201,6 +211,8 @@ document.addEventListener('DOMContentLoaded', () => {
   modalPrev.addEventListener('keydown', modalKeyHandler, true);
   modal.appendChild(modalPrev);
 
+  modal.appendChild(modalPreviewZone);
+
   const modalNext = document.createElement('a');
   modalNext.className = 'modalNext';
   modalNext.innerHTML = '&#10095;';
diff --git a/javascript/style.css b/javascript/style.css
index 3487c461a..91ebd8362 100644
--- a/javascript/style.css
+++ b/javascript/style.css
@@ -391,7 +391,7 @@ div#extras_scale_to_tab div.form{
     background-color: rgba(20, 20, 20, 0.95);
     user-select: none;
     -webkit-user-select: none;
-    flex-direction: column;
+    flex-direction: row;
 }
 
 .modalControls {
@@ -420,14 +420,18 @@ div#extras_scale_to_tab div.form{
     color: #999;
     text-decoration: none;
 }
-
-#lightboxModal > img {
+.lightboxModalPreviewZone {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+.lightboxModalPreviewZone > img {
     display: block;
     margin: auto;
     width: auto;
 }
 
-#lightboxModal > img.modalImageFullscreen{
+.lightboxModalPreviewZone > img.modalImageFullscreen{
     object-fit: contain;
     height: 100%;
     width: 100%;
@@ -450,7 +454,6 @@ table.settings-value-table td{
 
 .modalPrev, .modalNext {
   cursor: pointer;
-  position: absolute;
   top: 0;
   width: auto;
   height: 100vh;