Preserve measure tool between un/compressed views

Author: naglepuff

client/src/components/geoJS/LayerManager.vue

@@ -65,6 +65,7 @@ export default defineComponent({
       colorScheme,
       backgroundColor,
       measuring,
+      frequencyRulerY,
     } = useState();
     const selectedAnnotationId: Ref<null | number> = ref(null);
     const hoveredAnnotationId: Ref<null | number> = ref(null);
@@ -287,6 +288,10 @@ export default defineComponent({
           }
         }
       }
+      if (type === "measure:dragged") {
+        const { yValue } = data;
+        frequencyRulerY.value = yValue || 0;
+      }
     };
 
     const getDataForLayers = () => {
@@ -514,7 +519,13 @@ export default defineComponent({
           speciesLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
 
           if (!measureToolLayer) {
-            measureToolLayer = new MeasureToolLayer(props.geoViewerRef, event, props.spectroInfo, measuring.value);
+            measureToolLayer = new MeasureToolLayer(
+              props.geoViewerRef,
+              event,
+              props.spectroInfo,
+              measuring.value,
+              frequencyRulerY.value
+            );
             measureToolLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
           }
           measureToolLayer.redraw();

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

@@ -34,7 +34,8 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     event: (name: string, data: any) => void,
     spectroInfo: SpectroInfo,
-    measuring?: boolean
+    measuring?: boolean,
+    yValue?: number
   ) {
     super(geoViewerRef, event, spectroInfo);
 
@@ -58,7 +59,7 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
     this.pointAnnotation= null;
     this.lineAnnotation = null;
     this.dragging = false;
-    this.yValue = 0;
+    this.yValue = yValue || 0;
     this.color = 'white';
     this.hovering = false;
 
@@ -71,7 +72,7 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
     this.moveHandler = (e: GeoEvent) => {
       if (e && this.dragging) {
         this.updateRuler(e.mouse.geo.y);
-      } 
+      }
     };
     this.hoverHandler = (e: GeoEvent) => {
       if (e) {
@@ -145,6 +146,7 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
     if (newY < 0) {
       return;
     }
+    this.event("measure:dragged", { yValue: newY });
     this.yValue = newY;
     const spectroWidth = this.compressedView ? this.scaledWidth : this.spectroInfo.width;
     this.lineAnnotation
@@ -186,10 +188,10 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
   }
 
   clearRulerLayer() {
-    this.pointAnnotation.data([]);
-    this.lineAnnotation.data([]);
-    this.textLayer.data([]).draw();
-    this.frequencyRulerLayer.draw();
+    this.pointAnnotation?.data([]);
+    this.lineAnnotation?.data([]);
+    this.textLayer?.data([]).draw();
+    this.frequencyRulerLayer?.draw();
   }
 
   destroy() {
@@ -200,6 +202,15 @@ export default class MeasureToolLayer extends BaseTextLayer<TextData> {
     }
   }
 
+  setScaledDimensions(width: number, height: number) {
+    super.setScaledDimensions(width, height);
+    this.clearRulerLayer();
+    if (this.rulerOn) {
+      this.enableDrawing();
+      this.updateRuler(this.yValue);
+    }
+  }
+
   redraw() {
     if (this.rulerOn) {
       this.updateRuler(this.yValue);

client/src/use/useState.ts

@@ -62,6 +62,7 @@ const configuration: Ref<Configuration> = ref({
 const scaledWidth = ref(0);
 const scaledHeight = ref(0);
 const measuring: Ref<boolean> = ref(false);
+const frequencyRulerY: Ref<number> = ref(0);
 const toggleMeasureMode = () => {
   measuring.value = !measuring.value;
 };
@@ -146,6 +147,7 @@ export default function useState() {
     colorScale,
     measuring,
     toggleMeasureMode,
+    frequencyRulerY,
     colorSchemes,
     colorScheme,
     backgroundColor,