@geode/opengeodeweb-front 10.14.2-rc.3 → 10.15.0

package/app/components/CameraOrientation.vue

@@ -0,0 +1,273 @@
+<script setup>
+import ToolPanel from "@ogw_front/components/ToolPanel";
+import { applyCameraOptions } from "@ogw_front/utils/hybrid_viewer";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { newInstance as vtkAnnotatedCubeActor } from "@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor";
+import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
+
+const { panel, width } = defineProps({
+  panel: { type: Boolean, default: false },
+  width: { type: Number, default: 400 },
+});
+
+const show = defineModel("show", { type: Boolean, default: false });
+const emit = defineEmits(["select"]);
+
+const orientations = [
+  {
+    label: "Z+",
+    value: "zplus",
+    face: "top",
+    vtkKey: "ZPlus",
+    rotation: 0,
+    position: { top: "15%", left: "50%" },
+  },
+  {
+    label: "Z-",
+    value: "zminus",
+    face: "bottom",
+    vtkKey: "ZMinus",
+    rotation: 0,
+    position: { top: "85%", left: "50%" },
+  },
+  {
+    label: "Y+",
+    value: "yplus",
+    face: "front",
+    vtkKey: "YPlus",
+    rotation: 180,
+    position: { top: "35%", left: "20%" },
+  },
+  {
+    label: "Y-",
+    value: "yminus",
+    face: "back",
+    vtkKey: "YMinus",
+    rotation: 0,
+    position: { top: "65%", left: "80%" },
+  },
+  {
+    label: "X+",
+    value: "xplus",
+    face: "right",
+    vtkKey: "XPlus",
+    rotation: 90,
+    position: { top: "35%", left: "80%" },
+  },
+  {
+    label: "X-",
+    value: "xminus",
+    face: "left",
+    vtkKey: "XMinus",
+    rotation: -90,
+    position: { top: "65%", left: "20%" },
+  },
+];
+
+const hoveredFace = ref(undefined);
+const hybridViewerStore = useHybridViewerStore();
+const cubeContainer = useTemplateRef("cubeContainer");
+
+let genericRenderWindow = undefined;
+let cubeActor = undefined;
+let isInteracting = false;
+
+function initVTK() {
+  if (genericRenderWindow) {
+    return;
+  }
+  genericRenderWindow = vtkGenericRenderWindow({
+    background: [0, 0, 0, 0],
+    listenWindowResize: false,
+  });
+
+  const interactor = genericRenderWindow.getInteractor();
+  interactor.onStartAnimation(() => {
+    isInteracting = true;
+  });
+
+  interactor.onEndAnimation(() => {
+    isInteracting = false;
+  });
+
+  cubeActor = vtkAnnotatedCubeActor();
+  cubeActor.setDefaultStyle({
+    fontFamily: "sans-serif",
+    fontStyle: "bold",
+    faceColor: "rgba(60, 60, 60, 1)",
+    fontColor: "white",
+    edgeColor: "rgba(255, 255, 255, 0.4)",
+    edgeThickness: 0.1,
+    resolution: 400,
+    fontSizeScale: (resolution) => resolution / 4,
+  });
+
+  for (const orientation of orientations) {
+    cubeActor[`set${orientation.vtkKey}FaceProperty`]({
+      text: orientation.label,
+      faceRotation: orientation.rotation,
+    });
+  }
+
+  cubeActor.getProperty().setBackfaceCulling(true);
+
+  const renderer = genericRenderWindow.getRenderer();
+
+  renderer.addActor(cubeActor);
+  renderer.resetCamera();
+}
+
+function syncCubeCamera() {
+  const options = hybridViewerStore.camera_options;
+  if (!genericRenderWindow || isInteracting || !options.position) {
+    return;
+  }
+  const camera = genericRenderWindow.getRenderer().getActiveCamera();
+  applyCameraOptions(camera, options);
+  genericRenderWindow.getRenderer().resetCamera();
+  genericRenderWindow.getRenderWindow().render();
+}
+
+watch(cubeContainer, (newContainer) => {
+  if (!newContainer || !import.meta.client) {
+    return;
+  }
+  initVTK();
+  genericRenderWindow.setContainer(newContainer);
+  const canvas = genericRenderWindow.getApiSpecificRenderWindow().getCanvas();
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
+  canvas.style.background = "transparent";
+  genericRenderWindow.resize();
+  syncCubeCamera();
+});
+
+onBeforeUnmount(() => genericRenderWindow?.delete());
+
+watch(() => hybridViewerStore.camera_options, syncCubeCamera, { deep: true });
+
+watch(hoveredFace, (newFace, oldFace) => {
+  if (!cubeActor) {
+    return;
+  }
+  function updateFace(face, active) {
+    const config = orientations.find((orientation) => orientation.face === face);
+    if (config) {
+      cubeActor[`set${config.vtkKey}FaceProperty`]({
+        faceColor: active ? "rgba(255, 255, 255, 0.95)" : "rgba(60, 60, 60, 1)",
+        fontColor: active ? "black" : "white",
+      });
+    }
+  }
+
+  updateFace(oldFace, false);
+  updateFace(newFace, true);
+  genericRenderWindow.getRenderWindow().render();
+});
+</script>
+
+<template>
+  <ToolPanel
+    v-if="panel"
+    v-model="show"
+    title="Camera Orientations"
+    :width="width"
+    style="z-index: 2; top: 90px; right: 55px"
+  >
+    <div
+      class="pa-0 overflow-hidden position-relative"
+      style="
+        height: 320px;
+        background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 70%);
+      "
+    >
+      <svg class="position-absolute fill-height w-100" style="pointer-events: none">
+        <line
+          v-for="orientation in orientations"
+          :key="orientation.value"
+          x1="50%"
+          y1="50%"
+          :x2="orientation.position.left"
+          :y2="orientation.position.top"
+          :stroke="hoveredFace === orientation.face ? 'white' : 'rgba(255,255,255,0.1)'"
+          :stroke-width="hoveredFace === orientation.face ? 2 : 1"
+          class="transition-all"
+          style="filter: drop-shadow(0 0 3px white)"
+        />
+      </svg>
+
+      <div
+        class="position-absolute d-flex align-center justify-center"
+        style="top: 50%; left: 50%; transform: translate(-50%, -50%)"
+      >
+        <div ref="cubeContainer" style="width: 100px; height: 100px; pointer-events: none" />
+      </div>
+
+      <v-btn
+        v-for="orientation in orientations"
+        :key="orientation.value"
+        icon
+        variant="tonal"
+        size="44"
+        class="satellite-node position-absolute"
+        :style="orientation.position"
+        @mouseenter="hoveredFace = orientation.face"
+        @mouseleave="hoveredFace = undefined"
+        @click.stop="emit('select', orientation.value)"
+      >
+        <v-tooltip activator="parent" location="top">{{ orientation.value }} View</v-tooltip>
+        <span class="text-caption font-weight-black">{{ orientation.label }}</span>
+      </v-btn>
+    </div>
+  </ToolPanel>
+
+  <v-list v-else density="compact" class="pa-4 orientation-menu rounded-lg" elevation="8">
+    <div class="d-flex flex-column align-center" style="gap: 16px">
+      <div
+        class="d-flex align-center justify-center"
+        style="width: 60px; height: 60px; border-radius: 8px; overflow: hidden"
+      >
+        <div ref="cubeContainer" class="w-100 h-100" style="pointer-events: none" />
+      </div>
+      <v-divider class="w-100" />
+      <div class="d-flex flex-wrap justify-center" style="max-width: 140px">
+        <v-btn
+          v-for="orientation in orientations"
+          :key="orientation.value"
+          icon
+          size="32"
+          variant="text"
+          class="ma-1"
+          @mouseenter="hoveredFace = orientation.face"
+          @mouseleave="hoveredFace = undefined"
+          @click.stop="emit('select', orientation.value)"
+        >
+          <v-tooltip activator="parent" location="top">{{ orientation.label }}</v-tooltip>
+          <span class="text-caption font-weight-black">{{ orientation.label }}</span>
+        </v-btn>
+      </div>
+    </div>
+  </v-list>
+</template>
+
+<style scoped>
+.satellite-node {
+  transform: translate(-50%, -50%);
+  background: rgba(0, 0, 0, 0.2) !important;
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  transition: all 0.2s ease;
+}
+.satellite-node:hover {
+  transform: translate(-50%, -50%) scale(1.1);
+  border-color: white !important;
+  background: rgba(255, 255, 255, 0.1) !important;
+}
+.transition-all {
+  transition: all 0.4s ease;
+}
+.orientation-menu {
+  min-width: 180px;
+  background: rgb(var(--v-theme-surface)) !important;
+}
+</style>

