From 7e151fd29a35c6cdd76dde3f114331951c765e63 Mon Sep 17 00:00:00 2001
From: Daniel Huber <30466471+daniel0611@users.noreply.github.com>
Date: Sat, 2 Mar 2024 09:41:29 +0100
Subject: [PATCH] Improve popup hiding to fix dangling open popups in some
 cases

---
 src/features/dfdElements/nodeAnnotationUi.ts | 26 +++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/features/dfdElements/nodeAnnotationUi.ts b/src/features/dfdElements/nodeAnnotationUi.ts
index c6d3899..17ab5c5 100644
--- a/src/features/dfdElements/nodeAnnotationUi.ts
+++ b/src/features/dfdElements/nodeAnnotationUi.ts
@@ -114,8 +114,23 @@ export class DfdNodeAnnotationUI extends AbstractUIExtension {
         containerElement.classList.add("ui-float");
         containerElement.appendChild(this.annotationParagraph);
 
-        containerElement.addEventListener("mouseleave", () => {
-            this.hide();
+        document.addEventListener("mousemove", (event) => {
+            if (containerElement.style.visibility === "hidden") {
+                // Not visible anyway, no need to do the check
+                return;
+            }
+
+            // If mouse not in popup => hide
+            const rect = containerElement.getBoundingClientRect();
+            console.log(rect);
+            if (
+                event.clientX < rect.left ||
+                event.clientX > rect.right ||
+                event.clientY < rect.top ||
+                event.clientY > rect.bottom
+            ) {
+                this.hide();
+            }
         });
     }
 
@@ -140,14 +155,17 @@ export class DfdNodeAnnotationUI extends AbstractUIExtension {
         // Clear previous content
         this.annotationParagraph.innerHTML = "";
 
+        // Set position
         // 2 offset to ensure the mouse is inside the popup when showing it.
         // Otherwise it would be on the node instead of the popup because of the rounded corners.
-        // The cursor should be inside the popup when opening it for the closing
-        // using the mouseleave event to work correctly.
+        // When moving the cursor from the node to the popup, the popup would move a bit
+        // because the cursor is going a bit over the model and then the popup would re-show
+        // with the new position after the timeout.
         const mousePosition = this.mouseListener.getMousePosition();
         containerElement.style.left = `${mousePosition.x - 2}px`;
         containerElement.style.top = `${mousePosition.y - 2}px`;
 
+        // Set content
         if (!node.annotation) {
             this.annotationParagraph.innerText = "No errors";
             return;