Reworked the disabling of functions, refactored part of the code

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" &&
+        (typeof value === "string" && value.length === 1 && /[a-z]/i.test(value)) ||
-                value.length === 1 &&
+        specialKeys.includes(value)
-                /[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 result = {}; // Resulting hotkey configuration
-        const usedSingleKeys = new Set();
+        const usedKeys = new Set(); // Set of used hotkeys
-        const usedSpecialKeys = new Set();
     
-        // Normalize hotkey
+        // Iterate through defaultHotkeysConfig keys
-        function normalizeHotkey(hotkey) {
+        for (const key in defaultHotkeysConfig) {
-            return hotkey.length === 1 ? "Key" + hotkey.toUpperCase() : hotkey;
+        const userValue = hotkeysConfigOpts[key]; // User-provided hotkey value
-        }
+        const defaultValue = defaultHotkeysConfig[key]; // Default hotkey value
     
-        // Format hotkey for display
+        // Apply appropriate value for undefined, boolean, or object userValue
-        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" &&
+            userValue === undefined ||
-            hotkeysConfigOpts.canvas_hotkey_zoom !== "Disable" &&
+            typeof userValue === "boolean" ||
-            normalizeHotkey(hotkeysConfigOpts.canvas_hotkey_adjust) ===
+            typeof userValue === "object" ||
-                normalizeHotkey(hotkeysConfigOpts.canvas_hotkey_zoom)
+            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
+                userValue
-                )} for canvas_hotkey_zoom conflicts with canvas_hotkey_adjust. The default hotkey is used: ${formatHotkeyForDisplay(
+                )} for ${key} is repeated and conflicts with another hotkey. The default hotkey is used: ${formatHotkeyForDisplay(
-                    defaultHotkeysConfig.canvas_hotkey_zoom
+                defaultValue
                 )}`
             );
-            hotkeysConfigOpts.canvas_hotkey_zoom =
+            result[key] = defaultValue;
-                defaultHotkeysConfig.canvas_hotkey_zoom;
+            }
+        } else {
+            console.error(
+            `Hotkey: ${formatHotkeyForDisplay(
+                userValue
+            )} for ${key} is not valid. The default hotkey is used: ${formatHotkeyForDisplay(
+                defaultValue
+            )}`
+            );
+            result[key] = defaultValue;
         }
-
-        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]);
-                }
-            }
         }
     
         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";
+            tooltipContent.className = "canvas-tooltip-content";
 
-            // Add info about hotkeys
+            // Define an array with hotkey information and their actions
-            const zoomKey = hotkeysConfig.canvas_hotkey_zoom;
+            const hotkeysInfo = [
-            const adjustKey = hotkeysConfig.canvas_hotkey_adjust;
+                { configKey: "canvas_hotkey_zoom", action: "Zoom canvas", keySuffix: " + wheel" },
-
+                { configKey: "canvas_hotkey_adjust", action: "Adjust brush size", keySuffix: " + wheel" },
-            const hotkeys = [
+                { configKey: "canvas_hotkey_reset", action: "Reset zoom" },
-                {key: `${zoomKey} + wheel`, action: "Zoom canvas"},
+                { configKey: "canvas_hotkey_fullscreen", action: "Fullscreen mode" },
-                {key: `${adjustKey} + wheel`, action: "Adjust brush size"},
+                { configKey: "canvas_hotkey_move", action: "Move canvas" },
-                {
+                { configKey: "canvas_hotkey_overlap", action: "Overlap" },
-                    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"
-                }
             ];
-            for (const hotkey of hotkeys) {
+            
-                if (hotkey.key === "Disable + wheel") {
+            // Create hotkeys array with disabled property based on the config values
-                    continue;
+            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);

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

@@ -2,11 +2,12 @@ import gradio as gr
 from modules import shared
 
 shared.options_templates.update(shared.options_section(('canvas_hotkey', "Canvas Hotkeys"), {
-    "canvas_hotkey_zoom": shared.OptionInfo("Shift", "Zoom canvas", gr.Radio, {"choices": ["Shift","Ctrl", "Alt","Disable"]}).info("If you choose 'Shift' you cannot scroll horizontally, 'Alt' can cause a little trouble in firefox"),
+    "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","Disable"]}).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").info("Technical button, neededs for testing"),
     "canvas_show_tooltip": shared.OptionInfo(True, "Enable tooltip on the canvas"),
+    "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;