mirror of
https://github.com/openvinotoolkit/stable-diffusion-webui.git
synced 2024-12-14 14:45:06 +03:00
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
This commit is contained in:
parent
dc273f7473
commit
1a49178330
@ -1,5 +1,3 @@
|
|||||||
// 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) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 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) {
|
|||||||
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) {
|
||||||
|
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 transformValues = mainTab.style.transform
|
||||||
|
.match(/[-+]?[0-9]*\.?[0-9]+/g)
|
||||||
|
.map(Number);
|
||||||
|
const [posX, posY, zoom] = transformValues;
|
||||||
|
|
||||||
|
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";
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
|
||||||
function restoreImgRedMask(elements,elementIDs) {
|
|
||||||
const mainTabId = getTabId(elements,elementIDs);
|
|
||||||
|
|
||||||
if (!mainTabId) return;
|
|
||||||
|
|
||||||
const mainTab = document.querySelector(mainTabId);
|
|
||||||
const img = mainTab.querySelector("img");
|
|
||||||
const imageARPreview = document.querySelector("#imageARPreview");
|
|
||||||
|
|
||||||
if (!img || !imageARPreview) return;
|
|
||||||
|
|
||||||
imageARPreview.style.transform = "";
|
|
||||||
if (parseFloat(mainTab.style.width) > 865) {
|
|
||||||
const transformValues = mainTab.style.transform.match(/[-+]?[0-9]*\.?[0-9]+/g).map(Number);
|
|
||||||
const [posX, posY , zoom] = transformValues;
|
|
||||||
|
|
||||||
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";
|
|
||||||
}, 300);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Main
|
// Main
|
||||||
onUiLoaded(async() => {
|
onUiLoaded(async() => {
|
||||||
const hotkeysConfigOpts = await waitForOpts();
|
const hotkeysConfigOpts = await waitForOpts();
|
||||||
@ -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() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const elements = await getElements();
|
const elements = await getElements();
|
||||||
|
const elemData = {};
|
||||||
|
|
||||||
// Apply functionality to the range inputs
|
// Apply functionality to the range inputs. Restore redmask and correct for long images.
|
||||||
const rangeInputs = elements.rangeGroup
|
const rangeInputs = elements.rangeGroup ? elements.rangeGroup.querySelectorAll("input") :
|
||||||
? 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']"),
|
||||||
|
gradioApp().querySelector("#img2img_height input[type='range']")
|
||||||
|
];
|
||||||
|
|
||||||
rangeInputs.forEach((input) => {
|
rangeInputs.forEach(input => {
|
||||||
if (input) {
|
if (input) {
|
||||||
input.addEventListener("input",() => restoreImgRedMask(elements,elementIDs));
|
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() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
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() => {
|
|||||||
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() => {
|
|||||||
{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() => {
|
|||||||
|
|
||||||
// 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() => {
|
|||||||
// 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() => {
|
|||||||
|
|
||||||
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() => {
|
|||||||
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() => {
|
|||||||
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() => {
|
|||||||
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() => {
|
|||||||
if (!isKeyDownHandlerAttached) {
|
if (!isKeyDownHandlerAttached) {
|
||||||
document.addEventListener("keydown", handleKeyDown);
|
document.addEventListener("keydown", handleKeyDown);
|
||||||
isKeyDownHandlerAttached = true;
|
isKeyDownHandlerAttached = true;
|
||||||
|
|
||||||
|
activeElement = elemId;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -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() => {
|
|||||||
|
|
||||||
// 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() => {
|
|||||||
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;
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user