From 3da964221662fc5395baa933eafc32599b5223d2 Mon Sep 17 00:00:00 2001
From: Vladimir Mandic <mandic00@live.com>
Date: Sun, 23 Jul 2023 15:12:27 -0400
Subject: [PATCH] fix image drop, viewer right click

---
 extensions-builtin/sd-webui-controlnet |  2 +-
 javascript/imageParams.js              | 11 +++++++++--
 javascript/imageViewer.js              | 11 ++++++-----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/extensions-builtin/sd-webui-controlnet b/extensions-builtin/sd-webui-controlnet
index 8063252cf..e9679f8fc 160000
--- a/extensions-builtin/sd-webui-controlnet
+++ b/extensions-builtin/sd-webui-controlnet
@@ -1 +1 @@
-Subproject commit 8063252cf5c1ddac5c91135e448b9aea7cf3c871
+Subproject commit e9679f8fc50880a92d6f1b6fc1aabad41079efd5
diff --git a/javascript/imageParams.js b/javascript/imageParams.js
index bc673812f..3ecac0ee5 100644
--- a/javascript/imageParams.js
+++ b/javascript/imageParams.js
@@ -1,4 +1,9 @@
-window.onload = () => {
+let dragDropInitialized = false;
+
+async function initDragDrop() {
+  if (dragDropInitialized) return;
+  dragDropInitialized = true;
+  console.log('initDragDrop');
   window.addEventListener('drop', (e) => {
     const target = e.composedPath()[0];
     if (!target.placeholder) return;
@@ -16,4 +21,6 @@ window.onload = () => {
       console.log('dropEvent');
     }
   });
-};
+}
+
+onAfterUiUpdate(initDragDrop);
diff --git a/javascript/imageViewer.js b/javascript/imageViewer.js
index 7056df42e..917e5a0c4 100644
--- a/javascript/imageViewer.js
+++ b/javascript/imageViewer.js
@@ -2,9 +2,10 @@
 let previewDrag = false;
 let modalPreviewZone;
 
-function closeModal(force = false) {
+function closeModal(evt, force = false) {
   if (force) gradioApp().getElementById('lightboxModal').style.display = 'none';
   if (previewDrag) return;
+  if (evt?.button !== 0) return;
   gradioApp().getElementById('lightboxModal').style.display = 'none';
 }
 
@@ -47,7 +48,7 @@ function modalKeyHandler(event) {
       modalImageSwitch(1);
       break;
     case 'Escape':
-      closeModal(true);
+      closeModal(null, true);
       break;
   }
   event.stopPropagation();
@@ -185,7 +186,7 @@ function initImageViewer() {
   modalClose.className = 'cursor';
   modalClose.innerHTML = '🗙';
   modalClose.title = 'Close';
-  modalClose.addEventListener('click', closeModal, true);
+  modalClose.addEventListener('click', (evt) => closeModal(evt, true), true);
 
   // handlers
   modalPreviewZone.addEventListener('mousedown', () => { previewDrag = false; });
@@ -193,8 +194,8 @@ function initImageViewer() {
   modalPreviewZone.addEventListener('mousemove', () => { previewDrag = true; });
   modalPreviewZone.addEventListener('touchmove', () => { previewDrag = true; }, { passive: true });
   modalPreviewZone.addEventListener('scroll', () => { previewDrag = true; });
-  modalPreviewZone.addEventListener('mouseup', () => closeModal());
-  modalPreviewZone.addEventListener('touchend', () => closeModal());
+  modalPreviewZone.addEventListener('mouseup', (evt) => closeModal(evt));
+  modalPreviewZone.addEventListener('touchend', (evt) => closeModal(evt));
 
   const modalPrev = document.createElement('a');
   modalPrev.className = 'modalPrev';