Merge pull request #11189 from daswer123/dev

Zoom and pan: More options in the settings and improved error output

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,43 +42,110 @@ onUiLoaded(async() => {
         }
     }
 
-    // Check is hotkey valid
+    // Function for defining the "Ctrl", "Shift" and "Alt" keys
-    function isSingleLetter(value) {
+    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
+    // Normalize hotkey
-    function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
+    function normalizeHotkey(hotkey) {
-        const result = {};
+        return hotkey.length === 1 ? "Key" + hotkey.toUpperCase() : hotkey;
-        const usedKeys = new Set();
+    }
 
+    // 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) {
-            if (typeof hotkeysConfigOpts[key] === "boolean") {
+            const userValue = hotkeysConfigOpts[key]; // User-provided hotkey value
-                result[key] = hotkeysConfigOpts[key];
+            const defaultValue = defaultHotkeysConfig[key]; // Default hotkey value
-                continue;
+
-            }
+            // Apply appropriate value for undefined, boolean, or object userValue
             if (
-                hotkeysConfigOpts[key] &&
+                userValue === undefined ||
-                isSingleLetter(hotkeysConfigOpts[key]) &&
+                typeof userValue === "boolean" ||
-                !usedKeys.has(hotkeysConfigOpts[key].toUpperCase())
+                typeof userValue === "object" ||
+                userValue === "disable"
             ) {
-                // If the property passed the test and has not yet been used, add 'Key' before it and save it
+                result[key] =
-                result[key] = "Key" + hotkeysConfigOpts[key].toUpperCase();
+                    userValue === undefined ? defaultValue : userValue;
-                usedKeys.add(hotkeysConfigOpts[key].toUpperCase());
+            } 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 {
-                // 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(
+                        userValue
+                    )} for ${key} is not valid. The default hotkey is used: ${formatHotkeyForDisplay(
+                        defaultValue
+                    )}`
                 );
-                result[key] = defaultHotkeysConfig[key];
+                result[key] = defaultValue;
             }
         }
 
         return result;
     }
 
+    // Disables functions in the config object based on the provided list of function names
+    function disableFunctions(config, disabledFunctions) {
+        // 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.
      * If the image display property is set to 'none', the mask breaks. To fix this, the function
@@ -100,7 +167,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,31 +193,52 @@ 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_disabled_functions: [],
-        canvas_swap_controls: false
+        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;
 
-    const elements = Object.fromEntries(Object.keys(elementIDs).map((id) => [
+    const elements = Object.fromEntries(
-        id,
+        Object.keys(elementIDs).map(id => [
-        gradioApp().querySelector(elementIDs[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']")
@@ -180,38 +270,56 @@ 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";
+            tooltipContent.className = "canvas-tooltip-content";
 
-            // Add info about hotkeys
+            // Define an array with hotkey information and their actions
-            const zoomKey = hotkeysConfig.canvas_swap_controls ? "Ctrl" : "Shift";
+            const hotkeysInfo = [
-            const adjustKey = hotkeysConfig.canvas_swap_controls ? "Shift" : "Ctrl";
-
-            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),
+                    configKey: "canvas_hotkey_zoom",
-                    action: "Reset zoom"
+                    action: "Zoom canvas",
+                    keySuffix: " + wheel"
                 },
                 {
-                    key: hotkeysConfig.canvas_hotkey_fullscreen.charAt(hotkeysConfig.canvas_hotkey_fullscreen.length - 1),
+                    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"},
-                    key: hotkeysConfig.canvas_hotkey_move.charAt(hotkeysConfig.canvas_hotkey_move.length - 1),
+                {configKey: "canvas_hotkey_overlap", action: "Overlap"}
-                    action: "Move canvas"
-                }
             ];
+
+            // 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);
@@ -346,10 +454,7 @@ onUiLoaded(async() => {
 
         // Change the zoom level based on user interaction
         function changeZoomLevel(operation, e) {
-            if (
+            if (isModifierKey(e, hotkeysConfig.canvas_hotkey_zoom)) {
-                (!hotkeysConfig.canvas_swap_controls && e.shiftKey) ||
-                (hotkeysConfig.canvas_swap_controls && e.ctrlKey)
-            ) {
                 e.preventDefault();
 
                 let zoomPosX, zoomPosY;
@@ -514,6 +619,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 +676,7 @@ onUiLoaded(async() => {
             changeZoomLevel(operation, e);
 
             // Handle brush size adjustment with ctrl key pressed
-            if (
+            if (isModifierKey(e, hotkeysConfig.canvas_hotkey_adjust)) {
-                (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

extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py

@@ -1,10 +1,13 @@
+import gradio as gr
 from modules import shared
 
 shared.options_templates.update(shared.options_section(('canvas_hotkey', "Canvas Hotkeys"), {
-    "canvas_hotkey_move": shared.OptionInfo("F", "Moving the canvas"),
+    "canvas_hotkey_zoom": shared.OptionInfo("Alt", "Zoom canvas", gr.Radio, {"choices": ["Shift","Ctrl", "Alt"]}).info("If you choose 'Shift' you cannot scroll horizontally, 'Alt' can cause a little trouble in firefox"),
+    "canvas_hotkey_adjust": shared.OptionInfo("Ctrl", "Adjust brush size", gr.Radio, {"choices": ["Shift","Ctrl", "Alt"]}).info("If you choose 'Shift' you cannot scroll horizontally, 'Alt' can cause a little trouble in firefox"),
+    "canvas_hotkey_move": shared.OptionInfo("F", "Moving the canvas").info("To work correctly in firefox, turn off 'Automatically search the page text when typing' in the browser settings"),
     "canvas_hotkey_fullscreen": shared.OptionInfo("S", "Fullscreen Mode, maximizes the picture so that it fits into the screen and stretches it to its full width "),
     "canvas_hotkey_reset": shared.OptionInfo("R", "Reset zoom and canvas positon"),
-    "canvas_hotkey_overlap": shared.OptionInfo("O", "Toggle overlap ( Technical button, neededs for testing )"),
+    "canvas_hotkey_overlap": shared.OptionInfo("O", "Toggle overlap").info("Technical button, neededs for testing"),
     "canvas_show_tooltip": shared.OptionInfo(True, "Enable tooltip on the canvas"),
-    "canvas_swap_controls": shared.OptionInfo(False, "Swap hotkey combinations for Zoom and Adjust brush resize"),
+    "canvas_disabled_functions": shared.OptionInfo(["Overlap"], "Disable function that you don't use", gr.CheckboxGroup, {"choices": ["Zoom","Adjust brush size", "Moving canvas","Fullscreen","Reset Zoom","Overlap"]}),
 }))

extensions-builtin/canvas-zoom-and-pan/style.css

@@ -1,4 +1,4 @@
-.tooltip-info {
+.canvas-tooltip-info {
   position: absolute;
   top: 10px;
   left: 10px;
@@ -15,7 +15,7 @@
   z-index: 100;
 }
 
-.tooltip-info::after {
+.canvas-tooltip-info::after {
   content: '';
   display: block;
   width: 2px;
@@ -24,7 +24,7 @@
   margin-top: 2px; 
 }
 
-.tooltip-info::before {
+.canvas-tooltip-info::before {
   content: '';
   display: block;
   width: 2px;
@@ -32,7 +32,7 @@
   background-color: white;
 }
 
-.tooltip-content {
+.canvas-tooltip-content {
   display: none;
   background-color: #f9f9f9; 
   color: #333; 
@@ -50,7 +50,7 @@
   z-index: 100;
 }
 
-.tooltip:hover .tooltip-content {
+.canvas-tooltip:hover .canvas-tooltip-content {
   display: block;
   animation: fadeIn 0.5s; 
   opacity: 1;