Merge branch 'dev' into gradio4

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

@@ -43,6 +43,7 @@ onUiLoaded(async() => {
     });
 
     function getActiveTab(elements, all = false) {
+        if (!elements.img2imgTabs) return null;
         const tabs = elements.img2imgTabs.querySelectorAll("button");
 
         if (all) return tabs;
@@ -57,6 +58,7 @@ onUiLoaded(async() => {
     // Get tab ID
     function getTabId(elements) {
         const activeTab = getActiveTab(elements);
+        if (!activeTab) return null;
         return tabNameToElementId[activeTab.innerText];
     }
 
@@ -247,6 +249,7 @@ onUiLoaded(async() => {
     let isMoving = false;
     let mouseX, mouseY;
     let activeElement;
+    let interactedWithAltKey = false;
 
     const elements = Object.fromEntries(
         Object.keys(elementIDs).map(id => [
@@ -260,7 +263,7 @@ onUiLoaded(async() => {
         const targetElement = gradioApp().querySelector(elemId);
 
         if (!targetElement) {
-            console.log("Element not found");
+            console.log("Element not found", elemId);
             return;
         }
 
@@ -380,7 +383,8 @@ onUiLoaded(async() => {
 
         // Create tooltip
         function createTooltip() {
-            const toolTipElemnt = targetElement.querySelector(".image-container");
+            const toolTipElement =
+                targetElement.querySelector(".image-container");
             const tooltip = document.createElement("div");
             tooltip.className = "canvas-tooltip";
 
@@ -442,16 +446,26 @@ onUiLoaded(async() => {
             tooltip.appendChild(tooltipContent);
 
             // Add a hint element to the target element
-            toolTipElemnt.appendChild(tooltip);
-
-            return tooltip;
+            toolTipElement.appendChild(tooltip);
         }
 
         //Show tool tip if setting enable
-        const canvasTooltip = createTooltip();
+        if (hotkeysConfig.canvas_show_tooltip) {
+            createTooltip();
+        }
 
-        if (!hotkeysConfig.canvas_show_tooltip) {
-            canvasTooltip.style.display = "none";
+        // 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 && 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
@@ -570,6 +584,10 @@ onUiLoaded(async() => {
             if (isModifierKey(e, hotkeysConfig.canvas_hotkey_zoom)) {
                 e.preventDefault();
 
+                if (hotkeysConfig.canvas_hotkey_zoom === "Alt") {
+                    interactedWithAltKey = true;
+                }
+
                 let zoomPosX, zoomPosY;
                 let delta = 0.2;
                 if (elemData[elemId].zoomLevel > 7) {
@@ -767,17 +785,29 @@ onUiLoaded(async() => {
         targetElement.addEventListener("mouseleave", handleMouseLeave);
 
         // Reset zoom when click on another tab
-        elements.img2imgTabs.addEventListener("click", resetZoom);
+        if (elements.img2imgTabs) {
+            elements.img2imgTabs.addEventListener("click", resetZoom);
+            elements.img2imgTabs.addEventListener("click", () => {
+                // targetElement.style.width = "";
+                if (parseInt(targetElement.style.width) > 865) {
+                    setTimeout(fitToElement, 0);
+                }
+            });
+        }
 
         targetElement.addEventListener("wheel", e => {
             // change zoom level
-            const operation = e.deltaY > 0 ? "-" : "+";
+            const operation = (e.deltaY || -e.wheelDelta) > 0 ? "-" : "+";
             changeZoomLevel(operation, e);
 
             // Handle brush size adjustment with ctrl key pressed
             if (isModifierKey(e, hotkeysConfig.canvas_hotkey_adjust)) {
                 e.preventDefault();
 
+                if (hotkeysConfig.canvas_hotkey_adjust === "Alt") {
+                    interactedWithAltKey = true;
+                }
+
                 // Increase or decrease brush size based on scroll direction
                 adjustBrushSize(elemId, e.deltaY);
             }
@@ -817,6 +847,20 @@ onUiLoaded(async() => {
         document.addEventListener("keydown", handleMoveKeyDown);
         document.addEventListener("keyup", handleMoveKeyUp);
 
+
+        // Prevent firefox from opening main menu when alt is used as a hotkey for zoom or brush size
+        function handleAltKeyUp(e) {
+            if (e.key !== "Alt" || !interactedWithAltKey) {
+                return;
+            }
+
+            e.preventDefault();
+            interactedWithAltKey = false;
+        }
+
+        document.addEventListener("keyup", handleAltKeyUp);
+
+
         // Detect zoom level and update the pan speed.
         function updatePanPosition(movementX, movementY) {
             let panSpeed = 2;