Merge pull request #11005 from daswer123/dev
Fixed bugs in the zoom builtin extensions and made the zoom function global
This commit is contained in:
AUTOMATIC1111
GitHub
commit
b4b7e6e5f7
@ -1,5 +1,3 @@
|
||||
// Main
|
||||
|
||||
// Helper functions
|
||||
// Get active tab
|
||||
function getActiveTab(elements, all = false) {
|
||||
@ -14,6 +12,17 @@ function getActiveTab(elements, all = false) {
|
||||
}
|
||||
}
|
||||
|
||||
// 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 => {
|
||||
@ -63,6 +72,48 @@ 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);
|
||||
|
||||
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() => {
|
||||
const hotkeysConfigOpts = await waitForOpts();
|
||||
@ -84,17 +135,19 @@ onUiLoaded(async() => {
|
||||
|
||||
let isMoving = false;
|
||||
let mouseX, mouseY;
|
||||
let activeElement;
|
||||
|
||||
const elementIDs = {
|
||||
sketch: "#img2img_sketch",
|
||||
inpaint: "#img2maskimg",
|
||||
inpaintSketch: "#inpaint_sketch",
|
||||
img2imgTabs: "#mode_img2img .tab-nav"
|
||||
img2imgTabs: "#mode_img2img .tab-nav",
|
||||
rangeGroup: "#img2img_column_size"
|
||||
};
|
||||
|
||||
async function getElements() {
|
||||
const elements = await Promise.all(
|
||||
Object.values(elementIDs).map(id => document.querySelector(id))
|
||||
Object.values(elementIDs).map(id => gradioApp().querySelector(id))
|
||||
);
|
||||
return Object.fromEntries(
|
||||
Object.keys(elementIDs).map((key, index) => [key, elements[index]])
|
||||
@ -102,10 +155,36 @@ onUiLoaded(async() => {
|
||||
}
|
||||
|
||||
const elements = await getElements();
|
||||
const elemData = {};
|
||||
|
||||
// Apply functionality to the range inputs. Restore redmask and correct for long images.
|
||||
const rangeInputs = elements.rangeGroup ? 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));
|
||||
}
|
||||
});
|
||||
|
||||
function applyZoomAndPan(elemId) {
|
||||
const targetElement = gradioApp().querySelector(elemId);
|
||||
|
||||
if (!targetElement) {
|
||||
console.log("Element not found");
|
||||
return;
|
||||
}
|
||||
|
||||
function applyZoomAndPan(targetElement, elemId) {
|
||||
targetElement.style.transformOrigin = "0 0";
|
||||
let [zoomLevel, panX, panY] = [1, 0, 0];
|
||||
|
||||
elemData[elemId] = {
|
||||
zoom: 1,
|
||||
panX: 0,
|
||||
panY: 0
|
||||
};
|
||||
let fullScreenMode = false;
|
||||
|
||||
// Create tooltip
|
||||
@ -124,7 +203,7 @@ onUiLoaded(async() => {
|
||||
const tooltipContent = document.createElement("div");
|
||||
tooltipContent.className = "tooltip-content";
|
||||
|
||||
// Add info about hotkets
|
||||
// Add info about hotkeys
|
||||
const zoomKey = hotkeysConfig.canvas_swap_controls ? "Ctrl" : "Shift";
|
||||
const adjustKey = hotkeysConfig.canvas_swap_controls ? "Shift" : "Ctrl";
|
||||
|
||||
@ -132,21 +211,15 @@ onUiLoaded(async() => {
|
||||
{key: `${zoomKey} + wheel`, action: "Zoom canvas"},
|
||||
{key: `${adjustKey} + wheel`, action: "Adjust brush size"},
|
||||
{
|
||||
key: hotkeysConfig.canvas_hotkey_reset.charAt(
|
||||
hotkeysConfig.canvas_hotkey_reset.length - 1
|
||||
),
|
||||
key: hotkeysConfig.canvas_hotkey_reset.charAt(hotkeysConfig.canvas_hotkey_reset.length - 1),
|
||||
action: "Reset zoom"
|
||||
},
|
||||
{
|
||||
key: hotkeysConfig.canvas_hotkey_fullscreen.charAt(
|
||||
hotkeysConfig.canvas_hotkey_fullscreen.length - 1
|
||||
),
|
||||
key: hotkeysConfig.canvas_hotkey_fullscreen.charAt(hotkeysConfig.canvas_hotkey_fullscreen.length - 1),
|
||||
action: "Fullscreen mode"
|
||||
},
|
||||
{
|
||||
key: hotkeysConfig.canvas_hotkey_move.charAt(
|
||||
hotkeysConfig.canvas_hotkey_move.length - 1
|
||||
),
|
||||
key: hotkeysConfig.canvas_hotkey_move.charAt(hotkeysConfig.canvas_hotkey_move.length - 1),
|
||||
action: "Move canvas"
|
||||
}
|
||||
];
|
||||
@ -186,12 +259,14 @@ onUiLoaded(async() => {
|
||||
|
||||
// Reset the zoom level and pan position of the target element to their initial values
|
||||
function resetZoom() {
|
||||
zoomLevel = 1;
|
||||
panX = 0;
|
||||
panY = 0;
|
||||
elemData[elemId] = {
|
||||
zoomLevel: 1,
|
||||
panX: 0,
|
||||
panY: 0
|
||||
};
|
||||
|
||||
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(
|
||||
`${elemId} canvas[key="interface"]`
|
||||
@ -269,11 +344,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
|
||||
function updateZoom(newZoomLevel, mouseX, mouseY) {
|
||||
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.transform = `translate(${panX}px, ${panY}px) scale(${newZoomLevel})`;
|
||||
targetElement.style.transform = `translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px) scale(${newZoomLevel})`;
|
||||
|
||||
toggleOverlap("on");
|
||||
return newZoomLevel;
|
||||
@ -289,9 +367,9 @@ onUiLoaded(async() => {
|
||||
|
||||
let zoomPosX, zoomPosY;
|
||||
let delta = 0.2;
|
||||
if (zoomLevel > 7) {
|
||||
if (elemData[elemId].zoomLevel > 7) {
|
||||
delta = 0.9;
|
||||
} else if (zoomLevel > 2) {
|
||||
} else if (elemData[elemId].zoomLevel > 2) {
|
||||
delta = 0.6;
|
||||
}
|
||||
|
||||
@ -299,8 +377,9 @@ onUiLoaded(async() => {
|
||||
zoomPosY = e.clientY;
|
||||
|
||||
fullScreenMode = false;
|
||||
zoomLevel = updateZoom(
|
||||
zoomLevel + (operation === "+" ? delta : -delta),
|
||||
elemData[elemId].zoomLevel = updateZoom(
|
||||
elemData[elemId].zoomLevel +
|
||||
(operation === "+" ? delta : -delta),
|
||||
zoomPosX - targetElement.getBoundingClientRect().left,
|
||||
zoomPosY - targetElement.getBoundingClientRect().top
|
||||
);
|
||||
@ -351,9 +430,9 @@ onUiLoaded(async() => {
|
||||
targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
|
||||
|
||||
// Update global variables
|
||||
zoomLevel = scale;
|
||||
panX = offsetX;
|
||||
panY = offsetY;
|
||||
elemData[elemId].zoomLevel = scale;
|
||||
elemData[elemId].panX = offsetX;
|
||||
elemData[elemId].panY = offsetY;
|
||||
|
||||
fullScreenMode = false;
|
||||
toggleOverlap("off");
|
||||
@ -427,9 +506,9 @@ onUiLoaded(async() => {
|
||||
targetElement.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
|
||||
|
||||
// Update global variables
|
||||
zoomLevel = scale;
|
||||
panX = offsetX;
|
||||
panY = offsetY;
|
||||
elemData[elemId].zoomLevel = scale;
|
||||
elemData[elemId].panX = offsetX;
|
||||
elemData[elemId].panY = offsetY;
|
||||
|
||||
fullScreenMode = true;
|
||||
toggleOverlap("on");
|
||||
@ -465,6 +544,8 @@ onUiLoaded(async() => {
|
||||
if (!isKeyDownHandlerAttached) {
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
isKeyDownHandlerAttached = true;
|
||||
|
||||
activeElement = elemId;
|
||||
}
|
||||
}
|
||||
|
||||
@ -472,6 +553,8 @@ onUiLoaded(async() => {
|
||||
if (isKeyDownHandlerAttached) {
|
||||
document.removeEventListener("keydown", handleKeyDown);
|
||||
isKeyDownHandlerAttached = false;
|
||||
|
||||
activeElement = null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -528,21 +611,24 @@ onUiLoaded(async() => {
|
||||
|
||||
// Detect zoom level and update the pan speed.
|
||||
function updatePanPosition(movementX, movementY) {
|
||||
let panSpeed = 1.5;
|
||||
let panSpeed = 2;
|
||||
|
||||
if (zoomLevel > 8) {
|
||||
panSpeed = 2.5;
|
||||
if (elemData[elemId].zoomLevel > 8) {
|
||||
panSpeed = 3.5;
|
||||
}
|
||||
|
||||
panX = panX + movementX * panSpeed;
|
||||
panY = panY + movementY * panSpeed;
|
||||
elemData[elemId].panX += movementX * panSpeed;
|
||||
elemData[elemId].panY += movementY * panSpeed;
|
||||
|
||||
targetElement.style.transform = `translate(${panX}px, ${panY}px) scale(${zoomLevel})`;
|
||||
toggleOverlap("on");
|
||||
// Delayed redraw of an element
|
||||
requestAnimationFrame(() => {
|
||||
targetElement.style.transform = `translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px) scale(${elemData[elemId].zoomLevel})`;
|
||||
toggleOverlap("on");
|
||||
});
|
||||
}
|
||||
|
||||
function handleMoveByKey(e) {
|
||||
if (isMoving) {
|
||||
if (isMoving && elemId === activeElement) {
|
||||
updatePanPosition(e.movementX, e.movementY);
|
||||
targetElement.style.pointerEvents = "none";
|
||||
} else {
|
||||
@ -558,7 +644,10 @@ onUiLoaded(async() => {
|
||||
gradioApp().addEventListener("mousemove", handleMoveByKey);
|
||||
}
|
||||
|
||||
applyZoomAndPan(elements.sketch, elementIDs.sketch);
|
||||
applyZoomAndPan(elements.inpaint, elementIDs.inpaint);
|
||||
applyZoomAndPan(elements.inpaintSketch, elementIDs.inpaintSketch);
|
||||
applyZoomAndPan(elementIDs.sketch);
|
||||
applyZoomAndPan(elementIDs.inpaint);
|
||||
applyZoomAndPan(elementIDs.inpaintSketch);
|
||||
|
||||
// Make the function global so that other extensions can take advantage of this solution
|
||||
window.applyZoomAndPan = applyZoomAndPan;
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user