From af49d6dc93c37521bca579dbeee4f9835312eb67 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 22 Apr 2026 16:09:32 +0200
Subject: [PATCH 1/6] v0

---
 app/components/CameraOrientation.vue | 31 +++++++++++++++++++++++
 app/components/VeaseViewToolbar.vue  | 37 +++++++++++++++++++++++++++-
 app/components/ViewToolbar.vue       | 22 +++++++++++++++++
 app/stores/hybrid_viewer.js          | 19 ++++++++++++++
 4 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 app/components/CameraOrientation.vue

diff --git a/app/components/CameraOrientation.vue b/app/components/CameraOrientation.vue
new file mode 100644
index 00000000..7374f6df
--- /dev/null
+++ b/app/components/CameraOrientation.vue
@@ -0,0 +1,31 @@
+<script setup>
+import GlassCard from "@ogw_front/components/GlassCard.vue";
+
+const orientations = [
+  { direction: "top", icon: "mdi-chevron-up", tooltip: "Top" },
+  { direction: "bottom", icon: "mdi-chevron-down", tooltip: "Bottom" },
+  { direction: "north", icon: "mdi-chevron-left", tooltip: "North" },
+  { direction: "south", icon: "mdi-chevron-right", tooltip: "South" },
+  { direction: "east", icon: "mdi-chevron-left", tooltip: "East" },
+  { direction: "west", icon: "mdi-chevron-right", tooltip: "West" },
+];
+
+const emit = defineEmits(["setOrientation"]);
+
+function setOrientation(direction) {
+  emit("setOrientation", direction);
+}
+</script>
+
+<template>
+  <GlassCard padding="pa-2">
+    <v-row dense>
+      <v-col v-for="orientation in orientations" :key="orientation.direction" cols="4">
+        <v-btn icon variant="text" @click="setOrientation(orientation.direction)">
+          <v-icon>{{ orientation.icon }}</v-icon>
+          <v-tooltip activator="parent" location="top">{{ orientation.tooltip }}</v-tooltip>
+        </v-btn>
+      </v-col>
+    </v-row>
+  </GlassCard>
+</template>
diff --git a/app/components/VeaseViewToolbar.vue b/app/components/VeaseViewToolbar.vue
index 195094e2..742a7508 100644
--- a/app/components/VeaseViewToolbar.vue
+++ b/app/components/VeaseViewToolbar.vue
@@ -2,6 +2,7 @@
 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";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ZScaling from "@ogw_front/components/ZScaling";
 
@@ -32,9 +33,18 @@ const camera_options = [
     tooltip: "Reset camera",
     icon: "mdi-cube-scan",
     action: () => {
-      hybridViewerStore.resetCamera();
+      viewerStore.request(schemas.opengeodeweb_viewer.viewer.reset_camera, {
+        response_function: (response) => {
+          hybridViewerStore.updateLocalCamera(response);
+        },
+      });
     },
   },
+  {
+    tooltip: "Camera orientation",
+    icon: "mdi-compass-outline",
+    menu: true,
+  },
   {
     tooltip: "Take a screenshot",
     icon: "mdi-camera",
@@ -66,13 +76,38 @@ const camera_options = [
     },
   },
 ];
+
+function setOrientation(direction) {
+  viewerStore.request(
+    schemas.opengeodeweb_viewer.viewer.set_camera_orientation,
+    { direction },
+    {
+      response_function: (response) => {
+        hybridViewerStore.updateLocalCamera(response);
+        hybridViewerStore.remoteRender();
+      },
+    },
+  );
+}
 </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>
+        <v-menu v-if="camera_option.menu" location="left" :close-on-content-click="false">
+          <template #activator="{ props }">
+            <ActionButton
+              v-bind="props"
+              :tooltip="camera_option.tooltip"
+              :icon="camera_option.icon"
+              tooltip-location="left"
+            />
+          </template>
+          <CameraOrientation @set-orientation="setOrientation" />
+        </v-menu>
         <ActionButton
