X/Y scaling

Kitware · Feb 25, 2024 · 3d91ab8 · 3d91ab8
1 parent dfd42de
commit 3d91ab8
Show file tree

Hide file tree

Showing 11 changed files with 311 additions and 130 deletions.
diff --git a/client/src/components/SpectrogramViewer.vue b/client/src/components/SpectrogramViewer.vue
@@ -46,6 +46,8 @@ export default defineComponent({
     const geoJS = useGeoJS();
     const initialized = ref(false);
     const cursor = ref("");
+    const scaledWidth = ref(0);
+    const scaledHeight = ref(0);
     const imageCursorRef: Ref<HTMLElement | undefined> = ref();
     const setCursor = (newCursor: string) => {
       cursor.value = newCursor;
@@ -78,20 +80,23 @@ export default defineComponent({
       if (!props.spectroInfo) {
         return;
       }
+      const adjustedWidth = scaledWidth.value > props.spectroInfo.width ? scaledWidth.value : props.spectroInfo.width;
+      const adjustedHeight = scaledHeight.value > props.spectroInfo.height ? scaledHeight.value : props.spectroInfo.height;
+
       const freq =
-        props.spectroInfo.height - y >= 0
-          ? ((props.spectroInfo.height - y) *
-              (props.spectroInfo.high_freq - props.spectroInfo.low_freq)) /
-              props.spectroInfo.height /
-              1000 +
-            props.spectroInfo.low_freq / 1000
+        adjustedHeight - y >= 0
+          ? ((adjustedHeight - y) *
+            (props.spectroInfo.high_freq - props.spectroInfo.low_freq)) /
+          adjustedHeight /
+          1000 +
+          props.spectroInfo.low_freq / 1000
           : -1;
 
       if (!props.spectroInfo.end_times && !props.spectroInfo.start_times) {
-        if (x >= 0 && props.spectroInfo.height - y >= 0) {
+        if (x >= 0 && adjustedHeight - y >= 0) {
           const time =
             x *
-            ((props.spectroInfo.end_time - props.spectroInfo.start_time) / props.spectroInfo.width);
+            ((props.spectroInfo.end_time - props.spectroInfo.start_time) / adjustedWidth);
           emit("hoverData", { time, freq });
         } else {
           emit("hoverData", { time: -1, freq: -1 });
@@ -102,9 +107,9 @@ export default defineComponent({
         props.spectroInfo.end_times
       ) {
         // compressed view
-        if (x >= 0 && props.spectroInfo.height - y >= 0) {
+        if (x >= 0 && adjustedHeight - y >= 0) {
           const timeLength = props.spectroInfo.end_time - props.spectroInfo.start_time;
-          const timeToPixels = props.spectroInfo.width / timeLength;
+          const timeToPixels = adjustedWidth / timeLength;
           // find X in the range
           let offsetAdditive = 0;
           for (let i = 0; i < props.spectroInfo.start_times.length; i += 1) {
@@ -128,6 +133,8 @@ export default defineComponent({
     };
     watch(containerRef, () => {
       const { naturalWidth, naturalHeight } = props.image;
+      scaledWidth.value = naturalWidth;
+      scaledHeight.value = naturalHeight;
       if (containerRef.value)
         geoJS.initializeViewer(containerRef.value, naturalWidth, naturalHeight);
       geoJS.drawImage(props.image, naturalWidth, naturalHeight);
@@ -167,9 +174,9 @@ export default defineComponent({
         if (skipNextSelected) {
           skipNextSelected = false;
           return;
-          
+
         }
-        const found = selectedType.value === 'pulse' ? annotations.value.find((item) => item.id === selectedId.value): temporalAnnotations.value.find((item) => item.id === selectedId.value);
+        const found = selectedType.value === 'pulse' ? annotations.value.find((item) => item.id === selectedId.value) : temporalAnnotations.value.find((item) => item.id === selectedId.value);
         if (found && props.spectroInfo) {
 
           const center = spectroToCenter(found, props.spectroInfo, selectedType.value);
@@ -184,30 +191,23 @@ export default defineComponent({
     );
 
     const wheelEvent = (event: WheelEvent) => {
-  const geoViewerRef = geoJS.getGeoViewer();
-
-  if (geoViewerRef.value) {
-    const camera = geoViewerRef.value.camera();
-    const view = camera.view;
-
-    console.log(view);
-    let baseZoomX = view[0];
-    let baseZoomY = view[5];
-    // view[5] = view[5] * 1.1
-    if (event.ctrlKey) {
-      // Zoom along the X-axis
-      baseZoomX += event.deltaY * 0.000001;
-    } else if (event.shiftKey) {
-      // Zoom along the Y-axis
-      baseZoomY += event.deltaY * 0.000001;
-    }
-    view[0] = baseZoomX;
-    view[5] = baseZoomY;
-    camera.view = view;
-    geoViewerRef.value.draw();
+      const geoViewerRef = geoJS.getGeoViewer();
+      const { naturalWidth, naturalHeight } = props.image;
 
-  }
-};
+      if (event.ctrlKey) {
+        scaledWidth.value = scaledWidth.value + event.deltaY * 4;
+        if (scaledWidth.value < naturalWidth) {
+          scaledWidth.value = naturalWidth;
+        }
+        geoJS.drawImage(props.image, scaledWidth.value, scaledHeight.value, false);
+      } else if (event.shiftKey) {
+        scaledHeight.value = scaledHeight.value + event.deltaY * 1;
+        if (scaledHeight.value < naturalHeight) {
+          scaledHeight.value = naturalHeight;
+        }
+        geoJS.drawImage(props.image, scaledWidth.value, scaledHeight.value, false);
+      }
+    };
 
 
 
@@ -223,38 +223,23 @@ export default defineComponent({
       imageCursorRef,
       blackBackground,
       wheelEvent,
+      scaledWidth,
+      scaledHeight,
     };
   },
 });
 </script>
 
 <template>
-  <div
-    class="video-annotator"
-    :class="{'black-background': blackBackground, 'white-background': !blackBackground}"
-    @wheel="wheelEvent($event)"
-  >
-    <div
-      id="spectro"
-      ref="containerRef"
-      class="playback-container"
-      :style="{ cursor: cursor }"
-      @mousemove="cursorHandler.handleMouseMove"
-      @mouseleave="cursorHandler.handleMouseLeave"
-      @mouseover="cursorHandler.handleMouseEnter"
-    />
-    <layer-manager
-      v-if="initialized"
-      :geo-viewer-ref="geoViewerRef"
-      :spectro-info="spectroInfo"
-      @update:annotation="updateAnnotation($event)"
-      @create:annotation="createAnnotation($event)"
-      @set-cursor="setCursor($event)"
-    />
-    <div
-      ref="imageCursorRef" 
-      class="imageCursor"
-    >
+  <div class="video-annotator" :class="{ 'black-background': blackBackground, 'white-background': !blackBackground }"
+    @wheel="wheelEvent($event)">
+    <div id="spectro" ref="containerRef" class="playback-container" :style="{ cursor: cursor }"
+      @mousemove="cursorHandler.handleMouseMove" @mouseleave="cursorHandler.handleMouseLeave"
+      @mouseover="cursorHandler.handleMouseEnter" />
+    <layer-manager v-if="initialized" :geo-viewer-ref="geoViewerRef" :spectro-info="spectroInfo"
+      :scaled-width="scaledWidth" :scaled-height="scaledHeight" @update:annotation="updateAnnotation($event)"
+      @create:annotation="createAnnotation($event)" @set-cursor="setCursor($event)" />
+    <div ref="imageCursorRef" class="imageCursor">
       <v-icon color="white">
         {{ cursor }}
       </v-icon>
@@ -273,8 +258,10 @@ export default defineComponent({
 
   display: flex;
   flex-direction: column;
+
   .geojs-map {
     margin: 2px;
+
     &.geojs-map:focus {
       outline: none;
     }
@@ -284,6 +271,7 @@ export default defineComponent({
   .playback-container {
     flex: 1;
   }
+
   .loadingSpinnerContainer {
     z-index: 20;
     margin: 0;
@@ -293,18 +281,20 @@ export default defineComponent({
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
   }
+
   .geojs-map.annotation-input {
     cursor: inherit;
   }
 }
 
 .black-background {
-    background-color: black;
-  }
+  background-color: black;
+}
 
 .white-background {
-  background-color:  white;
+  background-color: white;
 }
+
 .imageCursor {
   z-index: 9999; //So it will be above the annotator layers
   position: fixed;

diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
@@ -31,6 +31,14 @@ export default defineComponent({
     yScale: {
       type: Number,
       default: 1,
+    },
+    scaledWidth: {
+      types: Number,
+      default: -1,
+    },
+    scaledHeight: {
+      types: Number,
+      default: -1,
     }
   },
   emits: ["selected", "update:annotation", "create:annotation", "set-cursor"],
@@ -198,7 +206,7 @@ export default defineComponent({
             ) : localTemporalAnnotations.value.findIndex((item) => item.id === selectedAnnotationId.value);
             if (index !== -1 && props.spectroInfo && selectedType.value === 'pulse') {
               // update bounds for the localAnnotation
-              const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo);
+              const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo, props.scaledWidth, props.scaledHeight);
               if (conversionResult.error) {
                 displayError.value = true;
                 errorMsg.value = conversionResult.error;
@@ -216,7 +224,7 @@ export default defineComponent({
             }
             if (index !== -1 && props.spectroInfo && selectedType.value === 'sequence') {
               // update bounds for the localAnnotation
-              const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo);
+              const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo, props.scaledWidth, props.scaledHeight);
               if (conversionResult.error) {
                 displayError.value = true;
                 errorMsg.value = conversionResult.error;
@@ -236,7 +244,7 @@ export default defineComponent({
           }
         } else if (creating) {
           if (geoJSON && props.spectroInfo) {
-            const conversionResult =  geojsonToSpectro(geoJSON, props.spectroInfo);
+            const conversionResult = geojsonToSpectro(geoJSON, props.spectroInfo);
 
             if (conversionResult.error) {
               displayError.value = true;
@@ -255,8 +263,8 @@ export default defineComponent({
                 id: 0,
               };
               emit("create:annotation", newAnnotation);
-          } else if (creationType.value === 'sequence') {
-            const newAnnotation: SpectrogramTemporalAnnotation = {
+            } else if (creationType.value === 'sequence') {
+              const newAnnotation: SpectrogramTemporalAnnotation = {
                 start_time,
                 end_time,
                 species: [],
@@ -266,7 +274,7 @@ export default defineComponent({
               };
               emit("create:annotation", newAnnotation);
 
-          }
+            }
             editAnnotationLayer.disable();
             annotationState.value = "";
             editing.value = false;
@@ -359,7 +367,7 @@ export default defineComponent({
         triggerUpdate();
       }
     );
-    watch (temporalAnnotations, () => {
+    watch(temporalAnnotations, () => {
       localTemporalAnnotations.value = temporalAnnotations.value;
       triggerUpdate();
     });
@@ -426,6 +434,63 @@ export default defineComponent({
       if (!props.thumbnail && legendLayer) {
         triggerUpdate();
       }
+    });
+    watch([() => props.scaledWidth, () => props.scaledHeight], () => {
+      const { annotations, temporalAnnotations } = getDataForLayers();
+      legendLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      rectAnnotationLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      rectAnnotationLayer.formatData(
+        annotations,
+        selectedType.value === 'pulse' ? selectedAnnotationId.value : null,
+        currentUser.value,
+        colorScale.value,
+        props.yScale,
+      );
+      rectAnnotationLayer.redraw();
+      editAnnotationLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      if (editing.value && editingAnnotation.value) {
+        setTimeout(() => {
+          editAnnotationLayer.changeData(editingAnnotation.value, selectedType.value);
+        }, 0);
+      }
+      timeLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      freqLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      speciesLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      speciesSequenceLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      temporalAnnotationLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+      if (layerVisibility.value.includes("time")) {
+        timeLayer.formatData(annotations, temporalAnnotations);
+        timeLayer.redraw();
+      } else {
+        timeLayer.disable();
+      }
+      if (layerVisibility.value.includes("freq")) {
+        freqLayer.formatData(annotations);
+        freqLayer.redraw();
+      } else {
+        freqLayer.disable();
+      }
+      if (layerVisibility.value.includes("species")) {
+        speciesLayer.formatData(annotations);
+        speciesLayer.redraw();
+        speciesSequenceLayer.formatData(temporalAnnotations);
+        speciesSequenceLayer.redraw();
+      } else {
+        speciesLayer.disable();
+        speciesSequenceLayer.disable();
+      }
+      if (temporalAnnotationLayer && layerVisibility.value.includes('temporal')) {
+        temporalAnnotationLayer.formatData(
+          temporalAnnotations,
+          selectedType.value === 'sequence' ? selectedAnnotationId.value : null,
+          currentUser.value,
+          colorScale.value,
+          props.yScale,
+        );
+        temporalAnnotationLayer.redraw();
+      }
+
+
     });
     watch(
       () => annotationState.value,
@@ -451,20 +516,14 @@ export default defineComponent({
 </script>
 
 <template>
-  <v-dialog
-    v-model="displayError" 
-    width="500"
-  >
+  <v-dialog v-model="displayError" width="500">
     <v-card>
       <v-card-title>Error</v-card-title>
       <v-card-text>{{ errorMsg }}</v-card-text>
       <v-card-actions>
         <v-row>
           <v-spacer />
-          <v-btn
-            variant="outlined"
-            @click="displayError = false"
-          >
+          <v-btn variant="outlined" @click="displayError = false">
             Dismiss
           </v-btn>
           <v-spacer />
@@ -473,4 +532,3 @@ export default defineComponent({
     </v-card>
   </v-dialog>
 </template>
-./layers/timeLalyer