@geode/opengeodeweb-front 10.16.1 → 10.17.0

package/app/assets/viewer_svgs/camera-bookmark.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.0"
+   width="514px"
+   height="486px"
+   viewBox="0 0 514 486"
+   preserveAspectRatio="xMidYMid meet"
+   id="svg14"
+   sodipodi:docname="camera-bookmark.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs18" />
+  <sodipodi:namedview
+     id="namedview16"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="1.1756014"
+     inkscape:cx="202.02426"
+     inkscape:cy="238.60128"
+     inkscape:window-width="1920"
+     inkscape:window-height="964"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g12">
+    <inkscape:grid
+       type="xygrid"
+       id="grid160" />
+  </sodipodi:namedview>
+  <g
+     fill="#000000"
+     id="g12"
+     transform="matrix(1.0257024,0,0,1.0257024,-37.052727,-7.1977612)">
+    <path
+       d="m 201.51433,384.71831 c -9.66032,-3.00746 -16.58659,-10.3894 -18.77383,-19.68518 -0.45568,-1.73156 -0.82021,-34.72246 -0.82021,-73.36372 l -0.0911,-70.174 25.33553,-0.45567 c 28.16074,-0.54681 28.88983,-0.72908 35.81608,-7.0174 2.18725,-1.91384 4.9213,-5.55924 6.10606,-8.29329 1.82269,-4.19222 2.0961,-6.19718 2.0961,-16.13091 v -11.39188 h 6.83513 6.83513 v -17.6802 c 0,-9.75145 0.36455,-18.77383 0.82021,-19.95858 0.54682,-1.27589 1.82271,-2.64292 3.00746,-3.00745 2.27838,-0.82022 90.49712,-0.54682 92.77549,0.18226 0.72908,0.27341 4.37449,3.82768 7.92875,7.92875 3.6454,4.10108 9.02237,10.02486 11.84756,13.12346 l 5.28584,5.65036 7.2908,0.18227 7.29081,0.18228 0.63794,-4.19222 c 0.2734,-2.27837 0.82022,-4.64788 1.18476,-5.10356 0.82021,-1.45816 27.06711,-1.36703 28.52527,0.0911 0.63795,0.63795 1.09362,2.82518 1.09362,5.01242 0,2.46065 0.45568,4.10108 1.18475,4.28335 0.54682,0.18227 3.18973,0.82021 5.65038,1.36703 7.47307,1.8227 15.67523,9.84259 17.86248,17.6802 1.54928,5.37697 2.00496,172.97434 0.5468,180.08288 -1.18475,6.10605 -5.1947,12.21209 -10.48053,16.22203 -7.92875,6.01492 -1.36703,5.74152 -127.68022,5.65038 -89.40349,0 -115.28584,-0.27341 -118.11103,-1.18475 z m 139.0721,-41.19305 c 12.7589,-4.00995 20.77879,-9.11351 31.44159,-20.04972 20.41426,-20.96106 25.24441,-52.58492 12.02983,-79.10523 -7.0174,-13.94367 -17.58907,-24.69759 -31.62386,-31.89727 -9.75146,-5.01242 -15.67523,-6.74399 -26.33804,-7.74648 -21.69014,-2.00497 -41.92213,5.83264 -57.23281,22.05468 -15.12843,16.03978 -21.59902,35.26928 -19.32064,57.14169 2.64291,24.60646 19.77631,46.93456 43.74483,57.05055 15.03728,6.37945 32.26181,7.2908 47.2991,2.55178 z m 7.56421,-176.80201 c 2.0961,-2.00498 1.8227,-5.10357 -1.00249,-11.30076 -1.5493,-3.6454 -3.09859,-5.65037 -4.28335,-5.92377 -3.82767,-0.91136 -43.83596,-1.09363 -45.84093,-0.18227 -1.27589,0.5468 -2.82519,3.00745 -4.28335,6.65286 -2.73405,6.74399 -2.91632,8.8401 -0.91135,10.75394 1.18476,1.27589 5.01243,1.45815 28.16073,1.45815 23.14831,0 26.97598,-0.18226 28.16074,-1.45815 z"
+       id="path2"
+       style="stroke-width:0.911351" />
+    <path
+       d="m 309.14483,317.55177 c -9.75145,-2.27838 -22.32809,-12.2121 -27.34052,-21.69015 -8.8401,-16.49544 -5.92377,-37.00083 7.29081,-50.67109 22.87489,-23.60398 61.97184,-14.39934 72.36123,16.95113 2.09611,6.56172 2.46065,18.86494 0.72908,24.87986 -4.00994,13.76139 -16.22203,26.06463 -29.80116,30.07457 -5.37697,1.5493 -17.4068,1.82271 -23.23944,0.45568 z"
+       id="path4"
+       style="stroke-width:0.911351" />
+    <path
+       d="m 129.80545,209.69281 c -15.94627,-0.85865 -18.39954,-1.96262 -20.73015,-9.81309 -0.85864,-2.94393 -1.10397,-22.69277 -0.85864,-56.91591 L 108.58465,90.341125 113.1232,86.170562 117.78442,82 h 44.52689 44.64955 l 14.22898,14.351642 14.35164,14.474308 v 44.52688 c 0,49.31078 -0.12266,50.41475 -7.72781,53.48133 -4.17057,1.7173 -68.93694,2.20795 -98.00822,0.85865 z m 93.22434,-11.40772 c 1.10398,-1.10397 1.47197,-12.14369 1.47197,-41.82829 v -40.47898 l -10.67174,-10.91707 -10.79439,-10.794389 -41.09231,-0.367992 -41.09231,-0.245327 -0.36799,52.377358 -0.24532,52.50002 49.31076,0.368 c 27.23132,0.12266 50.04675,0.36799 50.78273,0.61331 0.61332,0.12267 1.83995,-0.36799 2.6986,-1.22664 z"
+       id="path6"
+       style="stroke-width:1.22663" />
+    <path
+       d="m 163.78327,186.75471 c -8.21846,-4.29322 -11.65304,-9.69042 -11.65304,-18.39953 0,-14.35164 14.22897,-24.04207 27.72197,-18.8902 7.85048,3.0666 13.73833,13.98365 12.1437,22.5701 -2.45327,12.87968 -17.17291,20.48482 -28.21263,14.71963 z"
+       id="path8"
+       style="stroke-width:1.22663" />
+    <path
+       d="m 131.64541,130.20679 c -1.10397,-0.36799 -1.59463,-4.29323 -1.59463,-13.37032 v -12.75702 h 31.27921 31.27922 v 12.87968 c 0,9.4451 -0.36799,12.87967 -1.47196,13.00234 -9.32243,0.49065 -58.38787,0.73598 -59.49184,0.24532 z"
+       id="path10"
+       style="stroke-width:1.22663" />
+  </g>
+</svg>