package/app/components/HybridRenderingView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import VeaseViewToolbar from "@ogw_front/components/VeaseViewToolbar";
+import ViewToolbar from "@ogw_front/components/ViewToolbar";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -47,7 +47,7 @@ function debounce(func, wait) {
 <template>
   <ClientOnly>
     <div data-testid="hybridViewer" class="fill-height" style="position: relative; height: 100%">
-      <VeaseViewToolbar />
+      <ViewToolbar />
       <slot name="ui"></slot>
       <v-col
         class="pa-0"

package/app/components/Screenshot.vue

@@ -1,15 +1,13 @@
 <script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+import ToolPanel from "@ogw_front/components/ToolPanel";
 import fileDownload from "js-file-download";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
 import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-const emit = defineEmits(["close"]);
+const show = defineModel({ type: Boolean, default: false });
 
-const { show_dialog, width } = defineProps({
-  show_dialog: { type: Boolean, required: true },
-  width: { type: Number, required: false, default: 400 },
+const { width } = defineProps({
+  width: { type: Number, default: 400 },
 });
 
 const output_extensions =
@@ -33,7 +31,7 @@ async function takeScreenshot() {
       },
     },
   );
-  emit("close");
+  show.value = false;
 }
 
 watch(output_extension, (value) => {
@@ -42,58 +40,41 @@ watch(output_extension, (value) => {
   }
 });
 </script>
+
 <template>
-  <GlassCard
-    v-if="show_dialog"
-    @click.stop
+  <ToolPanel
+    v-model="show"
     title="Take a screenshot"
     :width="width"
-    :ripple="false"
-    variant="panel"
-    padding="pa-0"
-    class="position-absolute elevation-24"
-    style="z-index: 2; top: 90px; right: 55px"
+    close-label="Cancel"
+    action-label="Screenshot"
+    @action="takeScreenshot"
   >
-    <v-card-text class="pa-5">
-      <v-container>
-        <v-row>
-          <v-col cols="8" class="py-0">
-            <v-text-field v-model="filename" label="File name"></v-text-field>
-          </v-col>
-          <v-col cols="4" class="py-0">
-            <v-select
-              v-model="output_extension"
-              :items="output_extensions"
-              label="Extension"
-              required
-            />
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col cols="12" class="py-0">
-            <v-switch
-              v-model="include_background"
-              :disabled="output_extension !== 'png'"
-              label="Include background"
-              inset
-            ></v-switch>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-card-text>
+    <v-container class="pa-5">
+      <v-row>
+        <v-col cols="8" class="py-0">
+          <v-text-field v-model="filename" label="File name"></v-text-field>
+        </v-col>
+        <v-col cols="4" class="py-0">
+          <v-select
+            v-model="output_extension"
+            :items="output_extensions"
+            label="Extension"
+            required
+          />
+        </v-col>
+      </v-row>
 
-    <template #actions>
-      <v-card-actions class="justify-center pb-4">
-        <v-btn variant="text" color="primary" @click="emit('close')">Close</v-btn>
-        <v-btn
-          variant="outlined"
-          :disabled="!filename || !output_extension"
-          color="primary"
-          @click="takeScreenshot()"
-          >Screenshot</v-btn
-        >
-      </v-card-actions>
-    </template>
-  </GlassCard>
+      <v-row>
+        <v-col cols="12" class="py-0">
+          <v-switch
+            v-model="include_background"
+            :disabled="output_extension !== 'png'"
+            label="Include background"
+            inset
+          ></v-switch>
+        </v-col>
+      </v-row>
+    </v-container>
+  </ToolPanel>
 </template>

package/app/components/ToolPanel.vue

@@ -0,0 +1,62 @@
+<script setup>
+import GlassCard from "@ogw_front/components/GlassCard";
+
+const { title, width, closeLabel, actionLabel } = defineProps({
+  title: { type: String, default: "" },
+  width: { type: Number, default: 400 },
+  closeLabel: { type: String, default: "Close" },
+  actionLabel: { type: String, default: undefined },
+});
+
+const model = defineModel({ type: Boolean, default: false });
+const emit = defineEmits(["action"]);
+
+function close() {
+  model.value = false;
+}
+</script>
+
+<template>
+  <GlassCard
+    v-if="model"
+    v-click-outside="close"
+    :title="title"
+    :width="width"
+    :ripple="false"
+    variant="panel"
+    padding="pa-0"
+    class="position-absolute rounded-xl elevation-24 tool-panel"
+    v-bind="$attrs"
+  >
+    <v-card-text class="pa-0 overflow-hidden position-relative">
+      <slot />
+    </v-card-text>
+
+    <template #actions>
+      <slot name="actions">
+        <v-card-actions class="justify-center pb-6" style="gap: 12px">
+          <v-btn variant="text" size="small" color="white" @click="close">
+            {{ closeLabel }}
+          </v-btn>
+          <v-btn
+            v-if="actionLabel"
+            variant="outlined"
+            size="small"
+            color="white"
+            @click="emit('action')"
+          >
+            {{ actionLabel }}
+          </v-btn>
+        </v-card-actions>
+      </slot>
+    </template>
+  </GlassCard>
+</template>
+
+<style scoped>
+.tool-panel {
+  z-index: 2;
+  top: 90px;
+  right: 55px;
+}
+</style>

package/app/components/ViewToolbar.vue

@@ -2,19 +2,46 @@
 import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 import ActionButton from "@ogw_front/components/ActionButton.vue";
+import CameraOrientation from "@ogw_front/components/CameraOrientation.vue";
 import Screenshot from "@ogw_front/components/Screenshot";
+import ZScaling from "@ogw_front/components/ZScaling";
+
+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 showCameraOrientation = ref(false);
+const showZScaling = ref(false);
 const grid_scale = ref(false);
+const zScale = ref(hybridViewerStore.zScale);
+
+watch(
+  () => hybridViewerStore.zScale,
+  (newVal) => {
+    zScale.value = newVal;
+  },
+);
+
+async function handleZScalingClose() {
+  await hybridViewerStore.setZScaling(zScale.value);
+  showZScaling.value = false;
+}
 
 const camera_options = [
   {
     tooltip: "Reset camera",
     icon: "mdi-cube-scan",
     action: () => {
-      viewerStore.request(schemas.opengeodeweb_viewer.viewer.reset_camera);
+      hybridViewerStore.resetCamera();
+    },
+  },
+  {
+    tooltip: "Camera orientation",
+    icon: "mdi-rotate-3d",
+    action: () => {
+      showCameraOrientation.value = !showCameraOrientation.value;
     },
   },
   {
@@ -34,11 +61,19 @@ const camera_options = [
         {
           response_function: () => {
             grid_scale.value = !grid_scale.value;
+            hybridViewerStore.remoteRender();
           },
         },
       );
     },
   },
+  {
+    tooltip: "Z Scaling Control",
+    icon: "mdi-sort",
+    action: () => {
+      showZScaling.value = !showZScaling.value;
+    },
+  },
 ];
 </script>
 
