Merge pull request #12458 from daswer123/auto-expand (3c00e41e) · Commits · github_fork / Stable Diffusion Webui

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

+26 −2

Original line number	Diff line number	Diff line
		@@ -12,6 +12,7 @@ onUiLoaded(async() => {
		"Sketch": elementIDs.sketch
		};


		// Helper functions
		// Get active tab
		function getActiveTab(elements, all = false) {
		@@ -377,6 +378,11 @@ onUiLoaded(async() => {
		toggleOverlap("off");
		fullScreenMode = false;

		const closeBtn = targetElement.querySelector("button[aria-label='Remove Image']");
		if (closeBtn) {
		closeBtn.addEventListener("click", resetZoom);
		}

		if (
		canvas &&
		parseFloat(canvas.style.width) > 865 &&
		@@ -657,17 +663,20 @@ onUiLoaded(async() => {
		// Simulation of the function to put a long image into the screen.
		// We detect if an image has a scroll bar or not, make a fullscreen to reveal the image, then reduce it to fit into the element.
		// We hide the image and show it to the user when it is ready.
		function autoExpand(e) {

		targetElement.isExpanded = false;
		function autoExpand() {
		const canvas = document.querySelector(`${elemId} canvas[key="interface"]`);
		const isMainTab = activeElement === elementIDs.inpaint \|\| activeElement === elementIDs.inpaintSketch \|\| activeElement === elementIDs.sketch;

		if (canvas && isMainTab) {
		if (hasHorizontalScrollbar(targetElement)) {
		if (hasHorizontalScrollbar(targetElement) && targetElement.isExpanded === false) {
		targetElement.style.visibility = "hidden";
		setTimeout(() => {
		fitToScreen();
		resetZoom();
		targetElement.style.visibility = "visible";
		targetElement.isExpanded = true;
		}, 10);
		}
		}
		@@ -675,9 +684,24 @@ onUiLoaded(async() => {

		targetElement.addEventListener("mousemove", getMousePosition);

		//observers
		// Creating an observer with a callback function to handle DOM changes
		const observer = new MutationObserver((mutationsList, observer) => {
		for (let mutation of mutationsList) {
		// If the style attribute of the canvas has changed, by observation it happens only when the picture changes
		if (mutation.type === 'attributes' && mutation.attributeName === 'style' &&
		mutation.target.tagName.toLowerCase() === 'canvas') {
		targetElement.isExpanded = false;
		setTimeout(resetZoom, 10);
		}
		}
		});

		// Apply auto expand if enabled
		if (hotkeysConfig.canvas_auto_expand) {
		targetElement.addEventListener("mousemove", autoExpand);
		// Set up an observer to track attribute changes
		observer.observe(targetElement, {attributes: true, childList: true, subtree: true});
		}

		// Handle events only inside the targetElement

Admin message