experiment scaling

client/package.json

@@ -21,6 +21,7 @@
     "d3": "^7.8.5",
     "django-s3-file-field": "^1.0.0",
     "geojs": "^1.11.1",
+    "gl-matrix": "^3.4.3",
     "lodash": "^4.17.21",
     "vue": "^3.3.1",
     "vue-markdown-render": "^2.1.1",
@@ -29,6 +30,7 @@
   },
   "devDependencies": {
     "@types/geojson": "^7946.0.13",
+    "@types/gl-matrix": "^3.2.0",
     "@types/jest": "^27.4.1",
     "@types/lodash": "^4.14.202",
     "@types/markdown-it": "^13.0.7",

client/src/components/SpectrogramViewer.vue

@@ -13,6 +13,7 @@ import LayerManager from "./geoJS/LayerManager.vue";
 import { GeoEvent } from "geojs";
 import geo from "geojs";
 import useState from "../use/useState";
+import * as glMatrix from 'gl-matrix';
 
 export default defineComponent({
   name: "SpectroViewer",
@@ -182,6 +183,33 @@ 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();
+
+  }
+};
+
+
 
     return {
       containerRef,
@@ -194,6 +222,7 @@ export default defineComponent({
       cursorHandler,
       imageCursorRef,
       blackBackground,
+      wheelEvent,
     };
   },
 });
@@ -203,6 +232,7 @@ export default defineComponent({
   <div
     class="video-annotator"
     :class="{'black-background': blackBackground, 'white-background': !blackBackground}"
+    @wheel="wheelEvent($event)"
   >
     <div
       id="spectro"

client/src/components/geoJS/geoJSUtils.ts

@@ -39,7 +39,7 @@ const useGeoJS = () => {
     interactorOpts.keyboard.focusHighlight = false;
     interactorOpts.keyboard.actions = {};
     interactorOpts.click.cancelOnMove = 5;
-
+    console.log(interactorOpts);
     interactorOpts.actions = [
       interactorOpts.actions[0],
       // The action below is needed to have GeoJS use the proper handler