Skip to content

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

Made a function applyZoomAndPan isolated each instance 

Isolated each instance of applyZoomAndPan, now if you add another element to the page, they will work correctly
parent dc273f74
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 97 deletions
extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
View file @ 1a491783
// Main
// Helper functions // Helper functions
// Get active tab // Get active tab
function getActiveTab(elements, all = false) { function getActiveTab(elements, all = false) {
...@@ -15,21 +13,23 @@ function getActiveTab(elements, all = false) { ...@@ -15,21 +13,23 @@ function getActiveTab(elements, all = false) {
} }
// Get tab ID // Get tab ID
function getTabId(elements,elementIDs) { function getTabId(elements, elementIDs) {
const activeTab = getActiveTab(elements); const activeTab = getActiveTab(elements);
const tabIdLookup = { const tabIdLookup = {
Sketch: elementIDs.sketch, "Sketch": elementIDs.sketch,
"Inpaint sketch": elementIDs.inpaintSketch, "Inpaint sketch": elementIDs.inpaintSketch,
Inpaint: elementIDs.inpaint, "Inpaint": elementIDs.inpaint
}; };
return tabIdLookup[activeTab.innerText]; return tabIdLookup[activeTab.innerText];
} }
// Get Active main tab to prevent "Undo" on text2img from being disabled // Get Active main tab to prevent "Undo" on text2img from being disabled
function getActiveMainTab() { function getActiveMainTab() {
const selectedTab = document.querySelector("#tabs .tab-nav button.selected"); const selectedTab = gradioApp().querySelector(
"#tabs .tab-nav button.selected"
);
return selectedTab; return selectedTab;
} }
// Wait until opts loaded // Wait until opts loaded
async function waitForOpts() { async function waitForOpts() {
...@@ -80,43 +80,45 @@ function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) { ...@@ -80,43 +80,45 @@ function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
return result; return result;
} }
/** /**
* The restoreImgRedMask function displays a red mask around an image to indicate the aspect ratio. * 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 * 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 * 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 * 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, elementIDs) {
const mainTabId = getTabId(elements,elementIDs); const mainTabId = getTabId(elements, elementIDs);
if (!mainTabId) return; if (!mainTabId) return;
const mainTab = document.querySelector(mainTabId); const mainTab = gradioApp().querySelector(mainTabId);
const img = mainTab.querySelector("img"); const img = mainTab.querySelector("img");
const imageARPreview = document.querySelector("#imageARPreview"); const imageARPreview = gradioApp().querySelector("#imageARPreview");
if (!img || !imageARPreview) return; if (!img || !imageARPreview) return;
imageARPreview.style.transform = ""; imageARPreview.style.transform = "";
if (parseFloat(mainTab.style.width) > 865) { if (parseFloat(mainTab.style.width) > 865) {
const transformValues = mainTab.style.transform.match(/[-+]?[0-9]*\.?[0-9]+/g).map(Number); const transformValues = mainTab.style.transform
const [posX, posY , zoom] = transformValues; .match(/[-+]?[0-9]*\.?[0-9]+/g)
.map(Number);
imageARPreview.style.transformOrigin = "0 0" const [posX, posY, zoom] = transformValues;
imageARPreview.style.transform = `scale(${zoom})`;
} imageARPreview.style.transformOrigin = "0 0";
imageARPreview.style.transform = `scale(${zoom})`;
if (img.style.display !== "none") return; }
img.style.display = "block"; if (img.style.display !== "none") return;
setTimeout(() => { img.style.display = "block";
img.style.display = "none";
}, 300); setTimeout(() => {
} img.style.display = "none";
}, 300);
}
// Main // Main
onUiLoaded(async() => { onUiLoaded(async() => {
const hotkeysConfigOpts = await waitForOpts(); const hotkeysConfigOpts = await waitForOpts();
...@@ -138,18 +140,19 @@ onUiLoaded(async() => { ...@@ -138,18 +140,19 @@ onUiLoaded(async() => {
let isMoving = false; let isMoving = false;
let mouseX, mouseY; let mouseX, mouseY;
let activeElement;
const elementIDs = { const elementIDs = {
sketch: "#img2img_sketch", sketch: "#img2img_sketch",
inpaint: "#img2maskimg", inpaint: "#img2maskimg",
inpaintSketch: "#inpaint_sketch", inpaintSketch: "#inpaint_sketch",
img2imgTabs: "#mode_img2img .tab-nav", img2imgTabs: "#mode_img2img .tab-nav",
rangeGroup: "#img2img_column_size", 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 => document.querySelector(id)) Object.values(elementIDs).map(id => gradioApp().querySelector(id))
); );
return Object.fromEntries( return Object.fromEntries(
Object.keys(elementIDs).map((key, index) => [key, elements[index]]) Object.keys(elementIDs).map((key, index) => [key, elements[index]])
...@@ -157,17 +160,20 @@ onUiLoaded(async() => { ...@@ -157,17 +160,20 @@ onUiLoaded(async() => {
} }
const elements = await getElements(); const elements = await getElements();
const elemData = {};
// Apply functionality to the range inputs
const rangeInputs = elements.rangeGroup // Apply functionality to the range inputs. Restore redmask and correct for long images.
? elements.rangeGroup.querySelectorAll("input") const rangeInputs = elements.rangeGroup ? elements.rangeGroup.querySelectorAll("input") :
: [document.querySelector("#img2img_width input[type='range']"), document.querySelector("#img2img_height input[type='range']")]; [
gradioApp().querySelector("#img2img_width input[type='range']"),
rangeInputs.forEach((input) => { gradioApp().querySelector("#img2img_height input[type='range']")
if (input) { ];
input.addEventListener("input",() => restoreImgRedMask(elements,elementIDs));
} rangeInputs.forEach(input => {
}); if (input) {
input.addEventListener("input", () => restoreImgRedMask(elements, elementIDs));
}
});
function applyZoomAndPan(elemId) { function applyZoomAndPan(elemId) {
const targetElement = gradioApp().querySelector(elemId); const targetElement = gradioApp().querySelector(elemId);
...@@ -178,7 +184,12 @@ onUiLoaded(async() => { ...@@ -178,7 +184,12 @@ onUiLoaded(async() => {
} }
targetElement.style.transformOrigin = "0 0"; targetElement.style.transformOrigin = "0 0";
let [zoomLevel, panX, panY] = [1, 0, 0];
elemData[elemId] = {
zoom: 1,
panX: 0,
panY: 0
};
let fullScreenMode = false; let fullScreenMode = false;
// Create tooltip // Create tooltip
...@@ -197,7 +208,7 @@ onUiLoaded(async() => { ...@@ -197,7 +208,7 @@ onUiLoaded(async() => {
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 hotkeys
const zoomKey = hotkeysConfig.canvas_swap_controls ? "Ctrl" : "Shift"; const zoomKey = hotkeysConfig.canvas_swap_controls ? "Ctrl" : "Shift";
const adjustKey = hotkeysConfig.canvas_swap_controls ? "Shift" : "Ctrl"; const adjustKey = hotkeysConfig.canvas_swap_controls ? "Shift" : "Ctrl";
...@@ -205,21 +216,15 @@ onUiLoaded(async() => { ...@@ -205,21 +216,15 @@ onUiLoaded(async() => {
{key: `${zoomKey} + wheel`, action: "Zoom canvas"}, {key: `${zoomKey} + wheel`, action: "Zoom canvas"},
{key: `${adjustKey} + wheel`, action: "Adjust brush size"}, {key: `${adjustKey} + 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"
} }
]; ];
...@@ -259,12 +264,14 @@ onUiLoaded(async() => { ...@@ -259,12 +264,14 @@ onUiLoaded(async() => {
// Reset the zoom level and pan position of the target element to their initial values // Reset the zoom level and pan position of the target element to their initial values
function resetZoom() { function resetZoom() {
zoomLevel = 1; elemData[elemId] = {
panX = 0; zoomLevel: 1,
panY = 0; panX: 0,
panY: 0
};
fixCanvas(); fixCanvas();
targetElement.style.transform = `scale(${zoomLevel}) translate(${panX}px, ${panY}px)`; targetElement.style.transform = `scale(${elemData[elemId].zoomLevel}) translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px)`;
const canvas = gradioApp().querySelector( const canvas = gradioApp().querySelector(
`${elemId} canvas[key="interface"]` `${elemId} canvas[key="interface"]`
...@@ -342,11 +349,14 @@ onUiLoaded(async() => { ...@@ -342,11 +349,14 @@ onUiLoaded(async() => {
// Update the zoom level and pan position of the target element based on the values of the zoomLevel, panX and panY variables // Update the zoom level and pan position of the target element based on the values of the zoomLevel, panX and panY variables
function updateZoom(newZoomLevel, mouseX, mouseY) { function updateZoom(newZoomLevel, mouseX, mouseY) {
newZoomLevel = Math.max(0.5, Math.min(newZoomLevel, 15)); newZoomLevel = Math.max(0.5, Math.min(newZoomLevel, 15));
panX += mouseX - (mouseX * newZoomLevel) / zoomLevel;
panY += mouseY - (mouseY * newZoomLevel) / zoomLevel; elemData[elemId].panX +=
mouseX - (mouseX * newZoomLevel) / elemData[elemId].zoomLevel;
elemData[elemId].panY +=
mouseY - (mouseY * newZoomLevel) / elemData[elemId].zoomLevel;
targetElement.style.transformOrigin = "0 0"; targetElement.style.transformOrigin = "0 0";
targetElement.style.transform = `translate(${panX}px, ${panY}px) scale(${newZoomLevel})`; targetElement.style.transform = `translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px) scale(${newZoomLevel})`;
toggleOverlap("on"); toggleOverlap("on");
return newZoomLevel; return newZoomLevel;
...@@ -362,9 +372,9 @@ onUiLoaded(async() => { ...@@ -362,9 +372,9 @@ onUiLoaded(async() => {
let zoomPosX, zoomPosY; let zoomPosX, zoomPosY;
let delta = 0.2; let delta = 0.2;
if (zoomLevel > 7) { if (elemData[elemId].zoomLevel > 7) {
delta = 0.9; delta = 0.9;
} else if (zoomLevel > 2) { } else if (elemData[elemId].zoomLevel > 2) {
delta = 0.6; delta = 0.6;
} }
...@@ -372,8 +382,9 @@ onUiLoaded(async() => { ...@@ -372,8 +382,9 @@ onUiLoaded(async() => {
zoomPosY = e.clientY; zoomPosY = e.clientY;
fullScreenMode = false; fullScreenMode = false;
zoomLevel = updateZoom( elemData[elemId].zoomLevel = updateZoom(
zoomLevel + (operation === "+" ? delta : -delta), elemData[elemId].zoomLevel +
(operation === "+" ? delta : -delta),
zoomPosX - targetElement.getBoundingClientRect().left, zoomPosX - targetElement.getBoundingClientRect().left,
zoomPosY - targetElement.getBoundingClientRect().top zoomPosY - targetElement.getBoundingClientRect().top
); );
...@@ -424,9 +435,9 @@ onUiLoaded(async() => { ...@@ -424,9 +435,9 @@ onUiLoaded(async() => {
targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`; targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
// Update global variables // Update global variables
zoomLevel = scale; elemData[elemId].zoomLevel = scale;
panX = offsetX; elemData[elemId].panX = offsetX;
panY = offsetY; elemData[elemId].panY = offsetY;
fullScreenMode = false; fullScreenMode = false;
toggleOverlap("off"); toggleOverlap("off");
...@@ -500,9 +511,9 @@ onUiLoaded(async() => { ...@@ -500,9 +511,9 @@ onUiLoaded(async() => {
targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`; targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
// Update global variables // Update global variables
zoomLevel = scale; elemData[elemId].zoomLevel = scale;
panX = offsetX; elemData[elemId].panX = offsetX;
panY = offsetY; elemData[elemId].panY = offsetY;
fullScreenMode = true; fullScreenMode = true;
toggleOverlap("on"); toggleOverlap("on");
...@@ -538,6 +549,8 @@ onUiLoaded(async() => { ...@@ -538,6 +549,8 @@ onUiLoaded(async() => {
if (!isKeyDownHandlerAttached) { if (!isKeyDownHandlerAttached) {
document.addEventListener("keydown", handleKeyDown); document.addEventListener("keydown", handleKeyDown);
isKeyDownHandlerAttached = true; isKeyDownHandlerAttached = true;
activeElement = elemId;
} }
} }
...@@ -545,6 +558,8 @@ onUiLoaded(async() => { ...@@ -545,6 +558,8 @@ onUiLoaded(async() => {
if (isKeyDownHandlerAttached) { if (isKeyDownHandlerAttached) {
document.removeEventListener("keydown", handleKeyDown); document.removeEventListener("keydown", handleKeyDown);
isKeyDownHandlerAttached = false; isKeyDownHandlerAttached = false;
activeElement = null;
} }
} }
...@@ -601,21 +616,23 @@ onUiLoaded(async() => { ...@@ -601,21 +616,23 @@ onUiLoaded(async() => {
// Detect zoom level and update the pan speed. // Detect zoom level and update the pan speed.
function updatePanPosition(movementX, movementY) { function updatePanPosition(movementX, movementY) {
let panSpeed = 1.5; let panSpeed = 2;
if (zoomLevel > 8) { if (elemData[elemId].zoomLevel > 8) {
panSpeed = 2.5; panSpeed = 3.5;
} }
panX = panX + movementX * panSpeed; elemData[elemId].panX =
panY = panY + movementY * panSpeed; elemData[elemId].panX + movementX * panSpeed;
elemData[elemId].panY =
elemData[elemId].panY + movementY * panSpeed;
targetElement.style.transform = `translate(${panX}px, ${panY}px) scale(${zoomLevel})`; targetElement.style.transform = `translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px) scale(${elemData[elemId].zoomLevel})`;
toggleOverlap("on"); toggleOverlap("on");
} }
function handleMoveByKey(e) { function handleMoveByKey(e) {
if (isMoving) { if (isMoving && elemId === activeElement) {
updatePanPosition(e.movementX, e.movementY); updatePanPosition(e.movementX, e.movementY);
targetElement.style.pointerEvents = "none"; targetElement.style.pointerEvents = "none";
} else { } else {
...@@ -635,7 +652,6 @@ onUiLoaded(async() => { ...@@ -635,7 +652,6 @@ onUiLoaded(async() => {
applyZoomAndPan(elementIDs.inpaint); applyZoomAndPan(elementIDs.inpaint);
applyZoomAndPan(elementIDs.inpaintSketch); applyZoomAndPan(elementIDs.inpaintSketch);
// Make the function global so that other extensions can take advantage of this solution // Make the function global so that other extensions can take advantage of this solution
window.applyZoomAndPan = applyZoomAndPan; window.applyZoomAndPan = applyZoomAndPan;
}); });
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