@@ -47,15 +82,26 @@ const camera_options = [
     <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
       <v-col>
         <ActionButton
-          :tooltip="camera_option.tooltip"
           :icon="camera_option.icon"
+          :tooltip="camera_option.tooltip"
           tooltip-location="left"
-          @click="camera_option.action"
+          @click.stop="camera_option.action"
         />
       </v-col>
     </v-row>
   </v-container>
-  <Screenshot :show_dialog="take_screenshot" @close="take_screenshot = false" />
+  <CameraOrientation
+    v-model:show="showCameraOrientation"
+    panel
+    @select="hybridViewerStore.setCameraOrientation"
+  />
+  <Screenshot v-model="take_screenshot" />
+  <ZScaling
+    v-model:show="showZScaling"
+    v-model="zScale"
+    :width="400"
+    @apply="handleZScalingClose"
+  />
 </template>
 
 <style module>

package/app/components/ZScaling.vue

@@ -1,67 +1,49 @@
 <script setup>
-import GlassCard from "@ogw_front/components/GlassCard";
+import ToolPanel from "@ogw_front/components/ToolPanel";
 
 const zScale = defineModel({ type: Number, default: 1 });
+const show = defineModel("show", { type: Boolean, default: false });
+
 const { width } = defineProps({
   width: { type: Number, default: 400 },
 });
 
-const emit = defineEmits(["close"]);
+const emit = defineEmits(["apply"]);
+
+function apply() {
+  emit("apply");
+  show.value = false;
+}
 </script>
+
 <template>
-  <GlassCard
-    @click.stop
+  <ToolPanel
+    v-model="show"
     title="Z Scaling Control"
     :width="width"
-    :ripple="false"
-    variant="panel"
-    padding="pa-0"
-    class="position-absolute rounded-xl elevation-24"
-    style="z-index: 2; top: 90px; right: 55px"
+    action-label="Apply"
+    @action="apply"
   >
-    <v-card-text class="pa-5">
-      <v-container>
-        <v-row>
-          <v-col cols="12" class="py-2">
-            <v-slider v-model="zScale" :min="1" :max="10" :step="0.2" label="Z Scale" thumb-label />
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col cols="12" class="py-2">
-            <v-text-field
-              v-model.number="zScale"
-              type="number"
-              label="Z Scale Value"
-              outlined
-              dense
-              hide-details
-              step="0.1"
-              :min="1"
-            />
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-card-text>
-
-    <template #actions>
-      <v-card-actions class="justify-center pb-4">
-        <v-btn variant="text" color="white" @click="emit('close')">Close</v-btn>
-        <v-btn variant="outlined" color="white" @click="emit('close')">Apply</v-btn>
-      </v-card-actions>
-    </template>
-  </GlassCard>
+    <v-container class="pa-5">
+      <v-row>
+        <v-col cols="12" class="py-2">
+          <v-slider v-model="zScale" :min="1" :max="10" :step="0.2" label="Z Scale" thumb-label />
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col cols="12" class="py-2">
+          <v-text-field
+            v-model.number="zScale"
+            type="number"
+            label="Z Scale Value"
+            outlined
+            dense
+            hide-details
+            step="0.1"
+            :min="1"
+          />
+        </v-col>
+      </v-row>
+    </v-container>
+  </ToolPanel>
 </template>
-
-<style scoped>
-.z-scaling-menu {
-  position: absolute;
-  z-index: 2;
-  top: 90px;
-  right: 55px;
-  border-radius: 12px !important;
-}
-
-.custom-number-input :deep(.v-input__control) {
-  min-height: 48px;
-}
-</style>

package/app/stores/hybrid_viewer.js

@@ -1,34 +1,32 @@
 import {
+  ORIENTATIONS,
+  animateCamera,
   applyCameraOptions,
   computeAverageBrightness,
   getCameraOptions,
 } from "@ogw_front/utils/hybrid_viewer";
+import { dot } from "@kitware/vtk.js/Common/Core/Math";
 import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
 import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
 import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
 
+import {
+  ACTOR_COLOR,
+  ALIGNMENT_THRESHOLD,
+  BACKGROUND_COLOR,
+  BUMP_MULTIPLIER,
+  EASE_EXPONENT,
+  LONG_ANIMATION_DURATION,
+  SHORT_ANIMATION_DURATION,
+  WHEEL_TIME_OUT_MS,
+} from "@ogw_front/utils/vtk/constants";
+import { Status } from "@ogw_front/utils/status";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-import { Status } from "@ogw_front/utils/status";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-const RGB_MAX = 255;
-const BACKGROUND_GREY_VALUE = 180;
-const ACTOR_DARK_VALUE = 20;
-const BACKGROUND_COLOR = [
-  BACKGROUND_GREY_VALUE / RGB_MAX,
-  BACKGROUND_GREY_VALUE / RGB_MAX,
-  BACKGROUND_GREY_VALUE / RGB_MAX,
-];
-const ACTOR_COLOR = [
-  ACTOR_DARK_VALUE / RGB_MAX,
-  ACTOR_DARK_VALUE / RGB_MAX,
-  ACTOR_DARK_VALUE / RGB_MAX,
-];
-const WHEEL_TIME_OUT_MS = 600;
-
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
@@ -39,6 +37,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const is_moving = ref(false);
   const zScale = ref(1);
   let viewStream = undefined;
+  let imageStyle = undefined;
   const gridActor = undefined;
 
   const latestImage = ref(undefined);
@@ -59,7 +58,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     });
 
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
-    const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
+    imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
     imageStyle.transition = "opacity 0.1s ease-in";
     imageStyle.zIndex = 1;
 
