Improve Text Label Scaling (#230)

* improve text label scaling

* adjusting time/species/freq layers tor text scaling

* update the nginx.nominio.template name

* revert max zoom level

* allow scaling changes to update time Duration

* abstract Text base layer and font scaling

* fontScaling only in compressed view

* lint: indention fix

Author: BryonLewis

client/src/components/geoJS/LayerManager.vue

@@ -572,11 +572,14 @@ export default defineComponent({
       speciesLayer?.setScaledDimensions(props.scaledWidth, props.scaledHeight);
       speciesSequenceLayer?.setScaledDimensions(props.scaledWidth, props.scaledHeight);
       sequenceAnnotationLayer?.setScaledDimensions(props.scaledWidth, props.scaledHeight);
-      if (timeLayer && layerVisibility.value.includes("time")) {
+      if (timeLayer && (layerVisibility.value.includes("time") || layerVisibility.value.includes('duration'))) {
+        if (layerVisibility.value.includes("time")) {
+          timeLayer.displayDuration = false;
+        } else {
+          timeLayer.displayDuration = true;
+        }
         timeLayer.formatData(annotations, sequenceAnnotations);
         timeLayer.redraw();
-      } else {
-        timeLayer?.disable();
       }
       if (freqLayer && layerVisibility.value.includes("freq")) {
         freqLayer.formatData(annotations);

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

@@ -0,0 +1,136 @@
+
+
+/* eslint-disable class-methods-use-this */
+import { SpectroInfo } from "../geoJSUtils";
+import { LayerStyle } from "./types";
+import geo from "geojs";
+
+
+
+export default abstract class BaseTextLayer<D> {
+  textData: D[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  textLayer: any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  geoViewerRef: any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  event: (name: string, data: any) => void;
+
+  spectroInfo: SpectroInfo;
+
+  textStyle: LayerStyle<D>;
+
+  scaledWidth: number;
+  scaledHeight: number;
+
+
+
+
+  textScaled: number | undefined;
+
+  zoomLevel: number;
+
+  xScale: number;
+
+  compressedView: boolean;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constructor(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    geoViewerRef: any,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    event: (name: string, data: any) => void,
+    spectroInfo: SpectroInfo
+  ) {
+    this.geoViewerRef = geoViewerRef;
+    this.spectroInfo = spectroInfo;
+    this.textData = [];
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
+    this.event = event;
+    this.xScale = 0;
+    this.compressedView = false;
+    //Only initialize once, prevents recreating Layer each edit
+    this.textStyle = this.createTextStyle();
+    this.geoViewerRef.geoOn(geo.event.zoom, (event: {zoomLevel: number}) => this.onZoom(event));
+    this.zoomLevel = this.geoViewerRef.camera().zoomLevel;
+
+  }
+
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;
+    if (this.spectroInfo.compressedWidth) {
+      this.xScale = newWidth / this.spectroInfo.compressedWidth;
+      this.compressedView = true;
+    } else {
+      this.xScale = newWidth / this.spectroInfo.width;
+      this.compressedView = false;
+    }
+  }
+
+  onZoom(event: {zoomLevel: number}) {
+    this.zoomLevel = event.zoomLevel;
+    this.textScaled = undefined;
+    if ((this.zoomLevel || 0) < -1.5 ) {
+      this.textScaled = -1.5;
+    } else if ((this.zoomLevel || 0) > 0) {
+      this.textScaled = Math.sqrt(this.zoomLevel || 1);
+    } else {
+      this.textScaled = this.zoomLevel;
+    }
+    this.redraw();
+  }
+
+
+  destroy() {
+    if (this.textLayer) {
+      this.geoViewerRef.deleteLayer(this.textLayer);
+    }
+  }
+
+
+
+  redraw() {
+    // add some styles
+    this.textLayer.data(this.textData).style(this.createTextStyle()).draw();
+  }
+
+  disable() {
+    this.textLayer.data([]).draw();
+  }
+
+  getFontSize(fontA: number, fontB: number, xScale: number) {
+  if (xScale >= 2.5) {
+    return fontA; // clamp high
+  } else if (xScale <= 1.0) {
+    return fontB; // clamp low
+  } else {
+    const t = (xScale - 1.0) / (2.5 - 1.0); // normalized progress
+    return fontB + t * (fontA - fontB);     // linear interpolation
+  }
+}
+
+
+  createTextStyle(): LayerStyle<D> {
+    return {
+      ...{
+        strokeColor: "white",
+        strokeWidth: 2.0,
+        antialiasing: 0,
+        stroke: true,
+        uniformPolygon: true,
+        fill: false,
+        fontSize: () => this.xScale < 2.5 ? '12px' : '16px'
+      },
+      color: () => {
+        return "white";
+      },
+      textScaled: this.textScaled,
+      textBaseline: 'middle',
+    };
+  }
+
+}

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

@@ -1,6 +1,7 @@
 /* eslint-disable class-methods-use-this */
 import { SpectrogramAnnotation } from "../../../api/api";
 import { SpectroInfo, spectroToGeoJSon } from "../geoJSUtils";
+import BaseTextLayer from "./baseTextLayer";
 import { LayerStyle } from "./types";
 
 interface LineData {
@@ -17,32 +18,14 @@ interface TextData {
   offsetX?: number;
 }
 
-export default class FreqLayer {
+export default class FreqLayer extends BaseTextLayer<TextData> {
   lineData: LineData[];
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   lineLayer: any;
 
-  textData: TextData[];
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  textLayer: any;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  geoViewerRef: any;
-
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  event: (name: string, data: any) => void;
-
-  spectroInfo: SpectroInfo;
-
-  textStyle: LayerStyle<TextData>;
   lineStyle: LayerStyle<LineData>;
 
-  scaledWidth: number;
-  scaledHeight: number;
-
-
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   constructor(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -51,13 +34,8 @@ export default class FreqLayer {
     event: (name: string, data: any) => void,
     spectroInfo: SpectroInfo
   ) {
-    this.geoViewerRef = geoViewerRef;
+    super(geoViewerRef, event, spectroInfo);
     this.lineData = [];
-    this.spectroInfo = spectroInfo;
-    this.textData = [];
-    this.scaledWidth = 0;
-    this.scaledHeight = 0;
-    this.event = event;
     //Only initialize once, prevents recreating Layer each edit
     const layer = this.geoViewerRef.createLayer("feature", {
       features: ["text", "line"],
@@ -73,11 +51,6 @@ export default class FreqLayer {
     this.lineStyle = this.createLineStyle();
   }
 
-  setScaledDimensions(newWidth: number, newHeight: number) {
-    this.scaledWidth = newWidth;
-    this.scaledHeight = newHeight;
-  }
-
   destroy() {
     if (this.textLayer) {
       this.geoViewerRef.deleteLayer(this.textLayer);
@@ -196,6 +169,7 @@ export default class FreqLayer {
         stroke: true,
         uniformPolygon: true,
         fill: false,
+        fontSize: '16px',
       },
       color: () => {
         return "white";
@@ -204,7 +178,9 @@ export default class FreqLayer {
         x: data.offsetX || 0,
         y: data.offsetY || 0,
       }),
-      textAlign: 'starts',
+      textAlign: 'start',
+      textScaled: this.textScaled,
+      textBaseline: 'bottom',
     };
   }
 }