From c5d70fe1d3681d551683791268ed34004a843589 Mon Sep 17 00:00:00 2001 From: Danil Boldyrev Date: Wed, 31 May 2023 23:02:49 +0300 Subject: [PATCH 1/6] Fixed the problem with sticking to the mouse, created a tooltip --- .../canvas-zoom-and-pan/javascript/zoom.js | 68 +++++++++++++++++-- .../canvas-zoom-and-pan/style.css | 63 +++++++++++++++++ 2 files changed, 124 insertions(+), 7 deletions(-) create mode 100644 extensions-builtin/canvas-zoom-and-pan/style.css diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js index f555960d2..e39ce296e 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 = "" + 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); + // 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); } diff --git a/extensions-builtin/canvas-zoom-and-pan/style.css b/extensions-builtin/canvas-zoom-and-pan/style.css new file mode 100644 index 000000000..5b131d50e --- /dev/null +++ b/extensions-builtin/canvas-zoom-and-pan/style.css @@ -0,0 +1,63 @@ +.tooltip-info { + position: absolute; + top: 10px; + left: 10px; + cursor: help; + background-color: rgba(0, 0, 0, 0.3); + width: 20px; + height: 20px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + + z-index: 100; +} + +.tooltip-info::after { + content: ''; + display: block; + width: 2px; + height: 7px; + background-color: white; + margin-top: 2px; +} + +.tooltip-info::before { + content: ''; + display: block; + width: 2px; + height: 2px; + background-color: white; +} + +.tooltip-content { + display: none; + background-color: #f9f9f9; + color: #333; + border: 1px solid #ddd; + padding: 15px; + position: absolute; + top: 40px; + left: 10px; + width: 250px; + font-size: 16px; + opacity: 0; + border-radius: 8px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + + z-index: 100; +} + +.tooltip:hover .tooltip-content { + display: block; + animation: fadeIn 0.5s; + opacity: 1; +} + +@keyframes fadeIn { + from {opacity: 0;} + to {opacity: 1;} +} + From 68c4beab4669b64f31b92615d27ea7145effaaae Mon Sep 17 00:00:00 2001 From: Danil Boldyrev Date: Fri, 2 Jun 2023 01:04:17 +0300 Subject: [PATCH 2/6] 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 ++++++++++++++----- .../scripts/hotkey_config.py | 8 ++ 2 files changed, 75 insertions(+), 21 deletions(-) create mode 100644 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 e39ce296e..4e0e5ba12 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; } } 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 000000000..de2c41297 --- /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 )"), +})) From 38aca6f605d2653054f0b9f7927cc15842bacac5 Mon Sep 17 00:00:00 2001 From: Danil Boldyrev Date: Fri, 2 Jun 2023 01:26:25 +0300 Subject: [PATCH 3/6] Added a hotkey repeat check to avoid bugs --- .../canvas-zoom-and-pan/javascript/zoom.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js index 4e0e5ba12..b9c3345af 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; } From d306d25e5652a23cd1d92bd01a9cc3f06a6999b8 Mon Sep 17 00:00:00 2001 From: Danil Boldyrev Date: Fri, 2 Jun 2023 19:10:28 +0300 Subject: [PATCH 4/6] Made tooltip optional. You can disable it in the settings. Enabled by default --- .../canvas-zoom-and-pan/javascript/zoom.js | 114 ++++++++++-------- .../scripts/hotkey_config.py | 1 + 2 files changed, 68 insertions(+), 47 deletions(-) diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js index b9c3345af..5278ca114 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"; + 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 = ""; + // 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"; + // 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 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 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 de2c41297..25d6d14e8 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"), })) From 1e0ab4015dbda84eb8b795714cba5b96d674f18c Mon Sep 17 00:00:00 2001 From: Danil Boldyrev Date: Sat, 3 Jun 2023 02:18:49 +0300 Subject: [PATCH 5/6] Added the ability to swap the zoom hotkeys and resize the brush --- .../canvas-zoom-and-pan/javascript/zoom.js | 23 ++++++++++++++----- .../scripts/hotkey_config.py | 3 ++- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js index 5278ca114..8501a24b9 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 25d6d14e8..d83e14daf 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"), })) From 5b682be59a64c3ca8c7d2ad0987d8d65f3cbd8a8 Mon Sep 17 00:00:00 2001 From: Danil Boldyrev Date: Sat, 3 Jun 2023 02:24:57 +0300 Subject: [PATCH 6/6] 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(-) diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js index 8501a24b9..41d9ddf46 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]; }