Fixing and improving integration (32e790a4) · Commits · github_fork / Stable Diffusion Webui

extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js

+50 −8

Original line number	Diff line number	Diff line
		@@ -269,7 +269,7 @@ onUiLoaded(async() => {
		input?.addEventListener("input", () => restoreImgRedMask(elements));
		}

		function applyZoomAndPan(elemId) {
		function applyZoomAndPan(elemId, isExtension = true) {
		const targetElement = gradioApp().querySelector(elemId);

		if (!targetElement) {
		@@ -381,6 +381,10 @@ onUiLoaded(async() => {
		panY: 0
		};

		if (isExtension) {
		targetElement.style.overflow = "hidden";
		}

		fixCanvas();
		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);
		}

		if (canvas && isExtension) {
		const parentElement = targetElement.closest('[id^="component-"]');
		if (
		canvas &&
		parseFloat(canvas.style.width) > parentElement.offsetWidth &&
		parseFloat(targetElement.style.width) > parentElement.offsetWidth
		) {
		fitToElement();
		return;
		}

		}

		if (
		canvas &&
		!isExtension &&
		parseFloat(canvas.style.width) > 865 &&
		parseFloat(targetElement.style.width) > 865
		) {
		console.log(parseFloat(canvas.style.width), parseFloat(targetElement.style.width));
		fitToElement();
		return;
		}
		@@ -472,6 +491,10 @@ onUiLoaded(async() => {
		targetElement.style.transform = `translate(${elemData[elemId].panX}px, ${elemData[elemId].panY}px) scale(${newZoomLevel})`;

		toggleOverlap("on");
		if (isExtension) {
		targetElement.style.overflow = "visible";
		}

		return newZoomLevel;
		}

		@@ -511,10 +534,19 @@ onUiLoaded(async() => {
		//Reset Zoom
		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
		const elementWidth = targetElement.offsetWidth;
		const elementHeight = targetElement.offsetHeight;
		const parentElement = targetElement.parentElement;

		const screenWidth = parentElement.clientWidth;
		const screenHeight = parentElement.clientHeight;

		@@ -565,9 +597,14 @@ onUiLoaded(async() => {
		`${elemId} canvas[key="interface"]`
		);

		if (isExtension) {
		targetElement.style.overflow = "visible";
		}


		if (!canvas) return;

		if (canvas.offsetWidth > 862) {
		if (canvas.offsetWidth > 862 \|\| isExtension) {
		targetElement.style.width = (canvas.offsetWidth + 2) + "px";
		}

		@@ -816,6 +853,11 @@ onUiLoaded(async() => {
		if (isMoving && elemId === activeElement) {
		updatePanPosition(e.movementX, e.movementY);
		targetElement.style.pointerEvents = "none";

		if (isExtension) {
		targetElement.style.overflow = "visible";
		}

		} else {
		targetElement.style.pointerEvents = "auto";
		}
		@@ -829,9 +871,9 @@ onUiLoaded(async() => {
		gradioApp().addEventListener("mousemove", handleMoveByKey);
		}

		applyZoomAndPan(elementIDs.sketch);
		applyZoomAndPan(elementIDs.inpaint);
		applyZoomAndPan(elementIDs.inpaintSketch);
		applyZoomAndPan(elementIDs.sketch, false);
		applyZoomAndPan(elementIDs.inpaint, false);
		applyZoomAndPan(elementIDs.inpaintSketch, false);

		// Make the function global so that other extensions can take advantage of this solution
		const applyZoomAndPanIntegration = async(id, elementIDs) => {

Admin message