stretching the thumbnail (#46)

Kitware · Feb 22, 2024 · 070907c · 070907c
1 parent 9ad5f94
commit 070907c
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 35 deletions.
diff --git a/client/src/components/ThumbnailViewer.vue b/client/src/components/ThumbnailViewer.vue
@@ -47,6 +47,8 @@ export default defineComponent({
     const containerRef: Ref<HTMLElement | undefined> = ref();
     const geoJS = useGeoJS();
     const initialized  = ref(false);
+    const clientHeight = ref(0);
+    const yScale = ref(1);
     const polyLayerCreated= ref(false);
     let downState: {
       state: any,
@@ -110,12 +112,13 @@ export default defineComponent({
             props.parentGeoViewerRef.value.zoom(props.parentGeoViewerRef.value.zoom() - 1);
         }
         const size = parent.size();
+        const { top } = parent.bounds();
         outlineFeature.style(outlineStyle);
         outlineFeature.data([[
-            parent.displayToGcs({x: 0, y: 0}),
-            parent.displayToGcs({x: size.width, y: 0}),
-            parent.displayToGcs({x: size.width, y: size.height}),
-            parent.displayToGcs({x: 0, y: size.height})
+            parent.displayToGcs({x: 0, y: top * yScale.value}),
+            parent.displayToGcs({x: size.width, y: top * yScale.value}),
+            parent.displayToGcs({x: size.width, y: (size.height * yScale.value) + (top * yScale.value)}),
+            parent.displayToGcs({x: 0, y: (size.height * yScale.value) + (top * yScale.value)})
         ]]).draw();
         };
         onParentPan();
@@ -125,11 +128,20 @@ export default defineComponent({
     };
     watch(containerRef, () => {
       const { naturalWidth, naturalHeight } = props.image;
+      if (containerRef.value) {
+        clientHeight.value = containerRef.value.clientHeight;
+      }
       if (containerRef.value) {
       geoJS.initializeViewer(containerRef.value, naturalWidth, naturalHeight, true);
-      geoJS.drawImage(props.image, naturalWidth, naturalHeight);
+      const coords = geoJS.getGeoViewer().value.camera().worldToDisplay({x: 0, y:0});
+        const end = geoJS.getGeoViewer().value.camera().worldToDisplay({x: 0, y:naturalHeight});
+        const diff = coords.y - end.y;
+        // How much space to we have to multiply the size of the image
+        yScale.value = (clientHeight.value *0.5) / diff;
+      geoJS.drawImage(props.image, naturalWidth, naturalHeight*yScale.value);
       initialized.value = true;
         nextTick(() => createPolyLayer());
+
       }
     });
 
@@ -138,6 +150,7 @@ export default defineComponent({
       containerRef,
       geoViewerRef: geoJS.getGeoViewer(),
       initialized,
+      yScale,
     };
   },
 });
@@ -157,6 +170,7 @@ export default defineComponent({
       :annotations="annotations"
       :other-user-annotations="otherUserAnnotations"
       :selected-id="selectedId"
+      :y-scale="yScale"
       thumbnail
       @selected="$emit('selected',$event)"
     />

diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
@@ -28,6 +28,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    yScale: {
+      type: Number,
+      default: 1,
+    }
   },
   emits: ["selected", "update:annotation", "create:annotation", "set-cursor"],
   setup(props, { emit }) {
@@ -298,7 +302,8 @@ export default defineComponent({
           annotations,
           selectedType.value === 'pulse' ? selectedAnnotationId.value : null,
           currentUser.value,
-          colorScale.value
+          colorScale.value,
+          props.yScale,
         );
         rectAnnotationLayer.redraw();
       }
@@ -307,7 +312,8 @@ export default defineComponent({
           temporalAnnotations,
           selectedType.value === 'sequence' ? selectedAnnotationId.value : null,
           currentUser.value,
-          colorScale.value
+          colorScale.value,
+          props.yScale,
         );
         temporalAnnotationLayer.redraw();
       }
@@ -387,10 +393,10 @@ export default defineComponent({
       if (props.spectroInfo) {
         editAnnotationLayer = new EditAnnotationLayer(props.geoViewerRef, event, props.spectroInfo);
         rectAnnotationLayer = new RectangleLayer(props.geoViewerRef, event, props.spectroInfo);
-        rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value);
+        rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value, props.yScale);
         rectAnnotationLayer.redraw();
         temporalAnnotationLayer = new TemporalLayer(props.geoViewerRef, temporalEvent, props.spectroInfo);
-        temporalAnnotationLayer.formatData(localTemporalAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value);
+        temporalAnnotationLayer.formatData(localTemporalAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value, props.yScale);
         temporalAnnotationLayer.redraw();
         if (!props.thumbnail) {
           legendLayer = new LegendLayer(props.geoViewerRef, event, props.spectroInfo);

diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
@@ -186,7 +186,8 @@ function spectroTemporalToGeoJSon(
   annotation: SpectrogramTemporalAnnotation,
   spectroInfo: SpectroInfo,
   ymin = 0,
-  ymax = 10
+  ymax = 10,
+  yScale = 1,
 ): GeoJSON.Polygon {
   //scale pixels to time and frequency ranges
   if (spectroInfo.start_times === undefined || spectroInfo.end_times === undefined) {
@@ -198,11 +199,11 @@ function spectroTemporalToGeoJSon(
       type: "Polygon",
       coordinates: [
         [
-          [start_time, ymin],
-          [start_time, ymax],
-          [end_time, ymax],
-          [end_time, ymin],
-          [start_time, ymin],
+          [start_time, ymin * yScale],
+          [start_time, ymax * yScale],
+          [end_time, ymax * yScale],
+          [end_time, ymin * yScale],
+          [start_time, ymin * yScale],
         ],
       ],
     };
@@ -239,11 +240,11 @@ function spectroTemporalToGeoJSon(
       type: "Polygon",
       coordinates: [
         [
-          [start_time, ymin],
-          [start_time, ymax],
-          [end_time, ymax],
-          [end_time, ymin],
-          [start_time, ymin],
+          [start_time, ymin * yScale],
+          [start_time, ymax * yScale],
+          [end_time, ymax * yScale],
+          [end_time, ymin * yScale],
+          [start_time, ymin * yScale],
         ],
       ],
     };
@@ -264,7 +265,8 @@ function spectroTemporalToGeoJSon(
 
 function spectroToGeoJSon(
   annotation: SpectrogramAnnotation,
-  spectroInfo: SpectroInfo
+  spectroInfo: SpectroInfo,
+  yScale = 1
 ): GeoJSON.Polygon {
   //scale pixels to time and frequency ranges
   if (spectroInfo.start_times === undefined || spectroInfo.end_times === undefined) {
@@ -281,11 +283,11 @@ function spectroToGeoJSon(
       type: "Polygon",
       coordinates: [
         [
-          [start_time, low_freq],
-          [start_time, high_freq],
-          [end_time, high_freq],
-          [end_time, low_freq],
-          [start_time, low_freq],
+          [start_time, low_freq * yScale],
+          [start_time, high_freq * yScale],
+          [end_time, high_freq * yScale],
+          [end_time, low_freq * yScale],
+          [start_time, low_freq * yScale],
         ],
       ],
     };
@@ -327,11 +329,11 @@ function spectroToGeoJSon(
       type: "Polygon",
       coordinates: [
         [
-          [start_time, low_freq],
-          [start_time, high_freq],
-          [end_time, high_freq],
-          [end_time, low_freq],
-          [start_time, low_freq],
+          [start_time, low_freq * yScale],
+          [start_time, high_freq * yScale],
+          [end_time, high_freq * yScale],
+          [end_time, low_freq * yScale],
+          [start_time, low_freq * yScale],
         ],
       ],
     };

diff --git a/client/src/components/geoJS/layers/rectangleLayer.ts b/client/src/components/geoJS/layers/rectangleLayer.ts
@@ -110,11 +110,12 @@ export default class RectangleLayer {
     annotationData: SpectrogramAnnotation[],
     selectedIndex: number | null,
     currentUser: string,
-    colorScale?: d3.ScaleOrdinal<string, string, never>
+    colorScale?: d3.ScaleOrdinal<string, string, never>,
+    yScale = 1,
   ) {
     const arr: RectGeoJSData[] = [];
     annotationData.forEach((annotation: SpectrogramAnnotation) => {
-      const polygon = spectroToGeoJSon(annotation, this.spectroInfo);
+      const polygon = spectroToGeoJSon(annotation, this.spectroInfo, yScale);
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
       // For the compressed view we need to filter out default or NaN numbers

diff --git a/client/src/components/geoJS/layers/temporalLayer.ts b/client/src/components/geoJS/layers/temporalLayer.ts
@@ -113,11 +113,12 @@ export default class TemporalLayer {
     annotationData: SpectrogramTemporalAnnotation[],
     selectedIndex: number | null,
     currentUser: string,
-    colorScale?: d3.ScaleOrdinal<string, string, never>
+    colorScale?: d3.ScaleOrdinal<string, string, never>,
+    yScale = 1,
   ) {
     const arr: RectGeoJSData[] = [];
     annotationData.forEach((annotation: SpectrogramTemporalAnnotation) => {
-      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50);
+      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50,yScale);
       const [xmin, ymin] = polygon.coordinates[0][0];
       const [xmax, ymax] = polygon.coordinates[0][2];
       // For the compressed view we need to filter out default or NaN numbers