@@ -74,6 +73,12 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       imageStyle.opacity = 1;
     });
 
+    const renderer = genericRenderWindow.value.getRenderer();
+    const camera = renderer.getActiveCamera();
+    camera.onModified(() => {
+      Object.assign(camera_options, getCameraOptions(camera));
+    });
+
     status.value = Status.CREATED;
   }
 
@@ -147,20 +152,50 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     syncRemoteCamera();
   }
 
+  function setCameraOrientation(orientation) {
+    const config = ORIENTATIONS[orientation.toLowerCase()];
+    const renderer = genericRenderWindow.value.getRenderer();
+    const camera = renderer.getActiveCamera();
+    const startState = getCameraOptions(camera);
+
+    applyCameraOptions(camera, {
+      ...config,
+      focal_point: [0, 0, 0],
+    });
+    renderer.resetCamera();
+    const targetState = getCameraOptions(camera);
+
+    applyCameraOptions(camera, startState);
+
+    const alignment = dot(camera.getDirectionOfProjection(), config.position);
+    const duration =
+      alignment > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
+    is_moving.value = true;
+    imageStyle.opacity = 0;
+
+    animateCamera({
+      camera,
+      startState,
+      targetState,
+      duration,
+      bumpMultiplier: BUMP_MULTIPLIER,
+      easeExponent: EASE_EXPONENT,
+      onUpdate: () => genericRenderWindow.value.getRenderWindow().render(),
+      onEnd: () => {
+        is_moving.value = false;
+        syncRemoteCamera();
+      },
+    });
+  }
+
   function syncRemoteCamera() {
     const renderer = genericRenderWindow.value.getRenderer();
     const camera = renderer.getActiveCamera();
-    const params = {
-      camera_options: getCameraOptions(camera),
-    };
+    const params = { camera_options: getCameraOptions(camera) };
     viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, params, {
       response_function: () => {
         remoteRender();
-        for (const key in params.camera_options) {
-          if (Object.hasOwn(params.camera_options, key)) {
-            camera_options[key] = params.camera_options[key];
-          }
-        }
+        Object.assign(camera_options, params.camera_options);
       },
     });
   }
