@geode/opengeodeweb-front 10.35.0-rc.2 → 10.35.0-rc.3

package/app/components/HybridRenderingView.vue

@@ -2,6 +2,7 @@
 import ColormapQuickPicker from "@ogw_front/components/Viewer/Options/ColormapQuickPicker.vue";
 import HybridViewerTooltip from "@ogw_front/components/HybridViewerTooltip.vue";
 import ViewToolbar from "@ogw_front/components/ViewToolbar.vue";
+import ZoomBoxOverlay from "@ogw_front/components/ZoomBoxOverlay.vue";
 
 import { useDataStore } from "@ogw_front/stores/data";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -102,6 +103,7 @@ async function handleClick(event: PointerEvent): Promise<void> {
         :y="quickColormap.y"
         :data-id="quickColormap.data_id"
       />
+      <ZoomBoxOverlay v-if="hybridViewerStore.is_zoom_box_active" />
       <ViewToolbar />
       <slot name="ui"></slot>
       <HybridViewerTooltip :container-width="elementWidth" :container-height="elementHeight" />

package/app/components/RemoteRenderingView.vue

@@ -9,7 +9,6 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 import ColormapQuickPicker from "@ogw_front/components/Viewer/Options/ColormapQuickPicker.vue";
 import ViewToolbar from "@ogw_front/components/ViewToolbar.vue";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 import { newInstance as vtkRemoteView } from "@kitware/vtk.js/Rendering/Misc/RemoteView";
 
 interface Props {
@@ -32,9 +31,6 @@ async function get_x_y(event: PointerEvent): Promise<void> {
   const { offsetX, offsetY, clientX, clientY } = event;
   if (viewerStore.picking_mode === true) {
     viewerStore.set_picked_point(offsetX, offsetY);
-    const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
-    const params = { x: offsetX, y: offsetY };
-    viewerStore.request({ schema, params });
   } else {
     await pickColormap(offsetX, offsetY, clientX, clientY);
   }

package/app/components/ViewToolbar.vue

@@ -15,6 +15,8 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 
 const hybridViewerStore = useHybridViewerStore();
 const viewerStore = useViewerStore();
+const { is_picking, is_zoom_box_active } = storeToRefs(hybridViewerStore);
+const { picking_mode } = storeToRefs(viewerStore);
 const showScreenshot = ref<boolean>(false);
 const showCameraManager = ref<boolean>(false);
 const showCameraOrientation = ref<boolean>(false);
@@ -58,6 +60,11 @@ onKeyStroke("Escape", () => {
   }
 });
 
+function stopHoverHighlight(): void {
+  hybridViewerStore.is_hover_highlight = false;
+  hybridViewerStore.clearHoverHighlight();
+}
+
 function closeAllToolsExcept(toolRef: Ref<boolean>): void {
   const tools = [
     showCameraOrientation,
@@ -67,12 +74,18 @@ function closeAllToolsExcept(toolRef: Ref<boolean>): void {
     showClippingPlanes,
     showShrinkFilter,
     showRuler,
+    is_picking,
+    is_zoom_box_active,
+    picking_mode,
   ];
   for (const tool of tools) {
     if (tool !== toolRef) {
       tool.value = false;
     }
   }
+  if (toolRef !== showRuler) {
+    void nextTick(stopHoverHighlight);
+  }
 }
 
 function toggleTool(toolRef: Ref<boolean>): void {
@@ -80,6 +93,19 @@ function toggleTool(toolRef: Ref<boolean>): void {
   toolRef.value = !toolRef.value;
 }
 
+function toggleHoverHighlight(fieldType: string): void {
+  const activate =
+    !hybridViewerStore.is_hover_highlight ||
+    hybridViewerStore.hover_highlight_field_type !== fieldType;
+  closeAllToolsExcept(showRuler);
+  if (activate) {
+    hybridViewerStore.is_hover_highlight = true;
+    hybridViewerStore.hover_highlight_field_type = fieldType;
+  } else {
+    stopHoverHighlight();
+  }
+}
+
 const camera_options = computed<CameraOptionAction[]>(() => [
   {
     testId: "resetCameraButton",
@@ -95,7 +121,16 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     icon: "mdi-crosshairs-question",
     color: hybridViewerStore.is_picking ? "primary" : undefined,
     action: (): void => {
-      hybridViewerStore.is_picking = !hybridViewerStore.is_picking;
+      toggleTool(is_picking);
+    },
+  },
+  {
+    testId: "zoomToBoxButton",
+    tooltip: "Zoom to box",
+    icon: "mdi-magnify-scan",
+    color: hybridViewerStore.is_zoom_box_active ? "primary" : undefined,
+    action: (): void => {
+      toggleTool(is_zoom_box_active);
     },
   },
   {
@@ -103,28 +138,14 @@ const camera_options = computed<CameraOptionAction[]>(() => [
     tooltip: "Highlight on hover",
     icon: "mdi-cursor-default-click",
     color: hybridViewerStore.is_hover_highlight ? "primary" : undefined,
-    action: hybridViewerStore.is_hover_highlight
-      ? (): void => {
-          hybridViewerStore.is_hover_highlight = false;
-          hybridViewerStore.clearHoverHighlight();
-        }
-      : undefined,
+    action: hybridViewerStore.is_hover_highlight ? stopHoverHighlight : undefined,
     menu: [
       {
         title: "Cells",
         testId: "highlightOnHoverCellsButton",
         icon: "mdi-select-all",
         action: (): void => {
-          if (
-            hybridViewerStore.is_hover_highlight &&
-            hybridViewerStore.hover_highlight_field_type === "CELL"
-          ) {
-            hybridViewerStore.is_hover_highlight = false;
-            hybridViewerStore.clearHoverHighlight();
-          } else {
-            hybridViewerStore.is_hover_highlight = true;
-            hybridViewerStore.hover_highlight_field_type = "CELL";
-          }
+          toggleHoverHighlight("CELL");
         },
       },
       {
@@ -132,16 +153,7 @@ const camera_options = computed<CameraOptionAction[]>(() => [
         testId: "highlightOnHoverPointsButton",
         icon: "mdi-select-drag",
         action: (): void => {
-          if (
-            hybridViewerStore.is_hover_highlight &&
-            hybridViewerStore.hover_highlight_field_type === "POINT"
-          ) {
-            hybridViewerStore.is_hover_highlight = false;
-            hybridViewerStore.clearHoverHighlight();
-          } else {
-            hybridViewerStore.is_hover_highlight = true;
-            hybridViewerStore.hover_highlight_field_type = "POINT";
-          }
+          toggleHoverHighlight("POINT");
         },
       },
     ],

package/app/components/Viewer/ToolActiveChip.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+interface Props {
+  label: string;
+  color: string;
+  icon: string;
+}
+
+const { label, color, icon } = defineProps<Props>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+defineOptions({ inheritAttrs: false });
+</script>
+
+<template>
+  <div
+    class="tool-active-container d-flex justify-center w-100 pa-4"
+    :style="{ '--tool-active-color': `var(--v-theme-${color})` }"
+  >
+    <v-chip
+      v-bind="$attrs"
+      :color="color"
+      :prepend-icon="icon"
+      elevation="8"
+      size="large"
+      variant="flat"
+      class="tool-active-pulse"
+      style="pointer-events: auto"
+      @click="emit('close')"
+    >
+      {{ label }} &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>
+</template>
+
+<style scoped>
+.tool-active-container {
+  position: absolute;
+  top: 20px;
+  left: 0;
+  pointer-events: none;
+  z-index: 3;
+}
+
+@keyframes pulse-ring {
+  0% {
+    box-shadow: 0 0 0 0 rgba(var(--tool-active-color), 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(var(--tool-active-color), 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(var(--tool-active-color), 0);
+  }
+}
+
+.tool-active-pulse {
+  animation: pulse-ring 1.5s ease-out infinite;
+}
+</style>

package/app/components/Viewer/Ui.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import OverlappingObjectsPicker from "@ogw_front/components/Viewer/OverlappingObjectsPicker.vue";
+import ToolActiveChip from "@ogw_front/components/Viewer/ToolActiveChip.vue";
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu/ContextMenu.vue";
 import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout.vue";
 import { getCurrentInstance } from "vue";
@@ -23,6 +24,11 @@ const menuStore = useMenuStore();
 const viewerStore = useViewerStore();
 const hybridViewerStore = useHybridViewerStore();
 
+const hoverHighlightLabel = computed(
+  () =>
+    `Highlight active (${hybridViewerStore.hover_highlight_field_type === "CELL" ? "Cells" : "Points"})`,
+);
+
 function stopHoverHighlight(): void {
   hybridViewerStore.is_hover_highlight = false;
   hybridViewerStore.clearHoverHighlight();
@@ -36,6 +42,9 @@ onKeyStroke("Escape", (event) => {
   } else if (hybridViewerStore.is_picking) {
     hybridViewerStore.is_picking = false;
     consumed = true;
+  } else if (hybridViewerStore.is_zoom_box_active) {
+    hybridViewerStore.is_zoom_box_active = false;
+    consumed = true;
   } else if (hybridViewerStore.is_ruler_active) {
     hybridViewerStore.deactivateRuler();
     consumed = true;
@@ -101,101 +110,40 @@ defineExpose({ get_viewer_id });
     @update:display-intermediate="handleIntermediateMenuUpdate"
   />
 
-  <v-fade-transition>
-    <div
+  <v-fade-transition group>
+    <ToolActiveChip
       v-if="viewerStore.picking_mode"
-      class="picking-message-container d-flex justify-center w-100 pa-4"
-    >
-      <v-chip
-        color="secondary"
-        elevation="8"
-        size="large"
-        variant="flat"
-        prepend-icon="mdi-crosshairs-gps"
-        class="pick-pulse"
-        data-testid="pickingActiveChip"
-        style="pointer-events: auto"
-        @click="viewerStore.toggle_picking_mode(false)"
-      >
-        Picking active — click in the viewer &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>
-
-  <v-fade-transition>
-    <div
+      key="picking"
+      data-testid="pickingActiveChip"
+      label="Picking active — click in the viewer"
+      color="secondary"
+      icon="mdi-crosshairs-gps"
+      @close="viewerStore.toggle_picking_mode(false)"
+    />
+    <ToolActiveChip
       v-if="hybridViewerStore.is_hover_highlight"
-      class="picking-message-container d-flex justify-center w-100 pa-4"
-    >
-      <v-chip
-        data-testid="hoverHighlightChip"
-        color="primary"
-        elevation="8"
-        size="large"
-        variant="flat"
-        class="pick-pulse"
-        style="pointer-events: auto"
-        @click="stopHoverHighlight"
-      >
-        Highlight active ({{
-          hybridViewerStore.hover_highlight_field_type === "CELL" ? "Cells" : "Points"
-        }}) &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>
-
-  <v-fade-transition>
-    <div
+      key="hoverHighlight"
+      data-testid="hoverHighlightChip"
+      :label="hoverHighlightLabel"
+      color="primary"
+      @close="stopHoverHighlight"
+    />
+    <ToolActiveChip
       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>
+      key="ruler"
+      data-testid="rulerActiveChip"
+      :label="`Ruler — click to set point ${hybridViewerStore.ruler_awaiting_point}`"
+      color="secondary"
+      icon="mdi-ruler"
+      @close="hybridViewerStore.clearRuler()"
+    />
+    <ToolActiveChip
+      v-if="hybridViewerStore.is_zoom_box_active"
+      key="zoomBox"
+      data-testid="zoomBoxActiveChip"
+      label="Zoom to box"
+      color="primary"
+      @close="hybridViewerStore.is_zoom_box_active = false"
+    />
   </v-fade-transition>
 </template>
-
-<style scoped>
-.picking-message-container {
-  position: absolute;
-  top: 20px;
-  left: 0;
-  pointer-events: none;
-  z-index: 3;
-}
-
-@keyframes pulse-ring {
-  0% {
-    box-shadow: 0 0 0 0 rgba(var(--v-theme-secondary), 0.7);
-  }
-  70% {
-    box-shadow: 0 0 0 10px rgba(var(--v-theme-secondary), 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(var(--v-theme-secondary), 0);
-  }
-}
-
-.pick-pulse {
-  animation: pulse-ring 1.5s ease-out infinite;
-}
-</style>

package/app/components/ZoomBoxOverlay.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { type ZoomBox, viewportShapedBox } from "@ogw_internal/stores/hybrid_viewer/zoom_box";
+import type { Position } from "@vueuse/core";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const MIN_ZOOM_BOX_PIXELS = 5;
+
+const hybridViewerStore = useHybridViewerStore();
+const overlay = useTemplateRef<HTMLDivElement>("overlay");
+const { left, top, width, height } = useElementBounding(overlay);
+const viewport = computed(() => ({ width: width.value, height: height.value }));
+
+function draggedBox(start: Position, end: Position): ZoomBox {
+  return viewportShapedBox(
+    { x: start.x - left.value, y: start.y - top.value },
+    { x: end.x - left.value, y: end.y - top.value },
+    viewport.value,
+  );
+}
+
+const { isSwiping, posStart, posEnd } = usePointerSwipe(overlay, {
+  threshold: MIN_ZOOM_BOX_PIXELS,
+  disableTextSelect: true,
+  onSwipeEnd: async () => {
+    try {
+      await hybridViewerStore.zoomToBox(draggedBox(posStart, posEnd), viewport.value);
+    } catch {
+      // The viewer store already reported the failed pick request to the user.
+    }
+  },
+});
+
+const rectangle_style = computed(() => {
+  const { start, end } = draggedBox(posStart, posEnd);
+  return {
+    left: `${Math.min(start.x, end.x)}px`,
+    top: `${Math.min(start.y, end.y)}px`,
+    width: `${Math.abs(end.x - start.x)}px`,
+    height: `${Math.abs(end.y - start.y)}px`,
+  };
+});
+</script>
+
+<template>
+  <div ref="overlay" data-testid="zoomBoxOverlay" class="zoom-box-overlay" @contextmenu.prevent>
+    <div v-if="isSwiping" class="zoom-box-rectangle" :style="rectangle_style" />
+  </div>
+</template>
+
+<style scoped>
+.zoom-box-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: crosshair;
+}
+
+.zoom-box-rectangle {
+  position: absolute;
+  border: 2px dashed rgb(var(--v-theme-primary));
+  background-color: rgba(var(--v-theme-primary), 0.15);
+  pointer-events: none;
+}
+</style>

package/app/stores/hybrid_viewer.ts

@@ -15,6 +15,7 @@ import { useHybridViewerFilters } from "@ogw_internal/stores/hybrid_viewer/filte
 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 { useHybridViewerZoomBox } from "@ogw_internal/stores/hybrid_viewer/zoom_box";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";
 
 import { Status } from "@ogw_front/utils/status";
@@ -34,6 +35,7 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
   const rulerStore = useHybridViewerRuler();
   const cameraStore = useHybridViewerCamera();
   const viewportStore = useHybridViewerViewport();
+  const zoomBoxStore = useHybridViewerZoomBox();
 
   const is_cursor_crosshair = computed(() => is_picking.value || rulerStore.is_ruler_active.value);
 
@@ -132,5 +134,6 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     ...highlightStore,
     ...rulerStore,
     ...cameraStore,
+    ...zoomBoxStore,
   };
 });

package/app/stores/viewer.ts

@@ -1,6 +1,7 @@
 // Third party imports
 // oxlint-disable-next-line no-unassigned-import
 import "@kitware/vtk.js/Rendering/OpenGL/Profiles/Geometry";
+import type { Vector3 } from "@kitware/vtk.js/types";
 import { connectImageStream } from "@kitware/vtk.js/Rendering/Misc/RemoteView";
 import { initWebSocketClient } from "@ogw_internal/utils/ws_client";
 import opengeodeweb_front_schemas from "@geode/opengeodeweb-front/opengeodeweb_front_schemas.json" with { type: "json" };
@@ -106,27 +107,16 @@ export const useViewerStore = defineStore(
       );
       return result;
     }
-    async function set_picked_point(x: number, y: number): Promise<void> {
+    async function pick_world_position(x: number, y: number): Promise<Vector3> {
       const schema = opengeodeweb_viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
-      const params = {
-        x: Math.round(x),
-        y: Math.round(y),
-      };
-      const response = await request({
-        schema,
-        params,
-      });
-      const {
-        x: world_x,
-        y: world_y,
-        z: world_z,
-        // oxlint-disable-next-line no-unsafe-type-assertion -- response shape is defined by the get_point_position schema.
-      } = response as { x: number; y: number; z: number };
-      picked_point.value = {
-        x: world_x,
-        y: world_y,
-        z: world_z,
-      };
+      const response = await request({ schema, params: { x: Math.round(x), y: Math.round(y) } });
+      // oxlint-disable-next-line no-unsafe-type-assertion -- response shape is defined by the get_point_position schema.
+      const position = response as { x: number; y: number; z: number };
+      return [position.x, position.y, position.z];
+    }
+    async function set_picked_point(x: number, y: number): Promise<void> {
+      const [world_x, world_y, world_z] = await pick_world_position(x, y);
+      picked_point.value = { x: world_x, y: world_y, z: world_z };
     }
     async function ws_connect(): Promise<void> {
       if (status.value === Status.CONNECTED) {
@@ -219,6 +209,7 @@ export const useViewerStore = defineStore(
       is_busy,
       toggle_picking_mode,
       set_picked_point,
+      pick_world_position,
       ws_connect,
       start_request,
       stop_request,

package/internal/stores/hybrid_viewer/camera.ts

@@ -182,11 +182,13 @@ const useHybridViewerCamera = createSharedComposable(() => {
       bumpMultiplier: 0,
       easeExponent: EASE_EXPONENT,
       onUpdate: () => {
+        renderer.resetCameraClippingRange();
         const renderWindow = requireRenderWindow(genericRenderWindow).getRenderWindow();
         renderWindow.render();
       },
       onEnd: () => {
         applyCameraOptions(camera, targetCameraOptions);
+        renderer.resetCameraClippingRange();
         const renderWindow = requireRenderWindow(genericRenderWindow).getRenderWindow();
         renderWindow.render();
         is_moving.value = false;

package/internal/stores/hybrid_viewer/ruler.ts

@@ -27,22 +27,24 @@ function useHybridViewerRuler(): {
   const ruler_point2 = ref<number[] | undefined>(undefined);
   const ruler_distance = ref<number | undefined>(undefined);
   const ruler_awaiting_point = ref(1);
-  const ruler_previous_hover_state = ref<RulerHoverState>({ active: false, fieldType: "CELL" });
+  // Hover highlight state overridden by the snap, restored when snapping stops. Without snap the ruler leaves the hover highlight untouched.
+  let hover_state_before_snap: RulerHoverState | undefined = undefined;
 
   function updateRulerSnapHighlight(): void {
     const { is_hover_highlight, hover_highlight_field_type, clearHoverHighlight } =
       useHybridViewerHighlight();
 
     if (is_ruler_active.value && ruler_snap.value) {
-      ruler_previous_hover_state.value = {
+      hover_state_before_snap = {
         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;
+    } else if (hover_state_before_snap) {
+      is_hover_highlight.value = hover_state_before_snap.active;
+      hover_highlight_field_type.value = hover_state_before_snap.fieldType;
+      hover_state_before_snap = undefined;
       if (!is_hover_highlight.value) {
         clearHoverHighlight();
       }
@@ -87,15 +89,7 @@ function useHybridViewerRuler(): {
       };
       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) };
-      // oxlint-disable-next-line no-unsafe-type-assertion -- response shape is defined by the get_point_position schema.
-      const response = (await viewerStore.request({ schema, params })) as {
-        x: number;
-        y: number;
-        z: number;
-      };
-      coords = [response.x, response.y, response.z];
+      coords = await viewerStore.pick_world_position(x, y);
     }
     if (!coords) {
       return;

package/internal/stores/hybrid_viewer/viewport.ts

@@ -1,11 +1,10 @@
-import type { Vector3, ViewStreamLike } from "./vtk_types";
 import { centerCameraOnPosition, useHybridViewerCamera } from "./camera";
 import { Status } from "@ogw_front/utils/status";
+import type { ViewStreamLike } from "./vtk_types";
 import { WHEEL_TIME_OUT_MS } from "./constants";
 import { useHybridViewerCore } from "./core";
 import { useHybridViewerHighlight } from "./highlight";
 import { useViewerStore } from "@ogw_front/stores/viewer";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 type ContainerRef = Ref<{ $el: HTMLElement } | undefined>;
 
@@ -44,37 +43,26 @@ async function resize(width: number, height: number): Promise<void> {
   await remoteRender();
 }
 
-function performClickPicking(event: MouseEvent, containerElement: HTMLElement): void {
+async function performClickPicking(
+  event: MouseEvent,
+  containerElement: HTMLElement,
+): Promise<void> {
   const { genericRenderWindow } = useHybridViewerCore();
   const { syncRemoteCamera } = useHybridViewerCamera();
   const viewerStore = useViewerStore();
   const rect = containerElement.getBoundingClientRect();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.get_point_position;
-  const params = {
-    x: Math.round(event.clientX - rect.left),
-    y: Math.round(rect.height - (event.clientY - rect.top)),
-  };
-  void viewerStore.request(
-    {
-      schema,
-      params,
-    },
-    {
-      response_function: (response: unknown) => {
-        // oxlint-disable-next-line no-unsafe-type-assertion -- response shape is defined by the get_point_position schema.
-        const { x, y, z } = response as { x: number; y: number; z: number };
-        const pickedPos: Vector3 = [x, y, z];
-        if (!genericRenderWindow.value || !pickedPos.some((val) => val !== 0)) {
-          return;
-        }
-        const renderer = genericRenderWindow.value.getRenderer();
-        const camera = renderer.getActiveCamera();
-        centerCameraOnPosition(camera, pickedPos);
-        genericRenderWindow.value.getRenderWindow().render();
-        syncRemoteCamera();
-      },
-    },
+  const pickedPos = await viewerStore.pick_world_position(
+    event.clientX - rect.left,
+    rect.height - (event.clientY - rect.top),
   );
+  if (!genericRenderWindow.value || !pickedPos.some((val) => val !== 0)) {
+    return;
+  }
+  const renderer = genericRenderWindow.value.getRenderer();
+  const camera = renderer.getActiveCamera();
+  centerCameraOnPosition(camera, pickedPos);
+  genericRenderWindow.value.getRenderWindow().render();
+  syncRemoteCamera();
 }
 
 function setContainer(container: ContainerRef | undefined): void {
@@ -114,7 +102,7 @@ function setContainer(container: ContainerRef | undefined): void {
         return;
       }
       if (event.button === 0 && is_picking.value) {
-        performClickPicking(event, containerElement);
+        void performClickPicking(event, containerElement);
         is_picking.value = false;
         return;
       }

package/internal/stores/hybrid_viewer/zoom_box.ts

@@ -0,0 +1,74 @@
+import type { CameraOptions, Vector3 } from "./vtk_types";
+import {
+  applyCameraOptions,
+  centerCameraOnPosition,
+  getCameraOptions,
+  useHybridViewerCamera,
+} from "./camera";
+import { requireRenderWindow, useHybridViewerCore } from "./core";
+import type { Position } from "@vueuse/core";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import { newInstance as vtkCamera } from "@kitware/vtk.js/Rendering/Core/Camera";
+
+interface ZoomBox {
+  start: Position;
+  end: Position;
+}
+
+interface Viewport {
+  width: number;
+  height: number;
+}
+
+function viewportShapedBox(start: Position, end: Position, { width, height }: Viewport): ZoomBox {
+  const deltaX = end.x - start.x;
+  const deltaY = end.y - start.y;
+  const aspect = Math.max(width, 1) / Math.max(height, 1);
+  const boxWidth = Math.max(Math.abs(deltaX), Math.abs(deltaY) * aspect);
+  return {
+    start,
+    end: {
+      x: start.x + (Math.sign(deltaX) || 1) * boxWidth,
+      y: start.y + (Math.sign(deltaY) || 1) * (boxWidth / aspect),
+    },
+  };
+}
+
+function computeZoomToBoxCamera(
+  camera: CameraOptions,
+  box: ZoomBox,
+  { width }: Viewport,
+  target: Vector3,
+): CameraOptions {
+  const zoomCamera = vtkCamera();
+  applyCameraOptions(zoomCamera, camera);
+  centerCameraOnPosition(zoomCamera, target);
+  // The box is viewport-shaped (see viewportShapedBox), so its width alone gives the zoom factor.
+  zoomCamera.dolly(width / Math.abs(box.end.x - box.start.x));
+  return getCameraOptions(zoomCamera);
+}
+
+const useHybridViewerZoomBox = createSharedComposable(() => {
+  const is_zoom_box_active = ref(false);
+
+  // Leaves the mode first so a second box cannot be drawn while the pick is pending. Request errors are reported by the viewer store.
+  async function zoomToBox(box: ZoomBox, viewport: Viewport): Promise<void> {
+    is_zoom_box_active.value = false;
+    const target = await useViewerStore().pick_world_position(
+      (box.start.x + box.end.x) / 2,
+      viewport.height - (box.start.y + box.end.y) / 2,
+    );
+    const { genericRenderWindow } = useHybridViewerCore();
+    const { setCamera } = useHybridViewerCamera();
+    const camera = requireRenderWindow(genericRenderWindow).getRenderer().getActiveCamera();
+    setCamera(computeZoomToBoxCamera(getCameraOptions(camera), box, viewport, target));
+  }
+
+  return {
+    is_zoom_box_active,
+    zoomToBox,
+  };
+});
+
+export { computeZoomToBoxCamera, useHybridViewerZoomBox, viewportShapedBox };
+export type { ZoomBox };

package/nuxt.config.ts

@@ -152,6 +152,7 @@ export default defineNuxtConfig({
         "@kitware/vtk.js/IO/XML/XMLPolyDataReader",
         "@kitware/vtk.js/Rendering/Core/Actor",
         "@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor",
+        "@kitware/vtk.js/Rendering/Core/Camera",
         "@kitware/vtk.js/Rendering/Core/ColorTransferFunction",
         "@kitware/vtk.js/Rendering/Core/Mapper",
         "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow",

package/package.json

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