fix mouse events from working when exiting the window

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>

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 {

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