From 93abdf6bcbc8d94019ad31f13634ca053ed5c2f8 Mon Sep 17 00:00:00 2001
From: Grant <grant@sc07.company>
Date: Tue, 13 Feb 2024 12:50:47 -0700
Subject: [PATCH] fix mouse events from working when exiting the window

---
 packages/client-next/src/components/Header.tsx |  2 +-
 packages/client-next/src/style.scss            |  9 ++++++++-
 packages/lib/src/renderer/PanZoom.ts           | 13 +++++++++----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/client-next/src/components/Header.tsx b/packages/client-next/src/components/Header.tsx
index 18f9d1a..92d7f89 100644
--- a/packages/client-next/src/components/Header.tsx
+++ b/packages/client-next/src/components/Header.tsx
@@ -5,7 +5,7 @@ export const Header = () => {
     <header>
       <div></div>
       <div className="spacer"></div>
-      <div>
+      <div className="box">
         <div className="user-card">
           <div className="user-card--overview">
             <div className="user-name"></div>
diff --git a/packages/client-next/src/style.scss b/packages/client-next/src/style.scss
index 83c74a8..c9a566f 100644
--- a/packages/client-next/src/style.scss
+++ b/packages/client-next/src/style.scss
@@ -20,13 +20,20 @@ header {
 
   display: flex;
   flex-direction: row;
-  padding: 10px;
   box-sizing: border-box;
   z-index: 9999;
+  touch-action: none;
+  pointer-events: none;
 
   .spacer {
     flex-grow: 1;
   }
+
+  .box {
+    padding: 10px;
+    touch-action: initial;
+    pointer-events: initial;
+  }
 }
 
 .user-card {
diff --git a/packages/lib/src/renderer/PanZoom.ts b/packages/lib/src/renderer/PanZoom.ts
index dd4980d..a0ad976 100644
--- a/packages/lib/src/renderer/PanZoom.ts
+++ b/packages/lib/src/renderer/PanZoom.ts
@@ -250,6 +250,7 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
 
     this.debug(midPoint.x, midPoint.y, "midpoint");
 
+    // TODO: this might be css zoom specific, I have no way to test this
     this.transform.x = midPoint.x / newScale - midPoint.x / scale;
     this.transform.y = midPoint.y / newScale - midPoint.x / scale;
     this.transform.scale = newScale;
@@ -322,22 +323,26 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
       { passive: false }
     );
 
-    this.$wrapper.addEventListener(
+    // mouse move should not be tied to the element, in case the mouse exits the window
+    document.addEventListener(
       "mousemove",
       (e) => {
+        if (!this.panning.enabled) return;
+
         e.preventDefault();
         e.stopPropagation();
 
-        if (!this.panning.enabled) return;
-
         this.panning.move(e.clientX, e.clientY);
       },
       { passive: false }
     );
 
-    this.$wrapper.addEventListener(
+    // mouse up should not be tied to the element, in case the mouse releases outside of the window
+    document.addEventListener(
       "mouseup",
       (e) => {
+        if (!this.panning.enabled) return;
+
         e.preventDefault();
         e.stopPropagation();