@@ -176,7 +211,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     genericRenderWindow.value.setContainer(container.value.$el);
     const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
     webGLRenderWindow.setUseBackgroundImage(true);
-    const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
+    imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
     imageStyle.transition = "opacity 0.1s ease-in";
     imageStyle.zIndex = 1;
     resize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
@@ -248,36 +283,17 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       return;
     }
     const z_scale = snapshot.zScale;
+    if (typeof z_scale === "number") {
+      await setZScaling(z_scale);
+    }
 
-    function applyCamera() {
-      const { camera_options: snapshot_camera_options } = snapshot;
-      if (!snapshot_camera_options) {
-        return;
-      }
-
+    const { camera_options: snapshot_camera_options } = snapshot;
+    if (snapshot_camera_options) {
       const renderer = genericRenderWindow.value.getRenderer();
-      const camera = renderer.getActiveCamera();
-
-      applyCameraOptions(camera, snapshot_camera_options);
-
+      applyCameraOptions(renderer.getActiveCamera(), snapshot_camera_options);
       genericRenderWindow.value.getRenderWindow().render();
-
-      const payload = {
-        camera_options: getCameraOptions(snapshot_camera_options),
-      };
-      return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, payload, {
-        response_function: () => {
-          remoteRender();
-          Object.assign(camera_options, payload.camera_options);
-        },
-      });
-    }
-
-    if (typeof z_scale === "number") {
-      await setZScaling(z_scale);
-      return await applyCamera();
+      syncRemoteCamera();
     }
