From 68c4beab4669b64f31b92615d27ea7145effaaae Mon Sep 17 00:00:00 2001 From: Danil Boldyrev 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 --- extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py (limited to 'extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py') diff --git a/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py b/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py new file mode 100644 index 00000000..de2c4129 --- /dev/null +++ b/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py @@ -0,0 +1,8 @@ +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_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 )"), +})) -- cgit v1.2.3 From d306d25e5652a23cd1d92bd01a9cc3f06a6999b8 Mon Sep 17 00:00:00 2001 From: Danil Boldyrev 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 ++++++++++++--------- .../canvas-zoom-and-pan/scripts/hotkey_config.py | 1 + 2 files changed, 72 insertions(+), 51 deletions(-) (limited to 'extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py') 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 = "" + hotkey.key + "" + " - " + 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 = + "" + hotkey.key + "" + " - " + 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() { diff --git a/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py b/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py index de2c4129..25d6d14e 100644 --- a/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py +++ b/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py @@ -5,4 +5,5 @@ shared.options_templates.update(shared.options_section(('canvas_hotkey', "Canvas "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_show_tooltip": shared.OptionInfo(True, "Enable tooltip on the canvas"), })) -- cgit v1.2.3 From 1e0ab4015dbda84eb8b795714cba5b96d674f18c Mon Sep 17 00:00:00 2001 From: Danil Boldyrev 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 ++++++++++++++++------ .../canvas-zoom-and-pan/scripts/hotkey_config.py | 3 ++- 2 files changed, 19 insertions(+), 7 deletions(-) (limited to 'extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py') 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 diff --git a/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py b/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py index 25d6d14e..d83e14da 100644 --- a/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py +++ b/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py @@ -1,9 +1,10 @@ from modules import shared -shared.options_templates.update(shared.options_section(('canvas_hotkey', "Canvas hotkeys"), { +shared.options_templates.update(shared.options_section(('canvas_hotkey', "Canvas Hotkeys"), { "canvas_hotkey_move": shared.OptionInfo("F", "Moving the canvas"), "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_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"), })) -- cgit v1.2.3 From ee029a8cad762238f94706d2386ec70f7854339d Mon Sep 17 00:00:00 2001 From: Danil Boldyrev Date: Mon, 12 Jun 2023 22:19:22 +0300 Subject: Improved error output, improved settings menu --- .../canvas-zoom-and-pan/javascript/zoom.js | 175 ++++++++++++++++----- .../canvas-zoom-and-pan/scripts/hotkey_config.py | 8 +- 2 files changed, 145 insertions(+), 38 deletions(-) (limited to 'extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py') 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 = `${hotkey.key} - ${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 diff --git a/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py b/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py index d83e14da..be8b43f5 100644 --- a/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py +++ b/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py @@ -1,10 +1,12 @@ +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("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_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_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"), })) -- cgit v1.2.3 From 9b687f013d951c43f32bb03674c9af0b3b5b76e3 Mon Sep 17 00:00:00 2001 From: Danil Boldyrev 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 ++++++++++----------- .../canvas-zoom-and-pan/scripts/hotkey_config.py | 5 +- extensions-builtin/canvas-zoom-and-pan/style.css | 10 +- 3 files changed, 121 insertions(+), 135 deletions(-) (limited to 'extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py') 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 = `${hotkey.key} - ${hotkey.action}`; tooltipContent.appendChild(p); - } + } // Add information and content elements to the tooltip element tooltip.appendChild(info); diff --git a/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py b/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py index be8b43f5..1b6683aa 100644 --- a/extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py +++ b/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_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_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").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"]}), })) diff --git a/extensions-builtin/canvas-zoom-and-pan/style.css b/extensions-builtin/canvas-zoom-and-pan/style.css index 5b131d50..6bcc9570 100644 --- a/extensions-builtin/canvas-zoom-and-pan/style.css +++ b/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; -- cgit v1.2.3