Skip to content

S
Stable Diffusion Webui
Commit d306d25e authored by Danil Boldyrev's avatar Danil Boldyrev
Browse files
Options

Made tooltip optional. 

You can disable it in the settings.
Enabled by default
parent 38aca6f6
Hide whitespace changes
Inline Side-by-side
Showing with 72 additions and 51 deletions
extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
View file @ d306d25e
......@@ -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 = "<b>" + hotkey.key + "</b>" + " - " + 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 =
"<b>" + hotkey.key + "</b>" + " - " + 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() {
......
extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py
View file @ d306d25e
......@@ -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"),
}))
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment