Add a bounding box tool for NABat spectrograms

client/src/components/geoJS/LayerManager.vue

@@ -2,7 +2,12 @@
 import { defineComponent, nextTick, onMounted, onUnmounted, PropType, Ref, ref, watch } from "vue";
 import * as d3 from "d3";
 import { SpectrogramAnnotation, SpectrogramSequenceAnnotation } from "../../api/api";
-import { geojsonToSpectro, SpectroInfo, textColorFromBackground } from "./geoJSUtils";
+import {
+  annotationSpreadAcrossPulsesWarning,
+  geojsonToSpectro,
+  SpectroInfo,
+  textColorFromBackground,
+} from "./geoJSUtils";
 import EditAnnotationLayer from "./layers/editAnnotationLayer";
 import RectangleLayer from "./layers/rectangleLayer";
 import CompressedOverlayLayer from "./layers/compressedOverlayLayer";
@@ -13,6 +18,7 @@ import FreqLayer from "./layers/freqLayer";
 import SpeciesLayer from "./layers/speciesLayer";
 import SpeciesSequenceLayer from "./layers/speciesSequenceLayer";
 import MeasureToolLayer from "./layers/measureToolLayer";
+import BoundingBoxLayer from "./layers/boundingBoxLayer";
 import { cloneDeep } from "lodash";
 import useState from "@use/useState";
 export default defineComponent({
@@ -66,6 +72,8 @@ export default defineComponent({
       backgroundColor,
       measuring,
       frequencyRulerY,
+      drawingBoundingBox,
+      boundingBoxError,
     } = useState();
     const selectedAnnotationId: Ref<null | number> = ref(null);
     const hoveredAnnotationId: Ref<null | number> = ref(null);
@@ -83,6 +91,7 @@ export default defineComponent({
     let speciesLayer: SpeciesLayer;
     let speciesSequenceLayer: SpeciesSequenceLayer;
     let measureToolLayer: MeasureToolLayer;
+    let boundingBoxLayer: BoundingBoxLayer;
     const displayError = ref(false);
     const errorMsg = ref("");
 
@@ -214,9 +223,9 @@ export default defineComponent({
             if (index !== -1 && props.spectroInfo && selectedType.value === 'pulse') {
               // update bounds for the localAnnotation
               const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo, props.scaledWidth, props.scaledHeight);
-              if (conversionResult.error) {
+              if (conversionResult.warning) {
                 displayError.value = true;
-                errorMsg.value = conversionResult.error;
+                errorMsg.value = conversionResult.warning;
                 return;
               }
               const { low_freq, high_freq, start_time, end_time } = conversionResult;
@@ -232,9 +241,9 @@ export default defineComponent({
             if (index !== -1 && props.spectroInfo && selectedType.value === 'sequence') {
               // update bounds for the localAnnotation
               const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo, props.scaledWidth, props.scaledHeight);
-              if (conversionResult.error) {
+              if (conversionResult.warning && conversionResult.warning !== annotationSpreadAcrossPulsesWarning) {
                 displayError.value = true;
-                errorMsg.value = conversionResult.error;
+                errorMsg.value = conversionResult.warning;
                 return;
               }
               const { start_time, end_time } = conversionResult;
@@ -253,9 +262,11 @@ export default defineComponent({
           if (geoJSON && props.spectroInfo) {
             const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo, props.scaledWidth, props.scaledHeight);
 
-            if (conversionResult.error) {
+            if (conversionResult.warning
+              && !(creationType.value === 'sequence' && conversionResult.warning === annotationSpreadAcrossPulsesWarning)
+            ) {
               displayError.value = true;
-              errorMsg.value = conversionResult.error;
+              errorMsg.value = conversionResult.warning;
               return;
             }
             const { low_freq, high_freq, start_time, end_time } = conversionResult;
@@ -292,6 +303,10 @@ export default defineComponent({
         const { yValue } = data;
         frequencyRulerY.value = yValue || 0;
       }
+      if (type === "bbox:error") {
+        const { error } = data;
+        boundingBoxError.value = error || '';
+      }
     };
 
     const getDataForLayers = () => {
@@ -537,6 +552,18 @@ export default defineComponent({
             }
           });
 
+          if (!boundingBoxLayer) {
+            boundingBoxLayer = new BoundingBoxLayer(props.geoViewerRef, event, props.spectroInfo, drawingBoundingBox.value);
+            boundingBoxLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+          }
+          watch(drawingBoundingBox, () => {
+            if (drawingBoundingBox.value) {
+              boundingBoxLayer.enableDrawing();
+            } else {
+              boundingBoxLayer.disableDrawing();
+            }
+          });
+
           timeLayer.setDisplaying({ pulse: configuration.value.display_pulse_annotations, sequence: configuration.value.display_sequence_annotations });
           timeLayer.formatData(localAnnotations.value, sequenceAnnotations.value);
           freqLayer.formatData(localAnnotations.value);
@@ -593,7 +620,7 @@ export default defineComponent({
           compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
           compressedOverlayLayer.redraw();
         } else {
-          compressedOverlayLayer?.disable(); 
+          compressedOverlayLayer?.disable();
         }
       }
       editAnnotationLayer?.setScaledDimensions(props.scaledWidth, props.scaledHeight);
@@ -714,6 +741,9 @@ export default defineComponent({
       if (measureToolLayer) {
         measureToolLayer.setTextColor(textColor);
       }
+      if (boundingBoxLayer) {
+        boundingBoxLayer.setTextColor(textColor);
+      }
     }
 
     watch([backgroundColor, colorScheme], updateColorFilter);

client/src/components/geoJS/geoJSUtils.ts

@@ -1,6 +1,8 @@
 import { ref, Ref } from "vue";
 import geo from "geojs";
 
+const annotationSpreadAcrossPulsesWarning = 'Start or End Time spread across pulses.  This is not allowed in compressed annotations';
+
 const useGeoJS = () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const geoViewer: Ref<any> = ref();
@@ -506,7 +508,7 @@ function geojsonToSpectro(
   spectroInfo: SpectroInfo,
   scaledWidth = 0,
   scaledHeight = 0,
-): { error?: string; start_time: number; end_time: number; low_freq: number; high_freq: number } {
+): { warning?: string; start_time: number; end_time: number; low_freq: number; high_freq: number } {
   const adjustedWidth = scaledWidth > spectroInfo.width ? scaledWidth : spectroInfo.width;
   const adjustedHeight = scaledHeight > spectroInfo.height ? scaledHeight : spectroInfo.height;
 
@@ -543,6 +545,9 @@ function geojsonToSpectro(
     let additivePixels = 0;
     let start_time = -1;
     let end_time = -1;
+    let warn = false;
+    let startIndex = 0;
+    let endIndex = 0;
     for (let i = 0; i < start_times.length; i += 1) {
       // convert the start/end time to a pixel
       const nextPixels = (widths && widths[i]) || 0;
@@ -552,6 +557,7 @@ function geojsonToSpectro(
         const lowPixels = start - additivePixels;
         const lowTime = start_times[i] + lowPixels / timeToPixels;
         start_time = Math.round(lowTime);
+        startIndex = i;
       }
       if (
         end_time === -1 &&
@@ -562,17 +568,20 @@ function geojsonToSpectro(
         const highPixels = end - additivePixels;
         const highTime = start_times[i] + highPixels / timeToPixels;
         end_time = Math.round(highTime);
+        endIndex = i;
       }
       additivePixels += nextPixels;
     }
+    if (startIndex !== endIndex) {
+      warn = true;
+    }
     const heightScale = adjustedHeight / (spectroInfo.high_freq - spectroInfo.low_freq);
     const high_freq = Math.round(spectroInfo.high_freq - coords[1][1] / heightScale);
     const low_freq = Math.round(spectroInfo.high_freq - coords[3][1] / heightScale);
-    if (start_time === -1 || end_time === -1) {
+    if (warn) {
       // the time spreads across multiple pulses and isn't allowed;
       return {
-        error:
-          "Start or End Time spread across pusles.  This is not allowed in compressed annotations",
+        warning: annotationSpreadAcrossPulsesWarning,
         start_time,
         end_time,
         low_freq,
@@ -648,12 +657,23 @@ function textColorFromBackground(rgbString: string): "black" | "white" {
   return getContrastingColor(r, g, b);
 }
 
+/**
+ * correct matching of drag handle to cursor direction relies on strict ordering of
+ * vertices within the GeoJSON coordinate list using utils.reOrdergeoJSON()
+ * and utils.reOrderBounds()
+ */
+const rectVertex = ["sw-resize", "nw-resize", "ne-resize", "se-resize"];
+const rectEdge = ["w-resize", "n-resize", "e-resize", "s-resize"];
+
 export {
   spectroToGeoJSon,
   geojsonToSpectro,
   reOrdergeoJSON,
   useGeoJS,
   spectroToCenter,
   spectroSequenceToGeoJSon,
-  textColorFromBackground
+  textColorFromBackground,
+  rectVertex,
+  rectEdge,
+  annotationSpreadAcrossPulsesWarning,
 };