From b0d8e8c484a0a1a8ef163d4f10c260c4cadc01e6 Mon Sep 17 00:00:00 2001
From: brahim <92426196+BrhmDev@users.noreply.github.com>
Date: Thu, 10 Oct 2024 13:54:37 +0200
Subject: [PATCH] Fix floating compact mode: revert logic in
 ZenCompactMode.mjs, use invisible padding.

---
 src/ZenCompactMode.mjs | 51 +++++++++++++++++++++++++-----------------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/ZenCompactMode.mjs b/src/ZenCompactMode.mjs
index 30ec85f..de14e9a 100644
--- a/src/ZenCompactMode.mjs
+++ b/src/ZenCompactMode.mjs
@@ -178,19 +178,6 @@ var gZenCompactModeManager = {
     this._flashTimeouts[id] = null;
   },
 
-  closeEntry(entry, target) {
-    if (entry.keepHoverDuration) {
-      this.flashElement(target, this.hideAfterHoverDuration, 'has-hover' + target.id, 'zen-has-hover');
-    } else {
-      this._removeHoverFrames[target.id] = window.requestAnimationFrame(() => target.removeAttribute('zen-has-hover'));
-    }
-  },
-
-  shouldCloseFromEdge(expected, actual) {
-    return (expected === 'top' && actual === 'bottom') || (expected === 'bottom' && actual === 'top')
-      || (expected === 'left' && actual === 'right') || (expected === 'right' && actual === 'left');
-  },
-
   addMouseActions() {
     for (let i = 0; i < this.hoverableElements.length; i++) {
       let target = this.hoverableElements[i].element;
@@ -198,19 +185,43 @@ var gZenCompactModeManager = {
         this.clearFlashTimeout('has-hover' + target.id);
         window.requestAnimationFrame(() => target.setAttribute('zen-has-hover', 'true'));
       });
+
       target.addEventListener('mouseleave', (event) => {
-        const screenEdgeCrossed = this._getCrossedEdge(event.pageX, event.pageY, event.target);
-        if (!screenEdgeCrossed) return;
-        for (let entry of this.hoverableElements) {
-          if (this.shouldCloseFromEdge(entry.screenEdge, screenEdgeCrossed)) {
-            this.closeEntry(entry, entry.element);
-          }
+        if (this.hoverableElements[i].keepHoverDuration) {
+          this.flashElement(target, keepHoverDuration, 'has-hover' + target.id, 'zen-has-hover');
+        } else {
+          this._removeHoverFrames[target.id] = window.requestAnimationFrame(() => target.removeAttribute('zen-has-hover'));
         }
       });
     }
+
+    document.documentElement.addEventListener('mouseleave', (event) => {
+      const screenEdgeCrossed = this._getCrossedEdge(event.pageX, event.pageY);
+      if (!screenEdgeCrossed) return;
+      for (let entry of this.hoverableElements) {
+        if (screenEdgeCrossed !== entry.screenEdge) continue;
+        const target = entry.element;
+        const boundAxis = entry.screenEdge === 'right' || entry.screenEdge === 'left' ? 'y' : 'x';
+        if (!this._positionInBounds(boundAxis, target, event.pageX, event.pageY, 7)) {
+          continue;
+        }
+        window.cancelAnimationFrame(this._removeHoverFrames[target.id]);
+
+        this.flashElement(target, this.hideAfterHoverDuration, 'has-hover' + target.id, 'zen-has-hover');
+        document.addEventListener(
+          'mousemove',
+          () => {
+            if (target.matches(':hover')) return;
+            target.removeAttribute('zen-has-hover');
+            this.clearFlashTimeout('has-hover' + target.id);
+          },
+          { once: true }
+        );
+      }
+    });
   },
 
-  _getCrossedEdge(posX, posY, element = document.documentElement, maxDistance = 5) {
+  _getCrossedEdge(posX, posY, element = document.documentElement, maxDistance = 10) {
     const targetBox = element.getBoundingClientRect();
     posX = Math.max(targetBox.left, Math.min(posX, targetBox.right));
     posY = Math.max(targetBox.top, Math.min(posY, targetBox.bottom));