Fixed the problem with sticking to the mouse, created a tooltip

2 files changed, 124 insertions, 7 deletions

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index f555960d..e39ce296 100644
--- a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
+++ b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
@@ -48,6 +48,56 @@ onUiLoaded(async() => {
         let [zoomLevel, panX, panY] = [1, 0, 0];
         let fullScreenMode = false;
 
+        // Create tooltip
+        const toolTipElemnt = targetElement.querySelector(".image-container");
+        const tooltip = document.createElement("div");
+        tooltip.className = "tooltip";
+
+        // Creating an item of information
+        const info = document.createElement("i");
+        info.className = "tooltip-info";
+        info.textContent = "";
+
+        // Create a container for the contents of the tooltip
+        const tooltipContent = document.createElement("div");
+        tooltipContent.className = "tooltip-content";
+
+        // Add info about hotkets
+        const hotkeys = [
+            {key: "Shift + wheel", action: "Zoom canvas"},
+            {
+                key: hotkeysConfig.moveKey.charAt(
+                    hotkeysConfig.moveKey.length - 1
+                ),
+                action: "Move canvas"
+            },
+            {
+                key: hotkeysConfig.resetZoom.charAt(
+                    hotkeysConfig.resetZoom.length - 1
+                ),
+                action: "Reset zoom"
+            },
+            {
+                key: hotkeysConfig.fitToScreen.charAt(
+                    hotkeysConfig.fitToScreen.length - 1
+                ),
+                action: "Fullscreen mode"
+            },
+            {key: "Ctr+wheel", action: "Adjust brush size"}
+        ];
+        hotkeys.forEach(function(hotkey) {
+            const p = document.createElement("p");
+            p.innerHTML = "<b>" + hotkey.key + "</b>" + " - " + hotkey.action;
+            tooltipContent.appendChild(p);
+        });
+
+        // Add information and content elements to the tooltip element
+        tooltip.appendChild(info);
+        tooltip.appendChild(tooltipContent);
+
+        // Add a hint element to the target element
+        toolTipElemnt.appendChild(tooltip);
+
         // 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();
@@ -262,7 +312,8 @@ onUiLoaded(async() => {
             targetElement.style.transform = `translate(${0}px, ${0}px) scale(${1})`;
 
             // Get scrollbar width to right-align the image
-            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+            const scrollbarWidth =
+                window.innerWidth - document.documentElement.clientWidth;
 
             // Get element and screen dimensions
             const elementWidth = targetElement.offsetWidth;
@@ -315,7 +366,6 @@ onUiLoaded(async() => {
                 [hotkeysConfig.resetZoom]: resetZoom,
                 [hotkeysConfig.overlap]: toggleOverlap,
                 [hotkeysConfig.fitToScreen]: fitToScreen
-                // [hotkeysConfig.moveKey] : moveCanvas,
             };
 
             const action = hotkeyActions[event.code];
@@ -377,13 +427,12 @@ onUiLoaded(async() => {
             }
         });
 
-        /**
-         * Handle the move event for pan functionality. Updates the panX and panY variables and applies the new transform to the target element.
-         * @param {MouseEvent} e - The mouse event.
-         */
+        // Handle the move event for pan functionality. Updates the panX and panY variables and applies the new transform to the target element.
         function handleMoveKeyDown(e) {
             if (e.code === hotkeysConfig.moveKey) {
-                if (!e.ctrlKey && !e.metaKey) {
+                if (!e.ctrlKey && !e.metaKey && isKeyDownHandlerAttached) {
+                    e.preventDefault();
+                    document.activeElement.blur();
                     isMoving = true;
                 }
             }
@@ -422,6 +471,11 @@ onUiLoaded(async() => {
             }
         }
 
+        // Prevents sticking to the mouse
+        window.onblur = function() {
+            isMoving = false;
+        };
+
         gradioApp().addEventListener("mousemove", handleMoveByKey);
     }
 
diff --git a/extensions-builtin/canvas-zoom-and-pan/style.css b/extensions-builtin/canvas-zoom-and-pan/style.css
new file mode 100644
index 00000000..5b131d50
--- /dev/null
+++ b/extensions-builtin/canvas-zoom-and-pan/style.css
@@ -0,0 +1,63 @@
+.tooltip-info {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  cursor: help;
+  background-color: rgba(0, 0, 0, 0.3);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column; 
+
+  z-index: 100;
+}
+
+.tooltip-info::after {
+  content: '';
+  display: block;
+  width: 2px;
+  height: 7px;
+  background-color: white;
+  margin-top: 2px; 
+}
+
+.tooltip-info::before {
+  content: '';
+  display: block;
+  width: 2px;
+  height: 2px;
+  background-color: white;
+}
+
+.tooltip-content {
+  display: none;
+  background-color: #f9f9f9; 
+  color: #333; 
+  border: 1px solid #ddd;
+  padding: 15px; 
+  position: absolute;
+  top: 40px;
+  left: 10px;
+  width: 250px;
+  font-size: 16px;
+  opacity: 0;
+  border-radius: 8px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
+
+  z-index: 100;
+}
+
+.tooltip:hover .tooltip-content {
+  display: block;
+  animation: fadeIn 0.5s; 
+  opacity: 1;
+}
+
+@keyframes fadeIn {
+  from {opacity: 0;}
+  to {opacity: 1;}
+}
+