package/app/components/ActionButton.vue

@@ -25,6 +25,15 @@ const emit = defineEmits(["click"]);
     icon
     @click="emit('click', $event)"
   >
-    <v-icon :size="iconSize">{{ icon }}</v-icon>
+    <v-icon v-if="typeof icon === 'string' && icon.startsWith('mdi-')" :size="iconSize">{{
+      icon
+    }}</v-icon>
+    <v-img
+      v-else
+      :src="icon"
+      :height="iconSize"
+      :width="iconSize"
+      class="d-flex justify-center align-center"
+    />
   </v-btn>
 </template>

package/app/components/CameraManager/List.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { useCameraManagerStore } from "@ogw_front/stores/camera_manager";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const cameraManagerStore = useCameraManagerStore();
+const hybridViewerStore = useHybridViewerStore();
+
+const savedPositions = cameraManagerStore.refAllCameraPositions();
+
+const editingId = ref(undefined);
+const editingName = ref("");
+
+async function restorePosition(positionId) {
+  const position = await cameraManagerStore.getCameraPosition(positionId);
+  if (position) {
+    if (hybridViewerStore.genericRenderWindow) {
+      hybridViewerStore.setCamera(position.camera_options);
+    } else {
+      await cameraManagerStore.restoreCameraPosition(positionId);
+    }
+  }
+}
+
+async function deletePosition(positionId) {
+  await cameraManagerStore.deleteCameraPosition(positionId);
+}
+
+function startEditing(position) {
+  editingId.value = position.id;
+  editingName.value = position.name;
+}
+
+async function saveRename() {
+  if (editingName.value) {
+    await cameraManagerStore.renameCameraPosition(editingId.value, editingName.value);
+  }
+  editingId.value = undefined;
+}
+</script>
+
+<template>
+  <v-list v-if="savedPositions.length > 0" class="bg-transparent pa-2">
+    <v-list-item
+      v-for="position in savedPositions"
+      :key="position.id"
+      class="rounded-lg mb-1"
+      :active="editingId === position.id"
+      active-color="primary"
+    >
+      <template #prepend>
+        <v-btn
+          icon
+          variant="tonal"
+          color="success"
+          size="small"
+          class="mr-2"
+          @click="restorePosition(position.id)"
+        >
+          <v-icon size="20">mdi-play</v-icon>
+          <v-tooltip activator="parent" location="top">Restore</v-tooltip>
+        </v-btn>
+      </template>
+
+      <v-list-item-title class="font-weight-bold">
+        <v-text-field
+          v-if="editingId === position.id"
+          v-model="editingName"
+          density="compact"
+          variant="underlined"
+          hide-details
+          autofocus
+          @keyup.enter="saveRename"
+          @blur="saveRename"
+        ></v-text-field>
+        <span v-else>{{ position.name }}</span>
+      </v-list-item-title>
+
+      <template #append>
+        <div class="d-flex g-1">
+          <v-btn
+            icon
+            variant="text"
+            size="small"
+            color="grey-darken-1"
+            @click="startEditing(position)"
+          >
+            <v-icon size="18">mdi-pencil</v-icon>
+            <v-tooltip activator="parent" location="top">Rename</v-tooltip>
+          </v-btn>
+          <v-btn
+            icon
+            variant="text"
+            size="small"
+            color="error"
+            @click="deletePosition(position.id)"
+          >
+            <v-icon size="18">mdi-delete</v-icon>
+            <v-tooltip activator="parent" location="top">Delete</v-tooltip>
+          </v-btn>
+        </div>
+      </template>
+    </v-list-item>
+  </v-list>
+  <div v-else class="text-center text-grey-lighten-1 py-8 italic">
+    <v-icon size="48" class="mb-2 d-block mx-auto opacity-20">mdi-camera-off</v-icon>
+    No saved positions yet.
+  </div>
+</template>
+
+<style scoped>
+:deep(.v-list-item__prepend) {
+  margin-inline-end: 12px !important;
+}
+</style>

