Remove event handlers when not using ruler

Author: naglepuff

client/src/components/geoJS/layers/measureToolLayer.ts

@@ -22,6 +22,10 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
   dragging: boolean;
   yValue: number;
 
+  moveHandler: (e: GeoEvent) => void;
+  mousedownHandler: (e: GeoEvent) => void;
+  mouseupHandler: () => void;
+
   constructor(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     geoViewerRef: any,
@@ -60,26 +64,17 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
     if (this.rulerOn) {
       this.enableDrawing();
     }
-  }
 
-  enableDrawing() {
-    this.rulerOn = true;
-    // Frequency ruler
-    this.lineAnnotation = this.frequencyRulerLayer.createFeature('line')
-      .data([[
-        {x: 0, y: this.yValue},
-        {x: this.spectroInfo.width, y: this.yValue},
-      ]])
-      .style(this.createLineStyle());
-    this.pointAnnotation = this.frequencyRulerLayer.createFeature('point')
-      .data([{x: 0, y: this.yValue}])
-      .style(this.createPointStyle());
-    this.geoViewerRef.geoOn(geo.event.mousedown, (e: GeoEvent) => {
+    this.moveHandler = (e: GeoEvent) => {
+      if (e && this.dragging) {
+        this.updateRuler(e.mouse.geo.y);
+      }
+    };
+    this.mousedownHandler = (e: GeoEvent) => {
       const gcs = this.geoViewerRef.displayToGcs(e.map);
       const p = this.pointAnnotation.data()[0];
-      const dx = gcs.x - p.x;
-      const dy = gcs.y - p.y;
-      // TODO figure out how to do screen pixels for this
+      const dx = Math.abs(gcs.x - p.x);
+      const dy = Math.abs(gcs.y - p.y);
       if (Math.sqrt(dx*dx + dy*dy) < 20 || dy < 10) {
         this.geoViewerRef.interactor().addAction({
           action: 'dragpoint',
@@ -89,17 +84,29 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
         });
         this.dragging = true;
       }
-    });
-    this.geoViewerRef.geoOn(geo.event.actionmove, (e: GeoEvent) => {
-      if (this.dragging) {
-        this.updateRuler(e.mouse.geo.y);
-      }
-    });
-    this.geoViewerRef.geoOn(geo.event.mouseup, () => {
+    };
+    this.mouseupHandler = () => {
       this.dragging = false;
       this.geoViewerRef.interactor().removeAction(undefined, undefined, 'MeasureToolLayer');
       this.updateRuler(this.yValue);
-    });
+    };
+  }
+
+  enableDrawing() {
+    this.rulerOn = true;
+    // Frequency ruler
+    this.lineAnnotation = this.frequencyRulerLayer.createFeature('line')
+      .data([[
+        {x: 0, y: this.yValue},
+        {x: this.spectroInfo.width, y: this.yValue},
+      ]])
+      .style(this.createLineStyle());
+    this.pointAnnotation = this.frequencyRulerLayer.createFeature('point')
+      .data([{x: 0, y: this.yValue}])
+      .style(this.createPointStyle());
+    this.geoViewerRef.geoOn(geo.event.mousedown, this.mousedownHandler);
+    this.geoViewerRef.geoOn(geo.event.actionmove, this.moveHandler);
+    this.geoViewerRef.geoOn(geo.event.mouseup, this.mouseupHandler);
     this.frequencyRulerLayer.draw();
     this.updateRuler(this.yValue);
   }
@@ -117,7 +124,6 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
   }
 
   updateRuler(newY: number) {
-    // this.setTextColor();
     if (newY < 0) {
       return;
     }
@@ -155,6 +161,9 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
     this.textData = [];
     this.textLayer.data(this.textData).draw();
     this.clearRulerLayer();
+    this.geoViewerRef.geoOff(geo.event.mousedown, this.mousedownHandler);
+    this.geoViewerRef.geoOff(geo.event.mouseup, this.mouseupHandler);
+    this.geoViewerRef.geoOff(geo.event.actionmove, this.moveHandler);
   }
 
   clearRulerLayer() {