@geode/opengeodeweb-front 10.31.1-rc.1 → 10.32.0

package/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;

package/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" 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="rulerPointCoordInput"
+            :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" 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="rulerPointCoordInput"
+            :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>

package/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>

package/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>

package/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,17 @@ 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 +47,6 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     }
   });
 
-  const brightnessStore = useHybridViewerBrightness();
-
   async function initHybridViewer() {
     if (status.value !== Status.NOT_CREATED) {
       return;
@@ -94,12 +103,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 +126,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     ...viewportStore,
     ...filtersStore,
     ...highlightStore,
+    ...rulerStore,
     ...cameraStore,
   };
 });

package/internal/stores/hybrid_viewer/ruler.js

@@ -0,0 +1,121 @@
+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, ruler_snap], updateRulerSnapHighlight);
+
+  async function applyRuler() {
+    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) {
+    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() {
+    const { clearHoverHighlight } = useHybridViewerStore();
+    is_ruler_active.value = false;
+    clearHoverHighlight();
+  }
+
+  async function clearRuler() {
+    ruler_point1.value = undefined;
+    ruler_point2.value = undefined;
+    ruler_distance.value = undefined;
+    ruler_awaiting_point.value = 1;
+    deactivateRuler();
+    const { remoteRender } = useHybridViewerStore();
+    const viewerStore = useViewerStore();
+    const schema = viewer_schemas.opengeodeweb_viewer.viewer.reset_ruler;
+    await viewerStore.request({ schema });
+    await remoteRender();
+  }
+
+  return {
+    is_ruler_active,
+    ruler_snap,
+    ruler_point1,
+    ruler_point2,
+    ruler_distance,
+    ruler_awaiting_point,
+    handleRulerClick,
+    applyRuler,
+    clearRuler,
+    deactivateRuler,
+  };
+}
+
+export { useHybridViewerRuler };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.31.1-rc.1",
+  "version": "10.32.0",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -39,8 +39,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",