package/app/components/CameraManager/Saver.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { useCameraManagerStore } from "@ogw_front/stores/camera_manager";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const cameraManagerStore = useCameraManagerStore();
+const hybridViewerStore = useHybridViewerStore();
+
+const newPositionName = ref("");
+
+async function saveCurrentPosition() {
+  if (!newPositionName.value) {
+    return;
+  }
+  await cameraManagerStore.saveCameraPosition(
+    newPositionName.value,
+    toRaw(hybridViewerStore.camera_options),
+  );
+  newPositionName.value = "";
+}
+</script>
+
+<template>
+  <v-container class="pa-5 pb-2 bg-surface-variant-lighten-5">
+    <v-row dense>
+      <v-col cols="12">
+        <v-text-field
+          v-model="newPositionName"
+          label="Position Name"
+          placeholder="e.g. Front View"
+          density="compact"
+          variant="outlined"
+          hide-details
+          class="mb-3"
+        ></v-text-field>
+      </v-col>
+      <v-col cols="12" class="d-flex align-center">
+        <v-btn
+          color="primary"
+          variant="elevated"
+          block
+          :disabled="!newPositionName"
+          @click="saveCurrentPosition"
+          height="40"
+        >
+          Save
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

package/app/components/CameraManager.vue

@@ -0,0 +1,39 @@
+<script setup>
+import GlassCard from "@ogw_front/components/GlassCard";
+import List from "@ogw_front/components/CameraManager/List";
+import Saver from "@ogw_front/components/CameraManager/Saver";
+
+const emit = defineEmits(["close"]);
+
+const { show_dialog, width } = defineProps({
+  show_dialog: { type: Boolean, required: true },
+  width: { type: Number, required: false, default: 450 },
+});
+</script>
+
+<template>
+  <GlassCard
+    v-if="show_dialog"
+    @click.stop
+    title="Camera Positions"
+    :width="width"
+    :ripple="false"
+    variant="panel"
+    padding="pa-0"
+    class="position-absolute elevation-24"
+    style="z-index: 2; top: 90px; right: 55px"
+  >
+    <v-card-text class="pa-0">
+      <Saver />
+      <v-divider></v-divider>
+      <List />
+    </v-card-text>
+
+    <v-divider></v-divider>
+
+    <v-card-actions class="pa-4">
+      <v-spacer></v-spacer>
+      <v-btn variant="text" color="grey-darken-1" @click="emit('close')">Close</v-btn>
+    </v-card-actions>
+  </GlassCard>
+</template>

package/app/components/Recaptcha.vue

