fix tooltips

pomdtr · Dec 9, 2023 · 784d459 · 784d459
1 parent b5e1560
commit 784d459
Showing 1 changed file with 19 additions and 15 deletions.
diff --git a/frontend/src/terminal.ts b/frontend/src/terminal.ts
@@ -52,20 +52,22 @@ async function main() {
 
     const webglAddon = new WebglAddon();
     const fitAddon = new FitAddon();
+
+    let [mouseX, mouseY] = [0, 0];
+    document.addEventListener("mousemove", (e) => {
+        mouseX = e.clientX;
+        mouseY = e.clientY;
+    });
+
+
+
     const webLinksAddon = new WebLinksAddon((event, uri) => {
         // check if cmd key is pressed
         if (event.metaKey || event.ctrlKey) {
             window.open(uri, "_blank");
         }
     }, {
-        hover: (_, text, location) => {
-            const terminalElement = document.getElementById("terminal")!;
-            const terminalRowHeight = terminalElement.getBoundingClientRect().height / terminal.rows;
-            const terminalColumnWidth = terminalElement.getBoundingClientRect().width / terminal.cols;
-
-            const locationTop = (location.start.y - 1) * terminalRowHeight + 10;
-            const locationLeft = (location.start.x - 1) * terminalColumnWidth + 10;
-
+        hover: (event, text) => {
             if (document.getElementById('tooltip')) {
                 document.getElementById('tooltip')!.remove();
             }
@@ -78,20 +80,21 @@ async function main() {
             tooltip.style.visibility = 'hidden';
             document.body.appendChild(tooltip);
 
-            const tooltipHeight = tooltip.getBoundingClientRect().height;
-            if (locationTop - tooltipHeight > 0) {
-                tooltip.style.top = `${locationTop - tooltipHeight}px`;
-            } else {
-                tooltip.style.top = `${locationTop + terminalRowHeight}px`;
-            }
-            tooltip.style.left = `${locationLeft}px`;
+            const tootlipSize = tooltip.getBoundingClientRect();
             tooltip.style.zIndex = '1000';
 
             // Add a delay of 1 second before showing the tooltip
             setTimeout(() => {
                 // check if the tooltip still exists
                 const tooltip = document.getElementById('tooltip');
                 if (tooltip) {
+                    if (mouseX - tootlipSize.height > 0) {
+                        tooltip.style.top = `${mouseY - tootlipSize.height}px`;
+                    } else {
+                        tooltip.style.top = `${mouseY}px`;
+                    }
+
+                    tooltip.style.left = `${mouseX - tootlipSize.width / 2}px`;
                     tooltip.style.visibility = 'visible';
                 }
             }, 1500);
@@ -186,6 +189,7 @@ async function main() {
         terminal.focus();
     };
 
+
     terminal.focus();
 }