+          v-else
           :icon="camera_option.icon"
           :tooltip="camera_option.tooltip"
           @click.stop="camera_option.action"
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index ed5811f7..00e60660 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -2,6 +2,7 @@
 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";
 import Screenshot from "@ogw_front/components/Screenshot";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -17,6 +18,11 @@ const camera_options = [
       viewerStore.request(schemas.opengeodeweb_viewer.viewer.reset_camera);
     },
   },
+  {
+    tooltip: "Camera orientation",
+    icon: "mdi-axis-arrow",
+    menu: true,
+  },
   {
     tooltip: "Take a screenshot",
     icon: "mdi-camera",
@@ -40,13 +46,29 @@ const camera_options = [
     },
   },
 ];
+
+function setOrientation(direction) {
+  viewerStore.request(schemas.opengeodeweb_viewer.viewer.set_camera_orientation, { direction });
+}
 </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>
+        <v-menu v-if="camera_option.menu" location="left" :close-on-content-click="false">
+          <template #activator="{ props }">
+            <ActionButton
+              v-bind="props"
+              :tooltip="camera_option.tooltip"
+              :icon="camera_option.icon"
+              tooltip-location="left"
+            />
+          </template>
+          <CameraOrientation @set-orientation="setOrientation" />
+        </v-menu>
         <ActionButton
+          v-else
           :tooltip="camera_option.tooltip"
           :icon="camera_option.icon"
           tooltip-location="left"
diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index 40bc1982..dc7e3d90 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -161,6 +161,24 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     });
   }
 
+  function updateLocalCamera(snapshot_camera_options) {
+    if (!snapshot_camera_options) {
+      return;
+    }
+
+    const renderer = genericRenderWindow.value.getRenderer();
+    const camera = renderer.getActiveCamera();
+
+    camera.setFocalPoint(...snapshot_camera_options.focal_point);
+    camera.setViewUp(...snapshot_camera_options.view_up);
+    camera.setPosition(...snapshot_camera_options.position);
+    camera.setViewAngle(snapshot_camera_options.view_angle);
+    camera.setClippingRange(...snapshot_camera_options.clipping_range);
+
+    genericRenderWindow.value.getRenderWindow().render();
+    Object.assign(camera_options, snapshot_camera_options);
+  }
+
   function remoteRender() {
     return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.render);
   }
@@ -307,6 +325,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     setVisibility,
     setZScaling,
     syncRemoteCamera,
+    updateLocalCamera,
     initHybridViewer,
     remoteRender,
     resize,

From 3505fb067177d02278b2d08b59b2ac2fe2361bab Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 24 Apr 2026 14:44:49 +0200
Subject: [PATCH 2/6] feat(camera): implementation of camera orientation
 presets using vtk.js

---
 app/components/VeaseViewToolbar.vue           | 55 +++++---------
 .../Viewer/CameraOrientationButtons.vue       | 75 +++++++++++++++++++
 app/stores/hybrid_viewer.js                   | 33 ++++++--
 3 files changed, 120 insertions(+), 43 deletions(-)
 create mode 100644 app/components/Viewer/CameraOrientationButtons.vue

diff --git a/app/components/VeaseViewToolbar.vue b/app/components/VeaseViewToolbar.vue
index 742a7508..769b76b6 100644
--- a/app/components/VeaseViewToolbar.vue
+++ b/app/components/VeaseViewToolbar.vue
@@ -2,7 +2,7 @@
 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";
+import CameraOrientationButtons from "@ogw_front/components/Viewer/CameraOrientationButtons.vue";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ZScaling from "@ogw_front/components/ZScaling";
 
@@ -33,18 +33,9 @@ const camera_options = [
     tooltip: "Reset camera",
     icon: "mdi-cube-scan",
     action: () => {
-      viewerStore.request(schemas.opengeodeweb_viewer.viewer.reset_camera, {
-        response_function: (response) => {
-          hybridViewerStore.updateLocalCamera(response);
-        },
-      });
+      hybridViewerStore.resetCamera();
     },
   },
-  {
-    tooltip: "Camera orientation",
-    icon: "mdi-compass-outline",
-    menu: true,
-  },
   {
     tooltip: "Take a screenshot",
     icon: "mdi-camera",
@@ -76,38 +67,28 @@ const camera_options = [
     },
   },
 ];
