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;

extensions-builtin/canvas-zoom-and-pan/scripts/hotkey_config.py

@@ -8,8 +8,8 @@ shared.options_templates.update(shared.options_section(('canvas_hotkey', "Canvas
     "canvas_hotkey_grow_brush": shared.OptionInfo("W", "Enlarge the brush size"),
     "canvas_hotkey_move": shared.OptionInfo("F", "Moving the canvas").info("To work correctly in firefox, turn off 'Automatically search the page text when typing' in the browser settings"),
     "canvas_hotkey_fullscreen": shared.OptionInfo("S", "Fullscreen Mode, maximizes the picture so that it fits into the screen and stretches it to its full width "),
-    "canvas_hotkey_reset": shared.OptionInfo("R", "Reset zoom and canvas positon"),
-    "canvas_hotkey_overlap": shared.OptionInfo("O", "Toggle overlap").info("Technical button, neededs for testing"),
+    "canvas_hotkey_reset": shared.OptionInfo("R", "Reset zoom and canvas position"),
+    "canvas_hotkey_overlap": shared.OptionInfo("O", "Toggle overlap").info("Technical button, needed for testing"),
     "canvas_show_tooltip": shared.OptionInfo(True, "Enable tooltip on the canvas"),
     "canvas_blur_prompt": shared.OptionInfo(False, "Take the focus off the prompt when working with a canvas"),
     "canvas_disabled_functions": shared.OptionInfo(["Overlap"], "Disable function that you don't use", gr.CheckboxGroup, {"choices": ["Zoom","Adjust brush size","Hotkey enlarge brush","Hotkey shrink brush","Moving canvas","Fullscreen","Reset Zoom","Overlap"]}),