From ebdd9905fdd6a6f65140bfa9cc871bc05d58311a Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 14 Aug 2026 14:56:33 +0200
Subject: [PATCH 1/7] feat(ruler): Add ruler tool

---
 app/components/HybridRenderingView.vue  |   8 ++
 app/components/Ruler.vue                | 144 ++++++++++++++++++++++++
 app/components/ViewToolbar.vue          |  12 ++
 app/components/Viewer/Ui.vue            |  28 ++++-
 app/stores/hybrid_viewer.js             |  24 ++--
 internal/stores/hybrid_viewer/camera.js |  70 ++++++++++++
 internal/stores/hybrid_viewer/ruler.js  | 129 +++++++++++++++++++++
 7 files changed, 405 insertions(+), 10 deletions(-)
 create mode 100644 app/components/Ruler.vue
 create mode 100644 internal/stores/hybrid_viewer/ruler.js

diff --git a/app/components/HybridRenderingView.vue b/app/components/HybridRenderingView.vue
index 5100f4d7..d019b0e3 100644
--- a/app/components/HybridRenderingView.vue
+++ b/app/components/HybridRenderingView.vue
@@ -55,6 +55,14 @@ function debounce(func, wait) {
 
 async function handleClick(event) {
   const { offsetX, offsetY, clientX, clientY } = event;
+  if (hybridViewerStore.is_ruler_active) {
+    const rect = container.value.$el.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const y = elementHeight.value - (event.clientY - rect.top);
+    await hybridViewerStore.handleRulerClick(x, y);
+    return;
+  }
+
   if (viewerStore.picking_mode) {
     const rect = container.value.$el.getBoundingClientRect();
     const x = event.clientX - rect.left;
diff --git a/app/components/Ruler.vue b/app/components/Ruler.vue
new file mode 100644
index 00000000..365f222e
--- /dev/null
+++ b/app/components/Ruler.vue
@@ -0,0 +1,144 @@
+<script setup>
+import ToolPanel from "@ogw_front/components/ToolPanel";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const show = defineModel("show", { type: Boolean, default: false });
+const hybridViewerStore = useHybridViewerStore();
+
+const localPoint1 = ref([0, 0, 0]);
+const localPoint2 = ref([0, 0, 0]);
+
+watch(
+  () => hybridViewerStore.ruler_point1,
+  (point) => {
+    if (point) {
+      localPoint1.value = [...point];
+    }
+  },
+);
+
+watch(
+  () => hybridViewerStore.ruler_point2,
+  (point) => {
+    if (point) {
+      localPoint2.value = [...point];
+    }
+  },
+);
+
+watch(show, (visible) => {
+  if (visible) {
+    hybridViewerStore.is_ruler_active = true;
+  } else if (hybridViewerStore.is_ruler_active) {
+    hybridViewerStore.deactivateRuler();
+  }
+});
+
+watch(
+  () => hybridViewerStore.is_ruler_active,
+  (active) => {
+    if (!active) {
+      show.value = false;
+    }
+  },
+);
+
+async function applyManualCoords() {
+  hybridViewerStore.ruler_point1 = [...localPoint1.value];
+  hybridViewerStore.ruler_point2 = [...localPoint2.value];
+  await hybridViewerStore.applyRuler();
+}
+</script>
+
+<template>
+  <ToolPanel
+    v-model="show"
+    title="Ruler"
+    :width="300"
+    close-label="Stop ruler"
+    :click-outside="false"
+  >
+    <v-card-text class="pa-3">
+      <v-switch
+        v-model="hybridViewerStore.ruler_snap"
+        data-testid="rulerSnapToggle"
+        label="Snap to vertex"
+        color="primary"
+        density="compact"
+        hide-details
+        class="mb-4"
+      />
+
+      <v-divider class="mb-3" />
+
+      <div class="text-caption font-weight-bold mb-2 text-medium-emphasis">Point 1</div>
+      <v-row dense class="mb-1">
+        <v-col v-for="(axis, index) in ['X', 'Y', 'Z']" :key="axis">
+          <v-text-field
+            v-model.number="localPoint1[index]"
+            :data-testid="`rulerPoint1${axis}`"
+            :label="axis"
+            type="number"
+            density="compact"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+      </v-row>
+
+      <div class="text-caption font-weight-bold mb-2 mt-3 text-medium-emphasis">Point 2</div>
+      <v-row dense class="mb-1">
+        <v-col v-for="(axis, index) in ['X', 'Y', 'Z']" :key="axis">
+          <v-text-field
+            v-model.number="localPoint2[index]"
+            :data-testid="`rulerPoint2${axis}`"
+            :label="axis"
+            type="number"
+            density="compact"
+            variant="outlined"
+            hide-details
+          />
+        </v-col>
+      </v-row>
+
+      <v-btn
+        data-testid="rulerApplyButton"
+        variant="tonal"
+        size="small"
+        color="primary"
+        block
+        class="mt-3 text-caption text-none"
+        @click="applyManualCoords"
+      >
+        Apply
+      </v-btn>
+
+      <v-divider class="my-3" />
+
+      <div v-if="hybridViewerStore.ruler_distance !== undefined" class="text-center">
+        <div class="text-caption text-medium-emphasis mb-1">Distance</div>
+        <div data-testid="rulerDistance" class="text-h6 font-weight-bold">
+          {{ hybridViewerStore.ruler_distance.toFixed(4) }}
+        </div>
+      </div>
+      <div v-else class="text-caption text-medium-emphasis text-center">
+        Click in the scene to set both points
+      </div>
+    </v-card-text>
+
+    <template #actions>
+      <v-card-actions class="justify-center pb-3 pt-0">
+        <v-btn
+          data-testid="rulerClearButton"
+          variant="text"
+          size="small"
+          color="error"
+          class="text-caption text-none"
+          @click="hybridViewerStore.clearRuler()"
+        >
+          Clear
+        </v-btn>
+      </v-card-actions>
+    </template>
+  </ToolPanel>
+</template>
diff --git a/app/components/ViewToolbar.vue b/app/components/ViewToolbar.vue
index c6065cfd..c8178901 100644
--- a/app/components/ViewToolbar.vue
+++ b/app/components/ViewToolbar.vue
@@ -4,6 +4,7 @@ import CameraBookmarkIcon from "@ogw_front/assets/viewer_svgs/camera-bookmark.sv
 import CameraManager from "@ogw_front/components/CameraManager";
 import CameraOrientation from "@ogw_front/components/CameraOrientation";
 import ClippingPlanes from "@ogw_front/components/ClippingPlanes";
+import Ruler from "@ogw_front/components/Ruler";
 import Screenshot from "@ogw_front/components/Screenshot";
 import ShrinkFilter from "@ogw_front/components/ShrinkFilter";
 import ZScaling from "@ogw_front/components/ZScaling";
@@ -19,6 +20,7 @@ const showCameraOrientation = ref(false);
 const showZScaling = ref(false);
 const showClippingPlanes = ref(false);
 const showShrinkFilter = ref(false);
+const showRuler = ref(false);
 const grid_scale = ref(false);
 const zScale = ref(hybridViewerStore.zScale);
 
@@ -173,6 +175,15 @@ const camera_options = computed(() => [
       showShrinkFilter.value = !showShrinkFilter.value;
     },
   },
+  {
+    testId: "rulerButton",
+    tooltip: "Ruler",
+    icon: "mdi-ruler",
+    color: showRuler.value ? "primary" : undefined,
+    action: () => {
+      showRuler.value = !showRuler.value;
+    },
+  },
 ]);
 </script>
 
@@ -247,6 +258,7 @@ const camera_options = computed(() => [
   />
   <ClippingPlanes v-model:show="showClippingPlanes" />
   <ShrinkFilter v-model:show="showShrinkFilter" />
+  <Ruler v-model:show="showRuler" />
 </template>
 
 <style module>
diff --git a/app/components/Viewer/Ui.vue b/app/components/Viewer/Ui.vue
index fb8209f0..fe53d187 100644
--- a/app/components/Viewer/Ui.vue
+++ b/app/components/Viewer/Ui.vue
@@ -25,7 +25,9 @@ function stopHoverHighlight() {
 }
 
 onKeyStroke("Escape", () => {
-  if (hybridViewerStore.is_hover_highlight) {
+  if (hybridViewerStore.is_ruler_active) {
+    hybridViewerStore.deactivateRuler();
+  } else if (hybridViewerStore.is_hover_highlight) {
     stopHoverHighlight();
   }
 });
@@ -129,6 +131,30 @@ defineExpose({ get_viewer_id });
       </v-chip>
     </div>
   </v-fade-transition>
+
+  <v-fade-transition>
+    <div
+      v-if="hybridViewerStore.is_ruler_active"
+      class="picking-message-container d-flex justify-center w-100 pa-4"
+    >
+      <v-chip
+        data-testid="rulerActiveChip"
+        color="secondary"
+        elevation="8"
+        size="large"
+        variant="flat"
+        class="pick-pulse"
+        style="pointer-events: auto"
+        prepend-icon="mdi-ruler"
+        @click="hybridViewerStore.clearRuler()"
+      >
+        Ruler &mdash; click to set point {{ hybridViewerStore.ruler_awaiting_point }}
+        &middot; Esc to stop
+        <v-divider vertical class="mx-2 my-1" opacity="0.3" />
+        <v-icon icon="mdi-close" size="small" />
+      </v-chip>
+    </div>
+  </v-fade-transition>
 </template>
 
 <style scoped>
diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index 1c6a38e8..5c0b3030 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -7,6 +7,7 @@ import { BACKGROUND_COLOR } from "@ogw_internal/stores/hybrid_viewer/constants";
 import { useHybridViewerBrightness } from "@ogw_internal/stores/hybrid_viewer/brightness";
 import { useHybridViewerFilters } from "@ogw_internal/stores/hybrid_viewer/filters";
 import { useHybridViewerHighlight } from "@ogw_internal/stores/hybrid_viewer/highlight";
+import { useHybridViewerRuler } from "@ogw_internal/stores/hybrid_viewer/ruler";
 import { useHybridViewerScene } from "@ogw_internal/stores/hybrid_viewer/scene";
 import { useHybridViewerViewport } from "@ogw_internal/stores/hybrid_viewer/viewport";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
@@ -25,7 +26,19 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const is_picking = ref(false);
   let imageStyle = undefined;
 
-  watch(is_picking, (value) => {
+  const brightnessStore = useHybridViewerBrightness();
+  const sceneStore = useHybridViewerScene();
+  const filtersStore = useHybridViewerFilters();
+  const highlightStore = useHybridViewerHighlight();
+  const rulerStore = useHybridViewerRuler();
+  const cameraStore = useHybridViewerCamera();
+  const viewportStore = useHybridViewerViewport();
+
+  const is_cursor_crosshair = computed(
+    () => is_picking.value || rulerStore.is_ruler_active.value,
+  );
+
+  watch(is_cursor_crosshair, (value) => {
     if (!genericRenderWindow.value) {
       return;
     }
@@ -36,8 +49,6 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     }
   });
 
-  const brightnessStore = useHybridViewerBrightness();
-
   async function initHybridViewer() {
     if (status.value !== Status.NOT_CREATED) {
       return;
@@ -94,12 +105,6 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     return renderPromise;
   }
 
-  const sceneStore = useHybridViewerScene();
-  const filtersStore = useHybridViewerFilters();
-  const highlightStore = useHybridViewerHighlight();
-  const cameraStore = useHybridViewerCamera();
-  const viewportStore = useHybridViewerViewport();
-
   function exportStores() {
     const renderer = genericRenderWindow.value.getRenderer();
     const camera = renderer.getActiveCamera();
@@ -123,6 +128,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     ...viewportStore,
     ...filtersStore,
     ...highlightStore,
+    ...rulerStore,
     ...cameraStore,
   };
 });
diff --git a/internal/stores/hybrid_viewer/camera.js b/internal/stores/hybrid_viewer/camera.js
index 8f64381f..a29ad012 100644
--- a/internal/stores/hybrid_viewer/camera.js
+++ b/internal/stores/hybrid_viewer/camera.js
@@ -256,6 +256,76 @@ async function applySnapshot(snapshot) {
   }
 }
 
+function useHybridViewerCamera(options) {
+  const {
+    genericRenderWindow,
+    viewerStore,
+    viewer_schemas,
+    remoteRender,
+    hybridDb,
+    is_moving,
+    getImageStyle,
+  } = options;
+
+  const camera_options = reactive({});
+
+  function syncRemoteCamera() {
+    performSyncRemoteCamera({
+      genericRenderWindow: genericRenderWindow.value,
+      viewerStore,
+      viewer_schemas,
+      remoteRender,
+      camera_options,
+    });
+  }
+
+  function setCamera(targetCameraOptions) {
+    performSetCamera(targetCameraOptions, {
+      genericRenderWindow: genericRenderWindow.value,
+      is_moving,
+      imageStyle: getImageStyle(),
+      syncRemoteCamera,
+    });
+  }
+
+  function resetCamera() {
+    genericRenderWindow.value.getRenderer().resetCamera();
+    genericRenderWindow.value.getRenderWindow().render();
+    syncRemoteCamera();
+  }
+
+  async function focusCameraOnObject(id, block_ids = []) {
+    await performFocusCameraOnObject(id, {
+      hybridDb,
+      viewerStore,
+      viewer_schemas,
+      genericRenderWindow: genericRenderWindow.value,
+      block_ids,
+      is_moving,
+      imageStyle: getImageStyle(),
+      syncRemoteCamera,
+    });
+  }
+
+  function setCameraOrientation(orientation) {
+    performCameraOrientation(orientation, {
+      genericRenderWindow: genericRenderWindow.value,
+      is_moving,
+      imageStyle: getImageStyle(),
+      syncRemoteCamera,
+    });
+  }
+
+  return {
+    camera_options,
+    syncRemoteCamera,
+    setCamera,
+    resetCamera,
+    focusCameraOnObject,
+    setCameraOrientation,
+  };
+}
+
 export {
   ALIGNMENT_THRESHOLD,
   BUMP_MULTIPLIER,
diff --git a/internal/stores/hybrid_viewer/ruler.js b/internal/stores/hybrid_viewer/ruler.js
new file mode 100644
index 00000000..0b803daa
--- /dev/null
+++ b/internal/stores/hybrid_viewer/ruler.js
@@ -0,0 +1,129 @@
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+function useHybridViewerRuler() {
+  const is_ruler_active = ref(false);
+  const ruler_snap = ref(false);
+  const ruler_point1 = ref(undefined);
+  const ruler_point2 = ref(undefined);
+  const ruler_distance = ref(undefined);
+  const ruler_awaiting_point = ref(1);
+  const ruler_previous_hover_state = ref({ active: false, fieldType: "CELL" });
+
+  function updateRulerSnapHighlight() {
+    const hybridViewerStore = useHybridViewerStore();
+    const { is_hover_highlight, hover_highlight_field_type } = storeToRefs(hybridViewerStore);
+    const { clearHoverHighlight } = hybridViewerStore;
+
+    if (is_ruler_active.value && ruler_snap.value) {
+      ruler_previous_hover_state.value = {
+        active: is_hover_highlight.value,
+        fieldType: hover_highlight_field_type.value,
+      };
+      is_hover_highlight.value = true;
+      hover_highlight_field_type.value = "POINT";
+    } else {
+      is_hover_highlight.value = ruler_previous_hover_state.value.active;
+      hover_highlight_field_type.value = ruler_previous_hover_state.value.fieldType;
+      if (!is_hover_highlight.value) {
+        clearHoverHighlight();
+      }
+    }
+  }
+
+  watch(is_ruler_active, updateRulerSnapHighlight);
+  watch(ruler_snap, updateRulerSnapHighlight);
+
+  async function applyRuler() {
+    if (!ruler_point1.value || !ruler_point2.value) {
+      return;
+    }
+    const { remoteRender } = useHybridViewerStore();
+    const viewerStore = useViewerStore();
+    const schema = viewer_schemas.opengeodeweb_viewer.viewer.ruler;
+    const params = {
+      point1: ruler_point1.value,
+      point2: ruler_point2.value,
+    };
+    const response = await viewerStore.request({ schema, params });
+    ruler_distance.value = response.distance;
+    await remoteRender();
+  }
+
+  async function handleRulerClick(x, y) {
+    const { hybridDb, remoteRender } = useHybridViewerStore();
+    const viewerStore = useViewerStore();
+    let coords = undefined;
+    if (ruler_snap.value) {
+      const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
+      const params = {
+        x: Math.round(x),
+        y: Math.round(y),
+        field_type: "POINT",
+        ids: Object.keys(hybridDb),
+      };
+      const response = await viewerStore.request({ schema, params });
+      coords = response.attributes?.coordinates;
+    } else {
+      const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
+      const params = { x: Math.round(x), y: Math.round(y) };
+      const response = await viewerStore.request({ schema, params });
+      coords = [response.x, response.y, response.z];
+    }
+    if (!coords) {
+      return;
+    }
+
+    if (ruler_awaiting_point.value === 1) {
+      ruler_point1.value = coords;
+      ruler_point2.value = undefined;
+      ruler_distance.value = undefined;
+      ruler_awaiting_point.value = 2;
+      const schema = viewer_schemas.opengeodeweb_viewer.viewer.ruler;
+      await viewerStore.request({
+        schema,
+        params: { point1: coords },
+      });
+      await remoteRender();
+    } else {
+      ruler_point2.value = coords;
+      ruler_awaiting_point.value = 1;
+      await applyRuler();
+    }
+  }
+
+  function deactivateRuler() {
+    const { clearHoverHighlight } = useHybridViewerStore();
+    is_ruler_active.value = false;
+    clearHoverHighlight();
+  }
+
+  async function clearRuler() {
+    const { remoteRender } = useHybridViewerStore();
+    const viewerStore = useViewerStore();
+    ruler_point1.value = undefined;
+    ruler_point2.value = undefined;
+    ruler_distance.value = undefined;
+    ruler_awaiting_point.value = 1;
+    deactivateRuler();
+    const schema = viewer_schemas.opengeodeweb_viewer.viewer.ruler;
+    await viewerStore.request({ schema, params: {} });
+    await remoteRender();
+  }
+
+  return {
+    is_ruler_active,
+    ruler_snap,
+    ruler_point1,
+    ruler_point2,
+    ruler_distance,
+    ruler_awaiting_point,
+    handleRulerClick,
+    applyRuler,
+    clearRuler,
+    deactivateRuler,
+  };
+}
+
+export { useHybridViewerRuler };

From b0e59e699bc71c6b58c25de8ddc552594a156460 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 14 Aug 2026 15:17:30 +0200
Subject: [PATCH 2/7] fixed some

---
 internal/stores/hybrid_viewer/camera.js | 70 -------------------------
 1 file changed, 70 deletions(-)

diff --git a/internal/stores/hybrid_viewer/camera.js b/internal/stores/hybrid_viewer/camera.js
index a29ad012..8f64381f 100644
--- a/internal/stores/hybrid_viewer/camera.js
+++ b/internal/stores/hybrid_viewer/camera.js
@@ -256,76 +256,6 @@ async function applySnapshot(snapshot) {
   }
 }
 
-function useHybridViewerCamera(options) {
-  const {
-    genericRenderWindow,
-    viewerStore,
-    viewer_schemas,
-    remoteRender,
-    hybridDb,
-    is_moving,
-    getImageStyle,
-  } = options;
-
-  const camera_options = reactive({});
-
-  function syncRemoteCamera() {
-    performSyncRemoteCamera({
-      genericRenderWindow: genericRenderWindow.value,
-      viewerStore,
-      viewer_schemas,
-      remoteRender,
-      camera_options,
-    });
-  }
-
-  function setCamera(targetCameraOptions) {
-    performSetCamera(targetCameraOptions, {
-      genericRenderWindow: genericRenderWindow.value,
-      is_moving,
-      imageStyle: getImageStyle(),
-      syncRemoteCamera,
-    });
-  }
-
-  function resetCamera() {
-    genericRenderWindow.value.getRenderer().resetCamera();
-    genericRenderWindow.value.getRenderWindow().render();
-    syncRemoteCamera();
-  }
-
-  async function focusCameraOnObject(id, block_ids = []) {
-    await performFocusCameraOnObject(id, {
-      hybridDb,
-      viewerStore,
-      viewer_schemas,
-      genericRenderWindow: genericRenderWindow.value,
-      block_ids,
-      is_moving,
-      imageStyle: getImageStyle(),
-      syncRemoteCamera,
-    });
-  }
-
-  function setCameraOrientation(orientation) {
-    performCameraOrientation(orientation, {
-      genericRenderWindow: genericRenderWindow.value,
-      is_moving,
-      imageStyle: getImageStyle(),
-      syncRemoteCamera,
-    });
-  }
-
-  return {
-    camera_options,
-    syncRemoteCamera,
-    setCamera,
-    resetCamera,
-    focusCameraOnObject,
-    setCameraOrientation,
-  };
-}
-
 export {
   ALIGNMENT_THRESHOLD,
   BUMP_MULTIPLIER,

From acddc001705ef634aab134c272e8809d92f3474d Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Fri, 14 Aug 2026 13:54:51 +0000
Subject: [PATCH 3/7] Apply prepare changes

---
 app/stores/hybrid_viewer.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/stores/hybrid_viewer.js b/app/stores/hybrid_viewer.js
index 5c0b3030..efe295ae 100644
--- a/app/stores/hybrid_viewer.js
+++ b/app/stores/hybrid_viewer.js
@@ -34,9 +34,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const cameraStore = useHybridViewerCamera();
   const viewportStore = useHybridViewerViewport();
 
-  const is_cursor_crosshair = computed(
-    () => is_picking.value || rulerStore.is_ruler_active.value,
-  );
+  const is_cursor_crosshair = computed(() => is_picking.value || rulerStore.is_ruler_active.value);
 
   watch(is_cursor_crosshair, (value) => {
     if (!genericRenderWindow.value) {

From 1cf4ecbe9d0cb24bc6db059544b9e30d43b3a5b6 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 14 Aug 2026 16:35:15 +0200
Subject: [PATCH 4/7] data-testid

---
 app/components/Ruler.vue               |   8 +-
 internal/stores/hybrid_viewer/ruler.js | 145 +++++++++++++++----------
 2 files changed, 89 insertions(+), 64 deletions(-)

diff --git a/app/components/Ruler.vue b/app/components/Ruler.vue
index 365f222e..1501c4fb 100644
--- a/app/components/Ruler.vue
+++ b/app/components/Ruler.vue
@@ -72,11 +72,11 @@ async function applyManualCoords() {
       <v-divider class="mb-3" />
 
       <div class="text-caption font-weight-bold mb-2 text-medium-emphasis">Point 1</div>
-      <v-row dense class="mb-1">
+      <v-row dense class="mb-1" data-testid="rulerPointCard">
         <v-col v-for="(axis, index) in ['X', 'Y', 'Z']" :key="axis">
           <v-text-field
             v-model.number="localPoint1[index]"
-            :data-testid="`rulerPoint1${axis}`"
+            data-testid="rulerPointCoordInput"
             :label="axis"
             type="number"
             density="compact"
@@ -87,11 +87,11 @@ async function applyManualCoords() {
       </v-row>
 
       <div class="text-caption font-weight-bold mb-2 mt-3 text-medium-emphasis">Point 2</div>
-      <v-row dense class="mb-1">
+      <v-row dense class="mb-1" data-testid="rulerPointCard">
         <v-col v-for="(axis, index) in ['X', 'Y', 'Z']" :key="axis">
           <v-text-field
             v-model.number="localPoint2[index]"
-            :data-testid="`rulerPoint2${axis}`"
+            data-testid="rulerPointCoordInput"
             :label="axis"
             type="number"
             density="compact"
diff --git a/internal/stores/hybrid_viewer/ruler.js b/internal/stores/hybrid_viewer/ruler.js
index 0b803daa..0f80dc4d 100644
--- a/internal/stores/hybrid_viewer/ruler.js
+++ b/internal/stores/hybrid_viewer/ruler.js
@@ -32,65 +32,21 @@ function useHybridViewerRuler() {
     }
   }
 
-  watch(is_ruler_active, updateRulerSnapHighlight);
-  watch(ruler_snap, updateRulerSnapHighlight);
+  watch([is_ruler_active, ruler_snap], updateRulerSnapHighlight);
 
   async function applyRuler() {
-    if (!ruler_point1.value || !ruler_point2.value) {
-      return;
-    }
-    const { remoteRender } = useHybridViewerStore();
-    const viewerStore = useViewerStore();
-    const schema = viewer_schemas.opengeodeweb_viewer.viewer.ruler;
-    const params = {
-      point1: ruler_point1.value,
-      point2: ruler_point2.value,
-    };
-    const response = await viewerStore.request({ schema, params });
-    ruler_distance.value = response.distance;
-    await remoteRender();
+    await performApplyRuler(ruler_point1.value, ruler_point2.value, ruler_distance);
   }
 
   async function handleRulerClick(x, y) {
-    const { hybridDb, remoteRender } = useHybridViewerStore();
-    const viewerStore = useViewerStore();
-    let coords = undefined;
-    if (ruler_snap.value) {
-      const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
-      const params = {
-        x: Math.round(x),
-        y: Math.round(y),
-        field_type: "POINT",
-        ids: Object.keys(hybridDb),
-      };
-      const response = await viewerStore.request({ schema, params });
-      coords = response.attributes?.coordinates;
-    } else {
-      const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
-      const params = { x: Math.round(x), y: Math.round(y) };
-      const response = await viewerStore.request({ schema, params });
-      coords = [response.x, response.y, response.z];
-    }
-    if (!coords) {
-      return;
-    }
-
-    if (ruler_awaiting_point.value === 1) {
-      ruler_point1.value = coords;
-      ruler_point2.value = undefined;
-      ruler_distance.value = undefined;
-      ruler_awaiting_point.value = 2;
-      const schema = viewer_schemas.opengeodeweb_viewer.viewer.ruler;
-      await viewerStore.request({
-        schema,
-        params: { point1: coords },
-      });
-      await remoteRender();
-    } else {
-      ruler_point2.value = coords;
-      ruler_awaiting_point.value = 1;
-      await applyRuler();
-    }
+    await performHandleRulerClick(x, y, {
+      ruler_snap: ruler_snap.value,
+      ruler_awaiting_point,
+      ruler_point1,
+      ruler_point2,
+      ruler_distance,
+      applyRuler,
+    });
   }
 
   function deactivateRuler() {
@@ -100,16 +56,12 @@ function useHybridViewerRuler() {
   }
 
   async function clearRuler() {
-    const { remoteRender } = useHybridViewerStore();
-    const viewerStore = useViewerStore();
     ruler_point1.value = undefined;
     ruler_point2.value = undefined;
     ruler_distance.value = undefined;
     ruler_awaiting_point.value = 1;
     deactivateRuler();
-    const schema = viewer_schemas.opengeodeweb_viewer.viewer.ruler;
-    await viewerStore.request({ schema, params: {} });
-    await remoteRender();
+    await performClearRuler();
   }
 
   return {
@@ -126,4 +78,77 @@ function useHybridViewerRuler() {
   };
 }
 
-export { useHybridViewerRuler };
+async function performApplyRuler(point1, point2, rulerDistanceRef) {
+  if (!point1 || !point2) {
+    return;
+  }
+  const { remoteRender } = useHybridViewerStore();
+  const viewerStore = useViewerStore();
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.ruler;
+  const params = { point1, point2 };
+  const response = await viewerStore.request({ schema, params });
+  rulerDistanceRef.value = response.distance;
+  await remoteRender();
+}
+
+async function performHandleRulerClick(x, y, options) {
+  const {
+    ruler_snap,
+    ruler_awaiting_point,
+    ruler_point1,
+    ruler_point2,
+    ruler_distance,
+    applyRuler,
+  } = options;
+  const { hybridDb, remoteRender } = useHybridViewerStore();
+  const viewerStore = useViewerStore();
+  let coords = undefined;
+  if (ruler_snap) {
+    const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
+    const params = {
+      x: Math.round(x),
+      y: Math.round(y),
+      field_type: "POINT",
+      ids: Object.keys(hybridDb),
+    };
+    const response = await viewerStore.request({ schema, params });
+    coords = response.attributes?.coordinates;
+  } else {
+    const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
+    const params = { x: Math.round(x), y: Math.round(y) };
+    const response = await viewerStore.request({ schema, params });
+    coords = [response.x, response.y, response.z];
+  }
+  if (!coords) {
+    return;
+  }
+
+  if (ruler_awaiting_point.value === 1) {
+    ruler_point1.value = coords;
+    ruler_point2.value = undefined;
+    ruler_distance.value = undefined;
+    ruler_awaiting_point.value = 2;
+    const schema = viewer_schemas.opengeodeweb_viewer.viewer.ruler;
+    await viewerStore.request({ schema, params: { point1: coords } });
+    await remoteRender();
+  } else {
+    ruler_point2.value = coords;
+    ruler_awaiting_point.value = 1;
+    await applyRuler();
+  }
+}
+
+async function performClearRuler() {
+  const { remoteRender } = useHybridViewerStore();
+  const viewerStore = useViewerStore();
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.reset_ruler;
+  await viewerStore.request({ schema });
+  await remoteRender();
+}
+
+export {
+  performApplyRuler,
+  performClearRuler,
+  performHandleRulerClick,
+  useHybridViewerRuler,
+};

From 702831db256a8e7ef51f4f3ecadfabe6566c92a9 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Fri, 14 Aug 2026 14:36:16 +0000
Subject: [PATCH 5/7] Apply prepare changes

---
 internal/stores/hybrid_viewer/ruler.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/internal/stores/hybrid_viewer/ruler.js b/internal/stores/hybrid_viewer/ruler.js
index 0f80dc4d..6b745062 100644
--- a/internal/stores/hybrid_viewer/ruler.js
+++ b/internal/stores/hybrid_viewer/ruler.js
@@ -146,9 +146,4 @@ async function performClearRuler() {
   await remoteRender();
 }
 
-export {
-  performApplyRuler,
-  performClearRuler,
-  performHandleRulerClick,
-  useHybridViewerRuler,
-};
+export { performApplyRuler, performClearRuler, performHandleRulerClick, useHybridViewerRuler };

From 04a48cee2c8b333cc48f7a30e995e20926b3d975 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 14 Aug 2026 17:04:20 +0200
Subject: [PATCH 6/7] update schema

---
 internal/stores/hybrid_viewer/ruler.js | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/internal/stores/hybrid_viewer/ruler.js b/internal/stores/hybrid_viewer/ruler.js
index 6b745062..71ff8701 100644
--- a/internal/stores/hybrid_viewer/ruler.js
+++ b/internal/stores/hybrid_viewer/ruler.js
@@ -79,14 +79,11 @@ function useHybridViewerRuler() {
 }
 
 async function performApplyRuler(point1, point2, rulerDistanceRef) {
-  if (!point1 || !point2) {
-    return;
-  }
+  const points = point2 ? [point1, point2] : [point1];
   const { remoteRender } = useHybridViewerStore();
   const viewerStore = useViewerStore();
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.ruler;
-  const params = { point1, point2 };
-  const response = await viewerStore.request({ schema, params });
+  const response = await viewerStore.request({ schema, params: { points } });
   rulerDistanceRef.value = response.distance;
   await remoteRender();
 }
@@ -100,7 +97,7 @@ async function performHandleRulerClick(x, y, options) {
     ruler_distance,
     applyRuler,
   } = options;
-  const { hybridDb, remoteRender } = useHybridViewerStore();
+  const { hybridDb } = useHybridViewerStore();
   const viewerStore = useViewerStore();
   let coords = undefined;
   if (ruler_snap) {
@@ -128,14 +125,11 @@ async function performHandleRulerClick(x, y, options) {
     ruler_point2.value = undefined;
     ruler_distance.value = undefined;
     ruler_awaiting_point.value = 2;
-    const schema = viewer_schemas.opengeodeweb_viewer.viewer.ruler;
-    await viewerStore.request({ schema, params: { point1: coords } });
-    await remoteRender();
   } else {
     ruler_point2.value = coords;
     ruler_awaiting_point.value = 1;
-    await applyRuler();
   }
+  await applyRuler();
 }
 
 async function performClearRuler() {

From 2856d60dd16a8f4fb9b80621303b6af81a5d5f20 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 14 Aug 2026 17:16:09 +0200
Subject: [PATCH 7/7] ruler

---
 internal/stores/hybrid_viewer/ruler.js | 124 ++++++++++---------------
 1 file changed, 51 insertions(+), 73 deletions(-)

diff --git a/internal/stores/hybrid_viewer/ruler.js b/internal/stores/hybrid_viewer/ruler.js
index 71ff8701..001e0c9f 100644
--- a/internal/stores/hybrid_viewer/ruler.js
+++ b/internal/stores/hybrid_viewer/ruler.js
@@ -35,18 +35,54 @@ function useHybridViewerRuler() {
   watch([is_ruler_active, ruler_snap], updateRulerSnapHighlight);
 
   async function applyRuler() {
-    await performApplyRuler(ruler_point1.value, ruler_point2.value, ruler_distance);
+    if (!ruler_point1.value) {
+      return;
+    }
+    const points = ruler_point2.value
+      ? [ruler_point1.value, ruler_point2.value]
+      : [ruler_point1.value];
+    const { remoteRender } = useHybridViewerStore();
+    const viewerStore = useViewerStore();
+    const schema = viewer_schemas.opengeodeweb_viewer.viewer.ruler;
+    const response = await viewerStore.request({ schema, params: { points } });
+    ruler_distance.value = response.distance;
+    await remoteRender();
   }
 
   async function handleRulerClick(x, y) {
-    await performHandleRulerClick(x, y, {
-      ruler_snap: ruler_snap.value,
-      ruler_awaiting_point,
-      ruler_point1,
-      ruler_point2,
-      ruler_distance,
-      applyRuler,
-    });
+    const { hybridDb } = useHybridViewerStore();
+    const viewerStore = useViewerStore();
+    let coords = undefined;
+    if (ruler_snap.value) {
+      const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
+      const params = {
+        x: Math.round(x),
+        y: Math.round(y),
+        field_type: "POINT",
+        ids: Object.keys(hybridDb),
+      };
+      const response = await viewerStore.request({ schema, params });
+      coords = response.attributes?.coordinates;
+    } else {
+      const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
+      const params = { x: Math.round(x), y: Math.round(y) };
+      const response = await viewerStore.request({ schema, params });
+      coords = [response.x, response.y, response.z];
+    }
+    if (!coords) {
+      return;
+    }
+
+    if (ruler_awaiting_point.value === 1) {
+      ruler_point1.value = coords;
+      ruler_point2.value = undefined;
+      ruler_distance.value = undefined;
+      ruler_awaiting_point.value = 2;
+    } else {
+      ruler_point2.value = coords;
+      ruler_awaiting_point.value = 1;
+    }
+    await applyRuler();
   }
 
   function deactivateRuler() {
@@ -61,7 +97,11 @@ function useHybridViewerRuler() {
     ruler_distance.value = undefined;
     ruler_awaiting_point.value = 1;
     deactivateRuler();
-    await performClearRuler();
+    const { remoteRender } = useHybridViewerStore();
+    const viewerStore = useViewerStore();
+    const schema = viewer_schemas.opengeodeweb_viewer.viewer.reset_ruler;
+    await viewerStore.request({ schema });
+    await remoteRender();
   }
 
   return {
@@ -78,66 +118,4 @@ function useHybridViewerRuler() {
   };
 }
 
-async function performApplyRuler(point1, point2, rulerDistanceRef) {
-  const points = point2 ? [point1, point2] : [point1];
-  const { remoteRender } = useHybridViewerStore();
-  const viewerStore = useViewerStore();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.ruler;
-  const response = await viewerStore.request({ schema, params: { points } });
-  rulerDistanceRef.value = response.distance;
-  await remoteRender();
-}
-
-async function performHandleRulerClick(x, y, options) {
-  const {
-    ruler_snap,
-    ruler_awaiting_point,
-    ruler_point1,
-    ruler_point2,
-    ruler_distance,
-    applyRuler,
-  } = options;
-  const { hybridDb } = useHybridViewerStore();
-  const viewerStore = useViewerStore();
-  let coords = undefined;
-  if (ruler_snap) {
-    const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
-    const params = {
-      x: Math.round(x),
-      y: Math.round(y),
-      field_type: "POINT",
-      ids: Object.keys(hybridDb),
-    };
-    const response = await viewerStore.request({ schema, params });
-    coords = response.attributes?.coordinates;
-  } else {
-    const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
-    const params = { x: Math.round(x), y: Math.round(y) };
-    const response = await viewerStore.request({ schema, params });
-    coords = [response.x, response.y, response.z];
-  }
-  if (!coords) {
-    return;
-  }
-
-  if (ruler_awaiting_point.value === 1) {
-    ruler_point1.value = coords;
-    ruler_point2.value = undefined;
-    ruler_distance.value = undefined;
-    ruler_awaiting_point.value = 2;
-  } else {
-    ruler_point2.value = coords;
-    ruler_awaiting_point.value = 1;
-  }
-  await applyRuler();
-}
-
-async function performClearRuler() {
-  const { remoteRender } = useHybridViewerStore();
-  const viewerStore = useViewerStore();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.reset_ruler;
-  await viewerStore.request({ schema });
-  await remoteRender();
-}
-
-export { performApplyRuler, performClearRuler, performHandleRulerClick, useHybridViewerRuler };
+export { useHybridViewerRuler };