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

Merge pull request #11031 from akx/zoom-and-pan-namespace

Browse Source 
Zoom and pan: namespace & simplify
This commit is contained in:
AUTOMATIC1111 2023-06-05 20:40:31 +03:00 committed by GitHub
commit e89a248e2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 132 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,20 @@
// Helper functions
// Get active tab
function getActiveTab(elements, all = false) {
onUiLoaded(async() => {
const elementIDs = {
img2imgTabs: "#mode_img2img .tab-nav",
inpaint: "#img2maskimg",
inpaintSketch: "#inpaint_sketch",
rangeGroup: "#img2img_column_size",
sketch: "#img2img_sketch",
};
const tabNameToElementId = {
"Inpaint sketch": elementIDs.inpaintSketch,
"Inpaint": elementIDs.inpaint,
"Sketch": elementIDs.sketch,
};
// Helper functions
// Get active tab
function getActiveTab(elements, all = false) {
const tabs = elements.img2imgTabs.querySelectorAll("button");
if (all) return tabs;
@ -10,40 +24,33 @@ function getActiveTab(elements, all = false) {
return tab;
}
}
}
// Get tab ID
function getTabId(elements, elementIDs) {
const activeTab = getActiveTab(elements);
const tabIdLookup = {
"Sketch": elementIDs.sketch,
"Inpaint sketch": elementIDs.inpaintSketch,
"Inpaint": elementIDs.inpaint
};
return tabIdLookup[activeTab.innerText];
}
// 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) {
// Get tab ID
function getTabId(elements) {
const activeTab = getActiveTab(elements);
return tabNameToElementId[activeTab.innerText];
}
// Wait until opts loaded
async function waitForOpts() {
for (;;) {
if (window.opts && Object.keys(window.opts).length) {
return window.opts;
}
await new Promise(resolve => setTimeout(resolve, 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) {
// Create hotkeyConfig from opts
function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
const result = {};
const usedKeys = new Set();
@ -70,18 +77,17 @@ function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
}
return result;
}
}
/**
/**
* 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
* temporarily sets the display property to 'block' and then hides the mask again after 300 milliseconds
* to avoid breaking the canvas. Additionally, the function adjusts the mask to work correctly on
* very long images.
*/
function restoreImgRedMask(elements, elementIDs) {
const mainTabId = getTabId(elements, elementIDs);
function restoreImgRedMask(elements) {
const mainTabId = getTabId(elements);
if (!mainTabId) return;
@ -112,10 +118,8 @@ function restoreImgRedMask(elements, elementIDs) {
setTimeout(() => {
img.style.display = "none";
}, 400);
}
}
// Main
onUiLoaded(async() => {
const hotkeysConfigOpts = await waitForOpts();
// Default config
@ -137,38 +141,22 @@ onUiLoaded(async() => {
let mouseX, mouseY;
let activeElement;
const elementIDs = {
sketch: "#img2img_sketch",
inpaint: "#img2maskimg",
inpaintSketch: "#inpaint_sketch",
img2imgTabs: "#mode_img2img .tab-nav",
rangeGroup: "#img2img_column_size"
};
async function getElements() {
const elements = await Promise.all(
Object.values(elementIDs).map(id => gradioApp().querySelector(id))
);
return Object.fromEntries(
Object.keys(elementIDs).map((key, index) => [key, elements[index]])
);
}
const elements = await getElements();
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 ? 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']")
];
rangeInputs.forEach(input => {
if (input) {
input.addEventListener("input", () => restoreImgRedMask(elements, elementIDs));
for (const input of rangeInputs) {
input?.addEventListener("input", () => restoreImgRedMask(elements));
}
});
function applyZoomAndPan(elemId) {
const targetElement = gradioApp().querySelector(elemId);
@ -223,12 +211,11 @@ onUiLoaded(async() => {
action: "Move canvas"
}
];
hotkeys.forEach(function(hotkey) {
for (const hotkey of hotkeys) {
const p = document.createElement("p");
p.innerHTML =
"<b>" + hotkey.key + "</b>" + " - " + hotkey.action;
p.innerHTML = `<b>${hotkey.key}</b> - ${hotkey.action}`;
tooltipContent.appendChild(p);
});
}
// Add information and content elements to the tooltip element
tooltip.appendChild(info);