OPENGIT/stable-diffusion-webui
1
0
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui.git synced 2024-12-29 19:05:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

allow use zoom.js outside webui context

Browse Source
This commit is contained in:
Andray 2024-03-17 09:29:11 +04:00
parent 93c7b9d7fc
commit e9b8a89b3c
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,6 +29,7 @@ onUiLoaded(async() => {
}); });
function getActiveTab(elements, all = false) { function getActiveTab(elements, all = false) {
if (!elements.img2imgTabs) return null;
const tabs = elements.img2imgTabs.querySelectorAll("button"); const tabs = elements.img2imgTabs.querySelectorAll("button");
if (all) return tabs; if (all) return tabs;
@ -43,6 +44,7 @@ onUiLoaded(async() => {
// Get tab ID // Get tab ID
function getTabId(elements) { function getTabId(elements) {
const activeTab = getActiveTab(elements); const activeTab = getActiveTab(elements);
if (!activeTab) return null;
return tabNameToElementId[activeTab.innerText]; return tabNameToElementId[activeTab.innerText];
} }
@ -366,9 +368,9 @@ onUiLoaded(async() => {
// In the course of research, it was found that the tag img is very harmful when zooming and creates white canvases. This hack allows you to almost never think about this problem, it has no effect on webui. // In the course of research, it was found that the tag img is very harmful when zooming and creates white canvases. This hack allows you to almost never think about this problem, it has no effect on webui.
function fixCanvas() { function fixCanvas() {
const activeTab = getActiveTab(elements).textContent.trim(); const activeTab = getActiveTab(elements)?.textContent.trim();
if (activeTab !== "img2img") { if (activeTab && activeTab !== "img2img") {
const img = targetElement.querySelector(`${elemId} img`); const img = targetElement.querySelector(`${elemId} img`);
if (img && img.style.display !== "none") { if (img && img.style.display !== "none") {
@ -788,13 +790,15 @@ onUiLoaded(async() => {
targetElement.addEventListener("mouseleave", handleMouseLeave); targetElement.addEventListener("mouseleave", handleMouseLeave);
// Reset zoom when click on another tab // Reset zoom when click on another tab
elements.img2imgTabs.addEventListener("click", resetZoom); if (elements.img2imgTabs) {
elements.img2imgTabs.addEventListener("click", () => { elements.img2imgTabs.addEventListener("click", resetZoom);
// targetElement.style.width = ""; elements.img2imgTabs.addEventListener("click", () => {
if (parseInt(targetElement.style.width) > 865) { // targetElement.style.width = "";
setTimeout(fitToElement, 0); if (parseInt(targetElement.style.width) > 865) {
} setTimeout(fitToElement, 0);
}); }
});
}
targetElement.addEventListener("wheel", e => { targetElement.addEventListener("wheel", e => {
// change zoom level // change zoom level
@ -935,9 +939,9 @@ onUiLoaded(async() => {
} }
applyZoomAndPan(elementIDs.sketch, false); elementIDs.sketch && applyZoomAndPan(elementIDs.sketch, false);
applyZoomAndPan(elementIDs.inpaint, false); elementIDs.inpaint && applyZoomAndPan(elementIDs.inpaint, false);
applyZoomAndPan(elementIDs.inpaintSketch, false); 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) => {