Merge pull request #11005 from daswer123/dev

Fixed bugs in the zoom builtin extensions and made the zoom function global

extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js

-// Main
-
 // Helper functions
 // Get active tab
 function getActiveTab(elements, all = false) {
@@ -14,6 +12,17 @@ function getActiveTab(elements, all = false) {
     }
 }
 
+// Get tab ID
+function getTabId(elements, elementIDs) {
+    const activeTab = getActiveTab(elements);
+    const tabIdLookup = {
+        "Sketch": elementIDs.sketch,
+        "Inpaint sketch": elementIDs.inpaintSketch,
+        "Inpaint": elementIDs.inpaint
+    };
+    return tabIdLookup[activeTab.innerText];
+}
+
 // Wait until opts loaded
 async function waitForOpts() {
     return new Promise(resolve => {
@@ -63,6 +72,48 @@ function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
     return result;
 }
 
+/**
+ * The restoreImgRedMask function displays a red mask around an image to indicate the aspect ratio.
+ * If the image display property is set to 'none', the mask breaks. To fix this, the function
+ * temporarily sets the display property to 'block' and then hides the mask again after 300 milliseconds
+ * to avoid breaking the canvas. Additionally, the function adjusts the mask to work correctly on
+ * very long images.
+ */
+
+function restoreImgRedMask(elements, elementIDs) {
+    const mainTabId = getTabId(elements, elementIDs);
+
+    if (!mainTabId) return;
+
+    const mainTab = gradioApp().querySelector(mainTabId);
+    const img = mainTab.querySelector("img");
+    const imageARPreview = gradioApp().querySelector("#imageARPreview");
+
+    if (!img || !imageARPreview) return;
+
+    imageARPreview.style.transform = "";
+    if (parseFloat(mainTab.style.width) > 865) {
+        const transformString = mainTab.style.transform;
+        const scaleMatch = transformString.match(/scale\(([-+]?[0-9]*\.?[0-9]+)\)/);
+        let zoom = 1; // default zoom
+
+        if (scaleMatch && scaleMatch[1]) {
+            zoom = Number(scaleMatch[1]);
+        }
+
+        imageARPreview.style.transformOrigin = "0 0";
+        imageARPreview.style.transform = `scale(${zoom})`;
+    }
+
+    if (img.style.display !== "none") return;
+
+    img.style.display = "block";
+
+    setTimeout(() => {
+        img.style.display = "none";
+    }, 400);
+}
+
 // Main
 onUiLoaded(async() => {
     const hotkeysConfigOpts = await waitForOpts();
@@ -84,17 +135,19 @@ onUiLoaded(async() => {
 
     let isMoving = false;
     let mouseX, mouseY;
+    let activeElement;
 
     const elementIDs = {
         sketch: "#img2img_sketch",
         inpaint: "#img2maskimg",
         inpaintSketch: "#inpaint_sketch",
-        img2imgTabs: "#mode_img2img .tab-nav"
+        img2imgTabs: "#mode_img2img .tab-nav",
+        rangeGroup: "#img2img_column_size"
     };
 
     async function getElements() {
         const elements = await Promise.all(
-            Object.values(elementIDs).map(id => document.querySelector(id))
+            Object.values(elementIDs).map(id => gradioApp().querySelector(id))
         );
         return Object.fromEntries(
             Object.keys(elementIDs).map((key, index) => [key, elements[index]])
@@ -102,10 +155,36 @@ onUiLoaded(async() => {
     }
 
     const elements = await getElements();
+    const elemData = {};
+
+    // Apply functionality to the range inputs. Restore redmask and correct for long images.
+    const rangeInputs = elements.rangeGroup ? elements.rangeGroup.querySelectorAll("input") :
+        [
+            gradioApp().querySelector("#img2img_width input[type='range']"),
+            gradioApp().querySelector("#img2img_height input[type='range']")
+        ];
+
+    rangeInputs.forEach(input => {
+        if (input) {
+            input.addEventListener("input", () => restoreImgRedMask(elements, elementIDs));
+        }
+    });
+
+    function applyZoomAndPan(elemId) {
+        const targetElement = gradioApp().querySelector(elemId);
+
+        if (!targetElement) {
+            console.log("Element not found");
+            return;
+        }
 
-    function applyZoomAndPan(targetElement, elemId) {
         targetElement.style.transformOrigin = "0 0";
-        let [zoomLevel, panX, panY] = [1, 0, 0];
+
+        elemData[elemId] = {
+            zoom: 1,
+            panX: 0,
+            panY: 0
+        };
         let fullScreenMode = false;
 
         // Create tooltip
@@ -124,7 +203,7 @@ onUiLoaded(async() => {
             const tooltipContent = document.createElement("div");
             tooltipContent.className = "tooltip-content";
 
-            // Add info about hotkets
+            // Add info about hotkeys
             const zoomKey = hotkeysConfig.canvas_swap_controls ? "Ctrl" : "Shift";
             const adjustKey = hotkeysConfig.canvas_swap_controls ? "Shift" : "Ctrl";
 
@@ -132,21 +211,15 @@ onUiLoaded(async() => {
                 {key: `${zoomKey} + wheel`, action: "Zoom canvas"},
                 {key: `${adjustKey} + wheel`, action: "Adjust brush size"},
                 {
-                    key: hotkeysConfig.canvas_hotkey_reset.charAt(
-                        hotkeysConfig.canvas_hotkey_reset.length - 1
-                    ),
+                    key: hotkeysConfig.canvas_hotkey_reset.charAt(hotkeysConfig.canvas_hotkey_reset.length - 1),
                     action: "Reset zoom"
                 },
                 {
-                    key: hotkeysConfig.canvas_hotkey_fullscreen.charAt(
-                        hotkeysConfig.canvas_hotkey_fullscreen.length - 1
-                    ),
+                    key: hotkeysConfig.canvas_hotkey_fullscreen.charAt(hotkeysConfig.canvas_hotkey_fullscreen.length - 1),
                     action: "Fullscreen mode"
                 },
                 {
-                    key: hotkeysConfig.canvas_hotkey_move.charAt(
-                        hotkeysConfig.canvas_hotkey_move.length - 1
-                    ),
+                    key: hotkeysConfig.canvas_hotkey_move.charAt(hotkeysConfig.canvas_hotkey_move.length - 1),
                     action: "Move canvas"
                 }
             ];
@@ -186,12 +259,14 @@ onUiLoaded(async() => {
 
         // Reset the zoom level and pan position of the target element to their initial values
         function resetZoom() {
-            zoomLevel = 1;
-            panX = 0;
-            panY = 0;
+            elemData[elemId] = {
+                zoomLevel: 1,
+                panX: 0,
+                panY: 0
+            };
 
             fixCanvas();
-            targetElement.style.transform = `scale(${zoomLevel}) translate(${panX}px, ${panY}px)`;
+            targetElement.style.transform = `scale(${elemData[elemId].zoomLevel}) translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px)`;
 
             const canvas = gradioApp().querySelector(
                 `${elemId} canvas[key="interface"]`
@@ -269,11 +344,14 @@ onUiLoaded(async() => {
         // Update the zoom level and pan position of the target element based on the values of the zoomLevel, panX and panY variables
         function updateZoom(newZoomLevel, mouseX, mouseY) {
             newZoomLevel = Math.max(0.5, Math.min(newZoomLevel, 15));
-            panX += mouseX - (mouseX * newZoomLevel) / zoomLevel;
-            panY += mouseY - (mouseY * newZoomLevel) / zoomLevel;
+
+            elemData[elemId].panX +=
+                mouseX - (mouseX * newZoomLevel) / elemData[elemId].zoomLevel;
+            elemData[elemId].panY +=
+                mouseY - (mouseY * newZoomLevel) / elemData[elemId].zoomLevel;
 
             targetElement.style.transformOrigin = "0 0";
-            targetElement.style.transform = `translate(${panX}px, ${panY}px) scale(${newZoomLevel})`;
+            targetElement.style.transform = `translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px) scale(${newZoomLevel})`;
 
             toggleOverlap("on");
             return newZoomLevel;
@@ -289,9 +367,9 @@ onUiLoaded(async() => {
 
                 let zoomPosX, zoomPosY;
                 let delta = 0.2;
-                if (zoomLevel > 7) {
+                if (elemData[elemId].zoomLevel > 7) {
                     delta = 0.9;
-                } else if (zoomLevel > 2) {
+                } else if (elemData[elemId].zoomLevel > 2) {
                     delta = 0.6;
                 }
 
@@ -299,8 +377,9 @@ onUiLoaded(async() => {
                 zoomPosY = e.clientY;
 
                 fullScreenMode = false;
-                zoomLevel = updateZoom(
-                    zoomLevel + (operation === "+" ? delta : -delta),
+                elemData[elemId].zoomLevel = updateZoom(
+                    elemData[elemId].zoomLevel +
+                        (operation === "+" ? delta : -delta),
                     zoomPosX - targetElement.getBoundingClientRect().left,
                     zoomPosY - targetElement.getBoundingClientRect().top
                 );
@@ -351,9 +430,9 @@ onUiLoaded(async() => {
             targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
 
             // Update global variables
-            zoomLevel = scale;
-            panX = offsetX;
-            panY = offsetY;
+            elemData[elemId].zoomLevel = scale;
+            elemData[elemId].panX = offsetX;
+            elemData[elemId].panY = offsetY;
 
             fullScreenMode = false;
             toggleOverlap("off");
@@ -427,9 +506,9 @@ onUiLoaded(async() => {
             targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
 
             // Update global variables
-            zoomLevel = scale;
-            panX = offsetX;
-            panY = offsetY;
+            elemData[elemId].zoomLevel = scale;
+            elemData[elemId].panX = offsetX;
+            elemData[elemId].panY = offsetY;
 
             fullScreenMode = true;
             toggleOverlap("on");
@@ -465,6 +544,8 @@ onUiLoaded(async() => {
             if (!isKeyDownHandlerAttached) {
                 document.addEventListener("keydown", handleKeyDown);
                 isKeyDownHandlerAttached = true;
+
+                activeElement = elemId;
             }
         }
 
@@ -472,6 +553,8 @@ onUiLoaded(async() => {
             if (isKeyDownHandlerAttached) {
                 document.removeEventListener("keydown", handleKeyDown);
                 isKeyDownHandlerAttached = false;
+
+                activeElement = null;
             }
         }
 
@@ -528,21 +611,24 @@ onUiLoaded(async() => {
 
         // Detect zoom level and update the pan speed.
         function updatePanPosition(movementX, movementY) {
-            let panSpeed = 1.5;
+            let panSpeed = 2;
 
-            if (zoomLevel > 8) {
-                panSpeed = 2.5;
+            if (elemData[elemId].zoomLevel > 8) {
+                panSpeed = 3.5;
             }
 
-            panX = panX + movementX * panSpeed;
-            panY = panY + movementY * panSpeed;
+            elemData[elemId].panX += movementX * panSpeed;
+            elemData[elemId].panY += movementY * panSpeed;
 
-            targetElement.style.transform = `translate(${panX}px, ${panY}px) scale(${zoomLevel})`;
-            toggleOverlap("on");
+            // Delayed redraw of an element
+            requestAnimationFrame(() => {
+                targetElement.style.transform = `translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px) scale(${elemData[elemId].zoomLevel})`;
+                toggleOverlap("on");
+            });
         }
 
         function handleMoveByKey(e) {
-            if (isMoving) {
+            if (isMoving && elemId === activeElement) {
                 updatePanPosition(e.movementX, e.movementY);
                 targetElement.style.pointerEvents = "none";
             } else {
@@ -558,7 +644,10 @@ onUiLoaded(async() => {
         gradioApp().addEventListener("mousemove", handleMoveByKey);
     }
 
-    applyZoomAndPan(elements.sketch, elementIDs.sketch);
-    applyZoomAndPan(elements.inpaint, elementIDs.inpaint);
-    applyZoomAndPan(elements.inpaintSketch, elementIDs.inpaintSketch);
+    applyZoomAndPan(elementIDs.sketch);
+    applyZoomAndPan(elementIDs.inpaint);
+    applyZoomAndPan(elementIDs.inpaintSketch);
+
+    // Make the function global so that other extensions can take advantage of this solution
+    window.applyZoomAndPan = applyZoomAndPan;
 });