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

        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();

            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;

                [hotkeysConfig.resetZoom]: resetZoom,

                [hotkeysConfig.overlap]: toggleOverlap,

                [hotkeysConfig.fitToScreen]: fitToScreen

                // [hotkeysConfig.moveKey] : moveCanvas,

            };

            const action = hotkeyActions[event.code];

            }

        });

        /**

         * 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;

                }

            }

            }

        }

        // Prevents sticking to the mouse

        window.onblur = function() {

            isMoving = false;

        };

        gradioApp().addEventListener("mousemove", handleMoveByKey);

    }

.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;}

}