fix event listener registration & unregistration

packages/lib/src/renderer/PanZoom.ts

@@ -261,9 +261,48 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
   }
 
   registerTouchEvents() {
+    console.debug("[PanZoom] Registering touch events to $wrapper");
+
     this.$wrapper.addEventListener(
       "touchstart",
-      (event) => {
+      this._touch_touchstart.bind(this),
+      {
+        passive: false,
+      }
+    );
+
+    this.$wrapper.addEventListener(
+      "touchmove",
+      this._touch_touchmove.bind(this)
+    );
+
+    this.$wrapper.addEventListener("touchend", this._touch_touchend.bind(this));
+  }
+
+  unregisterTouchEvents() {
+    console.debug("[PanZoom] Unregistering touch events to $wrapper");
+
+    this.$wrapper.removeEventListener(
+      "touchstart",
+      this._touch_touchstart.bind(this)
+    );
+    this.$wrapper.removeEventListener(
+      "touchmove",
+      this._touch_touchmove.bind(this)
+    );
+    this.$wrapper.removeEventListener(
+      "touchend",
+      this._touch_touchend.bind(this)
+    );
+  }
+
+  /**
+   * Handle touchstart event from touch registrations
+   * This needs to be a variable to correctly pass this context
+   *
+   * @param e
+   */
+  private _touch_touchstart = (event: TouchEvent) => {
     const isDoubleTap =
       this.touch.lastTouch && +new Date() - this.touch.lastTouch < 200;
 
@@ -284,11 +323,15 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
         this.onPinchStart(event);
       }
     }
-      },
-      { passive: false }
-    );
+  };
 
-    this.$wrapper.addEventListener("touchmove", (event) => {
+  /**
+   * Handle touchmove event from touch registrations
+   * This needs to be a variable to correctly pass this context
+   *
+   * @param e
+   */
+  private _touch_touchmove = (event: TouchEvent) => {
     if (this.panning.enabled && event.touches.length === 1) {
       event.preventDefault();
       event.stopPropagation();
@@ -299,9 +342,15 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
     } else if (event.touches.length > 1) {
       this.onPinch(event);
     }
-    });
+  };
 
-    this.$wrapper.addEventListener("touchend", (event) => {
+  /**
+   * Handle touchend event from touch registrations
+   * This needs to be a variable to correctly pass this context
+   *
+   * @param e
+   */
+  private _touch_touchend = (event: TouchEvent) => {
     if (this.panning.enabled) {
       this.panning.enabled = false;
 
@@ -309,8 +358,7 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
 
       this.panning.end(touch.clientX, touch.clientY);
     }
-    });
-  }
+  };
 
   /// /////
   // pinch
@@ -396,10 +444,49 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
   }
 
   registerMouseEvents() {
+    console.debug("[PanZoom] Registering mouse events to $wrapper & document");
+
     // zoom
-    this.$wrapper.addEventListener(
-      "wheel",
-      (e) => {
+    this.$wrapper.addEventListener("wheel", this._mouse_wheel, {
+      passive: true,
+    });
+
+    this.$wrapper.addEventListener("mousedown", this._mouse_mousedown, {
+      passive: false,
+    });
+
+    // mouse move should not be tied to the element, in case the mouse exits the window
+    document.addEventListener("mousemove", this._mouse_mousemove, {
+      passive: false,
+    });
+
+    // mouse up should not be tied to the element, in case the mouse releases outside of the window
+    document.addEventListener("mouseup", this._mouse_mouseup, {
+      passive: false,
+    });
+  }
+
+  unregisterMouseEvents() {
+    console.debug(
+      "[PanZoom] Unregistering mouse events to $wrapper & document"
+    );
+
+    this.$wrapper.removeEventListener("wheel", this._mouse_wheel);
+
+    this.$wrapper.removeEventListener("mousedown", this._mouse_mousedown);
+
+    document.removeEventListener("mousemove", this._mouse_mousemove);
+
+    document.removeEventListener("mouseup", this._mouse_mouseup);
+  }
+
+  /**
+   * Handle the wheel event from the mouse event registration
+   * This needs to be a variable to correctly pass this context
+   *
+   * @param e
+   */
+  private _mouse_wheel = (e: WheelEvent) => {
     // if (!self.allowDrag) return;
     const oldScale = this.transform.scale;
 
@@ -433,27 +520,30 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
       this.update();
       // place.update();
     }
-      },
-      { passive: true }
-    );
+  };
 
-    this.$wrapper.addEventListener(
-      "mousedown",
-      (e) => {
+  /**
+   * Handle mousedown event from mouse registrations
+   * This needs to be a variable to correctly pass this context
+   *
+   * @param e
+   */
+  private _mouse_mousedown = (e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
 
     this.mouse.mouseDown = Date.now();
 
     this.panning.start(e.clientX, e.clientY);
-      },
-      { passive: false }
-    );
+  };
 
-    // mouse move should not be tied to the element, in case the mouse exits the window
-    document.addEventListener(
-      "mousemove",
-      (e) => {
+  /**
+   * Handle mousemove event from mouse registrations
+   * This needs to be a variable to correctly pass this context
+   *
+   * @param e
+   */
+  private _mouse_mousemove = (e: MouseEvent) => {
     if (this.panning.enabled) {
       e.preventDefault();
       e.stopPropagation();
@@ -466,14 +556,27 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
         clientY: e.clientY,
       });
     }
-      },
-      { passive: false }
-    );
+    if (this.panning.enabled) {
+      e.preventDefault();
+      e.stopPropagation();
 
-    // mouse up should not be tied to the element, in case the mouse releases outside of the window
-    document.addEventListener(
-      "mouseup",
-      (e) => {
+      this.panning.move(e.clientX, e.clientY);
+    } else {
+      // not panning
+      this.emit("hover", {
+        clientX: e.clientX,
+        clientY: e.clientY,
+      });
+    }
+  };
+
+  /**
+   * Handle mouseup event from mouse registrations
+   * This needs to be a variable to correctly pass this context
+   *
+   * @param e
+   */
+  private _mouse_mouseup = (e: MouseEvent) => {
     if (this.mouse.mouseDown && Date.now() - this.mouse.mouseDown <= 500) {
       // if the mouse was down for less than a half a second, it's a click
       // this can't depend on this.panning.enabled because that'll always be true when mouse is down
@@ -500,10 +603,7 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
 
       this.panning.end(e.clientX, e.clientY);
     }
-      },
-      { passive: false }
-    );
-  }
+  };
 
   /**
    * Update viewport scale and position
@@ -545,6 +645,9 @@ export class PanZoom extends EventEmitter<PanZoomEvents> {
 
   cleanup() {
     // remove event handlers
+
+    this.unregisterTouchEvents();
+    this.unregisterMouseEvents();
   }
 
   // utilities