From 8ab4e55fe3a7f953201eeb887de664f0db3d9e93 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Mon, 29 May 2023 21:39:10 +0300
Subject: Moved the script to the extension build-in

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

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
new file mode 100644
index 00000000..4bbec34f
--- /dev/null
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -0,0 +1,428 @@
+// Main
+
+// Helper functions
+// Get active tab
+function getActiveTab(elements, all = false) {
+    const tabs = elements.img2imgTabs.querySelectorAll("button");
+
+    if (all) return tabs;
+
+    for (let tab of tabs) {
+        if (tab.classList.contains("selected")) {
+            return tab;
+        }
+    }
+}
+
+onUiLoaded(async() => {
+    const hotkeysConfig = {
+        resetZoom: "KeyR",
+        fitToScreen: "KeyS",
+        moveKey: "KeyF",
+        overlap: "KeyO"
+    };
+
+    let isMoving = false;
+    let mouseX, mouseY;
+
+    const elementIDs = {
+        sketch: "#img2img_sketch",
+        inpaint: "#img2maskimg",
+        inpaintSketch: "#inpaint_sketch",
+        img2imgTabs: "#mode_img2img .tab-nav"
+    };
+
+    async function getElements() {
+        const elements = await Promise.all(
+            Object.values(elementIDs).map(id => document.querySelector(id))
+        );
+        return Object.fromEntries(
+            Object.keys(elementIDs).map((key, index) => [key, elements[index]])
+        );
+    }
+
+    const elements = await getElements();
+
+    function applyZoomAndPan(targetElement, elemId) {
+        targetElement.style.transformOrigin = "0 0";
+        let [zoomLevel, panX, panY] = [1, 0, 0];
+        let fullScreenMode = false;
+
+        // In the course of research, it was found that the tag img is very harmful when zooming and creates white canvases. This hack allows you to almost never think about this problem, it has no effect on webui.
+        function fixCanvas() {
+            const activeTab = getActiveTab(elements).textContent.trim();
+
+            if (activeTab !== "img2img") {
+                const img = targetElement.querySelector(`${elemId} img`);
+
+                if (img && img.style.display !== "none") {
+                    img.style.display = "none";
+                    img.style.visibility = "hidden";
+                }
+            }
+        }
+
+        // Reset the zoom level and pan position of the target element to their initial values
+        function resetZoom() {
+            zoomLevel = 1;
+            panX = 0;
+            panY = 0;
+
+            fixCanvas();
+            targetElement.style.transform = `scale(${zoomLevel}) translate(${panX}px, ${panY}px)`;
+
+            const canvas = gradioApp().querySelector(
+                `${elemId} canvas[key="interface"]`
+            );
+
+            toggleOverlap("off");
+            fullScreenMode = false;
+
+            if (
+                canvas &&
+                parseFloat(canvas.style.width) > 865 &&
+                parseFloat(targetElement.style.width) > 865
+            ) {
+                fitToElement();
+                return;
+            }
+
+            targetElement.style.width = "";
+            if (canvas) {
+                targetElement.style.height = canvas.style.height;
+            }
+        }
+
+        // Toggle the zIndex of the target element between two values, allowing it to overlap or be overlapped by other elements
+        function toggleOverlap(forced = "") {
+            const zIndex1 = "0";
+            const zIndex2 = "998";
+
+            targetElement.style.zIndex =
+                targetElement.style.zIndex !== zIndex2 ? zIndex2 : zIndex1;
+
+            if (forced === "off") {
+                targetElement.style.zIndex = zIndex1;
+            } else if (forced === "on") {
+                targetElement.style.zIndex = zIndex2;
+            }
+        }
+
+        // Adjust the brush size based on the deltaY value from a mouse wheel event
+        function adjustBrushSize(
+            elemId,
+            deltaY,
+            withoutValue = false,
+            percentage = 5
+        ) {
+            const input =
+                gradioApp().querySelector(
+                    `${elemId} input[aria-label='Brush radius']`
+                ) ||
+                gradioApp().querySelector(
+                    `${elemId} button[aria-label="Use brush"]`
+                );
+
+            if (input) {
+                input.click();
+                if (!withoutValue) {
+                    const maxValue =
+                        parseFloat(input.getAttribute("max")) || 100;
+                    const changeAmount = maxValue * (percentage / 100);
+                    const newValue =
+                        parseFloat(input.value) +
+                        (deltaY > 0 ? -changeAmount : changeAmount);
+                    input.value = Math.min(Math.max(newValue, 0), maxValue);
+                    input.dispatchEvent(new Event("change"));
+                }
+            }
+        }
+
+        // Reset zoom when uploading a new image
+        const fileInput = gradioApp().querySelector(
+            `${elemId} input[type="file"][accept="image/*"].svelte-116rqfv`
+        );
+        fileInput.addEventListener("click", resetZoom);
+
+        // 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;
+
+            targetElement.style.transformOrigin = "0 0";
+            targetElement.style.transform = `translate(${panX}px, ${panY}px) scale(${newZoomLevel})`;
+
+            toggleOverlap("on");
+            return newZoomLevel;
+        }
+
+        // Change the zoom level based on user interaction
+        function changeZoomLevel(operation, e) {
+            if (e.shiftKey) {
+                e.preventDefault();
+
+                let zoomPosX, zoomPosY;
+                let delta = 0.2;
+                if (zoomLevel > 7) {
+                    delta = 0.9;
+                } else if (zoomLevel > 2) {
+                    delta = 0.6;
+                }
+
+                zoomPosX = e.clientX;
+                zoomPosY = e.clientY;
+
+                fullScreenMode = false;
+                zoomLevel = updateZoom(
+                    zoomLevel + (operation === "+" ? delta : -delta),
+                    zoomPosX - targetElement.getBoundingClientRect().left,
+                    zoomPosY - targetElement.getBoundingClientRect().top
+                );
+            }
+        }
+
+        /**
+         * This function fits the target element to the screen by calculating
+         * the required scale and offsets. It also updates the global variables
+         * zoomLevel, panX, and panY to reflect the new state.
+         */
+
+        function fitToElement() {
+            //Reset Zoom
+            targetElement.style.transform = `translate(${0}px, ${0}px) scale(${1})`;
+
+            // Get element and screen dimensions
+            const elementWidth = targetElement.offsetWidth;
+            const elementHeight = targetElement.offsetHeight;
+            const parentElement = targetElement.parentElement;
+            const screenWidth = parentElement.clientWidth;
+            const screenHeight = parentElement.clientHeight;
+
+            // Get element's coordinates relative to the parent element
+            const elementRect = targetElement.getBoundingClientRect();
+            const parentRect = parentElement.getBoundingClientRect();
+            const elementX = elementRect.x - parentRect.x;
+
+            // Calculate scale and offsets
+            const scaleX = screenWidth / elementWidth;
+            const scaleY = screenHeight / elementHeight;
+            const scale = Math.min(scaleX, scaleY);
+
+            const transformOrigin =
+                window.getComputedStyle(targetElement).transformOrigin;
+            const [originX, originY] = transformOrigin.split(" ");
+            const originXValue = parseFloat(originX);
+            const originYValue = parseFloat(originY);
+
+            const offsetX =
+                (screenWidth - elementWidth * scale) / 2 -
+                originXValue * (1 - scale);
+            const offsetY =
+                (screenHeight - elementHeight * scale) / 2.5 -
+                originYValue * (1 - scale);
+
+            // Apply scale and offsets to the element
+            targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+
+            // Update global variables
+            zoomLevel = scale;
+            panX = offsetX;
+            panY = offsetY;
+
+            fullScreenMode = false;
+            toggleOverlap("off");
+        }
+
+        /**
+         * This function fits the target element to the screen by calculating
+         * the required scale and offsets. It also updates the global variables
+         * zoomLevel, panX, and panY to reflect the new state.
+         */
+
+        // Fullscreen mode
+        function fitToScreen() {
+            const canvas = gradioApp().querySelector(
+                `${elemId} canvas[key="interface"]`
+            );
+
+            if (!canvas) return;
+
+            if (canvas.offsetWidth > 862) {
+                targetElement.style.width = canvas.offsetWidth + "px";
+            }
+
+            if (fullScreenMode) {
+                resetZoom();
+                fullScreenMode = false;
+                return;
+            }
+
+            //Reset Zoom
+            targetElement.style.transform = `translate(${0}px, ${0}px) scale(${1})`;
+
+            // Get element and screen dimensions
+            const elementWidth = targetElement.offsetWidth;
+            const elementHeight = targetElement.offsetHeight;
+            const screenWidth = window.innerWidth;
+            const screenHeight = window.innerHeight;
+
+            // Get element's coordinates relative to the page
+            const elementRect = targetElement.getBoundingClientRect();
+            const elementY = elementRect.y;
+            const elementX = elementRect.x;
+
+            // Calculate scale and offsets
+            const scaleX = screenWidth / elementWidth;
+            const scaleY = screenHeight / elementHeight;
+            const scale = Math.min(scaleX, scaleY);
+
+            // Get the current transformOrigin
+            const computedStyle = window.getComputedStyle(targetElement);
+            const transformOrigin = computedStyle.transformOrigin;
+            const [originX, originY] = transformOrigin.split(" ");
+            const originXValue = parseFloat(originX);
+            const originYValue = parseFloat(originY);
+
+            // Calculate offsets with respect to the transformOrigin
+            const offsetX =
+                (screenWidth - elementWidth * scale) / 2 -
+                elementX -
+                originXValue * (1 - scale);
+            const offsetY =
+                (screenHeight - elementHeight * scale) / 2 -
+                elementY -
+                originYValue * (1 - scale);
+
+            // Apply scale and offsets to the element
+            targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+
+            // Update global variables
+            zoomLevel = scale;
+            panX = offsetX;
+            panY = offsetY;
+
+            fullScreenMode = true;
+            toggleOverlap("on");
+        }
+
+        // Handle keydown events
+        function handleKeyDown(event) {
+            const hotkeyActions = {
+                [hotkeysConfig.resetZoom]: resetZoom,
+                [hotkeysConfig.overlap]: toggleOverlap,
+                [hotkeysConfig.fitToScreen]: fitToScreen
+                // [hotkeysConfig.moveKey] : moveCanvas,
+            };
+
+            const action = hotkeyActions[event.code];
+            if (action) {
+                event.preventDefault();
+                action(event);
+            }
+        }
+
+        // Get Mouse position
+        function getMousePosition(e) {
+            mouseX = e.offsetX;
+            mouseY = e.offsetY;
+        }
+
+        targetElement.addEventListener("mousemove", getMousePosition);
+
+        // Handle events only inside the targetElement
+        let isKeyDownHandlerAttached = false;
+
+        function handleMouseMove() {
+            if (!isKeyDownHandlerAttached) {
+                document.addEventListener("keydown", handleKeyDown);
+                isKeyDownHandlerAttached = true;
+            }
+        }
+
+        function handleMouseLeave() {
+            if (isKeyDownHandlerAttached) {
+                document.removeEventListener("keydown", handleKeyDown);
+                isKeyDownHandlerAttached = false;
+            }
+        }
+
+        // Add mouse event handlers
+        targetElement.addEventListener("mousemove", handleMouseMove);
+        targetElement.addEventListener("mouseleave", handleMouseLeave);
+
+        // Reset zoom when click on another tab
+        elements.img2imgTabs.addEventListener("click", resetZoom);
+        elements.img2imgTabs.addEventListener("click", () => {
+            // targetElement.style.width = "";
+            if (parseInt(targetElement.style.width) > 865) {
+                setTimeout(fitToElement, 0);
+            }
+        });
+
+        targetElement.addEventListener("wheel", e => {
+            // change zoom level
+            const operation = e.deltaY > 0 ? "-" : "+";
+            changeZoomLevel(operation, e);
+
+            // Handle brush size adjustment with ctrl key pressed
+            if (e.ctrlKey || e.metaKey) {
+                e.preventDefault();
+
+                // Increase or decrease brush size based on scroll direction
+                adjustBrushSize(elemId, e.deltaY);
+            }
+        });
+
+        /**
+         * Handle the move event for pan functionality. Updates the panX and panY variables and applies the new transform to the target element.
+         * @param {MouseEvent} e - The mouse event.
+         */
+        function handleMoveKeyDown(e) {
+            if (e.code === hotkeysConfig.moveKey) {
+                if (!e.ctrlKey && !e.metaKey) {
+                    isMoving = true;
+                }
+            }
+        }
+
+        function handleMoveKeyUp(e) {
+            if (e.code === hotkeysConfig.moveKey) {
+                isMoving = false;
+            }
+        }
+
+        document.addEventListener("keydown", handleMoveKeyDown);
+        document.addEventListener("keyup", handleMoveKeyUp);
+
+        // Detect zoom level and update the pan speed.
+        function updatePanPosition(movementX, movementY) {
+            let panSpeed = 1.5;
+
+            if (zoomLevel > 8) {
+                panSpeed = 2.5;
+            }
+
+            panX = panX + movementX * panSpeed;
+            panY = panY + movementY * panSpeed;
+
+            targetElement.style.transform = `translate(${panX}px, ${panY}px) scale(${zoomLevel})`;
+            toggleOverlap("on");
+        }
+
+        function handleMoveByKey(e) {
+            if (isMoving) {
+                updatePanPosition(e.movementX, e.movementY);
+                targetElement.style.pointerEvents = "none";
+            } else {
+                targetElement.style.pointerEvents = "auto";
+            }
+        }
+
+        gradioApp().addEventListener("mousemove", handleMoveByKey);
+    }
+
+    applyZoomAndPan(elements.sketch, elementIDs.sketch);
+    applyZoomAndPan(elements.inpaint, elementIDs.inpaint);
+    applyZoomAndPan(elements.inpaintSketch, elementIDs.inpaintSketch);
+});
-- 
cgit v1.2.1


