openvinotoolkit/stable-diffusion-webui
1
1
Fork 0
mirror of https://github.com/openvinotoolkit/stable-diffusion-webui.git synced 2024-12-15 07:03:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fixing and improving integration

Browse Source
This commit is contained in:
Danil Boldyrev 2023-08-24 01:40:06 +03:00
parent 6a87e35bef
commit 32e790a47e
1 changed files with 50 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
View File

@ -48,7 +48,7 @@ onUiLoaded(async() => {
// Wait until opts loaded // Wait until opts loaded
async function waitForOpts() { async function waitForOpts() {
for (;;) { for (; ;) {
if (window.opts && Object.keys(window.opts).length) { if (window.opts && Object.keys(window.opts).length) {
return window.opts; return window.opts;
} }
@ -269,7 +269,7 @@ onUiLoaded(async() => {
input?.addEventListener("input", () => restoreImgRedMask(elements)); input?.addEventListener("input", () => restoreImgRedMask(elements));
} }
function applyZoomAndPan(elemId) { function applyZoomAndPan(elemId, isExtension = true) {
const targetElement = gradioApp().querySelector(elemId); const targetElement = gradioApp().querySelector(elemId);
if (!targetElement) { if (!targetElement) {
@ -381,6 +381,10 @@ onUiLoaded(async() => {
panY: 0 panY: 0
}; };
if (isExtension) {
targetElement.style.overflow = "hidden";
}
fixCanvas(); fixCanvas();
targetElement.style.transform = `scale(${elemData[elemId].zoomLevel}) translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px)`; targetElement.style.transform = `scale(${elemData[elemId].zoomLevel}) translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px)`;
@ -396,11 +400,26 @@ onUiLoaded(async() => {
closeBtn.addEventListener("click", resetZoom); closeBtn.addEventListener("click", resetZoom);
} }
if (canvas && isExtension) {
const parentElement = targetElement.closest('[id^="component-"]');
if ( if (
canvas && canvas &&
parseFloat(canvas.style.width) > parentElement.offsetWidth &&
parseFloat(targetElement.style.width) > parentElement.offsetWidth
) {
fitToElement();
return;
}
}
if (
canvas &&
!isExtension &&
parseFloat(canvas.style.width) > 865 && parseFloat(canvas.style.width) > 865 &&
parseFloat(targetElement.style.width) > 865 parseFloat(targetElement.style.width) > 865
) { ) {
console.log(parseFloat(canvas.style.width), parseFloat(targetElement.style.width));
fitToElement(); fitToElement();
return; return;
} }
@ -472,6 +491,10 @@ onUiLoaded(async() => {
targetElement.style.transform = `translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px) scale(${newZoomLevel})`; targetElement.style.transform = `translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px) scale(${newZoomLevel})`;
toggleOverlap("on"); toggleOverlap("on");
if (isExtension) {
targetElement.style.overflow = "visible";
}
return newZoomLevel; return newZoomLevel;
} }
@ -511,10 +534,19 @@ onUiLoaded(async() => {
//Reset Zoom //Reset Zoom
targetElement.style.transform = `translate(${0}px, ${0}px) scale(${1})`; targetElement.style.transform = `translate(${0}px, ${0}px) scale(${1})`;
let parentElement;
if (isExtension) {
parentElement = targetElement.closest('[id^="component-"]');
} else {
parentElement = targetElement.parentElement;
}
// Get element and screen dimensions // Get element and screen dimensions
const elementWidth = targetElement.offsetWidth; const elementWidth = targetElement.offsetWidth;
const elementHeight = targetElement.offsetHeight; const elementHeight = targetElement.offsetHeight;
const parentElement = targetElement.parentElement;
const screenWidth = parentElement.clientWidth; const screenWidth = parentElement.clientWidth;
const screenHeight = parentElement.clientHeight; const screenHeight = parentElement.clientHeight;
@ -565,9 +597,14 @@ onUiLoaded(async() => {
`${elemId} canvas[key="interface"]` `${elemId} canvas[key="interface"]`
); );
if (isExtension) {
targetElement.style.overflow = "visible";
}
if (!canvas) return; if (!canvas) return;
if (canvas.offsetWidth > 862) { if (canvas.offsetWidth > 862 || isExtension) {
targetElement.style.width = (canvas.offsetWidth + 2) + "px"; targetElement.style.width = (canvas.offsetWidth + 2) + "px";
} }
@ -816,6 +853,11 @@ onUiLoaded(async() => {
if (isMoving && elemId === activeElement) { if (isMoving && elemId === activeElement) {
updatePanPosition(e.movementX, e.movementY); updatePanPosition(e.movementX, e.movementY);
targetElement.style.pointerEvents = "none"; targetElement.style.pointerEvents = "none";
if (isExtension) {
targetElement.style.overflow = "visible";
}
} else { } else {
targetElement.style.pointerEvents = "auto"; targetElement.style.pointerEvents = "auto";
} }
@ -829,9 +871,9 @@ onUiLoaded(async() => {
gradioApp().addEventListener("mousemove", handleMoveByKey); gradioApp().addEventListener("mousemove", handleMoveByKey);
} }
applyZoomAndPan(elementIDs.sketch); applyZoomAndPan(elementIDs.sketch, false);
applyZoomAndPan(elementIDs.inpaint); applyZoomAndPan(elementIDs.inpaint, false);
applyZoomAndPan(elementIDs.inpaintSketch); applyZoomAndPan(elementIDs.inpaintSketch, false);
// 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
const applyZoomAndPanIntegration = async(id, elementIDs) => { const applyZoomAndPanIntegration = async(id, elementIDs) => {