From 3f9ec378a0094d7f3d25114a7d5c73a36206fdb1 Mon Sep 17 00:00:00 2001
From: patriceac <48073125+patriceac@users.noreply.github.com>
Date: Thu, 4 May 2023 09:16:19 -0700
Subject: [PATCH 1/2] Fix restoration of inactive image modifiers

---
 ui/media/js/image-modifiers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js
index fd4ecaf1..69f31ab1 100644
--- a/ui/media/js/image-modifiers.js
+++ b/ui/media/js/image-modifiers.js
@@ -246,7 +246,7 @@ function refreshInactiveTags(inactiveTags) {
     overlays.forEach((i) => {
         let modifierName = i.parentElement.getElementsByClassName("modifier-card-label")[0].getElementsByTagName("p")[0]
             .dataset.fullName
-        if (inactiveTags?.find((element) => element === modifierName) !== undefined) {
+        if (inactiveTags?.find((element) => trimModifiers(element) === modifierName) !== undefined) {
             i.parentElement.classList.add("modifier-toggle-inactive")
         }
     })

From fec21408962b451c693cae271c57289ca350538f Mon Sep 17 00:00:00 2001
From: Olivia Godone-Maresca <oliviagodonemaresca+github@gmail.com>
Date: Thu, 4 May 2023 19:36:10 -0400
Subject: [PATCH 2/2] Allow grabbing the image to scroll zoomed in images

---
 ui/media/css/image-modal.css |  8 +++++
 ui/media/js/image-modal.js   | 63 ++++++++++++++++++++++++++++++++++--
 2 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/ui/media/css/image-modal.css b/ui/media/css/image-modal.css
index 1001807c..64096003 100644
--- a/ui/media/css/image-modal.css
+++ b/ui/media/css/image-modal.css
@@ -70,6 +70,14 @@
     max-height: calc(100vh - (var(--popup-padding) * 2) - 4px);
 }
 
+#viewFullSizeImgModal img:not(.natural-zoom) {
+    cursor: grab;
+}
+
+#viewFullSizeImgModal .grabbing img:not(.natural-zoom) {
+    cursor: grabbing;
+}
+
 #viewFullSizeImgModal .content > div::-webkit-scrollbar-track, #viewFullSizeImgModal .content > div::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, .5)
 }
diff --git a/ui/media/js/image-modal.js b/ui/media/js/image-modal.js
index 3a97c4d8..28c1eaf2 100644
--- a/ui/media/js/image-modal.js
+++ b/ui/media/js/image-modal.js
@@ -63,15 +63,73 @@ const imageModal = (function() {
         setZoomLevel(imageContainer.querySelector("img")?.classList?.contains("natural-zoom"))
     )
 
-    const state = {
+    const initialState = () => ({
         previous: undefined,
         next: undefined,
+
+        start: {
+            x: 0,
+            y: 0,
+        },
+
+        scroll: {
+            x: 0,
+            y: 0,
+        },
+    })
+
+    const state = initialState()
+
+    // Allow grabbing the image to scroll
+    const stopGrabbing = (e) => {
+        if(imageContainer.classList.contains("grabbing")) {
+            imageContainer.classList.remove("grabbing")
+            e?.preventDefault()
+            console.log(`stopGrabbing()`, e)
+        }
+    }
+
+    const addImageGrabbing = (image) => {
+        image?.addEventListener('mousedown', (e) => {
+            if (!image.classList.contains("natural-zoom")) {
+                e.stopPropagation()
+                e.stopImmediatePropagation()
+                e.preventDefault()
+
+                imageContainer.classList.add("grabbing")
+                state.start.x = e.pageX - imageContainer.offsetLeft
+                state.scroll.x = imageContainer.scrollLeft
+                state.start.y = e.pageY - imageContainer.offsetTop
+                state.scroll.y = imageContainer.scrollTop
+            }
+        })
+
+        image?.addEventListener('mouseup', stopGrabbing)
+        image?.addEventListener('mouseleave', stopGrabbing)
+        image?.addEventListener('mousemove', (e) => {
+            if(imageContainer.classList.contains("grabbing")) {
+                e.stopPropagation()
+                e.stopImmediatePropagation()
+                e.preventDefault()
+
+                // Might need to increase this multiplier based on the image size to window size ratio
+                // The default 1:1 is pretty slow
+                const multiplier = 1.0
+
+                const deltaX = e.pageX - imageContainer.offsetLeft - state.start.x
+                imageContainer.scrollLeft = state.scroll.x - (deltaX * multiplier)
+                const deltaY = e.pageY - imageContainer.offsetTop - state.start.y
+                imageContainer.scrollTop = state.scroll.y - (deltaY * multiplier)
+            }
+        })
     }
 
     const clear = () => {
         imageContainer.innerHTML = ""
 
-        Object.keys(state).forEach((key) => delete state[key])
+        Object.entries(initialState()).forEach(([key, value]) => state[key] = value)
+
+        stopGrabbing()
     }
 
     const close = () => {
@@ -95,6 +153,7 @@ const imageModal = (function() {
         const src = typeof options === "string" ? options : options.src
 
         const imgElem = createElement("img", { src }, "natural-zoom")
+        addImageGrabbing(imgElem)
         imageContainer.appendChild(imgElem)
         modalElem.classList.add("active")
         document.body.style.overflow = "hidden"