Merge pull request #11031 from akx/zoom-and-pan-namespace (e89a248e) · Commits · github_fork / Stable Diffusion Webui

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

+111 −124

Original line number	Diff line number	Diff line
		onUiLoaded(async() => {
		const elementIDs = {
		img2imgTabs: "#mode_img2img .tab-nav",
		inpaint: "#img2maskimg",
		inpaintSketch: "#inpaint_sketch",
		rangeGroup: "#img2img_column_size",
		sketch: "#img2img_sketch",
		};
		const tabNameToElementId = {
		"Inpaint sketch": elementIDs.inpaintSketch,
		"Inpaint": elementIDs.inpaint,
		"Sketch": elementIDs.sketch,
		};

		// Helper functions
		// Get active tab
		function getActiveTab(elements, all = false) {
		@@ -13,26 +27,19 @@ function getActiveTab(elements, all = false) {
		}

		// Get tab ID
		function getTabId(elements, elementIDs) {
		function getTabId(elements) {
		const activeTab = getActiveTab(elements);
		const tabIdLookup = {
		"Sketch": elementIDs.sketch,
		"Inpaint sketch": elementIDs.inpaintSketch,
		"Inpaint": elementIDs.inpaint
		};
		return tabIdLookup[activeTab.innerText];
		return tabNameToElementId[activeTab.innerText];
		}

		// Wait until opts loaded
		async function waitForOpts() {
		return new Promise(resolve => {
		const checkInterval = setInterval(() => {
		if (window.opts && Object.keys(window.opts).length !== 0) {
		clearInterval(checkInterval);
		resolve(window.opts);
		for (;;) {
		if (window.opts && Object.keys(window.opts).length) {
		return window.opts;
		}
		await new Promise(resolve => setTimeout(resolve, 100));
		}
		}, 100);
		});
		}

		// Check is hotkey valid
		@@ -79,9 +86,8 @@ function createHotkeyConfig(defaultHotkeysConfig, hotkeysConfigOpts) {
		* 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);
		function restoreImgRedMask(elements) {
		const mainTabId = getTabId(elements);

		if (!mainTabId) return;

		@@ -114,8 +120,6 @@ function restoreImgRedMask(elements, elementIDs) {
		}, 400);
		}

		// Main
		onUiLoaded(async() => {
		const hotkeysConfigOpts = await waitForOpts();

		// Default config
		@@ -137,38 +141,22 @@ onUiLoaded(async() => {
		let mouseX, mouseY;
		let activeElement;

		const elementIDs = {
		sketch: "#img2img_sketch",
		inpaint: "#img2maskimg",
		inpaintSketch: "#inpaint_sketch",
		img2imgTabs: "#mode_img2img .tab-nav",
		rangeGroup: "#img2img_column_size"
		};

		async function getElements() {
		const elements = await Promise.all(
		Object.values(elementIDs).map(id => gradioApp().querySelector(id))
		);
		return Object.fromEntries(
		Object.keys(elementIDs).map((key, index) => [key, elements[index]])
		);
		}

		const elements = await getElements();
		const elements = Object.fromEntries(Object.keys(elementIDs).map((id) => [
		id,
		gradioApp().querySelector(elementIDs[id]),
		]));
		const elemData = {};

		// Apply functionality to the range inputs. Restore redmask and correct for long images.
		const rangeInputs = elements.rangeGroup ? elements.rangeGroup.querySelectorAll("input") :
		const rangeInputs = elements.rangeGroup ? Array.from(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));
		for (const input of rangeInputs) {
		input?.addEventListener("input", () => restoreImgRedMask(elements));
		}
		});

		function applyZoomAndPan(elemId) {
		const targetElement = gradioApp().querySelector(elemId);
		@@ -223,12 +211,11 @@ onUiLoaded(async() => {
		action: "Move canvas"
		}
		];
		hotkeys.forEach(function(hotkey) {
		for (const hotkey of hotkeys) {
		const p = document.createElement("p");
		p.innerHTML =
		"<b>" + hotkey.key + "</b>" + " - " + hotkey.action;
		p.innerHTML = `<b>${hotkey.key}</b> - ${hotkey.action}`;
		tooltipContent.appendChild(p);
		});
		}

		// Add information and content elements to the tooltip element
		tooltip.appendChild(info);

Admin message