Zoom and Pan: use elementIDs from closure scope

This commit is contained in:
Aarni Koskela 2023-06-05 10:26:08 +03:00
parent 8fd20bd4c3
commit 68cda4f213

View File

@ -1,4 +1,17 @@
onUiLoaded(async() => { 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 // Helper functions
// Get active tab // Get active tab
function getActiveTab(elements, all = false) { function getActiveTab(elements, all = false) {
@ -14,14 +27,9 @@ onUiLoaded(async() => {
} }
// Get tab ID // Get tab ID
function getTabId(elements, elementIDs) { function getTabId(elements) {
const activeTab = getActiveTab(elements); const activeTab = getActiveTab(elements);
const tabIdLookup = { return tabNameToElementId[activeTab.innerText];
"Sketch": elementIDs.sketch,
"Inpaint sketch": elementIDs.inpaintSketch,
"Inpaint": elementIDs.inpaint
};
return tabIdLookup[activeTab.innerText];
} }
// Wait until opts loaded // Wait until opts loaded
@ -80,8 +88,8 @@ onUiLoaded(async() => {
* to avoid breaking the canvas. Additionally, the function adjusts the mask to work correctly on * to avoid breaking the canvas. Additionally, the function adjusts the mask to work correctly on
* very long images. * very long images.
*/ */
function restoreImgRedMask(elements, elementIDs) { function restoreImgRedMask(elements) {
const mainTabId = getTabId(elements, elementIDs); const mainTabId = getTabId(elements);
if (!mainTabId) return; if (!mainTabId) return;
@ -135,14 +143,6 @@ onUiLoaded(async() => {
let mouseX, mouseY; let mouseX, mouseY;
let activeElement; let activeElement;
const elementIDs = {
sketch: "#img2img_sketch",
inpaint: "#img2maskimg",
inpaintSketch: "#inpaint_sketch",
img2imgTabs: "#mode_img2img .tab-nav",
rangeGroup: "#img2img_column_size"
};
async function getElements() { async function getElements() {
const elements = await Promise.all( const elements = await Promise.all(
Object.values(elementIDs).map(id => gradioApp().querySelector(id)) Object.values(elementIDs).map(id => gradioApp().querySelector(id))
@ -164,7 +164,7 @@ onUiLoaded(async() => {
rangeInputs.forEach(input => { rangeInputs.forEach(input => {
if (input) { if (input) {
input.addEventListener("input", () => restoreImgRedMask(elements, elementIDs)); input.addEventListener("input", () => restoreImgRedMask(elements));
} }
}); });