Merge pull request #781 from WHOIM1205/fix/event-listener-cleanup

Fix: Prevent Event Listener Leaks and Duplicate Callbacks in ThreeManager

Author: EdwardMoyse

packages/phoenix-event-display/src/managers/three-manager/index.ts

@@ -94,11 +94,12 @@ export class ThreeManager {
     elem: Intersection<Object3D<Object3DEventMap>>,
   ) => boolean;
   /** 'click' event listener callback to show 3D coordinates of the clicked point */
-  private show3DPointsCallback: (event: MouseEvent) => void = () => {};
+  private show3DPointsCallback: ((event: MouseEvent) => void) | null = null;
   /** 'click' event listener callback to shift the cartesian grid at the clicked point */
-  private shiftCartesianGridCallback: (event: MouseEvent) => void = () => {};
+  private shiftCartesianGridCallback: ((event: MouseEvent) => void) | null =
+    null;
   /** 'click' event listener callback to show 3D distance between two clicked points */
-  private show3DDistanceCallback: (event: MouseEvent) => void = () => {};
+  private show3DDistanceCallback: ((event: MouseEvent) => void) | null = null;
 
   /** Origin of the cartesian grid w.r.t. world origin */
   public origin: Vector3 = new Vector3(0, 0, 0);
@@ -123,7 +124,7 @@ export class ThreeManager {
   /** Color of the text to be displayed as per dark theme */
   private displayColor: string = 'black';
   /** Mousemove callback to draw dynamic distance line */
-  private mousemoveCallback: (event: MouseEvent) => void = () => {};
+  private mousemoveCallback: ((event: MouseEvent) => void) | null = null;
   /** Stored keydown handler for cleanup. */
   private keydownHandler: ((e: KeyboardEvent) => void) | null = null;
   /** Emitting that a new 3D coordinate has been clicked upon */
@@ -503,9 +504,9 @@ export class ThreeManager {
       };
     }
 
-    if (show) {
+    if (show && this.show3DPointsCallback) {
       window.addEventListener('click', this.show3DPointsCallback);
-    } else {
+    } else if (this.show3DPointsCallback) {
       window.removeEventListener('click', this.show3DPointsCallback);
     }
   }
@@ -566,9 +567,13 @@ export class ThreeManager {
               ctx.fill();
             }
 
-            window.addEventListener('mousemove', this.mousemoveCallback);
+            if (this.mousemoveCallback) {
+              window.addEventListener('mousemove', this.mousemoveCallback);
+            }
           } else {
-            window.removeEventListener('mousemove', this.mousemoveCallback);
+            if (this.mousemoveCallback) {
+              window.removeEventListener('mousemove', this.mousemoveCallback);
+            }
             const distance =
               mainIntersect.point.distanceTo(this.prev3DCoord) / 10;
 
@@ -642,11 +647,15 @@ export class ThreeManager {
       };
     }
 
-    if (show) {
+    if (show && this.show3DDistanceCallback) {
       window.addEventListener('click', this.show3DDistanceCallback);
     } else {
-      window.removeEventListener('click', this.show3DDistanceCallback);
-      window.removeEventListener('mousemove', this.mousemoveCallback);
+      if (this.show3DDistanceCallback) {
+        window.removeEventListener('click', this.show3DDistanceCallback);
+      }
+      if (this.mousemoveCallback) {
+        window.removeEventListener('mousemove', this.mousemoveCallback);
+      }
       if (document.getElementById('3Ddistance') != null) {
         document.getElementById('3Ddistance')?.remove();
       }
@@ -705,13 +714,17 @@ export class ThreeManager {
     }
 
     const rightClickCallback = (_event: any) => {
-      window.removeEventListener('click', this.shiftCartesianGridCallback);
+      if (this.shiftCartesianGridCallback) {
+        window.removeEventListener('click', this.shiftCartesianGridCallback);
+      }
       this.stopShifting.emit(true);
       this.shiftGrid = false;
       window.removeEventListener('contextmenu', rightClickCallback);
     };
 
-    window.addEventListener('click', this.shiftCartesianGridCallback);
+    if (this.shiftCartesianGridCallback) {
+      window.addEventListener('click', this.shiftCartesianGridCallback);
+    }
     window.addEventListener('contextmenu', rightClickCallback);
   }
 
@@ -1730,6 +1743,29 @@ export class ThreeManager {
       this.keydownHandler = null;
     }
 
+    // Remove window event listeners for interactive features
+    if (this.show3DPointsCallback) {
+      window.removeEventListener('click', this.show3DPointsCallback);
+      this.show3DPointsCallback = null;
+    }
+    if (this.show3DDistanceCallback) {
+      window.removeEventListener('click', this.show3DDistanceCallback);
+      this.show3DDistanceCallback = null;
+    }
+    if (this.mousemoveCallback) {
+      window.removeEventListener('mousemove', this.mousemoveCallback);
+      this.mousemoveCallback = null;
+    }
+    if (this.shiftCartesianGridCallback) {
+      window.removeEventListener('click', this.shiftCartesianGridCallback);
+      this.shiftCartesianGridCallback = null;
+    }
+
+    // Clean up any dangling DOM elements from interactive features
+    document.getElementById('3dcoordinates')?.remove();
+    document.getElementById('circledDot')?.remove();
+    document.getElementById('3Ddistance')?.remove();
+
     // Cleanup sub-managers
     if (this.rendererManager) {
       this.rendererManager.cleanup();