aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDanil Boldyrev <daswerq123@gmail.com>2023-05-27 22:56:48 +0000
committerDanil Boldyrev <daswerq123@gmail.com>2023-05-27 22:56:48 +0000
commit9e69009d1b35afb65c9e07c210149fa4f98fd57d (patch)
tree316afa5466c058e6bbeb2df9202aa4364933f1e4
parent433c70b403e8fe948f5286a5a3fc686765e40b08 (diff)
downloadstable-diffusion-webui-gfx803-9e69009d1b35afb65c9e07c210149fa4f98fd57d.tar.gz
stable-diffusion-webui-gfx803-9e69009d1b35afb65c9e07c210149fa4f98fd57d.tar.bz2
stable-diffusion-webui-gfx803-9e69009d1b35afb65c9e07c210149fa4f98fd57d.zip
Improve reset zoom when toggle tabs
-rw-r--r--javascript/zoom.js35
1 files changed, 34 insertions, 1 deletions
diff --git a/javascript/zoom.js b/javascript/zoom.js
index 189b1d8f..0f1f9e09 100644
--- a/javascript/zoom.js
+++ b/javascript/zoom.js
@@ -1,4 +1,19 @@
// Main
+
+// Helper functions
+// Get active tab
+function getActiveTab(elements, all = false) {
+ const tabs = elements.img2imgTabs.querySelectorAll("button");
+
+ if (all) return tabs;
+
+ for (let tab of tabs) {
+ if (tab.classList.contains("selected")) {
+ return tab;
+ }
+ }
+}
+
onUiLoaded(async () => {
const hotkeysConfig = {
resetZoom: "KeyR",
@@ -33,12 +48,27 @@ onUiLoaded(async () => {
let [zoomLevel, panX, panY] = [1, 0, 0];
let fullScreenMode = false;
+ // 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() {
+ const activeTab = getActiveTab(elements).textContent.trim();
+
+ if (activeTab !== "img2img") {
+ const img = targetElement.querySelector(`${elemId} img`);
+
+ if (img && img.style.display !== "none") {
+ img.style.display = "none";
+ img.style.visibility = "hidden";
+ }
+ }
+ }
+
// Reset the zoom level and pan position of the target element to their initial values
function resetZoom() {
zoomLevel = 1;
panX = 0;
panY = 0;
+ fixCanvas();
targetElement.style.transform = `scale(${zoomLevel}) translate(${panX}px, ${panY}px)`;
const canvas = document.querySelector(
@@ -318,7 +348,10 @@ onUiLoaded(async () => {
// Reset zoom when click on another tab
elements.img2imgTabs.addEventListener("click", resetZoom);
elements.img2imgTabs.addEventListener("click", () => {
- targetElement.style.width = "";
+ // targetElement.style.width = "";
+ if (parseInt(targetElement.style.width) > 865) {
+ setTimeout(fitToElement, 0);
+ }
});
targetElement.addEventListener("wheel", (e) => {