@@ -30,7 +30,7 @@ const emailRules = [
     return "E-mail is required.";
   },
   (value) => {
-    if (/.+@.+\..+/.test(value)) {
+    if (/.+@.+\..+/u.test(value)) {
       return true;
     }
     return "E-mail must be valid.";

package/app/components/ViewToolbar.vue

@@ -1,17 +1,18 @@
 <script setup>
-import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
 import ActionButton from "@ogw_front/components/ActionButton.vue";
+import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.svg";
+import CameraManager from "@ogw_front/components/CameraManager";
 import CameraOrientation from "@ogw_front/components/CameraOrientation.vue";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ZScaling from "@ogw_front/components/ZScaling";
-
+import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
 const take_screenshot = ref(false);
+const show_camera_manager = ref(false);
 const showCameraOrientation = ref(false);
 const showZScaling = ref(false);
 const grid_scale = ref(false);
@@ -51,6 +52,14 @@ const camera_options = [
       showCameraOrientation.value = !showCameraOrientation.value;
     },
   },
+  {
+    tooltip: "Manage camera positions",
+    icon: CameraBookmarkIcon,
+    iconSize: 34,
+    action: () => {
+      show_camera_manager.value = !show_camera_manager.value;
+    },
+  },
   {
     tooltip: "Take a screenshot",
     icon: "mdi-camera",
@@ -91,6 +100,7 @@ const camera_options = [
         <ActionButton
           :icon="camera_option.icon"
           :tooltip="camera_option.tooltip"
+          :icon-size="camera_option.iconSize"
           tooltip-location="left"
           @click.stop="camera_option.action"
         />
@@ -103,6 +113,7 @@ const camera_options = [
     @select="hybridViewerStore.setCameraOrientation"
   />
   <Screenshot v-model="take_screenshot" />
+  <CameraManager :show_dialog="show_camera_manager" @close="show_camera_manager = false" />
   <ZScaling
     v-model:show="showZScaling"
     v-model="zScale"

package/app/stores/camera_manager.js

@@ -0,0 +1,56 @@
+// Third party imports
+import { liveQuery } from "dexie";
+import { useObservable } from "@vueuse/rxjs";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+// Local imports
+import { database } from "@ogw_internal/database/database.js";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+export const useCameraManagerStore = defineStore("camera_manager", () => {
+  const viewerStore = useViewerStore();
+
+  function refAllCameraPositions() {
+    return useObservable(
+      liveQuery(() => database.camera_positions.toArray()),
+      { initialValue: [] },
+    );
+  }
+
+  async function getCameraPosition(id) {
+    return await database.camera_positions.get(id);
+  }
+
+  async function saveCameraPosition(name, camera_options) {
+    await database.camera_positions.put({
+      name,
+      camera_options,
+    });
+  }
+
+  async function restoreCameraPosition(id) {
+    const position = await database.camera_positions.get(id);
+    if (position) {
+      await viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, {
+        camera_options: position.camera_options,
+      });
+    }
+  }
+
+  async function deleteCameraPosition(id) {
+    await database.camera_positions.delete(id);
+  }
+
+  async function renameCameraPosition(id, newName) {
+    await database.camera_positions.update(id, { name: newName });
+  }
+
+  return {
+    refAllCameraPositions,
+    getCameraPosition,
+    saveCameraPosition,
+    restoreCameraPosition,
+    deleteCameraPosition,
+    renameCameraPosition,
+  };
+});

package/app/stores/hybrid_viewer.js

@@ -1,17 +1,13 @@
 import {
   ACTOR_COLOR,
-  ALIGNMENT_THRESHOLD,
   BACKGROUND_COLOR,
-  BUMP_MULTIPLIER,
-  EASE_EXPONENT,
-  LONG_ANIMATION_DURATION,
-  SHORT_ANIMATION_DURATION,
   WHEEL_TIME_OUT_MS,
   applySnapshot,
   computeAverageBrightness,
   getCameraOptions,
   performCameraOrientation,
   performClickPicking,
+  performSetCamera,
 } from "@ogw_internal/stores/hybrid_viewer";
 import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
@@ -26,16 +22,17 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
   const hybridDb = reactive({});
-  const status = ref(Status.NOT_CREATED);
+  const viewerStore = useViewerStore();
   const camera_options = reactive({});
   const genericRenderWindow = reactive({});
+  const status = ref(Status.NOT_CREATED);
   const is_moving = ref(false);
   const is_picking = ref(false);
   const zScale = ref(1);
-  let viewStream = undefined;
   let imageStyle = undefined;
+  let viewStream = undefined;
+  let wheelEventEndTimeout = undefined;
   const gridActor = undefined;
 
   watch(is_picking, (value) => {
@@ -63,12 +60,9 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       background: BACKGROUND_COLOR,
       listenWindowResize: false,
     });
-
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
-    imageStyle.transition = "opacity 0.1s ease-in";
-    imageStyle.zIndex = 1;
-
+    Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
     await viewerStore.ws_connect();
     viewStream = viewerStore.client.getImageStream().createViewStream("-1");
     viewStream.onImageReady((event) => {
@@ -79,13 +73,11 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       webGLRenderWindow.setBackgroundImage(event.image);
       imageStyle.opacity = 1;
     });
-
-    const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
+    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
+    Object.assign(camera_options, getCameraOptions(camera));
     camera.onModified(() => {
       Object.assign(camera_options, getCameraOptions(camera));
     });
-
     status.value = Status.CREATED;
   }
 
@@ -93,14 +85,13 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     if (!genericRenderWindow.value) {
       return;
     }
-    const value = await dataStore.item(id);
     const reader = vtkXMLPolyDataReader();
-    const textEncoder = new TextEncoder();
-    await reader.parseAsArrayBuffer(textEncoder.encode(value.binary_light_viewable));
-    const polydata = reader.getOutputData(0);
+    const value = await dataStore.item(id);
+    await reader.parseAsArrayBuffer(new TextEncoder().encode(value.binary_light_viewable));
+    const actor = vtkActor();
     const mapper = vtkMapper();
+    const polydata = reader.getOutputData(0);
     mapper.setInputData(polydata);
-    const actor = vtkActor();
     actor.getProperty().setColor(ACTOR_COLOR);
     actor.setMapper(mapper);
     const renderer = genericRenderWindow.value.getRenderer();
@@ -116,8 +107,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     if (!hybridDb[id]) {
       return;
     }
-    const renderer = genericRenderWindow.value.getRenderer();
-    renderer.removeActor(hybridDb[id].actor);
+    genericRenderWindow.value.getRenderer().removeActor(hybridDb[id].actor);
     genericRenderWindow.value.getRenderWindow().render();
     delete hybridDb[id];
   }
@@ -127,14 +117,13 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       return;
     }
     hybridDb[id].actor.setVisibility(visibility);
