From c5d70fe1d3681d551683791268ed34004a843589 Mon Sep 17 00:00:00 2001
From: Danil Boldyrev <daswerq123@gmail.com>
Date: Wed, 31 May 2023 23:02:49 +0300
Subject: [PATCH] Fixed the problem with sticking to the mouse, created a
 tooltip

---
 .../canvas-zoom-and-pan/javascript/zoom.js    | 68 +++++++++++++++++--
 .../canvas-zoom-and-pan/style.css             | 63 +++++++++++++++++
 2 files changed, 124 insertions(+), 7 deletions(-)
 create mode 100644 extensions-builtin/canvas-zoom-and-pan/style.css

diff --git a/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js b/extensions-builtin/canvas-zoom-and-pan/javascript/zoom.js
index f555960d2..e39ce296e 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 000000000..5b131d50e
--- /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;}
+}
+