From ed01d2ee3b22f7d01f218e3b7a3571dc7a2c54c0 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Thu, 10 Aug 2023 13:45:25 +0300
Subject: a another fix, a different approach

---
 .../canvas-zoom-and-pan/javascript/zoom.js         | 23 ++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

(limited to 'extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js')

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index e7616b98..30a74834 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -12,6 +12,7 @@ onUiLoaded(async() => {
         "Sketch": elementIDs.sketch
     };
 
+
     // Helper functions
     // Get active tab
     function getActiveTab(elements, all = false) {
@@ -657,17 +658,20 @@ onUiLoaded(async() => {
         // Simulation of the function to put a long image into the screen.
         // We detect if an image has a scroll bar or not, make a fullscreen to reveal the image, then reduce it to fit into the element.
         // We hide the image and show it to the user when it is ready.
-        function autoExpand(e) {
+
+        targetElement.isExpanded = false;
+        function autoExpand() {
             const canvas = document.querySelector(`${elemId} canvas[key="interface"]`);
             const isMainTab = activeElement === elementIDs.inpaint || activeElement === elementIDs.inpaintSketch || activeElement === elementIDs.sketch;
 
             if (canvas && isMainTab) {
-                if (hasHorizontalScrollbar(targetElement)) {
+                if (hasHorizontalScrollbar(targetElement) && targetElement.isExpanded === false) {
                     targetElement.style.visibility = "hidden";
                     setTimeout(() => {
                         fitToScreen();
                         resetZoom();
                         targetElement.style.visibility = "visible";
+                        targetElement.isExpanded = true;
                     }, 10);
                 }
             }
@@ -675,9 +679,24 @@ onUiLoaded(async() => {
 
         targetElement.addEventListener("mousemove", getMousePosition);
 
+        //observers
+        // Creating an observer with a callback function to handle DOM changes
+        const observer = new MutationObserver((mutationsList, observer) => {
+            for (let mutation of mutationsList) {
+                // If the style attribute of the canvas has changed, by observation it happens only when the picture changes
+                if (mutation.type === 'attributes' && mutation.attributeName === 'style' &&
+                    mutation.target.tagName.toLowerCase() === 'canvas') {
+                    targetElement.isExpanded = false;
+                    setTimeout(resetZoom, 10);
+                }
+            }
+        });
+
         // Apply auto expand if enabled
         if (hotkeysConfig.canvas_auto_expand) {
             targetElement.addEventListener("mousemove", autoExpand);
+            // Set up an observer to track attribute changes
+            observer.observe(targetElement, {attributes: true, childList: true, subtree: true});
         }
 
         // Handle events only inside the targetElement
-- 
cgit v1.2.1


From 045f7408926aec4bf7e8fcb09333a3f45783d239 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Thu, 10 Aug 2023 16:17:52 +0300
Subject: Height fix

---
 extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js')

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 30a74834..72c8ba87 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -378,6 +378,11 @@ onUiLoaded(async() => {
             toggleOverlap("off");
             fullScreenMode = false;
 
+            const closeBtn = targetElement.querySelector("button[aria-label='Remove Image']");
+            if (closeBtn) {
+                closeBtn.addEventListener("click", resetZoom);
+            }
+
             if (
                 canvas &&
                 parseFloat(canvas.style.width) > 865 &&
-- 
cgit v1.2.1