-
-function setOrientation(direction) {
-  viewerStore.request(
-    schemas.opengeodeweb_viewer.viewer.set_camera_orientation,
-    { direction },
-    {
-      response_function: (response) => {
-        hybridViewerStore.updateLocalCamera(response);
-        hybridViewerStore.remoteRender();
-      },
-    },
-  );
-}
 </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>
+    <!-- First button: Reset camera -->
+    <v-row dense>
+      <v-col>
+        <ActionButton
+          :icon="camera_options[0].icon"
+          :tooltip="camera_options[0].tooltip"
+          @click.stop="camera_options[0].action"
+        />
+      </v-col>
+    </v-row>
+
+    <!-- Second: Camera Orientations Menu -->
+    <CameraOrientationButtons />
+
+    <!-- Remaining options -->
+    <v-row v-for="camera_option in camera_options.slice(1)" :key="camera_option.icon" dense>
       <v-col>
-        <v-menu v-if="camera_option.menu" location="left" :close-on-content-click="false">
-          <template #activator="{ props }">
-            <ActionButton
-              v-bind="props"
-              :tooltip="camera_option.tooltip"
-              :icon="camera_option.icon"
-              tooltip-location="left"
-            />
-          </template>
-          <CameraOrientation @set-orientation="setOrientation" />
-        </v-menu>
         <ActionButton
-          v-else
           :icon="camera_option.icon"
           :tooltip="camera_option.tooltip"
           @click.stop="camera_option.action"
diff --git a/app/components/Viewer/CameraOrientationButtons.vue b/app/components/Viewer/CameraOrientationButtons.vue
new file mode 100644
index 00000000..ccadf776
--- /dev/null
+++ b/app/components/Viewer/CameraOrientationButtons.vue
@@ -0,0 +1,75 @@
+<script setup>
+import ActionButton from "@ogw_front/components/ActionButton.vue";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const hybridViewerStore = useHybridViewerStore();
+
+const orientations = [
+  { label: "Top", value: "top", tooltip: "Top View (+Z)", icon: "mdi-arrow-down-bold-box" },
+  {
+    label: "Bottom",
+    value: "bottom",
+    tooltip: "Bottom View (-Z)",
+    icon: "mdi-arrow-up-bold-box",
+  },
+  { label: "North", value: "north", tooltip: "North View (+Y)", icon: "mdi-arrow-up-bold" },
+  { label: "South", value: "south", tooltip: "South View (-Y)", icon: "mdi-arrow-down-bold" },
+  { label: "East", value: "east", tooltip: "East View (+X)", icon: "mdi-arrow-right-bold" },
+  { label: "West", value: "west", tooltip: "West View (-X)", icon: "mdi-arrow-left-bold" },
+];
+
+function setOrientation(value) {
+  console.log("Orientation button clicked:", value);
+  hybridViewerStore.setCameraOrientation(value);
+}
+</script>
+
+<template>
+  <v-menu
+    location="left center"
+    transition="scale-transition"
+    :close-on-content-click="true"
+    offset="15"
+  >
+    <template #activator="{ props }">
+      <v-row dense>
+        <v-col>
+          <ActionButton
+            v-bind="props"
+            icon="mdi-axis-arrow"
+            tooltip="Camera Orientations"
+          />
+        </v-col>
+      </v-row>
+    </template>
+
+    <v-list density="compact" class="pa-2 orientation-menu" elevation="8" rounded="lg">
+      <v-row dense no-gutters>
+        <v-col v-for="opt in orientations" :key="opt.value" cols="4" class="pa-1">
+          <v-tooltip location="top">
+            <template #activator="{ props }">
+              <v-btn
+                v-bind="props"
+                icon
+                size="small"
+                variant="flat"
+                color="secondary"
+                @click.stop="setOrientation(opt.value)"
+              >
+                <v-icon size="20">{{ opt.icon }}</v-icon>
+              </v-btn>
+            </template>
+            <span>{{ opt.tooltip }}</span>
+          </v-tooltip>
+        </v-col>
+      </v-row>
+    </v-list>
+  </v-menu>
+</template>
+
+<style scoped>
+.orientation-menu {
+  min-width: 140px;
+  background-color: rgb(var(--v-theme-surface)) !important;
+}
+</style>
diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index dc7e3d90..4ed5cc34 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -135,6 +135,32 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     syncRemoteCamera();
   }
 
