OPENGIT/stable-diffusion-webui
1
0
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui.git synced 2025-01-01 12:25:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Zoom and Pan: Resize handler

Browse Source
This commit is contained in:
Danil Boldyrev 2023-08-24 17:30:35 +03:00
parent fa68d66c98
commit c39efa6ba6
1 changed files with 42 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -385,6 +385,8 @@ onUiLoaded(async() => {
targetElement.style.overflow = "hidden"; targetElement.style.overflow = "hidden";
} }
targetElement.isZoomed = false;
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)`;
@ -479,7 +481,7 @@ 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.1, Math.min(newZoomLevel, 15));
elemData[elemId].panX += elemData[elemId].panX +=
mouseX - (mouseX * newZoomLevel) / elemData[elemId].zoomLevel; mouseX - (mouseX * newZoomLevel) / elemData[elemId].zoomLevel;
@ -520,6 +522,8 @@ onUiLoaded(async() => {
zoomPosX - targetElement.getBoundingClientRect().left, zoomPosX - targetElement.getBoundingClientRect().left,
zoomPosY - targetElement.getBoundingClientRect().top zoomPosY - targetElement.getBoundingClientRect().top
); );
targetElement.isZoomed = true;
} }
} }
@ -596,17 +600,16 @@ 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 || isExtension) { if (canvas.offsetWidth > 862 || isExtension) {
targetElement.style.width = (canvas.offsetWidth + 2) + "px"; targetElement.style.width = (canvas.offsetWidth + 2) + "px";
} }
if (isExtension) {
targetElement.style.overflow = "visible";
}
if (fullScreenMode) { if (fullScreenMode) {
resetZoom(); resetZoom();
fullScreenMode = false; fullScreenMode = false;
@ -867,7 +870,40 @@ onUiLoaded(async() => {
isMoving = false; isMoving = false;
}; };
// Checks for extension
function checkForOutBox() {
const parentElement = targetElement.closest('[id^="component-"]');
if (parentElement.offsetWidth < targetElement.offsetWidth && !targetElement.isExpanded) {
resetZoom();
targetElement.isExpanded = true;
}
if (parentElement.offsetWidth < targetElement.offsetWidth && elemData[elemId].zoomLevel == 1) {
resetZoom();
}
if (parentElement.offsetWidth < targetElement.offsetWidth && targetElement.offsetWidth * elemData[elemId].zoomLevel > parentElement.offsetWidth && elemData[elemId].zoomLevel < 1 && !targetElement.isZoomed) {
resetZoom();
}
}
if (isExtension) {
targetElement.addEventListener("mousemove", checkForOutBox);
}
window.addEventListener('resize', (e) => {
resetZoom();
if (isExtension) {
targetElement.isExpanded = false;
targetElement.isZoomed = false;
}
});
gradioApp().addEventListener("mousemove", handleMoveByKey); gradioApp().addEventListener("mousemove", handleMoveByKey);
} }
applyZoomAndPan(elementIDs.sketch, false); applyZoomAndPan(elementIDs.sketch, false);