Merge pull request #11031 from akx/zoom-and-pan-namespace

Zoom and pan: namespace & simplify

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

@@ -1,6 +1,20 @@
-// Helper functions
+onUiLoaded(async() => {
-// Get active tab
+    const elementIDs = {
-function getActiveTab(elements, all = false) {
+        img2imgTabs: "#mode_img2img .tab-nav",
+        inpaint: "#img2maskimg",
+        inpaintSketch: "#inpaint_sketch",
+        rangeGroup: "#img2img_column_size",
+        sketch: "#img2img_sketch",
+    };
+    const tabNameToElementId = {
+        "Inpaint sketch": elementIDs.inpaintSketch,
+        "Inpaint": elementIDs.inpaint,
+        "Sketch": elementIDs.sketch,
+    };
+
+    // Helper functions
+    // Get active tab
+    function getActiveTab(elements, all = false) {
         const tabs = elements.img2imgTabs.querySelectorAll("button");
 
         if (all) return tabs;
@@ -10,40 +24,33 @@ function getActiveTab(elements, all = false) {
                 return tab;
             }
         }
-}
-
-// 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 => {
-        const checkInterval = setInterval(() => {
-            if (window.opts && Object.keys(window.opts).length !== 0) {
-                clearInterval(checkInterval);
-                resolve(window.opts);
     }
-        }, 100);
-    });
-}
 
-// Check is hotkey valid
+    // Get tab ID
-function isSingleLetter(value) {
+    function getTabId(elements) {
+        const activeTab = getActiveTab(elements);
+        return tabNameToElementId[activeTab.innerText];
+    }
+
+    // Wait until opts loaded
+    async function waitForOpts() {
+        for (;;) {
+            if (window.opts && Object.keys(window.opts).length) {
+                return window.opts;
+            }
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+    }
+
+    // Check is hotkey valid
+    function isSingleLetter(value) {
         return (
             typeof value === "string" && value.length === 1 && /[a-z]/i.test(value)
         );
-}
+    }
 
-// Create hotkeyConfig from opts
+    // Create hotkeyConfig from opts
-function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
+    function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
         const result = {};
         const usedKeys = new Set();
 
@@ -70,18 +77,17 @@ 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) {
-function restoreImgRedMask(elements, elementIDs) {
+        const mainTabId = getTabId(elements);
-    const mainTabId = getTabId(elements, elementIDs);
 
         if (!mainTabId) return;
 
@@ -112,10 +118,8 @@ function restoreImgRedMask(elements, elementIDs) {
         setTimeout(() => {
             img.style.display = "none";
         }, 400);
-}
+    }
 
-// Main
-onUiLoaded(async() => {
     const hotkeysConfigOpts = await waitForOpts();
 
     // Default config
@@ -137,38 +141,22 @@ onUiLoaded(async() => {
     let mouseX, mouseY;
     let activeElement;
 
-    const elementIDs = {
+    const elements = Object.fromEntries(Object.keys(elementIDs).map((id) => [
-        sketch: "#img2img_sketch",
+        id,
-        inpaint: "#img2maskimg",
+        gradioApp().querySelector(elementIDs[id]),
-        inpaintSketch: "#inpaint_sketch",
+    ]));
-        img2imgTabs: "#mode_img2img .tab-nav",
-        rangeGroup: "#img2img_column_size"
-    };
-
-    async function getElements() {
-        const elements = await Promise.all(
-            Object.values(elementIDs).map(id => gradioApp().querySelector(id))
-        );
-        return Object.fromEntries(
-            Object.keys(elementIDs).map((key, index) => [key, elements[index]])
-        );
-    }
-
-    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") :
+    const rangeInputs = elements.rangeGroup ? Array.from(elements.rangeGroup.querySelectorAll("input")) :
         [
             gradioApp().querySelector("#img2img_width input[type='range']"),
             gradioApp().querySelector("#img2img_height input[type='range']")
         ];
 
-    rangeInputs.forEach(input => {
+    for (const input of rangeInputs) {
-        if (input) {
+        input?.addEventListener("input", () => restoreImgRedMask(elements));
-            input.addEventListener("input", () => restoreImgRedMask(elements, elementIDs));
     }
-    });
 
     function applyZoomAndPan(elemId) {
         const targetElement = gradioApp().querySelector(elemId);
@@ -223,12 +211,11 @@ onUiLoaded(async() => {
                     action: "Move canvas"
                 }
             ];
-            hotkeys.forEach(function(hotkey) {
+            for (const hotkey of hotkeys) {
                 const p = document.createElement("p");
-                p.innerHTML =
+                p.innerHTML = `<b>${hotkey.key}</b> - ${hotkey.action}`;
-                    "<b>" + hotkey.key + "</b>" + " - " + hotkey.action;
                 tooltipContent.appendChild(p);
-            });
+            }
 
             // Add information and content elements to the tooltip element
             tooltip.appendChild(info);