From 8fd20bd4c3cdd3deacf89e48b323d428de1e16e0 Mon Sep 17 00:00:00 2001 From: Aarni Koskela Date: Mon, 5 Jun 2023 10:19:06 +0300 Subject: [PATCH 1/5] Zoom and Pan: move helpers into its namespace to avoid littering global scope --- .../canvas-zoom-and-pan/javascript/zoom.js | 232 +++++++++--------- 1 file changed, 115 insertions(+), 117 deletions(-) diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js index 2a2ed999..0576c079 100644 --- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js +++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js @@ -1,121 +1,119 @@ -// Helper functions -// Get active tab -function getActiveTab(elements, all = false) { - const tabs = elements.img2imgTabs.querySelectorAll("button"); - - if (all) return tabs; - - for (let tab of tabs) { - if (tab.classList.contains("selected")) { - 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) { - return ( - typeof value === "string" && value.length === 1 && /[a-z]/i.test(value) - ); -} - -// Create hotkeyConfig from opts -function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) { - const result = {}; - const usedKeys = new Set(); - - for (const key in defaultHotkeysConfig) { - 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(); - 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][3]}` - ); - result[key] = defaultHotkeysConfig[key]; - } - } - - 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); - - if (!mainTabId) return; - - const mainTab = gradioApp().querySelector(mainTabId); - const img = mainTab.querySelector("img"); - const imageARPreview = gradioApp().querySelector("#imageARPreview"); - - if (!img || !imageARPreview) return; - - imageARPreview.style.transform = ""; - if (parseFloat(mainTab.style.width) > 865) { - const transformString = mainTab.style.transform; - const scaleMatch = transformString.match(/scale\(([-+]?[0-9]*\.?[0-9]+)\)/); - let zoom = 1; // default zoom - - if (scaleMatch && scaleMatch[1]) { - zoom = Number(scaleMatch[1]); - } - - imageARPreview.style.transformOrigin = "0 0"; - imageARPreview.style.transform = `scale(${zoom})`; - } - - if (img.style.display !== "none") return; - - img.style.display = "block"; - - setTimeout(() => { - img.style.display = "none"; - }, 400); -} - -// Main onUiLoaded(async() => { + // Helper functions + // Get active tab + function getActiveTab(elements, all = false) { + const tabs = elements.img2imgTabs.querySelectorAll("button"); + + if (all) return tabs; + + for (let tab of tabs) { + if (tab.classList.contains("selected")) { + 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) { + return ( + typeof value === "string" && value.length === 1 && /[a-z]/i.test(value) + ); + } + + // Create hotkeyConfig from opts + function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) { + const result = {}; + const usedKeys = new Set(); + + for (const key in defaultHotkeysConfig) { + 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(); + 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][3]}` + ); + result[key] = defaultHotkeysConfig[key]; + } + } + + 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); + + if (!mainTabId) return; + + const mainTab = gradioApp().querySelector(mainTabId); + const img = mainTab.querySelector("img"); + const imageARPreview = gradioApp().querySelector("#imageARPreview"); + + if (!img || !imageARPreview) return; + + imageARPreview.style.transform = ""; + if (parseFloat(mainTab.style.width) > 865) { + const transformString = mainTab.style.transform; + const scaleMatch = transformString.match(/scale\(([-+]?[0-9]*\.?[0-9]+)\)/); + let zoom = 1; // default zoom + + if (scaleMatch && scaleMatch[1]) { + zoom = Number(scaleMatch[1]); + } + + imageARPreview.style.transformOrigin = "0 0"; + imageARPreview.style.transform = `scale(${zoom})`; + } + + if (img.style.display !== "none") return; + + img.style.display = "block"; + + setTimeout(() => { + img.style.display = "none"; + }, 400); + } + const hotkeysConfigOpts = await waitForOpts(); // Default config From 68cda4f2139487a692074e653d986875d0fe68f5 Mon Sep 17 00:00:00 2001 From: Aarni Koskela Date: Mon, 5 Jun 2023 10:26:08 +0300 Subject: [PATCH 2/5] Zoom and Pan: use elementIDs from closure scope --- .../canvas-zoom-and-pan/javascript/zoom.js | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js index 0576c079..bf5ebc51 100644 --- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js +++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js @@ -1,4 +1,17 @@ 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) { @@ -14,14 +27,9 @@ onUiLoaded(async() => { } // Get tab ID - function getTabId(elements, elementIDs) { + function getTabId(elements) { const activeTab = getActiveTab(elements); - const tabIdLookup = { - "Sketch": elementIDs.sketch, - "Inpaint sketch": elementIDs.inpaintSketch, - "Inpaint": elementIDs.inpaint - }; - return tabIdLookup[activeTab.innerText]; + return tabNameToElementId[activeTab.innerText]; } // 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 * very long images. */ - function restoreImgRedMask(elements, elementIDs) { - const mainTabId = getTabId(elements, elementIDs); + function restoreImgRedMask(elements) { + const mainTabId = getTabId(elements); if (!mainTabId) return; @@ -135,14 +143,6 @@ 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)) @@ -164,7 +164,7 @@ onUiLoaded(async() => { rangeInputs.forEach(input => { if (input) { - input.addEventListener("input", () => restoreImgRedMask(elements, elementIDs)); + input.addEventListener("input", () => restoreImgRedMask(elements)); } }); From afbb0b5f863e910ee41df81f4c152ca9998bb310 Mon Sep 17 00:00:00 2001 From: Aarni Koskela Date: Mon, 5 Jun 2023 10:31:15 +0300 Subject: [PATCH 3/5] Zoom and Pan: simplify getElements (it's not actually async) --- .../canvas-zoom-and-pan/javascript/zoom.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js index bf5ebc51..63de9140 100644 --- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js +++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js @@ -143,16 +143,10 @@ onUiLoaded(async() => { let mouseX, mouseY; let activeElement; - 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. From 6163b38ad996aef96e994521078ef2a63484c274 Mon Sep 17 00:00:00 2001 From: Aarni Koskela Date: Mon, 5 Jun 2023 10:36:45 +0300 Subject: [PATCH 4/5] Zoom and Pan: use for instead of forEach --- .../canvas-zoom-and-pan/javascript/zoom.js | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js index 63de9140..a1e5b482 100644 --- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js +++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js @@ -150,17 +150,15 @@ onUiLoaded(async() => { 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)); - } - }); + for (const input of rangeInputs) { + input?.addEventListener("input", () => restoreImgRedMask(elements)); + } function applyZoomAndPan(elemId) { const targetElement = gradioApp().querySelector(elemId); @@ -215,12 +213,11 @@ onUiLoaded(async() => { action: "Move canvas" } ]; - hotkeys.forEach(function(hotkey) { + for (const hotkey of hotkeys) { const p = document.createElement("p"); - p.innerHTML = - "" + hotkey.key + "" + " - " + hotkey.action; + p.innerHTML = `${hotkey.key} - ${hotkey.action}`; tooltipContent.appendChild(p); - }); + } // Add information and content elements to the tooltip element tooltip.appendChild(info); From 2d4c66f7b5cb1d12461f8c2a509aab8e5b76d3fe Mon Sep 17 00:00:00 2001 From: Aarni Koskela Date: Mon, 5 Jun 2023 10:39:57 +0300 Subject: [PATCH 5/5] Zoom and Pan: simplify waitForOpts --- .../canvas-zoom-and-pan/javascript/zoom.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js index a1e5b482..4ecb3d36 100644 --- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js +++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js @@ -34,14 +34,12 @@ onUiLoaded(async() => { // 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); - }); + for (;;) { + if (window.opts && Object.keys(window.opts).length) { + return window.opts; + } + await new Promise(resolve => setTimeout(resolve, 100)); + } } // Check is hotkey valid