+  const ORIENTATIONS = {
+    top: { direction: [0, 0, 1], viewUp: [0, 1, 0] },
+    bottom: { direction: [0, 0, -1], viewUp: [0, 1, 0] },
+    north: { direction: [0, 1, 0], viewUp: [0, 0, 1] },
+    south: { direction: [0, -1, 0], viewUp: [0, 0, 1] },
+    east: { direction: [1, 0, 0], viewUp: [0, 0, 1] },
+    west: { direction: [-1, 0, 0], viewUp: [0, 0, 1] },
+  };
+
+  function setCameraOrientation(orientation) {
+    const config = ORIENTATIONS[orientation];
+    if (!config || !genericRenderWindow.value) {
+      return;
+    }
+    const renderer = genericRenderWindow.value.getRenderer();
+    const camera = renderer.getActiveCamera();
+    camera.set({
+      position: config.direction,
+      viewUp: config.viewUp,
+      focalPoint: [0, 0, 0],
+    });
+    renderer.resetCamera();
+    genericRenderWindow.value.getRenderWindow().render();
+    syncRemoteCamera();
+  }
+
   function syncRemoteCamera() {
     console.log("syncRemoteCamera");
     const renderer = genericRenderWindow.value.getRenderer();
@@ -212,7 +238,6 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
         syncRemoteCamera();
       },
     });
-
     let wheelEventEndTimeout = undefined;
     useEventListener(container, "wheel", () => {
       is_moving.value = true;
@@ -269,18 +294,14 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       if (!snapshot_camera_options) {
         return;
       }
-
       const renderer = genericRenderWindow.value.getRenderer();
       const camera = renderer.getActiveCamera();
-
       camera.setFocalPoint(...snapshot_camera_options.focal_point);
       camera.setViewUp(...snapshot_camera_options.view_up);
       camera.setPosition(...snapshot_camera_options.position);
       camera.setViewAngle(snapshot_camera_options.view_angle);
       camera.setClippingRange(...snapshot_camera_options.clipping_range);
-
       genericRenderWindow.value.getRenderWindow().render();
-
       const payload = {
         camera_options: {
           focal_point: [...snapshot_camera_options.focal_point],
@@ -297,7 +318,6 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
         },
       });
     }
