mirror of
https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
synced 2025-04-28 15:59:07 +08:00
Made tooltip optional.
You can disable it in the settings. Enabled by default
This commit is contained in:
parent
38aca6f605
commit
d306d25e56
@ -39,13 +39,23 @@ function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
|
|||||||
const usedKeys = new Set();
|
const usedKeys = new Set();
|
||||||
|
|
||||||
for (const key in defaultHotkeysConfig) {
|
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
|
// 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());
|
usedKeys.add(hotkeysConfigOpts[key].toUpperCase());
|
||||||
} else {
|
} else {
|
||||||
// If the property does not pass the test or has already been used, we keep the default value
|
// 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];
|
result[key] = defaultHotkeysConfig[key];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -62,7 +72,8 @@ onUiLoaded(async() => {
|
|||||||
canvas_hotkey_reset: "KeyR",
|
canvas_hotkey_reset: "KeyR",
|
||||||
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_show_tooltip: true
|
||||||
};
|
};
|
||||||
|
|
||||||
const hotkeysConfig = createHotkeyConfig(
|
const hotkeysConfig = createHotkeyConfig(
|
||||||
@ -97,54 +108,63 @@ onUiLoaded(async() => {
|
|||||||
let fullScreenMode = false;
|
let fullScreenMode = false;
|
||||||
|
|
||||||
// Create tooltip
|
// Create tooltip
|
||||||
const toolTipElemnt = targetElement.querySelector(".image-container");
|
function createTooltip() {
|
||||||
const tooltip = document.createElement("div");
|
const toolTipElemnt =
|
||||||
tooltip.className = "tooltip";
|
targetElement.querySelector(".image-container");
|
||||||
|
const tooltip = document.createElement("div");
|
||||||
|
tooltip.className = "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 = "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 = "tooltip-content";
|
||||||
|
|
||||||
// Add info about hotkets
|
// Add info about hotkets
|
||||||
const hotkeys = [
|
const hotkeys = [
|
||||||
{key: "Shift + wheel", action: "Zoom canvas"},
|
{key: "Shift + wheel", action: "Zoom canvas"},
|
||||||
{key: "Ctr+wheel", action: "Adjust brush size"},
|
{key: "Ctr+wheel", action: "Adjust brush size"},
|
||||||
{
|
{
|
||||||
key: hotkeysConfig.canvas_hotkey_reset.charAt(
|
key: hotkeysConfig.canvas_hotkey_reset.charAt(
|
||||||
hotkeysConfig.canvas_hotkey_reset.length - 1
|
hotkeysConfig.canvas_hotkey_reset.length - 1
|
||||||
),
|
),
|
||||||
action: "Reset zoom"
|
action: "Reset zoom"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: hotkeysConfig.canvas_hotkey_fullscreen.charAt(
|
key: hotkeysConfig.canvas_hotkey_fullscreen.charAt(
|
||||||
hotkeysConfig.canvas_hotkey_fullscreen.length - 1
|
hotkeysConfig.canvas_hotkey_fullscreen.length - 1
|
||||||
),
|
),
|
||||||
action: "Fullscreen mode"
|
action: "Fullscreen mode"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: hotkeysConfig.canvas_hotkey_move.charAt(
|
key: hotkeysConfig.canvas_hotkey_move.charAt(
|
||||||
hotkeysConfig.canvas_hotkey_move.length - 1
|
hotkeysConfig.canvas_hotkey_move.length - 1
|
||||||
),
|
),
|
||||||
action: "Move canvas"
|
action: "Move canvas"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
hotkeys.forEach(function(hotkey) {
|
hotkeys.forEach(function(hotkey) {
|
||||||
const p = document.createElement("p");
|
const p = document.createElement("p");
|
||||||
p.innerHTML = "<b>" + hotkey.key + "</b>" + " - " + hotkey.action;
|
p.innerHTML =
|
||||||
tooltipContent.appendChild(p);
|
"<b>" + hotkey.key + "</b>" + " - " + hotkey.action;
|
||||||
});
|
tooltipContent.appendChild(p);
|
||||||
|
});
|
||||||
|
|
||||||
// Add information and content elements to the tooltip element
|
// Add information and content elements to the tooltip element
|
||||||
tooltip.appendChild(info);
|
tooltip.appendChild(info);
|
||||||
tooltip.appendChild(tooltipContent);
|
tooltip.appendChild(tooltipContent);
|
||||||
|
|
||||||
// Add a hint element to the target element
|
// Add a hint element to the target element
|
||||||
toolTipElemnt.appendChild(tooltip);
|
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.
|
// 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() {
|
function fixCanvas() {
|
||||||
|
@ -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_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 ( Technical button, neededs for testing )"),
|
"canvas_hotkey_overlap": shared.OptionInfo("O", "Toggle overlap ( Technical button, neededs for testing )"),
|
||||||
|
"canvas_show_tooltip": shared.OptionInfo(True, "Enable tooltip on the canvas"),
|
||||||
}))
|
}))
|
||||||
|
Loading…
x
Reference in New Issue
Block a user