StableDiffusion/WebUI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reworked the disabling of functions, refactored part of the code

Browse Source
This commit is contained in:
Danil Boldyrev 2023-06-14 00:24:25 +03:00
parent 9a2da597c5
commit 9b687f013d
3 changed files with 120 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
View File

@ -56,23 +56,16 @@ onUiLoaded(async() => {
} }
} }
// Check if hotkey is valid // Check if hotkey is valid
function isValidHotkey(value) { function isValidHotkey(value) {
const specialKeys = ["Ctrl", "Alt", "Shift", "Disable"]; const specialKeys = ["Ctrl", "Alt", "Shift", "Disable"];
return ( return (
(typeof value === "string" && (typeof value === "string" && value.length === 1 && /[a-z]/i.test(value)) ||
value.length === 1 &&
/[a-z]/i.test(value)) ||
specialKeys.includes(value) specialKeys.includes(value)
); );
} }
// Create hotkeyConfig from opts
function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
const result = {};
const usedSingleKeys = new Set();
const usedSpecialKeys = new Set();
// Normalize hotkey // Normalize hotkey
function normalizeHotkey(hotkey) { function normalizeHotkey(hotkey) {
return hotkey.length === 1 ? "Key" + hotkey.toUpperCase() : hotkey; return hotkey.length === 1 ? "Key" + hotkey.toUpperCase() : hotkey;
@ -83,89 +76,67 @@ onUiLoaded(async() => {
return hotkey.startsWith("Key") ? hotkey.slice(3) : hotkey; return hotkey.startsWith("Key") ? hotkey.slice(3) : hotkey;
} }
// Check if canvas_hotkey_adjust and canvas_hotkey_zoom are the same // Create hotkey configuration with the provided options
if ( function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
hotkeysConfigOpts.canvas_hotkey_adjust !== "Disable" && const result = {}; // Resulting hotkey configuration
hotkeysConfigOpts.canvas_hotkey_zoom !== "Disable" && const usedKeys = new Set(); // Set of used hotkeys
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;
}
// Iterate through defaultHotkeysConfig keys
for (const key in defaultHotkeysConfig) { 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;
}
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;
// Apply appropriate value for undefined, boolean, or object userValue
if ( if (
(!isSpecialKey && !usedSingleKeys.has(hotkey)) || userValue === undefined ||
(isSpecialKey && !usedSpecialKeys.has(hotkey)) typeof userValue === "boolean" ||
typeof userValue === "object" ||
userValue === "disable"
) { ) {
result[key] = hotkey; result[key] = userValue === undefined ? defaultValue : userValue;
} else if (isValidHotkey(userValue)) {
const normalizedUserValue = normalizeHotkey(userValue);
if (isSpecialKey) { // Check for conflicting hotkeys
usedSpecialKeys.add(hotkey); if (!usedKeys.has(normalizedUserValue)) {
} else { usedKeys.add(normalizedUserValue);
usedSingleKeys.add(hotkey); result[key] = normalizedUserValue;
}
} else { } else {
console.error( console.error(
`Hotkey: ${formatHotkeyForDisplay( `Hotkey: ${formatHotkeyForDisplay(
hotkeysConfigOpts[key] userValue
)} for ${key} is repeated and conflicts with another hotkey. The default hotkey is used: ${formatHotkeyForDisplay( )} for ${key} is repeated and conflicts with another hotkey. The default hotkey is used: ${formatHotkeyForDisplay(
defaultHotkeysConfig[key] defaultValue
)}` )}`
); );
result[key] = defaultHotkeysConfig[key]; result[key] = defaultValue;
if (isSpecialKey) {
usedSpecialKeys.add(defaultHotkeysConfig[key]);
} else {
usedSingleKeys.add(defaultHotkeysConfig[key]);
}
} }
} else { } else {
console.error( console.error(
`Hotkey: ${formatHotkeyForDisplay( `Hotkey: ${formatHotkeyForDisplay(
hotkeysConfigOpts[key] userValue
)} for ${key} is not valid. The default hotkey is used: ${formatHotkeyForDisplay( )} for ${key} is not valid. The default hotkey is used: ${formatHotkeyForDisplay(
defaultHotkeysConfig[key] defaultValue
)}` )}`
); );
result[key] = defaultHotkeysConfig[key]; result[key] = defaultValue;
const isSpecialKey = defaultHotkeysConfig[key].length > 1;
if (isSpecialKey) {
usedSpecialKeys.add(defaultHotkeysConfig[key]);
} else {
usedSingleKeys.add(defaultHotkeysConfig[key]);
}
} }
} }
return result; 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. * 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 * 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_fullscreen: "KeyS",
canvas_hotkey_move: "KeyF", canvas_hotkey_move: "KeyF",
canvas_hotkey_overlap: "KeyO", canvas_hotkey_overlap: "KeyO",
canvas_disabled_functions : [],
canvas_show_tooltip: true 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, defaultHotkeysConfig,
hotkeysConfigOpts hotkeysConfigOpts
); );
// Disable functions that are not needed by the user
const hotkeysConfig = disableFunctions(
preHotkeysConfig,
preHotkeysConfig.canvas_disabled_functions
);
let isMoving = false; let isMoving = false;
let mouseX, mouseY; let mouseX, mouseY;
let activeElement; let activeElement;
@ -273,45 +261,42 @@ onUiLoaded(async() => {
const toolTipElemnt = const toolTipElemnt =
targetElement.querySelector(".image-container"); targetElement.querySelector(".image-container");
const tooltip = document.createElement("div"); const tooltip = document.createElement("div");
tooltip.className = "tooltip"; tooltip.className = "canvas-tooltip";
// Creating an item of information // Creating an item of information
const info = document.createElement("i"); const info = document.createElement("i");
info.className = "tooltip-info"; info.className = "canvas-tooltip-info";
info.textContent = ""; info.textContent = "";
// Create a container for the contents of the tooltip // Create a container for the contents of the tooltip
const tooltipContent = document.createElement("div"); 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"
}
]; ];
// 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) { for (const hotkey of hotkeys) {
if (hotkey.key === "Disable + wheel") { if (hotkey.disabled) {
continue; continue;
} }

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

@ -2,11 +2,12 @@ import gradio as gr
from modules import shared 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_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_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_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_reset": shared.OptionInfo("R", "Reset zoom and canvas positon"),
"canvas_hotkey_overlap": shared.OptionInfo("O", "Toggle overlap").info("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_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"]}),
})) }))

10
extensions-builtin/canvas-zoom-and-pan/style.css
View File

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