From c928c228af428b2743ac4442ceff3118fa1dca48 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Tue, 30 May 2023 16:35:52 +0300
Subject: a small fix for very wide images, because of the scroll bar was the
 wrong zoom

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

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 4bbec34f..f555960d 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -261,10 +261,13 @@ onUiLoaded(async() => {
             //Reset Zoom
             targetElement.style.transform = `translate(${0}px, ${0}px) scale(${1})`;
 
+            // Get scrollbar width to right-align the image
+            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+
             // Get element and screen dimensions
             const elementWidth = targetElement.offsetWidth;
             const elementHeight = targetElement.offsetHeight;
-            const screenWidth = window.innerWidth;
+            const screenWidth = window.innerWidth - scrollbarWidth;
             const screenHeight = window.innerHeight;
 
             // Get element's coordinates relative to the page
-- 
cgit v1.2.1


From c5d70fe1d3681d551683791268ed34004a843589 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Wed, 31 May 2023 23:02:49 +0300
Subject: Fixed the problem with sticking to the mouse, created a tooltip

---
 .../canvas-zoom-and-pan/javascript/zoom.js         | 68 +++++++++++++++++++---
 1 file changed, 61 insertions(+), 7 deletions(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index f555960d..e39ce296 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -48,6 +48,56 @@ onUiLoaded(async() => {
         let [zoomLevel, panX, panY] = [1, 0, 0];
         let fullScreenMode = false;
 
+        // Create tooltip
+        const toolTipElemnt = targetElement.querySelector(".image-container");
+        const tooltip = document.createElement("div");
+        tooltip.className = "tooltip";
+
+        // Creating an item of information
+        const info = document.createElement("i");
+        info.className = "tooltip-info";
+        info.textContent = "";
+
+        // Create a container for the contents of the tooltip
+        const tooltipContent = document.createElement("div");
+        tooltipContent.className = "tooltip-content";
+
+        // Add info about hotkets
+        const hotkeys = [
+            {key: "Shift + wheel", action: "Zoom canvas"},
+            {
+                key: hotkeysConfig.moveKey.charAt(
+                    hotkeysConfig.moveKey.length - 1
+                ),
+                action: "Move canvas"
+            },
+            {
+                key: hotkeysConfig.resetZoom.charAt(
+                    hotkeysConfig.resetZoom.length - 1
+                ),
+                action: "Reset zoom"
+            },
+            {
+                key: hotkeysConfig.fitToScreen.charAt(
+                    hotkeysConfig.fitToScreen.length - 1
+                ),
+                action: "Fullscreen mode"
+            },
+            {key: "Ctr+wheel", action: "Adjust brush size"}
+        ];
+        hotkeys.forEach(function(hotkey) {
+            const p = document.createElement("p");
+            p.innerHTML = "<b>" + hotkey.key + "</b>" + " - " + hotkey.action;
+            tooltipContent.appendChild(p);
+        });
+
+        // Add information and content elements to the tooltip element
+        tooltip.appendChild(info);
+        tooltip.appendChild(tooltipContent);
+
+        // Add a hint element to the target element
+        toolTipElemnt.appendChild(tooltip);
+
         // In the course of research, it was found that the tag img is very harmful when zooming and creates white canvases. This hack allows you to almost never think about this problem, it has no effect on webui.
         function fixCanvas() {
             const activeTab = getActiveTab(elements).textContent.trim();
@@ -262,7 +312,8 @@ onUiLoaded(async() => {
             targetElement.style.transform = `translate(${0}px, ${0}px) scale(${1})`;
 
             // Get scrollbar width to right-align the image
-            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            const scrollbarWidth =
+                window.innerWidth - document.documentElement.clientWidth;
 
             // Get element and screen dimensions
             const elementWidth = targetElement.offsetWidth;
@@ -315,7 +366,6 @@ onUiLoaded(async() => {
                 [hotkeysConfig.resetZoom]: resetZoom,
                 [hotkeysConfig.overlap]: toggleOverlap,
                 [hotkeysConfig.fitToScreen]: fitToScreen
-                // [hotkeysConfig.moveKey] : moveCanvas,
             };
 
             const action = hotkeyActions[event.code];
@@ -377,13 +427,12 @@ onUiLoaded(async() => {
             }
         });
 
-        /**
-         * Handle the move event for pan functionality. Updates the panX and panY variables and applies the new transform to the target element.
-         * @param {MouseEvent} e - The mouse event.
-         */
+        // Handle the move event for pan functionality. Updates the panX and panY variables and applies the new transform to the target element.
         function handleMoveKeyDown(e) {
             if (e.code === hotkeysConfig.moveKey) {
-                if (!e.ctrlKey && !e.metaKey) {
+                if (!e.ctrlKey && !e.metaKey && isKeyDownHandlerAttached) {
+                    e.preventDefault();
+                    document.activeElement.blur();
                     isMoving = true;
                 }
             }
@@ -422,6 +471,11 @@ onUiLoaded(async() => {
             }
         }
 
+        // Prevents sticking to the mouse
+        window.onblur = function() {
+            isMoving = false;
+        };
+
         gradioApp().addEventListener("mousemove", handleMoveByKey);
     }
 
-- 
cgit v1.2.1


From 68c4beab4669b64f31b92615d27ea7145effaaae Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Fri, 2 Jun 2023 01:04:17 +0300
Subject: Added the ability to configure hotkeys via webui

Now you can configure the hotkeys directly through the settings

JS and Python scripts are tested and code style compliant
---
 .../canvas-zoom-and-pan/javascript/zoom.js         | 88 ++++++++++++++++------
 1 file changed, 67 insertions(+), 21 deletions(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index e39ce296..4e0e5ba1 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -14,14 +14,60 @@ function getActiveTab(elements, all = false) {
     }
 }
 
+// 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
+function isSingleLetter(value) {
+    return (
+        typeof value === "string" && value.length === 1 && /[a-z]/i.test(value)
+    );
+}
+
+// Create hotkeyConfig from opts
+function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
+    const result = {};
+    for (const key in defaultHotkeysConfig) {
+        if (hotkeysConfigOpts[key] && isSingleLetter(hotkeysConfigOpts[key])) {
+            // If the property passes the test, add 'Key' before it and save it
+            result[key] = "Key" + hotkeysConfigOpts[key].toUpperCase();
+        } else {
+            // Если свойство не прошло проверку, сохраняем значение по умолчанию
+            console.error(
+                `Hotkey: "${hotkeysConfigOpts[key]}" for ${key}, must contain only 1 letter. The default hotkey is set: ${defaultHotkeysConfig[key][3]}`
+            );
+            result[key] = defaultHotkeysConfig[key];
+        }
+    }
+    return result;
+}
+
+// Main
 onUiLoaded(async() => {
-    const hotkeysConfig = {
-        resetZoom: "KeyR",
-        fitToScreen: "KeyS",
-        moveKey: "KeyF",
-        overlap: "KeyO"
+    const hotkeysConfigOpts = await waitForOpts();
+
+    // Default config
+    const defaultHotkeysConfig = {
+        canvas_hotkey_reset: "KeyR",
+        canvas_hotkey_fullscreen: "KeyS",
+        canvas_hotkey_move: "KeyF",
+        canvas_hotkey_overlap: "KeyO"
     };
 
+    const hotkeysConfig = createHotkeyConfig(
+        defaultHotkeysConfig,
+        hotkeysConfigOpts
+    );
+
     let isMoving = false;
     let mouseX, mouseY;
 
@@ -65,25 +111,25 @@ onUiLoaded(async() => {
         // Add info about hotkets
         const hotkeys = [
             {key: "Shift + wheel", action: "Zoom canvas"},
+            {key: "Ctr+wheel", action: "Adjust brush size"},
             {
-                key: hotkeysConfig.moveKey.charAt(
-                    hotkeysConfig.moveKey.length - 1
-                ),
-                action: "Move canvas"
-            },
-            {
-                key: hotkeysConfig.resetZoom.charAt(
-                    hotkeysConfig.resetZoom.length - 1
+                key: hotkeysConfig.canvas_hotkey_reset.charAt(
+                    hotkeysConfig.canvas_hotkey_reset.length - 1
                 ),
                 action: "Reset zoom"
             },
             {
-                key: hotkeysConfig.fitToScreen.charAt(
-                    hotkeysConfig.fitToScreen.length - 1
+                key: hotkeysConfig.canvas_hotkey_fullscreen.charAt(
+                    hotkeysConfig.canvas_hotkey_fullscreen.length - 1
                 ),
                 action: "Fullscreen mode"
             },
-            {key: "Ctr+wheel", action: "Adjust brush size"}
+            {
+                key: hotkeysConfig.canvas_hotkey_move.charAt(
+                    hotkeysConfig.canvas_hotkey_move.length - 1
+                ),
+                action: "Move canvas"
+            }
         ];
         hotkeys.forEach(function(hotkey) {
             const p = document.createElement("p");
@@ -363,9 +409,9 @@ onUiLoaded(async() => {
         // Handle keydown events
         function handleKeyDown(event) {
             const hotkeyActions = {
-                [hotkeysConfig.resetZoom]: resetZoom,
-                [hotkeysConfig.overlap]: toggleOverlap,
-                [hotkeysConfig.fitToScreen]: fitToScreen
+                [hotkeysConfig.canvas_hotkey_reset]: resetZoom,
+                [hotkeysConfig.canvas_hotkey_overlap]: toggleOverlap,
+                [hotkeysConfig.canvas_hotkey_fullscreen]: fitToScreen
             };
 
             const action = hotkeyActions[event.code];
@@ -429,7 +475,7 @@ onUiLoaded(async() => {
 
         // Handle the move event for pan functionality. Updates the panX and panY variables and applies the new transform to the target element.
         function handleMoveKeyDown(e) {
-            if (e.code === hotkeysConfig.moveKey) {
+            if (e.code === hotkeysConfig.canvas_hotkey_move) {
                 if (!e.ctrlKey && !e.metaKey && isKeyDownHandlerAttached) {
                     e.preventDefault();
                     document.activeElement.blur();
@@ -439,7 +485,7 @@ onUiLoaded(async() => {
         }
 
         function handleMoveKeyUp(e) {
-            if (e.code === hotkeysConfig.moveKey) {
+            if (e.code === hotkeysConfig.canvas_hotkey_move) {
                 isMoving = false;
             }
         }
-- 
cgit v1.2.1


From 38aca6f605d2653054f0b9f7927cc15842bacac5 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Fri, 2 Jun 2023 01:26:25 +0300
Subject: Added a hotkey repeat check to avoid bugs

---
 .../canvas-zoom-and-pan/javascript/zoom.js               | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 4e0e5ba1..b9c3345a 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -36,18 +36,20 @@ function isSingleLetter(value) {
 // Create hotkeyConfig from opts
 function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
     const result = {};
+    const usedKeys = new Set();
+
     for (const key in defaultHotkeysConfig) {
-        if (hotkeysConfigOpts[key] && isSingleLetter(hotkeysConfigOpts[key])) {
-            // If the property passes the test, add 'Key' before it and save it
-            result[key] = "Key" + hotkeysConfigOpts[key].toUpperCase();
+        if (hotkeysConfigOpts[key] && isSingleLetter(hotkeysConfigOpts[key]) && !usedKeys.has(hotkeysConfigOpts[key].toUpperCase())) {
+            // If the property passed the test and has not yet been used, add 'Key' before it and save it
+            result[key] = 'Key' + hotkeysConfigOpts[key].toUpperCase();
+            usedKeys.add(hotkeysConfigOpts[key].toUpperCase());
         } else {
-            // Если свойство не прошло проверку, сохраняем значение по умолчанию
-            console.error(
-                `Hotkey: "${hotkeysConfigOpts[key]}" for ${key}, must contain only 1 letter. The default hotkey is set: ${defaultHotkeysConfig[key][3]}`
-            );
+            // If the property does not pass the test or has already been used, we keep the default value
+            console.error(`Hotkey: ${hotkeysConfigOpts[key]} for ${key} is repeated and conflicts with another hotkey or is not 1 letter. The default hotkey is used: ${defaultHotkeysConfig[key]}`);
             result[key] = defaultHotkeysConfig[key];
         }
     }
+
     return result;
 }
 
-- 
cgit v1.2.1


From d306d25e5652a23cd1d92bd01a9cc3f06a6999b8 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Fri, 2 Jun 2023 19:10:28 +0300
Subject: Made tooltip optional.

You can disable it in the settings.
Enabled by default
---
 .../canvas-zoom-and-pan/javascript/zoom.js         | 122 ++++++++++++---------
 1 file changed, 71 insertions(+), 51 deletions(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index b9c3345a..5278ca11 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -39,13 +39,23 @@ function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
     const usedKeys = new Set();
 
     for (const key in defaultHotkeysConfig) {
-        if (hotkeysConfigOpts[key] && isSingleLetter(hotkeysConfigOpts[key]) && !usedKeys.has(hotkeysConfigOpts[key].toUpperCase())) {
+        if (typeof hotkeysConfigOpts[key] === "boolean") {
+            result[key] = hotkeysConfigOpts[key];
+            continue;
+        }
+        if (
+            hotkeysConfigOpts[key] &&
+            isSingleLetter(hotkeysConfigOpts[key]) &&
+            !usedKeys.has(hotkeysConfigOpts[key].toUpperCase())
+        ) {
             // If the property passed the test and has not yet been used, add 'Key' before it and save it
-            result[key] = 'Key' + hotkeysConfigOpts[key].toUpperCase();
+            result[key] = "Key" + hotkeysConfigOpts[key].toUpperCase();
             usedKeys.add(hotkeysConfigOpts[key].toUpperCase());
         } else {
             // If the property does not pass the test or has already been used, we keep the default value
-            console.error(`Hotkey: ${hotkeysConfigOpts[key]} for ${key} is repeated and conflicts with another hotkey or is not 1 letter. The default hotkey is used: ${defaultHotkeysConfig[key]}`);
+            console.error(
+                `Hotkey: ${hotkeysConfigOpts[key]} for ${key} is repeated and conflicts with another hotkey or is not 1 letter. The default hotkey is used: ${defaultHotkeysConfig[key]}`
+            );
             result[key] = defaultHotkeysConfig[key];
         }
     }
@@ -62,7 +72,8 @@ onUiLoaded(async() => {
         canvas_hotkey_reset: "KeyR",
         canvas_hotkey_fullscreen: "KeyS",
         canvas_hotkey_move: "KeyF",
-        canvas_hotkey_overlap: "KeyO"
+        canvas_hotkey_overlap: "KeyO",
+        canvas_show_tooltip: true
     };
 
     const hotkeysConfig = createHotkeyConfig(
@@ -97,54 +108,63 @@ onUiLoaded(async() => {
         let fullScreenMode = false;
 
         // Create tooltip
-        const toolTipElemnt = targetElement.querySelector(".image-container");
-        const tooltip = document.createElement("div");
-        tooltip.className = "tooltip";
-
-        // Creating an item of information
-        const info = document.createElement("i");
-        info.className = "tooltip-info";
-        info.textContent = "";
-
-        // Create a container for the contents of the tooltip
-        const tooltipContent = document.createElement("div");
-        tooltipContent.className = "tooltip-content";
-
-        // Add info about hotkets
-        const hotkeys = [
-            {key: "Shift + wheel", action: "Zoom canvas"},
-            {key: "Ctr+wheel", action: "Adjust brush size"},
-            {
-                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
-                ),
-                action: "Fullscreen mode"
-            },
-            {
-                key: hotkeysConfig.canvas_hotkey_move.charAt(
-                    hotkeysConfig.canvas_hotkey_move.length - 1
-                ),
-                action: "Move canvas"
-            }
-        ];
-        hotkeys.forEach(function(hotkey) {
-            const p = document.createElement("p");
-            p.innerHTML = "<b>" + hotkey.key + "</b>" + " - " + hotkey.action;
-            tooltipContent.appendChild(p);
-        });
-
-        // Add information and content elements to the tooltip element
-        tooltip.appendChild(info);
-        tooltip.appendChild(tooltipContent);
+        function createTooltip() {
+            const toolTipElemnt =
+                targetElement.querySelector(".image-container");
+            const tooltip = document.createElement("div");
+            tooltip.className = "tooltip";
+
+            // Creating an item of information
+            const info = document.createElement("i");
+            info.className = "tooltip-info";
+            info.textContent = "";
+
+            // Create a container for the contents of the tooltip
+            const tooltipContent = document.createElement("div");
+            tooltipContent.className = "tooltip-content";
+
+            // Add info about hotkets
+            const hotkeys = [
+                {key: "Shift + wheel", action: "Zoom canvas"},
+                {key: "Ctr+wheel", action: "Adjust brush size"},
+                {
+                    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
+                    ),
+                    action: "Fullscreen mode"
+                },
+                {
+                    key: hotkeysConfig.canvas_hotkey_move.charAt(
+                        hotkeysConfig.canvas_hotkey_move.length - 1
+                    ),
+                    action: "Move canvas"
+                }
+            ];
+            hotkeys.forEach(function(hotkey) {
+                const p = document.createElement("p");
+                p.innerHTML =
+                    "<b>" + hotkey.key + "</b>" + " - " + hotkey.action;
+                tooltipContent.appendChild(p);
+            });
+
+            // Add information and content elements to the tooltip element
+            tooltip.appendChild(info);
+            tooltip.appendChild(tooltipContent);
+
+            // Add a hint element to the target element
+            toolTipElemnt.appendChild(tooltip);
+        }
 
-        // Add a hint element to the target element
-        toolTipElemnt.appendChild(tooltip);
+        //Show tool tip if setting enable
+        if (hotkeysConfig.canvas_show_tooltip) {
+            createTooltip();
+        }
 
         // In the course of research, it was found that the tag img is very harmful when zooming and creates white canvases. This hack allows you to almost never think about this problem, it has no effect on webui.
         function fixCanvas() {
-- 
cgit v1.2.1


From 1e0ab4015dbda84eb8b795714cba5b96d674f18c Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Sat, 3 Jun 2023 02:18:49 +0300
Subject: Added the ability to swap the zoom hotkeys and resize the brush

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

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 5278ca11..8501a24b 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -73,9 +73,10 @@ onUiLoaded(async() => {
         canvas_hotkey_fullscreen: "KeyS",
         canvas_hotkey_move: "KeyF",
         canvas_hotkey_overlap: "KeyO",
-        canvas_show_tooltip: true
+        canvas_show_tooltip: true,
+        canvas_swap_controls: false
     };
-
+    // swap the actions for ctr + wheel and shift + wheel
     const hotkeysConfig = createHotkeyConfig(
         defaultHotkeysConfig,
         hotkeysConfigOpts
@@ -124,9 +125,12 @@ onUiLoaded(async() => {
             tooltipContent.className = "tooltip-content";
 
             // Add info about hotkets
+            const zoomKey = hotkeysConfig.canvas_swap_controls ? "Ctrl" : "Shift";
+            const adjustKey = hotkeysConfig.canvas_swap_controls ? "Shift" : "Ctrl";
+
             const hotkeys = [
-                {key: "Shift + wheel", action: "Zoom canvas"},
-                {key: "Ctr+wheel", action: "Adjust brush size"},
+                {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
@@ -277,7 +281,10 @@ onUiLoaded(async() => {
 
         // Change the zoom level based on user interaction
         function changeZoomLevel(operation, e) {
-            if (e.shiftKey) {
+            if (
+                (!hotkeysConfig.canvas_swap_controls && e.shiftKey) ||
+                (hotkeysConfig.canvas_swap_controls && e.ctrlKey)
+            ) {
                 e.preventDefault();
 
                 let zoomPosX, zoomPosY;
@@ -487,7 +494,11 @@ onUiLoaded(async() => {
             changeZoomLevel(operation, e);
 
             // Handle brush size adjustment with ctrl key pressed
-            if (e.ctrlKey || e.metaKey) {
+            if (
+                (hotkeysConfig.canvas_swap_controls && e.shiftKey) ||
+                (!hotkeysConfig.canvas_swap_controls &&
+                    (e.ctrlKey || e.metaKey))
+            ) {
                 e.preventDefault();
 
                 // Increase or decrease brush size based on scroll direction
-- 
cgit v1.2.1


From 5b682be59a64c3ca8c7d2ad0987d8d65f3cbd8a8 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Sat, 3 Jun 2023 02:24:57 +0300
Subject: small ui fix

In the error the user will see R instead of KeyR
---
 extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 8501a24b..41d9ddf4 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -54,7 +54,7 @@ function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
         } else {
             // If the property does not pass the test or has already been used, we keep the default value
             console.error(
-                `Hotkey: ${hotkeysConfigOpts[key]} for ${key} is repeated and conflicts with another hotkey or is not 1 letter. The default hotkey is used: ${defaultHotkeysConfig[key]}`
+                `Hotkey: ${hotkeysConfigOpts[key]} for ${key} is repeated and conflicts with another hotkey or is not 1 letter. The default hotkey is used: ${defaultHotkeysConfig[key][3]}`
             );
             result[key] = defaultHotkeysConfig[key];
         }
-- 
cgit v1.2.1


From 3e3635b114bf73b62ed4c5372c8f96d1afa94023 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Sat, 3 Jun 2023 19:24:05 +0300
Subject: Made the applyZoomAndPan function global for other extensions

---
 .../canvas-zoom-and-pan/javascript/zoom.js            | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 41d9ddf4..504eb35e 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -103,7 +103,14 @@ onUiLoaded(async() => {
 
     const elements = await getElements();
 
-    function applyZoomAndPan(targetElement, elemId) {
+    function applyZoomAndPan(elemId) {
+        const targetElement = gradioApp().querySelector(elemId);
+
+        if (!targetElement) {
+            console.log("Element not found");
+            return;
+        }
+
         targetElement.style.transformOrigin = "0 0";
         let [zoomLevel, panX, panY] = [1, 0, 0];
         let fullScreenMode = false;
@@ -558,7 +565,11 @@ 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;
 });
-- 
cgit v1.2.1


From dc273f7473143b9f66f4d04cc5f4df1fca6defd8 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Sun, 4 Jun 2023 01:18:27 +0300
Subject: Fixed the redmask bug

---
 .../canvas-zoom-and-pan/javascript/zoom.js         | 68 +++++++++++++++++++++-
 1 file changed, 67 insertions(+), 1 deletion(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 504eb35e..af935220 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -14,6 +14,23 @@ 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];
+  }
+
+  // Get Active main tab to prevent "Undo" on text2img from being disabled
+  function getActiveMainTab() {
+    const selectedTab = document.querySelector("#tabs .tab-nav button.selected");
+    return selectedTab;
+  }
+
 // Wait until opts loaded
 async function waitForOpts() {
     return new Promise(resolve => {
@@ -63,6 +80,43 @@ 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 = document.querySelector(mainTabId);
+        const img = mainTab.querySelector("img");
+        const imageARPreview = document.querySelector("#imageARPreview");
+  
+        if (!img || !imageARPreview) return;
+  
+        imageARPreview.style.transform = "";
+        if (parseFloat(mainTab.style.width) > 865) {
+          const transformValues = mainTab.style.transform.match(/[-+]?[0-9]*\.?[0-9]+/g).map(Number);
+          const [posX, posY , zoom] = transformValues;
+  
+          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";
+        }, 300);
+      }
+  
 // Main
 onUiLoaded(async() => {
     const hotkeysConfigOpts = await waitForOpts();
@@ -89,7 +143,8 @@ onUiLoaded(async() => {
         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() {
@@ -103,6 +158,17 @@ onUiLoaded(async() => {
 
     const elements = await getElements();
 
+    // Apply functionality to the range inputs
+    const rangeInputs = elements.rangeGroup
+    ? elements.rangeGroup.querySelectorAll("input")
+    : [document.querySelector("#img2img_width input[type='range']"), document.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);
 
-- 
cgit v1.2.1


From 1a491783309215bfe2cfcb7c32ebd9ac2057c501 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Sun, 4 Jun 2023 03:04:46 +0300
Subject: Made a function applyZoomAndPan isolated each instance

Isolated each instance of applyZoomAndPan, now if you add another element to the page, they will work correctly
---
 .../canvas-zoom-and-pan/javascript/zoom.js         | 210 +++++++++++----------
 1 file changed, 113 insertions(+), 97 deletions(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index af935220..a6434743 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -1,5 +1,3 @@
-// Main
-
 // Helper functions
 // Get active tab
 function getActiveTab(elements, all = false) {
@@ -15,21 +13,23 @@ function getActiveTab(elements, all = false) {
 }
 
 // Get tab ID
-function getTabId(elements,elementIDs) {
+function getTabId(elements, elementIDs) {
     const activeTab = getActiveTab(elements);
     const tabIdLookup = {
-      Sketch: elementIDs.sketch,
-      "Inpaint sketch": elementIDs.inpaintSketch,
-      Inpaint: elementIDs.inpaint,
+        "Sketch": elementIDs.sketch,
+        "Inpaint sketch": elementIDs.inpaintSketch,
+        "Inpaint": elementIDs.inpaint
     };
     return tabIdLookup[activeTab.innerText];
-  }
+}
 
-  // Get Active main tab to prevent "Undo" on text2img from being disabled
-  function getActiveMainTab() {
-    const selectedTab = document.querySelector("#tabs .tab-nav button.selected");
+// Get Active main tab to prevent "Undo" on text2img from being disabled
+function getActiveMainTab() {
+    const selectedTab = gradioApp().querySelector(
+        "#tabs .tab-nav button.selected"
+    );
     return selectedTab;
-  }
+}
 
 // Wait until opts loaded
 async function waitForOpts() {
@@ -80,43 +80,45 @@ 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 = document.querySelector(mainTabId);
-        const img = mainTab.querySelector("img");
-        const imageARPreview = document.querySelector("#imageARPreview");
-  
-        if (!img || !imageARPreview) return;
-  
-        imageARPreview.style.transform = "";
-        if (parseFloat(mainTab.style.width) > 865) {
-          const transformValues = mainTab.style.transform.match(/[-+]?[0-9]*\.?[0-9]+/g).map(Number);
-          const [posX, posY , zoom] = transformValues;
-  
-          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";
-        }, 300);
-      }
-  
+/**
+ * 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 transformValues = mainTab.style.transform
+            .match(/[-+]?[0-9]*\.?[0-9]+/g)
+            .map(Number);
+        const [posX, posY, zoom] = transformValues;
+
+        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";
+    }, 300);
+}
+
 // Main
 onUiLoaded(async() => {
     const hotkeysConfigOpts = await waitForOpts();
@@ -138,18 +140,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",
-        rangeGroup: "#img2img_column_size",
+        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]])
@@ -157,17 +160,20 @@ onUiLoaded(async() => {
     }
 
     const elements = await getElements();
-
-    // Apply functionality to the range inputs
-    const rangeInputs = elements.rangeGroup
-    ? elements.rangeGroup.querySelectorAll("input")
-    : [document.querySelector("#img2img_width input[type='range']"), document.querySelector("#img2img_height input[type='range']")];
-
-    rangeInputs.forEach((input) => {
-      if (input) {
-        input.addEventListener("input",() => restoreImgRedMask(elements,elementIDs));
-      }
-      });
+    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);
@@ -178,7 +184,12 @@ onUiLoaded(async() => {
         }
 
         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
@@ -197,7 +208,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";
 
@@ -205,21 +216,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"
                 }
             ];
@@ -259,12 +264,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"]`
@@ -342,11 +349,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;
@@ -362,9 +372,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;
                 }
 
@@ -372,8 +382,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
                 );
@@ -424,9 +435,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");
@@ -500,9 +511,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");
@@ -538,6 +549,8 @@ onUiLoaded(async() => {
             if (!isKeyDownHandlerAttached) {
                 document.addEventListener("keydown", handleKeyDown);
                 isKeyDownHandlerAttached = true;
+
+                activeElement = elemId;
             }
         }
 
@@ -545,6 +558,8 @@ onUiLoaded(async() => {
             if (isKeyDownHandlerAttached) {
                 document.removeEventListener("keydown", handleKeyDown);
                 isKeyDownHandlerAttached = false;
+
+                activeElement = null;
             }
         }
 
@@ -601,21 +616,23 @@ 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 =
+                elemData[elemId].panX + movementX * panSpeed;
+            elemData[elemId].panY =
+                elemData[elemId].panY + movementY * panSpeed;
 
-            targetElement.style.transform = `translate(${panX}px, ${panY}px) scale(${zoomLevel})`;
+            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 {
@@ -635,7 +652,6 @@ onUiLoaded(async() => {
     applyZoomAndPan(elementIDs.inpaint);
     applyZoomAndPan(elementIDs.inpaintSketch);
 
-
     // Make the function global so that other extensions can take advantage of this solution
     window.applyZoomAndPan = applyZoomAndPan;
 });
-- 
cgit v1.2.1


From ad3d6d9a22ee8dc4e97c28f87d82b604bc7f5efe Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Sun, 4 Jun 2023 03:38:21 +0300
Subject: Fixed visual bugs

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

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index a6434743..7ae2c635 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -622,13 +622,14 @@ onUiLoaded(async() => {
                 panSpeed = 3.5;
             }
 
-            elemData[elemId].panX =
-                elemData[elemId].panX + movementX * panSpeed;
-            elemData[elemId].panY =
-                elemData[elemId].panY + movementY * panSpeed;
+            elemData[elemId].panX += movementX * panSpeed;
+            elemData[elemId].panY += movementY * panSpeed;
 
-            targetElement.style.transform = `translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px) scale(${elemData[elemId].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) {
-- 
cgit v1.2.1


From 0432e37843cd99e48732dbe7cc6e635bfcce8ec3 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Sun, 4 Jun 2023 04:17:55 +0300
Subject: Correct definition zoom level

I changed the regular expression and now I always have to select scale from style.transfo
---
 .../canvas-zoom-and-pan/javascript/zoom.js          | 21 ++++++++-------------
 1 file changed, 8 insertions(+), 13 deletions(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 7ae2c635..2a2ed999 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -23,14 +23,6 @@ function getTabId(elements, elementIDs) {
     return tabIdLookup[activeTab.innerText];
 }
 
-// Get Active main tab to prevent "Undo" on text2img from being disabled
-function getActiveMainTab() {
-    const selectedTab = gradioApp().querySelector(
-        "#tabs .tab-nav button.selected"
-    );
-    return selectedTab;
-}
-
 // Wait until opts loaded
 async function waitForOpts() {
     return new Promise(resolve => {
@@ -101,10 +93,13 @@ function restoreImgRedMask(elements, elementIDs) {
 
     imageARPreview.style.transform = "";
     if (parseFloat(mainTab.style.width) > 865) {
-        const transformValues = mainTab.style.transform
-            .match(/[-+]?[0-9]*\.?[0-9]+/g)
-            .map(Number);
-        const [posX, posY, zoom] = transformValues;
+        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})`;
@@ -116,7 +111,7 @@ function restoreImgRedMask(elements, elementIDs) {
 
     setTimeout(() => {
         img.style.display = "none";
-    }, 300);
+    }, 400);
 }
 
 // Main
-- 
cgit v1.2.1


From 8fd20bd4c3cdd3deacf89e48b323d428de1e16e0 Mon Sep 17 00:00:00 2001
From: Aarni Koskela <akx@iki.fi>
Date: Mon, 5 Jun 2023 10:19:06 +0300
Subject: Zoom and Pan: move helpers into its namespace to avoid littering
 global scope

---
 .../canvas-zoom-and-pan/javascript/zoom.js         | 192 ++++++++++-----------
 1 file changed, 95 insertions(+), 97 deletions(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 2a2ed999..0576c079 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -1,121 +1,119 @@
-// Helper functions
-// Get active tab
-function getActiveTab(elements, all = false) {
-    const tabs = elements.img2imgTabs.querySelectorAll("button");
+onUiLoaded(async() => {
+    // Helper functions
+    // Get active tab
+    function getActiveTab(elements, all = false) {
+        const tabs = elements.img2imgTabs.querySelectorAll("button");
 
-    if (all) return tabs;
+        if (all) return tabs;
 
-    for (let tab of tabs) {
-        if (tab.classList.contains("selected")) {
-            return tab;
+        for (let tab of tabs) {
+            if (tab.classList.contains("selected")) {
+                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
-function isSingleLetter(value) {
-    return (
-        typeof value === "string" && value.length === 1 && /[a-z]/i.test(value)
-    );
-}
+    // 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];
+    }
 
-// Create hotkeyConfig from opts
-function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
-    const result = {};
-    const usedKeys = new Set();
+    // 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);
+        });
+    }
 
-    for (const key in defaultHotkeysConfig) {
-        if (typeof hotkeysConfigOpts[key] === "boolean") {
-            result[key] = hotkeysConfigOpts[key];
-            continue;
-        }
-        if (
-            hotkeysConfigOpts[key] &&
-            isSingleLetter(hotkeysConfigOpts[key]) &&
-            !usedKeys.has(hotkeysConfigOpts[key].toUpperCase())
-        ) {
-            // If the property passed the test and has not yet been used, add 'Key' before it and save it
-            result[key] = "Key" + hotkeysConfigOpts[key].toUpperCase();
-            usedKeys.add(hotkeysConfigOpts[key].toUpperCase());
-        } else {
-            // If the property does not pass the test or has already been used, we keep the default value
-            console.error(
-                `Hotkey: ${hotkeysConfigOpts[key]} for ${key} is repeated and conflicts with another hotkey or is not 1 letter. The default hotkey is used: ${defaultHotkeysConfig[key][3]}`
-            );
-            result[key] = defaultHotkeysConfig[key];
-        }
+    // Check is hotkey valid
+    function isSingleLetter(value) {
+        return (
+            typeof value === "string" && value.length === 1 && /[a-z]/i.test(value)
+        );
     }
 
-    return result;
-}
+    // Create hotkeyConfig from opts
+    function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
+        const result = {};
+        const usedKeys = new Set();
 
-/**
- * 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.
- */
+        for (const key in defaultHotkeysConfig) {
+            if (typeof hotkeysConfigOpts[key] === "boolean") {
+                result[key] = hotkeysConfigOpts[key];
+                continue;
+            }
+            if (
+                hotkeysConfigOpts[key] &&
+                isSingleLetter(hotkeysConfigOpts[key]) &&
+                !usedKeys.has(hotkeysConfigOpts[key].toUpperCase())
+            ) {
+                // If the property passed the test and has not yet been used, add 'Key' before it and save it
+                result[key] = "Key" + hotkeysConfigOpts[key].toUpperCase();
+                usedKeys.add(hotkeysConfigOpts[key].toUpperCase());
+            } else {
+                // If the property does not pass the test or has already been used, we keep the default value
+                console.error(
+                    `Hotkey: ${hotkeysConfigOpts[key]} for ${key} is repeated and conflicts with another hotkey or is not 1 letter. The default hotkey is used: ${defaultHotkeysConfig[key][3]}`
+                );
+                result[key] = defaultHotkeysConfig[key];
+            }
+        }
 
-function restoreImgRedMask(elements, elementIDs) {
-    const mainTabId = getTabId(elements, elementIDs);
+        return result;
+    }
 
-    if (!mainTabId) return;
+    /**
+     * 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);
 
-    const mainTab = gradioApp().querySelector(mainTabId);
-    const img = mainTab.querySelector("img");
-    const imageARPreview = gradioApp().querySelector("#imageARPreview");
+        if (!mainTabId) return;
 
-    if (!img || !imageARPreview) return;
+        const mainTab = gradioApp().querySelector(mainTabId);
+        const img = mainTab.querySelector("img");
+        const imageARPreview = gradioApp().querySelector("#imageARPreview");
 
-    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 (!img || !imageARPreview) return;
 
-        if (scaleMatch && scaleMatch[1]) {
-            zoom = Number(scaleMatch[1]);
-        }
+        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
 
-        imageARPreview.style.transformOrigin = "0 0";
-        imageARPreview.style.transform = `scale(${zoom})`;
-    }
+            if (scaleMatch && scaleMatch[1]) {
+                zoom = Number(scaleMatch[1]);
+            }
 
-    if (img.style.display !== "none") return;
+            imageARPreview.style.transformOrigin = "0 0";
+            imageARPreview.style.transform = `scale(${zoom})`;
+        }
 
-    img.style.display = "block";
+        if (img.style.display !== "none") return;
 
-    setTimeout(() => {
-        img.style.display = "none";
-    }, 400);
-}
+        img.style.display = "block";
+
+        setTimeout(() => {
+            img.style.display = "none";
+        }, 400);
+    }
 
-// Main
-onUiLoaded(async() => {
     const hotkeysConfigOpts = await waitForOpts();
 
     // Default config
-- 
cgit v1.2.1


From 68cda4f2139487a692074e653d986875d0fe68f5 Mon Sep 17 00:00:00 2001
From: Aarni Koskela <akx@iki.fi>
Date: Mon, 5 Jun 2023 10:26:08 +0300
Subject: Zoom and Pan: use elementIDs from closure scope

---
 .../canvas-zoom-and-pan/javascript/zoom.js         | 36 +++++++++++-----------
 1 file changed, 18 insertions(+), 18 deletions(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 0576c079..bf5ebc51 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -1,4 +1,17 @@
 onUiLoaded(async() => {
+    const elementIDs = {
+        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) {
@@ -14,14 +27,9 @@ onUiLoaded(async() => {
     }
 
     // Get tab ID
-    function getTabId(elements, elementIDs) {
+    function getTabId(elements) {
         const activeTab = getActiveTab(elements);
-        const tabIdLookup = {
-            "Sketch": elementIDs.sketch,
-            "Inpaint sketch": elementIDs.inpaintSketch,
-            "Inpaint": elementIDs.inpaint
-        };
-        return tabIdLookup[activeTab.innerText];
+        return tabNameToElementId[activeTab.innerText];
     }
 
     // Wait until opts loaded
@@ -80,8 +88,8 @@ onUiLoaded(async() => {
      * 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);
+    function restoreImgRedMask(elements) {
+        const mainTabId = getTabId(elements);
 
         if (!mainTabId) return;
 
@@ -135,14 +143,6 @@ onUiLoaded(async() => {
     let mouseX, mouseY;
     let activeElement;
 
-    const elementIDs = {
-        sketch: "#img2img_sketch",
-        inpaint: "#img2maskimg",
-        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))
@@ -164,7 +164,7 @@ onUiLoaded(async() => {
 
     rangeInputs.forEach(input => {
         if (input) {
-            input.addEventListener("input", () => restoreImgRedMask(elements, elementIDs));
+            input.addEventListener("input", () => restoreImgRedMask(elements));
         }
     });
 
-- 
cgit v1.2.1


From afbb0b5f863e910ee41df81f4c152ca9998bb310 Mon Sep 17 00:00:00 2001
From: Aarni Koskela <akx@iki.fi>
Date: Mon, 5 Jun 2023 10:31:15 +0300
Subject: Zoom and Pan: simplify getElements (it's not actually async)

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

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index bf5ebc51..63de9140 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -143,16 +143,10 @@ onUiLoaded(async() => {
     let mouseX, mouseY;
     let activeElement;
 
-    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 elements = Object.fromEntries(Object.keys(elementIDs).map((id) => [
+        id,
+        gradioApp().querySelector(elementIDs[id]),
+    ]));
     const elemData = {};
 
     // Apply functionality to the range inputs. Restore redmask and correct for long images.
-- 
cgit v1.2.1


From 6163b38ad996aef96e994521078ef2a63484c274 Mon Sep 17 00:00:00 2001
From: Aarni Koskela <akx@iki.fi>
Date: Mon, 5 Jun 2023 10:36:45 +0300
Subject: Zoom and Pan: use for instead of forEach

---
 .../canvas-zoom-and-pan/javascript/zoom.js              | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 63de9140..a1e5b482 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -150,17 +150,15 @@ onUiLoaded(async() => {
     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 => {
-        if (input) {
-            input.addEventListener("input", () => restoreImgRedMask(elements));
-        }
-    });
+    for (const input of rangeInputs) {
+        input?.addEventListener("input", () => restoreImgRedMask(elements));
+    }
 
     function applyZoomAndPan(elemId) {
         const targetElement = gradioApp().querySelector(elemId);
@@ -215,12 +213,11 @@ onUiLoaded(async() => {
                     action: "Move canvas"
                 }
             ];
-            hotkeys.forEach(function(hotkey) {
+            for (const hotkey of hotkeys) {
                 const p = document.createElement("p");
-                p.innerHTML =
-                    "<b>" + hotkey.key + "</b>" + " - " + hotkey.action;
+                p.innerHTML = `<b>${hotkey.key}</b> - ${hotkey.action}`;
                 tooltipContent.appendChild(p);
-            });
+            }
 
             // Add information and content elements to the tooltip element
             tooltip.appendChild(info);
-- 
cgit v1.2.1


From 2d4c66f7b5cb1d12461f8c2a509aab8e5b76d3fe Mon Sep 17 00:00:00 2001
From: Aarni Koskela <akx@iki.fi>
Date: Mon, 5 Jun 2023 10:39:57 +0300
Subject: Zoom and Pan: simplify waitForOpts

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

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index a1e5b482..4ecb3d36 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -34,14 +34,12 @@ onUiLoaded(async() => {
 
     // 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);
-        });
+        for (;;) {
+            if (window.opts && Object.keys(window.opts).length) {
+                return window.opts;
+            }
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
     }
 
     // Check is hotkey valid
-- 
cgit v1.2.1


From ee029a8cad762238f94706d2386ec70f7854339d Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Mon, 12 Jun 2023 22:19:22 +0300
Subject: Improved error output, improved settings menu

---
 .../canvas-zoom-and-pan/javascript/zoom.js         | 175 ++++++++++++++++-----
 1 file changed, 140 insertions(+), 35 deletions(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 4ecb3d36..604a9c1e 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -4,12 +4,12 @@ onUiLoaded(async() => {
         inpaint: "#img2maskimg",
         inpaintSketch: "#inpaint_sketch",
         rangeGroup: "#img2img_column_size",
-        sketch: "#img2img_sketch",
+        sketch: "#img2img_sketch"
     };
     const tabNameToElementId = {
         "Inpaint sketch": elementIDs.inpaintSketch,
         "Inpaint": elementIDs.inpaint,
-        "Sketch": elementIDs.sketch,
+        "Sketch": elementIDs.sketch
     };
 
     // Helper functions
@@ -42,37 +42,124 @@ onUiLoaded(async() => {
         }
     }
 
-    // Check is hotkey valid
-    function isSingleLetter(value) {
+    // Function for defining the "Ctrl", "Shift" and "Alt" keys
+    function isModifierKey(event, key) {
+        switch (key) {
+        case "Ctrl":
+            return event.ctrlKey;
+        case "Shift":
+            return event.shiftKey;
+        case "Alt":
+            return event.altKey;
+        default:
+            return false;
+        }
+    }
+
+    // Check if hotkey is valid
+    function isValidHotkey(value) {
+        const specialKeys = ["Ctrl", "Alt", "Shift", "Disable"];
         return (
-            typeof value === "string" && value.length === 1 && /[a-z]/i.test(value)
+            (typeof value === "string" &&
+                value.length === 1 &&
+                /[a-z]/i.test(value)) ||
+            specialKeys.includes(value)
         );
     }
 
     // Create hotkeyConfig from opts
     function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
         const result = {};
-        const usedKeys = new Set();
+        const usedSingleKeys = new Set();
+        const usedSpecialKeys = new Set();
+
+        // Normalize hotkey
+        function normalizeHotkey(hotkey) {
+            return hotkey.length === 1 ? "Key" + hotkey.toUpperCase() : hotkey;
+        }
+
+        // Format hotkey for display
+        function formatHotkeyForDisplay(hotkey) {
+            return hotkey.startsWith("Key") ? hotkey.slice(3) : hotkey;
+        }
+
+        // Check if canvas_hotkey_adjust and canvas_hotkey_zoom are the same
+        if (
+            hotkeysConfigOpts.canvas_hotkey_adjust !== "Disable" &&
+            hotkeysConfigOpts.canvas_hotkey_zoom !== "Disable" &&
+            normalizeHotkey(hotkeysConfigOpts.canvas_hotkey_adjust) ===
+                normalizeHotkey(hotkeysConfigOpts.canvas_hotkey_zoom)
+        ) {
+            console.error(
+                `Hotkey: ${formatHotkeyForDisplay(
+                    hotkeysConfigOpts.canvas_hotkey_zoom
+                )} for canvas_hotkey_zoom conflicts with canvas_hotkey_adjust. The default hotkey is used: ${formatHotkeyForDisplay(
+                    defaultHotkeysConfig.canvas_hotkey_zoom
+                )}`
+            );
+            hotkeysConfigOpts.canvas_hotkey_zoom =
+                defaultHotkeysConfig.canvas_hotkey_zoom;
+        }
 
         for (const key in defaultHotkeysConfig) {
             if (typeof hotkeysConfigOpts[key] === "boolean") {
                 result[key] = hotkeysConfigOpts[key];
                 continue;
             }
+            if (hotkeysConfigOpts[key] === "Disable") {
+                result[key] = hotkeysConfigOpts[key];
+                continue;
+            }
             if (
                 hotkeysConfigOpts[key] &&
-                isSingleLetter(hotkeysConfigOpts[key]) &&
-                !usedKeys.has(hotkeysConfigOpts[key].toUpperCase())
+                isValidHotkey(hotkeysConfigOpts[key])
             ) {
-                // If the property passed the test and has not yet been used, add 'Key' before it and save it
-                result[key] = "Key" + hotkeysConfigOpts[key].toUpperCase();
-                usedKeys.add(hotkeysConfigOpts[key].toUpperCase());
+                const hotkey = normalizeHotkey(hotkeysConfigOpts[key]);
+                const isSpecialKey = hotkey.length > 1;
+
+                if (
+                    (!isSpecialKey && !usedSingleKeys.has(hotkey)) ||
+                    (isSpecialKey && !usedSpecialKeys.has(hotkey))
+                ) {
+                    result[key] = hotkey;
+
+                    if (isSpecialKey) {
+                        usedSpecialKeys.add(hotkey);
+                    } else {
+                        usedSingleKeys.add(hotkey);
+                    }
+                } else {
+                    console.error(
+                        `Hotkey: ${formatHotkeyForDisplay(
+                            hotkeysConfigOpts[key]
+                        )} for ${key} is repeated and conflicts with another hotkey. The default hotkey is used: ${formatHotkeyForDisplay(
+                            defaultHotkeysConfig[key]
+                        )}`
+                    );
+                    result[key] = defaultHotkeysConfig[key];
+
+                    if (isSpecialKey) {
+                        usedSpecialKeys.add(defaultHotkeysConfig[key]);
+                    } else {
+                        usedSingleKeys.add(defaultHotkeysConfig[key]);
+                    }
+                }
             } else {
-                // If the property does not pass the test or has already been used, we keep the default value
                 console.error(
-                    `Hotkey: ${hotkeysConfigOpts[key]} for ${key} is repeated and conflicts with another hotkey or is not 1 letter. The default hotkey is used: ${defaultHotkeysConfig[key][3]}`
+                    `Hotkey: ${formatHotkeyForDisplay(
+                        hotkeysConfigOpts[key]
+                    )} for ${key} is not valid. The default hotkey is used: ${formatHotkeyForDisplay(
+                        defaultHotkeysConfig[key]
+                    )}`
                 );
                 result[key] = defaultHotkeysConfig[key];
+
+                const isSpecialKey = defaultHotkeysConfig[key].length > 1;
+                if (isSpecialKey) {
+                    usedSpecialKeys.add(defaultHotkeysConfig[key]);
+                } else {
+                    usedSingleKeys.add(defaultHotkeysConfig[key]);
+                }
             }
         }
 
@@ -100,7 +187,9 @@ onUiLoaded(async() => {
         imageARPreview.style.transform = "";
         if (parseFloat(mainTab.style.width) > 865) {
             const transformString = mainTab.style.transform;
-            const scaleMatch = transformString.match(/scale\(([-+]?[0-9]*\.?[0-9]+)\)/);
+            const scaleMatch = transformString.match(
+                /scale\(([-+]?[0-9]*\.?[0-9]+)\)/
+            );
             let zoom = 1; // default zoom
 
             if (scaleMatch && scaleMatch[1]) {
@@ -124,12 +213,13 @@ onUiLoaded(async() => {
 
     // Default config
     const defaultHotkeysConfig = {
+        canvas_hotkey_zoom: "Alt",
+        canvas_hotkey_adjust: "Ctrl",
         canvas_hotkey_reset: "KeyR",
         canvas_hotkey_fullscreen: "KeyS",
         canvas_hotkey_move: "KeyF",
         canvas_hotkey_overlap: "KeyO",
-        canvas_show_tooltip: true,
-        canvas_swap_controls: false
+        canvas_show_tooltip: true
     };
     // swap the actions for ctr + wheel and shift + wheel
     const hotkeysConfig = createHotkeyConfig(
@@ -137,18 +227,23 @@ onUiLoaded(async() => {
         hotkeysConfigOpts
     );
 
+    console.log(hotkeysConfig);
+
     let isMoving = false;
     let mouseX, mouseY;
     let activeElement;
 
-    const elements = Object.fromEntries(Object.keys(elementIDs).map((id) => [
-        id,
-        gradioApp().querySelector(elementIDs[id]),
-    ]));
+    const elements = Object.fromEntries(
+        Object.keys(elementIDs).map(id => [
+            id,
+            gradioApp().querySelector(elementIDs[id])
+        ])
+    );
     const elemData = {};
 
     // Apply functionality to the range inputs. Restore redmask and correct for long images.
-    const rangeInputs = elements.rangeGroup ? Array.from(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']")
@@ -192,26 +287,36 @@ onUiLoaded(async() => {
             tooltipContent.className = "tooltip-content";
 
             // Add info about hotkeys
-            const zoomKey = hotkeysConfig.canvas_swap_controls ? "Ctrl" : "Shift";
-            const adjustKey = hotkeysConfig.canvas_swap_controls ? "Shift" : "Ctrl";
+            const zoomKey = hotkeysConfig.canvas_hotkey_zoom;
+            const adjustKey = hotkeysConfig.canvas_hotkey_adjust;
 
             const hotkeys = [
                 {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"
                 }
             ];
             for (const hotkey of hotkeys) {
+                if (hotkey.key === "Disable + wheel") {
+                    continue;
+                }
+
                 const p = document.createElement("p");
                 p.innerHTML = `<b>${hotkey.key}</b> - ${hotkey.action}`;
                 tooltipContent.appendChild(p);
@@ -346,10 +451,7 @@ onUiLoaded(async() => {
 
         // Change the zoom level based on user interaction
         function changeZoomLevel(operation, e) {
-            if (
-                (!hotkeysConfig.canvas_swap_controls && e.shiftKey) ||
-                (hotkeysConfig.canvas_swap_controls && e.ctrlKey)
-            ) {
+            if (isModifierKey(e, hotkeysConfig.canvas_hotkey_zoom)) {
                 e.preventDefault();
 
                 let zoomPosX, zoomPosY;
@@ -514,6 +616,13 @@ onUiLoaded(async() => {
                 event.preventDefault();
                 action(event);
             }
+
+            if (
+                isModifierKey(event, hotkeysConfig.canvas_hotkey_zoom) ||
+                isModifierKey(event, hotkeysConfig.canvas_hotkey_adjust)
+            ) {
+                event.preventDefault();
+            }
         }
 
         // Get Mouse position
@@ -564,11 +673,7 @@ onUiLoaded(async() => {
             changeZoomLevel(operation, e);
 
             // Handle brush size adjustment with ctrl key pressed
-            if (
-                (hotkeysConfig.canvas_swap_controls && e.shiftKey) ||
-                (!hotkeysConfig.canvas_swap_controls &&
-                    (e.ctrlKey || e.metaKey))
-            ) {
+            if (isModifierKey(e, hotkeysConfig.canvas_hotkey_adjust)) {
                 e.preventDefault();
 
                 // Increase or decrease brush size based on scroll direction
-- 
cgit v1.2.1


From 9a2da597c5e329cf04eeef3005f4465de10f6832 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Mon, 12 Jun 2023 22:21:42 +0300
Subject: remove console.log

---
 extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js | 2 --
 1 file changed, 2 deletions(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 604a9c1e..7c785e29 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -227,8 +227,6 @@ onUiLoaded(async() => {
         hotkeysConfigOpts
     );
 
-    console.log(hotkeysConfig);
-
     let isMoving = false;
     let mouseX, mouseY;
     let activeElement;
-- 
cgit v1.2.1


From 9b687f013d951c43f32bb03674c9af0b3b5b76e3 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Wed, 14 Jun 2023 00:24:25 +0300
Subject: Reworked the disabling of functions, refactored part of the code

---
 .../canvas-zoom-and-pan/javascript/zoom.js         | 241 ++++++++++-----------
 1 file changed, 113 insertions(+), 128 deletions(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index 7c785e29..c5df4318 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -56,116 +56,87 @@ onUiLoaded(async() => {
         }
     }
 
+
     // Check if hotkey is valid
     function isValidHotkey(value) {
         const specialKeys = ["Ctrl", "Alt", "Shift", "Disable"];
         return (
-            (typeof value === "string" &&
-                value.length === 1 &&
-                /[a-z]/i.test(value)) ||
-            specialKeys.includes(value)
+        (typeof value === "string" && value.length === 1 && /[a-z]/i.test(value)) ||
+        specialKeys.includes(value)
         );
     }
-
-    // Create hotkeyConfig from opts
+    
+    // Normalize hotkey
+    function normalizeHotkey(hotkey) {
+        return hotkey.length === 1 ? "Key" + hotkey.toUpperCase() : hotkey;
+    }
+    
+    // Format hotkey for display
+    function formatHotkeyForDisplay(hotkey) {
+        return hotkey.startsWith("Key") ? hotkey.slice(3) : hotkey;
+    }
+    
+    // Create hotkey configuration with the provided options
     function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
-        const result = {};
-        const usedSingleKeys = new Set();
-        const usedSpecialKeys = new Set();
-
-        // Normalize hotkey
-        function normalizeHotkey(hotkey) {
-            return hotkey.length === 1 ? "Key" + hotkey.toUpperCase() : hotkey;
-        }
-
-        // Format hotkey for display
-        function formatHotkeyForDisplay(hotkey) {
-            return hotkey.startsWith("Key") ? hotkey.slice(3) : hotkey;
-        }
-
-        // Check if canvas_hotkey_adjust and canvas_hotkey_zoom are the same
+        const result = {}; // Resulting hotkey configuration
+        const usedKeys = new Set(); // Set of used hotkeys
+    
+        // Iterate through defaultHotkeysConfig keys
+        for (const key in defaultHotkeysConfig) {
+        const userValue = hotkeysConfigOpts[key]; // User-provided hotkey value
+        const defaultValue = defaultHotkeysConfig[key]; // Default hotkey value
+    
+        // Apply appropriate value for undefined, boolean, or object userValue
         if (
-            hotkeysConfigOpts.canvas_hotkey_adjust !== "Disable" &&
-            hotkeysConfigOpts.canvas_hotkey_zoom !== "Disable" &&
-            normalizeHotkey(hotkeysConfigOpts.canvas_hotkey_adjust) ===
-                normalizeHotkey(hotkeysConfigOpts.canvas_hotkey_zoom)
+            userValue === undefined ||
+            typeof userValue === "boolean" ||
+            typeof userValue === "object" ||
+            userValue === "disable"
         ) {
+            result[key] = userValue === undefined ? defaultValue : userValue;
+        } else if (isValidHotkey(userValue)) {
+            const normalizedUserValue = normalizeHotkey(userValue);
+    
+            // Check for conflicting hotkeys
+            if (!usedKeys.has(normalizedUserValue)) {
+            usedKeys.add(normalizedUserValue);
+            result[key] = normalizedUserValue;
+            } else {
             console.error(
                 `Hotkey: ${formatHotkeyForDisplay(
-                    hotkeysConfigOpts.canvas_hotkey_zoom
-                )} for canvas_hotkey_zoom conflicts with canvas_hotkey_adjust. The default hotkey is used: ${formatHotkeyForDisplay(
-                    defaultHotkeysConfig.canvas_hotkey_zoom
+                userValue
+                )} for ${key} is repeated and conflicts with another hotkey. The default hotkey is used: ${formatHotkeyForDisplay(
+                defaultValue
                 )}`
             );
-            hotkeysConfigOpts.canvas_hotkey_zoom =
-                defaultHotkeysConfig.canvas_hotkey_zoom;
-        }
-
-        for (const key in defaultHotkeysConfig) {
-            if (typeof hotkeysConfigOpts[key] === "boolean") {
-                result[key] = hotkeysConfigOpts[key];
-                continue;
-            }
-            if (hotkeysConfigOpts[key] === "Disable") {
-                result[key] = hotkeysConfigOpts[key];
-                continue;
-            }
-            if (
-                hotkeysConfigOpts[key] &&
-                isValidHotkey(hotkeysConfigOpts[key])
-            ) {
-                const hotkey = normalizeHotkey(hotkeysConfigOpts[key]);
-                const isSpecialKey = hotkey.length > 1;
-
-                if (
-                    (!isSpecialKey && !usedSingleKeys.has(hotkey)) ||
-                    (isSpecialKey && !usedSpecialKeys.has(hotkey))
-                ) {
-                    result[key] = hotkey;
-
-                    if (isSpecialKey) {
-                        usedSpecialKeys.add(hotkey);
-                    } else {
-                        usedSingleKeys.add(hotkey);
-                    }
-                } else {
-                    console.error(
-                        `Hotkey: ${formatHotkeyForDisplay(
-                            hotkeysConfigOpts[key]
-                        )} for ${key} is repeated and conflicts with another hotkey. The default hotkey is used: ${formatHotkeyForDisplay(
-                            defaultHotkeysConfig[key]
-                        )}`
-                    );
-                    result[key] = defaultHotkeysConfig[key];
-
-                    if (isSpecialKey) {
-                        usedSpecialKeys.add(defaultHotkeysConfig[key]);
-                    } else {
-                        usedSingleKeys.add(defaultHotkeysConfig[key]);
-                    }
-                }
-            } else {
-                console.error(
-                    `Hotkey: ${formatHotkeyForDisplay(
-                        hotkeysConfigOpts[key]
-                    )} for ${key} is not valid. The default hotkey is used: ${formatHotkeyForDisplay(
-                        defaultHotkeysConfig[key]
-                    )}`
-                );
-                result[key] = defaultHotkeysConfig[key];
-
-                const isSpecialKey = defaultHotkeysConfig[key].length > 1;
-                if (isSpecialKey) {
-                    usedSpecialKeys.add(defaultHotkeysConfig[key]);
-                } else {
-                    usedSingleKeys.add(defaultHotkeysConfig[key]);
-                }
+            result[key] = defaultValue;
             }
+        } else {
+            console.error(
+            `Hotkey: ${formatHotkeyForDisplay(
+                userValue
+            )} for ${key} is not valid. The default hotkey is used: ${formatHotkeyForDisplay(
+                defaultValue
+            )}`
+            );
+            result[key] = defaultValue;
         }
-
+        }
+    
         return result;
     }
 
+    function disableFunctions(config, disabledFunctions) {
+        disabledFunctions.forEach((funcName) => {
+          if (functionMap.hasOwnProperty(funcName)) {
+            const key = functionMap[funcName];
+            config[key] = "disable";
+          }
+        });
+      
+        return config;
+      }
+
     /**
      * 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
@@ -219,14 +190,31 @@ onUiLoaded(async() => {
         canvas_hotkey_fullscreen: "KeyS",
         canvas_hotkey_move: "KeyF",
         canvas_hotkey_overlap: "KeyO",
+        canvas_disabled_functions : [],
         canvas_show_tooltip: true
     };
-    // swap the actions for ctr + wheel and shift + wheel
-    const hotkeysConfig = createHotkeyConfig(
+
+    const functionMap = {
+        "Zoom": "canvas_hotkey_zoom",
+        "Adjust brush size": "canvas_hotkey_adjust",
+        "Moving canvas": "canvas_hotkey_move",
+        "Fullscreen": "canvas_hotkey_fullscreen",
+        "Reset Zoom": "canvas_hotkey_reset",
+        "Overlap": "canvas_hotkey_overlap",
+      };
+      
+    // Loading the configuration from opts
+    const preHotkeysConfig = createHotkeyConfig(
         defaultHotkeysConfig,
         hotkeysConfigOpts
     );
 
+    // Disable functions that are not needed by the user
+    const hotkeysConfig = disableFunctions(
+        preHotkeysConfig,
+        preHotkeysConfig.canvas_disabled_functions
+      );
+
     let isMoving = false;
     let mouseX, mouseY;
     let activeElement;
@@ -273,52 +261,49 @@ onUiLoaded(async() => {
             const toolTipElemnt =
                 targetElement.querySelector(".image-container");
             const tooltip = document.createElement("div");
-            tooltip.className = "tooltip";
+            tooltip.className = "canvas-tooltip";
 
             // Creating an item of information
             const info = document.createElement("i");
-            info.className = "tooltip-info";
+            info.className = "canvas-tooltip-info";
             info.textContent = "";
 
             // Create a container for the contents of the tooltip
             const tooltipContent = document.createElement("div");
-            tooltipContent.className = "tooltip-content";
-
-            // Add info about hotkeys
-            const zoomKey = hotkeysConfig.canvas_hotkey_zoom;
-            const adjustKey = hotkeysConfig.canvas_hotkey_adjust;
-
-            const hotkeys = [
-                {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
-                    ),
-                    action: "Reset zoom"
-                },
-                {
-                    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
-                    ),
-                    action: "Move canvas"
-                }
+            tooltipContent.className = "canvas-tooltip-content";
+
+            // Define an array with hotkey information and their actions
+            const hotkeysInfo = [
+                { configKey: "canvas_hotkey_zoom", action: "Zoom canvas", keySuffix: " + wheel" },
+                { configKey: "canvas_hotkey_adjust", action: "Adjust brush size", keySuffix: " + wheel" },
+                { configKey: "canvas_hotkey_reset", action: "Reset zoom" },
+                { configKey: "canvas_hotkey_fullscreen", action: "Fullscreen mode" },
+                { configKey: "canvas_hotkey_move", action: "Move canvas" },
+                { configKey: "canvas_hotkey_overlap", action: "Overlap" },
             ];
-            for (const hotkey of hotkeys) {
-                if (hotkey.key === "Disable + wheel") {
-                    continue;
+            
+            // Create hotkeys array with disabled property based on the config values
+            const hotkeys = hotkeysInfo.map((info) => {
+                const configValue = hotkeysConfig[info.configKey];
+                const key = info.keySuffix
+                ? `${configValue}${info.keySuffix}`
+                : configValue.charAt(configValue.length - 1);
+                return {
+                key,
+                action: info.action,
+                disabled: configValue === "disable",
+                };
+            });
+              
+              for (const hotkey of hotkeys) {
+                if (hotkey.disabled) {
+                  continue;
                 }
-
+              
                 const p = document.createElement("p");
                 p.innerHTML = `<b>${hotkey.key}</b> - ${hotkey.action}`;
                 tooltipContent.appendChild(p);
-            }
+              }
 
             // Add information and content elements to the tooltip element
             tooltip.appendChild(info);
-- 
cgit v1.2.1


From 3a41d7c551b8441537efb4448250824b21891ab1 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Wed, 14 Jun 2023 00:31:36 +0300
Subject: Formatting code with Prettier

---
 .../canvas-zoom-and-pan/javascript/zoom.js         | 170 ++++++++++++---------
 1 file changed, 95 insertions(+), 75 deletions(-)

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

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index c5df4318..5ebd2073 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -56,86 +56,95 @@ onUiLoaded(async() => {
         }
     }
 
-
     // Check if hotkey is valid
     function isValidHotkey(value) {
         const specialKeys = ["Ctrl", "Alt", "Shift", "Disable"];
         return (
-        (typeof value === "string" && value.length === 1 && /[a-z]/i.test(value)) ||
-        specialKeys.includes(value)
+            (typeof value === "string" &&
+                value.length === 1 &&
+                /[a-z]/i.test(value)) ||
+            specialKeys.includes(value)
         );
     }
-    
+
     // Normalize hotkey
     function normalizeHotkey(hotkey) {
         return hotkey.length === 1 ? "Key" + hotkey.toUpperCase() : hotkey;
     }
-    
+
     // Format hotkey for display
     function formatHotkeyForDisplay(hotkey) {
         return hotkey.startsWith("Key") ? hotkey.slice(3) : hotkey;
     }
-    
+
     // Create hotkey configuration with the provided options
     function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
         const result = {}; // Resulting hotkey configuration
         const usedKeys = new Set(); // Set of used hotkeys
-    
+
         // Iterate through defaultHotkeysConfig keys
         for (const key in defaultHotkeysConfig) {
-        const userValue = hotkeysConfigOpts[key]; // User-provided hotkey value
-        const defaultValue = defaultHotkeysConfig[key]; // Default hotkey value
-    
-        // Apply appropriate value for undefined, boolean, or object userValue
-        if (
-            userValue === undefined ||
-            typeof userValue === "boolean" ||
-            typeof userValue === "object" ||
-            userValue === "disable"
-        ) {
-            result[key] = userValue === undefined ? defaultValue : userValue;
-        } else if (isValidHotkey(userValue)) {
-            const normalizedUserValue = normalizeHotkey(userValue);
-    
-            // Check for conflicting hotkeys
-            if (!usedKeys.has(normalizedUserValue)) {
-            usedKeys.add(normalizedUserValue);
-            result[key] = normalizedUserValue;
+            const userValue = hotkeysConfigOpts[key]; // User-provided hotkey value
+            const defaultValue = defaultHotkeysConfig[key]; // Default hotkey value
+
+            // Apply appropriate value for undefined, boolean, or object userValue
+            if (
+                userValue === undefined ||
+                typeof userValue === "boolean" ||
+                typeof userValue === "object" ||
+                userValue === "disable"
+            ) {
+                result[key] =
+                    userValue === undefined ? defaultValue : userValue;
+            } else if (isValidHotkey(userValue)) {
+                const normalizedUserValue = normalizeHotkey(userValue);
+
+                // Check for conflicting hotkeys
+                if (!usedKeys.has(normalizedUserValue)) {
+                    usedKeys.add(normalizedUserValue);
+                    result[key] = normalizedUserValue;
+                } else {
+                    console.error(
+                        `Hotkey: ${formatHotkeyForDisplay(
+                            userValue
+                        )} for ${key} is repeated and conflicts with another hotkey. The default hotkey is used: ${formatHotkeyForDisplay(
+                            defaultValue
+                        )}`
+                    );
+                    result[key] = defaultValue;
+                }
             } else {
-            console.error(
-                `Hotkey: ${formatHotkeyForDisplay(
-                userValue
-                )} for ${key} is repeated and conflicts with another hotkey. The default hotkey is used: ${formatHotkeyForDisplay(
-                defaultValue
-                )}`
-            );
-            result[key] = defaultValue;
+                console.error(
+                    `Hotkey: ${formatHotkeyForDisplay(
+                        userValue
+                    )} for ${key} is not valid. The default hotkey is used: ${formatHotkeyForDisplay(
+                        defaultValue
+                    )}`
+                );
+                result[key] = defaultValue;
             }
-        } else {
-            console.error(
-            `Hotkey: ${formatHotkeyForDisplay(
-                userValue
-            )} for ${key} is not valid. The default hotkey is used: ${formatHotkeyForDisplay(
-                defaultValue
-            )}`
-            );
-            result[key] = defaultValue;
         }
-        }
-    
+
         return result;
     }
 
+    // Disables functions in the config object based on the provided list of function names
     function disableFunctions(config, disabledFunctions) {
-        disabledFunctions.forEach((funcName) => {
-          if (functionMap.hasOwnProperty(funcName)) {
-            const key = functionMap[funcName];
-            config[key] = "disable";
-          }
+        // Bind the hasOwnProperty method to the functionMap object to avoid errors
+        const hasOwnProperty =
+            Object.prototype.hasOwnProperty.bind(functionMap);
+
+        // Loop through the disabledFunctions array and disable the corresponding functions in the config object
+        disabledFunctions.forEach(funcName => {
+            if (hasOwnProperty(funcName)) {
+                const key = functionMap[funcName];
+                config[key] = "disable";
+            }
         });
-      
+
+        // Return the updated config object
         return config;
-      }
+    }
 
     /**
      * The restoreImgRedMask function displays a red mask around an image to indicate the aspect ratio.
@@ -190,7 +199,7 @@ onUiLoaded(async() => {
         canvas_hotkey_fullscreen: "KeyS",
         canvas_hotkey_move: "KeyF",
         canvas_hotkey_overlap: "KeyO",
-        canvas_disabled_functions : [],
+        canvas_disabled_functions: [],
         canvas_show_tooltip: true
     };
 
@@ -200,9 +209,9 @@ onUiLoaded(async() => {
         "Moving canvas": "canvas_hotkey_move",
         "Fullscreen": "canvas_hotkey_fullscreen",
         "Reset Zoom": "canvas_hotkey_reset",
-        "Overlap": "canvas_hotkey_overlap",
-      };
-      
+        "Overlap": "canvas_hotkey_overlap"
+    };
+
     // Loading the configuration from opts
     const preHotkeysConfig = createHotkeyConfig(
         defaultHotkeysConfig,
@@ -213,7 +222,7 @@ onUiLoaded(async() => {
     const hotkeysConfig = disableFunctions(
         preHotkeysConfig,
         preHotkeysConfig.canvas_disabled_functions
-      );
+    );
 
     let isMoving = false;
     let mouseX, mouseY;
@@ -274,36 +283,47 @@ onUiLoaded(async() => {
 
             // Define an array with hotkey information and their actions
             const hotkeysInfo = [
-                { configKey: "canvas_hotkey_zoom", action: "Zoom canvas", keySuffix: " + wheel" },
-                { configKey: "canvas_hotkey_adjust", action: "Adjust brush size", keySuffix: " + wheel" },
-                { configKey: "canvas_hotkey_reset", action: "Reset zoom" },
-                { configKey: "canvas_hotkey_fullscreen", action: "Fullscreen mode" },
-                { configKey: "canvas_hotkey_move", action: "Move canvas" },
-                { configKey: "canvas_hotkey_overlap", action: "Overlap" },
+                {
+                    configKey: "canvas_hotkey_zoom",
+                    action: "Zoom canvas",
+                    keySuffix: " + wheel"
+                },
+                {
+                    configKey: "canvas_hotkey_adjust",
+                    action: "Adjust brush size",
+                    keySuffix: " + wheel"
+                },
+                {configKey: "canvas_hotkey_reset", action: "Reset zoom"},
+                {
+                    configKey: "canvas_hotkey_fullscreen",
+                    action: "Fullscreen mode"
+                },
+                {configKey: "canvas_hotkey_move", action: "Move canvas"},
+                {configKey: "canvas_hotkey_overlap", action: "Overlap"}
             ];
-            
+
             // Create hotkeys array with disabled property based on the config values
-            const hotkeys = hotkeysInfo.map((info) => {
+            const hotkeys = hotkeysInfo.map(info => {
                 const configValue = hotkeysConfig[info.configKey];
-                const key = info.keySuffix
-                ? `${configValue}${info.keySuffix}`
-                : configValue.charAt(configValue.length - 1);
+                const key = info.keySuffix ?
+                    `${configValue}${info.keySuffix}` :
+                    configValue.charAt(configValue.length - 1);
                 return {
-                key,
-                action: info.action,
-                disabled: configValue === "disable",
+                    key,
+                    action: info.action,
+                    disabled: configValue === "disable"
                 };
             });
-              
-              for (const hotkey of hotkeys) {
+
+            for (const hotkey of hotkeys) {
                 if (hotkey.disabled) {
-                  continue;
+                    continue;
                 }
-              
+
                 const p = document.createElement("p");
                 p.innerHTML = `<b>${hotkey.key}</b> - ${hotkey.action}`;
                 tooltipContent.appendChild(p);
-              }
+            }
 
             // Add information and content elements to the tooltip element
             tooltip.appendChild(info);
-- 
cgit v1.2.1