-
     if (typeof z_scale === "number") {
       await setZScaling(z_scale);
       return await applyCamera();
@@ -330,6 +350,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     remoteRender,
     resize,
     resetCamera,
+    setCameraOrientation,
     setContainer,
     zScale,
     clear,

From 9e8466ec11781206f0794a7290c8d00f57640c86 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Fri, 24 Apr 2026 12:45:49 +0000
Subject: [PATCH 3/6] Apply prepare changes

---
 app/components/Viewer/CameraOrientationButtons.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/components/Viewer/CameraOrientationButtons.vue b/app/components/Viewer/CameraOrientationButtons.vue
index ccadf776..febbc1a9 100644
--- a/app/components/Viewer/CameraOrientationButtons.vue
+++ b/app/components/Viewer/CameraOrientationButtons.vue
@@ -34,11 +34,7 @@ function setOrientation(value) {
     <template #activator="{ props }">
       <v-row dense>
         <v-col>
-          <ActionButton
-            v-bind="props"
-            icon="mdi-axis-arrow"
-            tooltip="Camera Orientations"
-          />
+          <ActionButton v-bind="props" icon="mdi-axis-arrow" tooltip="Camera Orientations" />
         </v-col>
       </v-row>
     </template>

From 0e63baecd59dc5287ac5c3befb5cd8ab4aa7cc4a Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 24 Apr 2026 16:36:02 +0200
Subject: [PATCH 4/6] icons

---
 .../Viewer/CameraOrientationButtons.vue       | 65 +++++++++++++------
 1 file changed, 44 insertions(+), 21 deletions(-)

diff --git a/app/components/Viewer/CameraOrientationButtons.vue b/app/components/Viewer/CameraOrientationButtons.vue
index ccadf776..a4e75491 100644
--- a/app/components/Viewer/CameraOrientationButtons.vue
+++ b/app/components/Viewer/CameraOrientationButtons.vue
@@ -5,21 +5,15 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 const hybridViewerStore = useHybridViewerStore();
 
 const orientations = [
-  { label: "Top", value: "top", tooltip: "Top View (+Z)", icon: "mdi-arrow-down-bold-box" },
-  {
-    label: "Bottom",
-    value: "bottom",
-    tooltip: "Bottom View (-Z)",
-    icon: "mdi-arrow-up-bold-box",
-  },
-  { label: "North", value: "north", tooltip: "North View (+Y)", icon: "mdi-arrow-up-bold" },
-  { label: "South", value: "south", tooltip: "South View (-Y)", icon: "mdi-arrow-down-bold" },
-  { label: "East", value: "east", tooltip: "East View (+X)", icon: "mdi-arrow-right-bold" },
-  { label: "West", value: "west", tooltip: "West View (-X)", icon: "mdi-arrow-left-bold" },
+  { label: "Top", value: "top", tooltip: "Top View (+Z)", icon: "mdi-axis-z-arrow" },
+  { label: "Bot", value: "bottom", tooltip: "Bottom View (-Z)", icon: "mdi-axis-z-arrow" },
+  { label: "N", value: "north", tooltip: "North View (+Y)", icon: "mdi-axis-y-arrow" },
+  { label: "S", value: "south", tooltip: "South View (-Y)", icon: "mdi-axis-y-arrow" },
+  { label: "E", value: "east", tooltip: "East View (+X)", icon: "mdi-axis-x-arrow" },
+  { label: "W", value: "west", tooltip: "West View (-X)", icon: "mdi-axis-x-arrow" },
 ];
 
 function setOrientation(value) {
-  console.log("Orientation button clicked:", value);
   hybridViewerStore.setCameraOrientation(value);
 }
 </script>
@@ -34,11 +28,7 @@ function setOrientation(value) {
     <template #activator="{ props }">
       <v-row dense>
         <v-col>
-          <ActionButton
-            v-bind="props"
-            icon="mdi-axis-arrow"
-            tooltip="Camera Orientations"
-          />
+          <ActionButton v-bind="props" icon="mdi-axis-arrow" tooltip="Camera Orientations" />
         </v-col>
       </v-row>
     </template>
@@ -51,12 +41,27 @@ function setOrientation(value) {
               <v-btn
                 v-bind="props"
                 icon
-                size="small"
+                size="42"
                 variant="flat"
-                color="secondary"
+                class="orientation-btn"
                 @click.stop="setOrientation(opt.value)"
               >
-                <v-icon size="20">{{ opt.icon }}</v-icon>
+                <div class="d-flex flex-column align-center justify-center" style="gap: 2px">
+                  <v-icon
+                    size="18"
+                    :style="opt.value === 'bottom' ? 'transform: rotate(180deg)' : ''"
+                  >
+                    {{ opt.icon }}
+                  </v-icon>
+                  <span
+                    :class="[
+                      'text-label',
+                      opt.label.length > 1 ? 'text-label-condensed' : '',
+                    ]"
+                  >
+                    {{ opt.label }}
+                  </span>
+                </div>
               </v-btn>
             </template>
             <span>{{ opt.tooltip }}</span>
@@ -69,7 +74,25 @@ function setOrientation(value) {
 
 <style scoped>
 .orientation-menu {
-  min-width: 140px;
+  min-width: 160px;
   background-color: rgb(var(--v-theme-surface)) !important;
 }
+
+.orientation-btn {
+  background-color: rgb(var(--v-theme-surface)) !important;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  border-radius: 50%;
+}
+
+.text-label {
+  font-size: 0.65rem !important;
+  font-weight: 900;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.text-label-condensed {
+  font-size: 0.55rem !important;
+  letter-spacing: -0.8px !important;
+}
 </style>

From 7abc39a6456473c9cff01e58606b1720245b26b3 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Fri, 24 Apr 2026 14:36:51 +0000
Subject: [PATCH 5/6] Apply prepare changes

---
 app/components/Viewer/CameraOrientationButtons.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/app/components/Viewer/CameraOrientationButtons.vue b/app/components/Viewer/CameraOrientationButtons.vue
index a4e75491..6d0ab952 100644
--- a/app/components/Viewer/CameraOrientationButtons.vue
+++ b/app/components/Viewer/CameraOrientationButtons.vue
@@ -53,12 +53,7 @@ function setOrientation(value) {
                   >
                     {{ opt.icon }}
                   </v-icon>
-                  <span
-                    :class="[
-                      'text-label',
-                      opt.label.length > 1 ? 'text-label-condensed' : '',
-                    ]"
-                  >
+                  <span :class="['text-label', opt.label.length > 1 ? 'text-label-condensed' : '']">
                     {{ opt.label }}
                   </span>
                 </div>

From 8c40515e957e88edd9d2e69a24de1c75eeb23598 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 24 Apr 2026 17:02:44 +0200
Subject: [PATCH 6/6] refacto getCameraState & setCameraState

---
 app/stores/hybrid_viewer.js | 135 +++++++++++++++---------------------
 1 file changed, 57 insertions(+), 78 deletions(-)

diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index 4ed5cc34..fdf3955f 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -25,6 +25,39 @@ const ACTOR_COLOR = [
 ];
 const WHEEL_TIME_OUT_MS = 600;
 
+const ORIENTATIONS = {
+  top: { direction: [0, 0, 1], viewUp: [0, 1, 0] },
+  bottom: { direction: [0, 0, -1], viewUp: [0, 1, 0] },
+  north: { direction: [0, 1, 0], viewUp: [0, 0, 1] },
+  south: { direction: [0, -1, 0], viewUp: [0, 0, 1] },
+  east: { direction: [1, 0, 0], viewUp: [0, 0, 1] },
+  west: { direction: [-1, 0, 0], viewUp: [0, 0, 1] },
+};
+
+function getCameraState(camera) {
+  return {
+    focal_point: [...camera.getFocalPoint()],
+    view_up: [...camera.getViewUp()],
+    position: [...camera.getPosition()],
+    view_angle: camera.getViewAngle(),
+    clipping_range: [...camera.getClippingRange()],
+    distance: camera.getDistance(),
+  };
+}
+
+function setCameraState(camera, state) {
+  if (!state) {
+    return;
+  }
+  camera.set({
+    focalPoint: state.focal_point,
+    viewUp: state.view_up,
+    position: state.position,
+    viewAngle: state.view_angle,
+    clippingRange: state.clipping_range,
+  });
+}
+
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
@@ -135,23 +168,13 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     syncRemoteCamera();
   }
 
-  const ORIENTATIONS = {
-    top: { direction: [0, 0, 1], viewUp: [0, 1, 0] },
-    bottom: { direction: [0, 0, -1], viewUp: [0, 1, 0] },
-    north: { direction: [0, 1, 0], viewUp: [0, 0, 1] },
-    south: { direction: [0, -1, 0], viewUp: [0, 0, 1] },
-    east: { direction: [1, 0, 0], viewUp: [0, 0, 1] },
-    west: { direction: [-1, 0, 0], viewUp: [0, 0, 1] },
-  };
-
   function setCameraOrientation(orientation) {
     const config = ORIENTATIONS[orientation];
     if (!config || !genericRenderWindow.value) {
       return;
     }
     const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
-    camera.set({
+    renderer.getActiveCamera().set({
       position: config.direction,
       viewUp: config.viewUp,
       focalPoint: [0, 0, 0],
@@ -162,27 +185,13 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   }
 
   function syncRemoteCamera() {
-    console.log("syncRemoteCamera");
     const renderer = genericRenderWindow.value.getRenderer();
     const camera = renderer.getActiveCamera();
-    const params = {
-      camera_options: {
-        focal_point: [...camera.getFocalPoint()],
-        view_up: [...camera.getViewUp()],
-        position: [...camera.getPosition()],
-        view_angle: camera.getViewAngle(),
-        clipping_range: [...camera.getClippingRange()],
-        distance: camera.getDistance(),
-      },
-    };
+    const params = { camera_options: getCameraState(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);
       },
     });
   }
@@ -191,16 +200,8 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     if (!snapshot_camera_options) {
       return;
     }
-
     const renderer = genericRenderWindow.value.getRenderer();
-    const camera = renderer.getActiveCamera();
-
-    camera.setFocalPoint(...snapshot_camera_options.focal_point);
-    camera.setViewUp(...snapshot_camera_options.view_up);
-    camera.setPosition(...snapshot_camera_options.position);
-    camera.setViewAngle(snapshot_camera_options.view_angle);
-    camera.setClippingRange(...snapshot_camera_options.clipping_range);
-
+    setCameraState(renderer.getActiveCamera(), snapshot_camera_options);
     genericRenderWindow.value.getRenderWindow().render();
     Object.assign(camera_options, snapshot_camera_options);
   }
@@ -238,6 +239,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
         syncRemoteCamera();
       },
     });
+
     let wheelEventEndTimeout = undefined;
     useEventListener(container, "wheel", () => {
       is_moving.value = true;
@@ -269,16 +271,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   function exportStores() {
     const renderer = genericRenderWindow.value.getRenderer();
     const camera = renderer.getActiveCamera();
-    const cameraSnapshot = camera
-      ? {
-          focal_point: [...camera.getFocalPoint()],
-          view_up: [...camera.getViewUp()],
-          position: [...camera.getPosition()],
-          view_angle: camera.getViewAngle(),
-          clipping_range: [...camera.getClippingRange()],
-          distance: camera.getDistance(),
-        }
-      : camera_options;
+    const cameraSnapshot = camera ? getCameraState(camera) : camera_options;
     return { zScale: zScale.value, camera_options: cameraSnapshot };
   }
 
@@ -288,41 +281,27 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
       return;
     }
     const z_scale = snapshot.zScale;
-
-    function applyCamera() {
-      const { camera_options: snapshot_camera_options } = snapshot;
-      if (!snapshot_camera_options) {
-        return;
-      }
-      const renderer = genericRenderWindow.value.getRenderer();
-      const camera = renderer.getActiveCamera();
-      camera.setFocalPoint(...snapshot_camera_options.focal_point);
-      camera.setViewUp(...snapshot_camera_options.view_up);
-      camera.setPosition(...snapshot_camera_options.position);
-      camera.setViewAngle(snapshot_camera_options.view_angle);
-      camera.setClippingRange(...snapshot_camera_options.clipping_range);
-      genericRenderWindow.value.getRenderWindow().render();
-      const payload = {
-        camera_options: {
-          focal_point: [...snapshot_camera_options.focal_point],
-          view_up: [...snapshot_camera_options.view_up],
-          position: [...snapshot_camera_options.position],
-          view_angle: snapshot_camera_options.view_angle,
-          clipping_range: [...snapshot_camera_options.clipping_range],
-        },
-      };
-      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();
     }
-    return await applyCamera();
+
+    const { camera_options: snapshot_camera_options } = snapshot;
+    if (!snapshot_camera_options) {
+      return;
+    }
+
+    const renderer = genericRenderWindow.value.getRenderer();
+    const camera = renderer.getActiveCamera();
+    setCameraState(camera, snapshot_camera_options);
+    genericRenderWindow.value.getRenderWindow().render();
+
+    const payload = { camera_options: getCameraState(camera) };
+    return viewerStore.request(viewer_schemas.opengeodeweb_viewer.viewer.update_camera, payload, {
+      response_function: () => {
+        remoteRender();
+        Object.assign(camera_options, payload.camera_options);
+      },
+    });
   }
 
   function clear() {