-    const renderWindow = genericRenderWindow.value.getRenderWindow();
-    renderWindow.render();
+    genericRenderWindow.value.getRenderWindow().render();
   }
+
   async function setZScaling(z_scale) {
     zScale.value = z_scale;
     const renderer = genericRenderWindow.value.getRenderer();
-    const actors = renderer.getActors();
-    for (const actor of actors) {
+    for (const actor of renderer.getActors()) {
       if (actor !== gridActor) {
         const scale = actor.getScale();
         actor.setScale(scale[0], scale[1], z_scale);
@@ -143,48 +132,49 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     renderer.resetCamera();
     genericRenderWindow.value.getRenderWindow().render();
     const schema = viewer_schemas?.opengeodeweb_viewer?.viewer?.set_z_scaling;
-    if (!schema) {
-      return;
+    if (schema) {
+      await viewerStore.request(schema, { z_scale });
     }
-    await viewerStore.request(schema, {
-      z_scale,
-    });
     remoteRender();
   }
 
   function resetCamera() {
-    const renderer = genericRenderWindow.value.getRenderer();
-    renderer.resetCamera();
+    genericRenderWindow.value.getRenderer().resetCamera();
     genericRenderWindow.value.getRenderWindow().render();
     syncRemoteCamera();
   }
 
+  function setCamera(new_camera_options) {
+    performSetCamera(new_camera_options, {
+      genericRenderWindow: genericRenderWindow.value,
+      is_moving,
+      imageStyle,
+      syncRemoteCamera,
+    });
+  }
+
   function setCameraOrientation(orientation) {
     performCameraOrientation(orientation, {
       genericRenderWindow: genericRenderWindow.value,
       is_moving,
       imageStyle,
       syncRemoteCamera,
-      constants: {
-        ALIGNMENT_THRESHOLD,
-        BUMP_MULTIPLIER,
-        EASE_EXPONENT,
-        LONG_ANIMATION_DURATION,
-        SHORT_ANIMATION_DURATION,
-      },
     });
   }
 
   function syncRemoteCamera() {
-    const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
-    const params = { camera_options: getCameraOptions(camera) };
-    viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, params, {
-      response_function: () => {
-        remoteRender();
-        Object.assign(camera_options, params.camera_options);
+    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
+    const options = getCameraOptions(camera);
+    viewerStore.request(
+      viewer_schemas.opengeodeweb_viewer.viewer.update_camera,
+      { camera_options: options },
+      {
+        response_function: () => {
+          remoteRender();
+          Object.assign(camera_options, options);
+        },
       },
-    });
+    );
   }
 
   function remoteRender() {
@@ -199,10 +189,8 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     webGLRenderWindow.setUseBackgroundImage(true);
     imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
-    imageStyle.transition = "opacity 0.1s ease-in";
-    imageStyle.zIndex = 1;
+    Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
     resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
-
     useMousePressed({
       target: container,
       onPressed: (event) => {
@@ -225,18 +213,17 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
         imageStyle.opacity = 0;
       },
       onReleased: () => {
-        if (!is_moving.value) {
-          return;
+        if (is_moving.value) {
+          is_moving.value = false;
+          syncRemoteCamera();
         }
-        is_moving.value = false;
-        syncRemoteCamera();
       },
     });
-
-    let wheelEventEndTimeout = undefined;
     useEventListener(container, "wheel", () => {
       is_moving.value = true;
-      imageStyle.opacity = 0;
+      if (imageStyle) {
+        imageStyle.opacity = 0;
+      }
       clearTimeout(wheelEventEndTimeout);
       wheelEventEndTimeout = setTimeout(() => {
         is_moving.value = false;
@@ -256,8 +243,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     await nextTick();
     webGLRenderWindow.setSize(width, height);
     viewStream.setSize(width, height);
-    const renderWindow = genericRenderWindow.value.getRenderWindow();
-    renderWindow.render();
+    genericRenderWindow.value.getRenderWindow().render();
     remoteRender();
   }
 
@@ -271,10 +257,8 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function exportStores() {
-    const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
-    const cameraSnapshot = getCameraOptions(camera) || camera_options;
-    return { zScale: zScale.value, camera_options: cameraSnapshot };
+    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
+    return { zScale: zScale.value, camera_options: getCameraOptions(camera) || camera_options };
   }
 
   async function importStores(snapshot) {
@@ -282,13 +266,13 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       genericRenderWindow: genericRenderWindow.value,
       setZScaling,
       syncRemoteCamera,
+      setCamera,
     });
   }
 
   function clear() {
     const renderer = genericRenderWindow.value.getRenderer();
-    const actors = renderer.getActors();
-    for (const actor of actors) {
+    for (const actor of renderer.getActors()) {
       renderer.removeActor(actor);
     }
     genericRenderWindow.value.getRenderWindow().render();
@@ -305,6 +289,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     setVisibility,
     setZScaling,
     syncRemoteCamera,
+    setCamera,
     initHybridViewer,
     remoteRender,
     resize,

package/app/utils/local/microservices.js

@@ -49,7 +49,7 @@ async function runScript(
   child.on("kill", () => {
     console.log(`[${execName}] process killed`);
   });
-  child.name = command.replace(/^.*[\\/]/, "");
+  child.name = command.replace(/^.*[\\/]/u, "");
 
   try {
     return await pTimeout(waitForReady(child, expectedResponse), {

package/app/utils/local/scripts.js

@@ -27,7 +27,7 @@ async function waitNuxt(nuxtProcess) {
   for await (const [data] of on(nuxtProcess.stdout, "data")) {
     const output = data.toString();
     console.log("Nuxt:", output);
-    const portMatch = output.match(/Listening on http:\/\/\[::\]:(\d+)/);
+    const portMatch = output.match(/Listening on http:\/\/\[::\]:(\d+)/u);
     if (portMatch) {
       const [, nuxtPort] = portMatch;
 

package/app/utils/server.js

@@ -5,7 +5,7 @@ import path from "node:path";
 // Third party imports
 import JSZip from "jszip";
 
-async function unzipFile(zipFilePath, outputDir = zipFilePath.replace(/\.[^/.]+$/, "")) {
+async function unzipFile(zipFilePath, outputDir = zipFilePath.replace(/\.[^/.]+$/u, "")) {
   console.log("Unzipping file...", zipFilePath, outputDir);
   try {
     const data = await fs.promises.readFile(zipFilePath);

package/internal/database/base_database.js

@@ -1,4 +1,5 @@
 import { Dexie } from "dexie";
+import { cameraPositionsTable } from "./tables/camera_positions";
 import { dataStyleTable } from "./tables/data_style";
 import { dataTable } from "./tables/data";
 import { modelComponentDataStyleTable } from "./tables/model_component_datastyle";
@@ -15,6 +16,7 @@ export class BaseDatabase extends Dexie {
       [modelComponentDataStyleTable.name]: modelComponentDataStyleTable.schema,
       [modelComponentTypeDataStyleTable.name]: modelComponentTypeDataStyleTable.schema,
       [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
+      [cameraPositionsTable.name]: cameraPositionsTable.schema,
       treeview_config: "id",
     };
   }

package/internal/database/database.js

@@ -6,7 +6,7 @@ class Database extends BaseDatabase {
   constructor() {
     super("Database");
 
-    this.version(1).stores(BaseDatabase.initialStores);
+    this.version(3).stores(BaseDatabase.initialStores);
   }
 
   static async addTable(tableName, schemaDefinition) {

package/internal/database/tables/camera_positions.js

@@ -0,0 +1,4 @@
+export const cameraPositionsTable = {
+  name: "camera_positions",
+  schema: "++id, name",
+};

package/internal/stores/hybrid_viewer.js

@@ -1,3 +1,9 @@
+import {
+  LONG_ANIMATION_DURATION,
+  SHORT_ANIMATION_DURATION,
+  animateCamera,
+  computeAnimationDuration,
+} from "@ogw_internal/stores/hybrid_viewer_camera_animation";
 import { dot } from "@kitware/vtk.js/Common/Core/Math";
 
 const RGB_MAX = 255;
@@ -17,8 +23,6 @@ const ACTOR_COLOR = [
 const WHEEL_TIME_OUT_MS = 600;
 const BUMP_MULTIPLIER = 0.2;
 const ALIGNMENT_THRESHOLD = 0.9;
-const LONG_ANIMATION_DURATION = 1000;
-const SHORT_ANIMATION_DURATION = 500;
 const EASE_EXPONENT = 1.1;
 
 const SAMPLE_SIZE = 10;
@@ -76,17 +80,13 @@ function computeAverageBrightness(rect, options) {
   if (!latestImage || !offscreenCtx || !offscreenCanvas || !genericRenderWindow) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
-
   const canvas = genericRenderWindow.getApiSpecificRenderWindow().getCanvas();
   if (!canvas) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
-
   const { relX, relY, relW, relH } = mapRect(rect, latestImage, canvas.getBoundingClientRect());
-
   offscreenCanvas.width = SAMPLE_SIZE;
   offscreenCanvas.height = SAMPLE_SIZE;
-
   try {
     offscreenCtx.drawImage(
       latestImage,
@@ -100,7 +100,6 @@ function computeAverageBrightness(rect, options) {
       SAMPLE_SIZE,
     );
     const { data } = offscreenCtx.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
-
     let minBrightness = 1;
     for (let i = 0; i < TOTAL_CHANNELS; i += RGBA_CHANNELS) {
       const brightness = (data[i] + data[i + 1] + data[i + 2]) / (3 * RGB_MAX);
@@ -108,7 +107,6 @@ function computeAverageBrightness(rect, options) {
         minBrightness = brightness;
       }
     }
-
     return minBrightness;
   } catch {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
@@ -150,54 +148,8 @@ function performClickPicking(event, options) {
     },
   );
 }
-
-function animateCamera(options) {
-  const {
-    camera,
-    startState,
-    targetState,
-    duration,
-    bumpMultiplier,
-    easeExponent,
-    onUpdate,
-    onEnd,
-  } = options;
-  const startTime = performance.now();
-
-  function animate(currentTime) {
-    const progress = Math.min((currentTime - startTime) / duration, 1);
-    const ease =
-      duration > SHORT_ANIMATION_DURATION
-        ? 1 - (1 - progress) ** easeExponent
-        : progress * (2 - progress);
-    const bump = bumpMultiplier * Math.sin(Math.PI * progress);
-
-    camera.set({
-      position: startState.position.map(
-        (startValue, index) =>
-          startValue + (targetState.position[index] - startValue) * ease + bump,
-      ),
-      viewUp: startState.view_up.map(
-        (startValue, index) => startValue + (targetState.view_up[index] - startValue) * ease,
-      ),
-      focalPoint: startState.focal_point.map(
-        (startValue, index) => startValue + (targetState.focal_point[index] - startValue) * ease,
-      ),
-    });
-
-    onUpdate();
-
-    if (progress < 1) {
-      requestAnimationFrame(animate);
-    } else {
-      onEnd();
-    }
-  }
-  requestAnimationFrame(animate);
-}
-
 async function applySnapshot(snapshot, options) {
-  const { genericRenderWindow, setZScaling, syncRemoteCamera } = options;
+  const { genericRenderWindow, setZScaling, syncRemoteCamera, setCamera } = options;
   if (!snapshot) {
     return;
   }
@@ -207,17 +159,47 @@ async function applySnapshot(snapshot, options) {
   }
   const { camera_options: snapshot_camera_options } = snapshot;
   if (snapshot_camera_options) {
-    applyCameraOptions(
-      genericRenderWindow.getRenderer().getActiveCamera(),
-      snapshot_camera_options,
-    );
-    genericRenderWindow.getRenderWindow().render();
-    syncRemoteCamera();
+    if (setCamera) {
+      setCamera(snapshot_camera_options);
+    } else {
+      applyCameraOptions(
+        genericRenderWindow.getRenderer().getActiveCamera(),
+        snapshot_camera_options,
+      );
+      genericRenderWindow.getRenderWindow().render();
+      syncRemoteCamera();
+    }
   }
 }
 
+function performSetCamera(targetCameraOptions, options) {
+  const { genericRenderWindow, is_moving, imageStyle, syncRemoteCamera } = options;
+  const camera = genericRenderWindow.getRenderer().getActiveCamera();
+  const startState = getCameraOptions(camera);
+  const duration = computeAnimationDuration(startState, targetCameraOptions);
+  is_moving.value = true;
+  if (imageStyle) {
+    imageStyle.opacity = 0;
+  }
+  animateCamera({
+    camera,
+    startState,
+    targetState: targetCameraOptions,
+    duration,
+    bumpMultiplier: 0,
+    easeExponent: EASE_EXPONENT,
+    onUpdate: () => genericRenderWindow.getRenderWindow().render(),
+    onEnd: () => {
+      applyCameraOptions(camera, targetCameraOptions);
+      genericRenderWindow.getRenderWindow().render();
+      is_moving.value = false;
+      syncRemoteCamera();
+    },
+  });
+}
+
 function performCameraOrientation(orientation, options) {
-  const { genericRenderWindow, is_moving, imageStyle, syncRemoteCamera, constants } = options;
+  const { genericRenderWindow, is_moving, imageStyle, syncRemoteCamera } = options;
   const config = ORIENTATIONS[orientation.toLowerCase()];
   const renderer = genericRenderWindow.getRenderer();
   const camera = renderer.getActiveCamera();
@@ -234,9 +216,7 @@ function performCameraOrientation(orientation, options) {
 
   const alignment = dot(camera.getDirectionOfProjection(), config.position);
   const duration =
-    alignment > constants.ALIGNMENT_THRESHOLD
-      ? constants.LONG_ANIMATION_DURATION
-      : constants.SHORT_ANIMATION_DURATION;
+    alignment > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
   is_moving.value = true;
   imageStyle.opacity = 0;
 
@@ -245,8 +225,8 @@ function performCameraOrientation(orientation, options) {
     startState,
     targetState,
     duration,
-    bumpMultiplier: constants.BUMP_MULTIPLIER,
-    easeExponent: constants.EASE_EXPONENT,
+    bumpMultiplier: BUMP_MULTIPLIER,
+    easeExponent: EASE_EXPONENT,
     onUpdate: () => genericRenderWindow.getRenderWindow().render(),
     onEnd: () => {
       is_moving.value = false;
@@ -261,11 +241,8 @@ export {
   WHEEL_TIME_OUT_MS,
   BUMP_MULTIPLIER,
   ALIGNMENT_THRESHOLD,
-  LONG_ANIMATION_DURATION,
-  SHORT_ANIMATION_DURATION,
   EASE_EXPONENT,
   ORIENTATIONS,
-  animateCamera,
   applyCameraOptions,
   applySnapshot,
   centerCameraOnPosition,
@@ -273,4 +250,5 @@ export {
   getCameraOptions,
   performCameraOrientation,
   performClickPicking,
+  performSetCamera,
 };

package/internal/stores/hybrid_viewer_camera_animation.js

@@ -0,0 +1,108 @@
+import { dot } from "@kitware/vtk.js/Common/Core/Math";
+
+const NEAR_ZERO_THRESHOLD = 1e-10;
+const SLERP_LINEAR_THRESHOLD = 0.9995;
+const LONG_ANIMATION_DURATION = 1000;
+const SHORT_ANIMATION_DURATION = 500;
+
+function vecSub(vector, other) {
+  return [vector[0] - other[0], vector[1] - other[1], vector[2] - other[2]];
+}
+
+function vecLength(vector) {
+  return Math.hypot(vector[0], vector[1], vector[2]);
+}
+
+function vecNormalize(vector) {
+  const len = vecLength(vector);
+  if (len < NEAR_ZERO_THRESHOLD) {
+    return [0, 0, 1];
+  }
+  return [vector[0] / len, vector[1] / len, vector[2] / len];
+}
+
+function slerp(from, target, ratio) {
+  const normFrom = vecNormalize(from);
+  const normTarget = vecNormalize(target);
+  let dotProduct =
+    normFrom[0] * normTarget[0] + normFrom[1] * normTarget[1] + normFrom[2] * normTarget[2];
+  dotProduct = Math.max(-1, Math.min(1, dotProduct));
+  if (dotProduct > SLERP_LINEAR_THRESHOLD) {
+    return vecNormalize([
+      normFrom[0] + (normTarget[0] - normFrom[0]) * ratio,
+      normFrom[1] + (normTarget[1] - normFrom[1]) * ratio,
+      normFrom[2] + (normTarget[2] - normFrom[2]) * ratio,
+    ]);
+  }
+  const theta = Math.acos(dotProduct);
+  const sinTheta = Math.sin(theta);
+  const weightFrom = Math.sin((1 - ratio) * theta) / sinTheta;
+  const weightTarget = Math.sin(ratio * theta) / sinTheta;
+  return [
+    normFrom[0] * weightFrom + normTarget[0] * weightTarget,
+    normFrom[1] * weightFrom + normTarget[1] * weightTarget,
+    normFrom[2] * weightFrom + normTarget[2] * weightTarget,
+  ];
+}
+
+function computeAnimationDuration(startState, targetState) {
+  const startDir = vecNormalize(vecSub(startState.position, startState.focal_point));
+  const targetDir = vecNormalize(vecSub(targetState.position, targetState.focal_point));
+  const dotProduct = Math.max(-1, Math.min(1, dot(startDir, targetDir)));
+  const angle = Math.acos(dotProduct);
+  const angleRatio = angle / Math.PI;
+  return (
+    SHORT_ANIMATION_DURATION + (LONG_ANIMATION_DURATION - SHORT_ANIMATION_DURATION) * angleRatio
+  );
+}
+
+function animateCamera(options) {
+  const {
+    camera,
+    startState,
+    targetState,
+    duration,
+    bumpMultiplier,
+    easeExponent,
+    onUpdate,
+    onEnd,
+  } = options;
+  const startDir = vecSub(startState.position, startState.focal_point);
+  const targetDir = vecSub(targetState.position, targetState.focal_point);
+  const startDist = vecLength(startDir);
+  const targetDist = vecLength(targetDir);
+  const startTime = performance.now();
+  function animate(currentTime) {
+    const progress = Math.min((currentTime - startTime) / duration, 1);
+    const ease =
+      duration > SHORT_ANIMATION_DURATION
+        ? 1 - (1 - progress) ** easeExponent
+        : progress * (2 - progress);
+    const bump = bumpMultiplier * Math.sin(Math.PI * progress);
+    const dir = slerp(startDir, targetDir, ease);
+    const dist = startDist + (targetDist - startDist) * ease + bump;
+    const focalPoint = startState.focal_point.map(
+      (startValue, index) => startValue + (targetState.focal_point[index] - startValue) * ease,
+    );
+    const viewUp = slerp(startState.view_up, targetState.view_up, ease);
+    camera.set({
+      position: focalPoint.map((focalCoord, index) => focalCoord + dir[index] * dist),
+      viewUp,
+      focalPoint,
+    });
+    onUpdate();
+    if (progress < 1) {
+      requestAnimationFrame(animate);
+    } else {
+      onEnd();
+    }
+  }
+  requestAnimationFrame(animate);
+}
+
+export {
+  LONG_ANIMATION_DURATION,
+  SHORT_ANIMATION_DURATION,
+  animateCamera,
+  computeAnimationDuration,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.16.1",
+  "version": "10.17.0",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {

package/server/api/app/run_cloud.js

@@ -36,7 +36,7 @@ export default defineEventHandler(async (event) => {
     console.log("Service URL created:", response.uri);
     return {
       statusCode: 200,
-      url: response.uri.replace(/^https?:\/\//i, ""),
+      url: response.uri.replace(/^https?:\/\//iu, ""),
     };
   } catch (error) {
     console.log(error);