-    return await applyCamera();
   }
 
   function clear() {
@@ -304,11 +320,13 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     remoteRender,
     resize,
     resetCamera,
+    setCameraOrientation,
     setContainer,
     zScale,
     clear,
     exportStores,
     importStores,
+    camera_options,
     latestImage,
     getAverageBrightness,
   };

package/app/utils/hybrid_viewer.js

@@ -1,45 +1,42 @@
+import { SHORT_ANIMATION_DURATION } from "@ogw_front/utils/vtk/constants";
 const RGB_MAX = 255;
 const BACKGROUND_GREY_VALUE = 180;
 const SAMPLE_SIZE = 10;
 const TOTAL_CHANNELS = 400;
 const RGBA_CHANNELS = 4;
 
-function getCameraOptions(camera) {
-  if (!camera) {
-    return undefined;
-  }
+const ORIENTATIONS = {
+  zplus: { position: [0, 0, 1], view_up: [0, 1, 0] },
+  zminus: { position: [0, 0, -1], view_up: [0, 1, 0] },
+  yplus: { position: [0, 1, 0], view_up: [0, 0, 1] },
+  yminus: { position: [0, -1, 0], view_up: [0, 0, 1] },
+  xplus: { position: [1, 0, 0], view_up: [0, 0, 1] },
+  xminus: { position: [-1, 0, 0], view_up: [0, 0, 1] },
+};
 
-  if (typeof camera.getFocalPoint !== "function") {
-    return { ...camera };
+function getCameraOptions(camera) {
+  if (!camera?.getFocalPoint) {
+    return camera;
   }
   return {
-    focal_point: [...camera.getFocalPoint()],
-    view_up: [...camera.getViewUp()],
-    position: [...camera.getPosition()],
+    focal_point: [...(camera.getFocalPoint() ?? [])],
+    view_up: [...(camera.getViewUp() ?? [])],
+    position: [...(camera.getPosition() ?? [])],
     view_angle: camera.getViewAngle(),
-    clipping_range: [...camera.getClippingRange()],
+    clipping_range: [...(camera.getClippingRange() ?? [])],
     distance: camera.getDistance(),
   };
 }
 
 function applyCameraOptions(camera, options) {
-  if (!camera || !options) {
-    return;
-  }
-  if (options.focal_point) {
-    camera.setFocalPoint(...options.focal_point);
-  }
-  if (options.view_up) {
-    camera.setViewUp(...options.view_up);
-  }
-  if (options.position) {
-    camera.setPosition(...options.position);
-  }
-  if (options.view_angle) {
-    camera.setViewAngle(options.view_angle);
-  }
-  if (options.clipping_range) {
-    camera.setClippingRange(...options.clipping_range);
+  if (camera?.set && options) {
+    camera.set({
+      focalPoint: options.focal_point,
+      viewUp: options.view_up,
+      position: options.position,
+      viewAngle: options.view_angle,
+      clippingRange: options.clipping_range,
+    });
   }
 }
 
@@ -98,4 +95,55 @@ function computeAverageBrightness(rect, options) {
   }
 }
 
-export { applyCameraOptions, computeAverageBrightness, getCameraOptions };
+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);
+}
+
+export {
+  ORIENTATIONS,
+  animateCamera,
+  applyCameraOptions,
+  computeAverageBrightness,
+  getCameraOptions,
+};

package/app/utils/vtk/constants.js

@@ -0,0 +1,31 @@
+const RGB_MAX = 255;
+const BACKGROUND_GREY_VALUE = 180;
+const ACTOR_DARK_VALUE = 20;
+
+const BACKGROUND_COLOR = [
+  BACKGROUND_GREY_VALUE / RGB_MAX,
+  BACKGROUND_GREY_VALUE / RGB_MAX,
+  BACKGROUND_GREY_VALUE / RGB_MAX,
+];
+const ACTOR_COLOR = [
+  ACTOR_DARK_VALUE / RGB_MAX,
+  ACTOR_DARK_VALUE / RGB_MAX,
+  ACTOR_DARK_VALUE / RGB_MAX,
+];
+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;
+
+export {
+  BACKGROUND_COLOR,
+  ACTOR_COLOR,
+  WHEEL_TIME_OUT_MS,
+  BUMP_MULTIPLIER,
+  ALIGNMENT_THRESHOLD,
+  LONG_ANIMATION_DURATION,
+  SHORT_ANIMATION_DURATION,
+  EASE_EXPONENT,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.14.2-rc.3",
+  "version": "10.15.0",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -34,8 +34,8 @@
     "build": ""
   },
   "dependencies": {
-    "@geode/opengeodeweb-back": "next",
-    "@geode/opengeodeweb-viewer": "next",
+    "@geode/opengeodeweb-back": "latest",
+    "@geode/opengeodeweb-viewer": "latest",
     "@google-cloud/run": "3.2.0",
     "@kitware/vtk.js": "33.3.0",
     "@mdi/font": "7.4.47",

package/app/components/VeaseViewToolbar.vue

@@ -1,95 +0,0 @@
-<script setup>
-import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-import ActionButton from "@ogw_front/components/ActionButton.vue";
-import Screenshot from "@ogw_front/components/Screenshot";
-import ZScaling from "@ogw_front/components/ZScaling";
-
-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 showZScaling = ref(false);
-const grid_scale = ref(false);
-const zScale = ref(hybridViewerStore.zScale);
-
-watch(
-  () => hybridViewerStore.zScale,
-  (newVal) => {
-    zScale.value = newVal;
-  },
-);
-
-async function handleZScalingClose() {
-  await hybridViewerStore.setZScaling(zScale.value);
-  showZScaling.value = false;
-}
-
-const camera_options = [
-  {
-    tooltip: "Reset camera",
-    icon: "mdi-cube-scan",
-    action: () => {
-      hybridViewerStore.resetCamera();
-    },
-  },
-  {
-    tooltip: "Take a screenshot",
-    icon: "mdi-camera",
-    action: () => {
-      take_screenshot.value = !take_screenshot.value;
-    },
-  },
-  {
-    tooltip: "Toggle grid scale",
-    icon: "mdi-ruler-square",
-    action: () => {
-      viewerStore.request(
-        schemas.opengeodeweb_viewer.viewer.grid_scale,
-        { visibility: !grid_scale.value },
-        {
-          response_function: () => {
-            grid_scale.value = !grid_scale.value;
-            hybridViewerStore.remoteRender();
-          },
-        },
-      );
-    },
-  },
-  {
-    tooltip: "Z Scaling Control",
-    icon: "mdi-sort",
-    action: () => {
-      showZScaling.value = !showZScaling.value;
-    },
-  },
-];
-</script>
-
-<template>
-  <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
-    <v-row v-for="camera_option in camera_options" :key="camera_option.icon" dense>
-      <v-col>
-        <ActionButton
-          :icon="camera_option.icon"
-          :tooltip="camera_option.tooltip"
-          @click.stop="camera_option.action"
-        />
-      </v-col>
-    </v-row>
-  </v-container>
-  <Screenshot :show_dialog="take_screenshot" @close="take_screenshot = false" />
-  <ZScaling v-if="showZScaling" v-model="zScale" :width="400" @close="handleZScalingClose" />
-</template>
-
-<style module>
-.floatToolbar {
-  position: absolute;
-  z-index: 2;
-  right: 20px;
-  top: 20px;
-  background-color: rgba(0, 0, 0, 0);
-}
-</style>