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

package/app/components/CameraOrientation.vue

@@ -1,6 +1,6 @@
 <script setup>
 import ToolPanel from "@ogw_front/components/ToolPanel";
-import { applyCameraOptions } from "@ogw_internal/stores/hybrid_viewer_camera";
+import { applyCameraOptions } from "@ogw_internal/stores/hybrid_viewer/camera";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { newInstance as vtkAnnotatedCubeActor } from "@kitware/vtk.js/Rendering/Core/AnnotatedCubeActor";
 import { newInstance as vtkGenericRenderWindow } from "@kitware/vtk.js/Rendering/Misc/GenericRenderWindow";

package/app/stores/hybrid_viewer.js

@@ -1,80 +1,42 @@
-import {
-  ACTOR_COLOR,
-  BACKGROUND_COLOR,
-  WHEEL_TIME_OUT_MS,
-} from "@ogw_internal/stores/hybrid_viewer_constants";
 import {
   applySnapshot,
   getCameraOptions,
-  performCameraOrientation,
-  performFocusCameraOnObject,
-  performSetCamera,
-  performSyncRemoteCamera,
-} from "@ogw_internal/stores/hybrid_viewer_camera";
-import {
-  createClearHoverData,
-  createHoverHighlight,
-} from "@ogw_internal/stores/hybrid_viewer_highlight";
-import {
-  performAddItem,
-  performClear,
-  performClearHoverHighlight,
-  performClickPicking,
-  performRemoveItem,
-  performResize,
-  performSetClippingPlanes,
-  performSetContainer,
-  performSetShrink,
-  performSetVisibility,
-  performSetZScaling,
-} from "@ogw_internal/stores/hybrid_viewer";
-import { computeAverageBrightness } from "@ogw_internal/stores/hybrid_viewer_brightness";
-import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
+  useHybridViewerCamera,
+} from "@ogw_internal/stores/hybrid_viewer/camera";
+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 { 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";
-import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
-import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
 
 import { Status } from "@ogw_front/utils/status";
-import { useDataStore } from "@ogw_front/stores/data";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 // oxlint-disable max-lines-per-function, max-statements
 export const useHybridViewerStore = defineStore("hybridViewer", () => {
-  const dataStore = useDataStore();
-  const hybridDb = reactive({});
   const viewerStore = useViewerStore();
-  const camera_options = reactive({});
   const genericRenderWindow = reactive({});
   const status = ref(Status.NOT_CREATED);
   const is_moving = ref(false);
   const is_picking = ref(false);
-  const is_hover_highlight = ref(false);
-  const hover_highlight_field_type = ref("CELL");
-  const hoverData = ref(undefined);
-  const hoverPosition = ref({ x: 0, y: 0 });
-  const zScale = ref(1);
   let imageStyle = undefined;
-  let viewStream = undefined;
-  let wheelEventEndTimeout = undefined;
-  const gridActor = undefined;
 
   watch(is_picking, (value) => {
-    const element = genericRenderWindow.value
-      ?.getApiSpecificRenderWindow()
-      ?.getCanvas()?.parentElement;
-    if (element) {
-      element.style.cursor = value ? "crosshair" : "default";
+    if (!genericRenderWindow.value) {
+      return;
+    }
+    const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
+    const canvas = webGLRenderWindow.getCanvas();
+    if (canvas && canvas.parentElement) {
+      canvas.parentElement.style.cursor = value ? "crosshair" : "default";
     }
   });
 
-  const latestImage = ref(undefined);
-  const offscreenCanvas =
-    typeof document === "undefined" ? undefined : document.createElement("canvas");
-  const offscreenCtx = offscreenCanvas
-    ? offscreenCanvas.getContext("2d", { willReadFrequently: true })
-    : undefined;
+  const brightnessStore = useHybridViewerBrightness();
 
   async function initHybridViewer() {
     if (status.value !== Status.NOT_CREATED) {
@@ -89,112 +51,25 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
     Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
     await viewerStore.ws_connect();
-    viewStream = viewerStore.client.getImageStream().createViewStream("-1");
-    viewStream.onImageReady((event) => {
+    const imageStream = viewerStore.client.getImageStream();
+    viewportStore.viewStream.value = imageStream.createViewStream("-1");
+    viewportStore.viewStream.value.onImageReady((event) => {
       if (is_moving.value) {
         return;
       }
-      latestImage.value = event.image;
+      brightnessStore.latestImage.value = event.image;
       webGLRenderWindow.setBackgroundImage(event.image);
       imageStyle.opacity = 1;
     });
-    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
-    Object.assign(camera_options, getCameraOptions(camera));
+    const renderer = genericRenderWindow.value.getRenderer();
+    const camera = renderer.getActiveCamera();
+    Object.assign(cameraStore.camera_options, getCameraOptions(camera));
     camera.onModified(() => {
-      Object.assign(camera_options, getCameraOptions(camera));
+      Object.assign(cameraStore.camera_options, getCameraOptions(camera));
     });
     status.value = Status.CREATED;
   }
 
-  async function addItem(id) {
-    await performAddItem(id, {
-      genericRenderWindow: genericRenderWindow.value,
-      dataStore,
-      vtkXMLPolyDataReader,
-      vtkActor,
-      vtkMapper,
-      actorColor: ACTOR_COLOR,
-      hybridDb,
-    });
-  }
-
-  function removeItem(id) {
-    performRemoveItem(id, { genericRenderWindow: genericRenderWindow.value, hybridDb });
-  }
-
-  function setVisibility(id, visibility) {
-    performSetVisibility(id, visibility, {
-      genericRenderWindow: genericRenderWindow.value,
-      hybridDb,
-    });
-  }
-
-  async function setZScaling(z_scale) {
-    await performSetZScaling(z_scale, {
-      zScale,
-      genericRenderWindow: genericRenderWindow.value,
-      gridActor,
-      viewerStore,
-      viewer_schemas,
-      remoteRender,
-    });
-  }
-
-  async function setClippingPlanes(ids, planes) {
-    await performSetClippingPlanes(ids, planes, { viewerStore, viewer_schemas, remoteRender });
-  }
-
-  async function setShrink(ids, shrink_factor) {
-    await performSetShrink(ids, shrink_factor, { viewerStore, viewer_schemas, remoteRender });
-  }
-
-  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,
-      syncRemoteCamera,
-    });
-  }
-
-  function setCameraOrientation(orientation) {
-    performCameraOrientation(orientation, {
-      genericRenderWindow: genericRenderWindow.value,
-      is_moving,
-      imageStyle,
-      syncRemoteCamera,
-    });
-  }
-
-  function setCamera(targetCameraOptions) {
-    performSetCamera(targetCameraOptions, {
-      genericRenderWindow: genericRenderWindow.value,
-      is_moving,
-      imageStyle,
-      syncRemoteCamera,
-    });
-  }
-
-  function syncRemoteCamera() {
-    performSyncRemoteCamera({
-      genericRenderWindow: genericRenderWindow.value,
-      viewerStore,
-      viewer_schemas,
-      remoteRender,
-      camera_options,
-    });
-  }
-
   let renderPromise = undefined;
   let renderPending = false;
 
@@ -219,124 +94,35 @@ export const useHybridViewerStore = defineStore("hybridViewer", () => {
     return renderPromise;
   }
 
-  const hoverTimeoutRef = ref(undefined);
-  const currentHoverId = ref(undefined);
-
-  const clearHoverData = createClearHoverData(hoverTimeoutRef, hoverData, currentHoverId);
-
-  const hoverHighlight = createHoverHighlight({
-    genericRenderWindow,
-    is_hover_highlight,
-    viewerStore,
-    viewer_schemas,
-    hover_highlight_field_type,
-    hybridDb,
-    hoverData,
-    hoverPosition,
-    currentHoverId,
-    hoverTimeoutRef,
-    clearHoverData,
-  });
-
-  function clearHoverHighlight() {
-    clearHoverData();
-    performClearHoverHighlight({
-      viewerStore,
-      viewer_schemas,
-      hover_highlight_field_type,
-      hybridDb,
-    });
-  }
-
-  function setContainer(container) {
-    performSetContainer({
-      container,
-      genericRenderWindow: genericRenderWindow.value,
-      imageStyleSetter: (style) => (imageStyle = style),
-      resize,
-      useMousePressed,
-      useEventListener,
-      is_picking,
-      is_moving,
-      clickPickingCallback: performClickPicking,
-      viewerStore,
-      viewer_schemas,
-      syncRemoteCamera,
-      hoverHighlight,
-      wheelTimeoutMs: WHEEL_TIME_OUT_MS,
-      wheelEventEndTimeout,
-      wheelTimeoutSetter: (timeout) => (wheelEventEndTimeout = timeout),
-    });
-  }
-
-  async function resize(width, height) {
-    await performResize(width, height, {
-      viewerStore,
-      status,
-      Status,
-      genericRenderWindow: genericRenderWindow.value,
-      viewStream,
-      remoteRender,
-    });
-  }
-
-  function getAverageBrightness(rect) {
-    return computeAverageBrightness(rect, {
-      latestImage: latestImage.value,
-      offscreenCtx,
-      offscreenCanvas,
-      genericRenderWindow: genericRenderWindow.value,
-    });
-  }
+  const sceneStore = useHybridViewerScene();
+  const filtersStore = useHybridViewerFilters();
+  const highlightStore = useHybridViewerHighlight();
+  const cameraStore = useHybridViewerCamera();
+  const viewportStore = useHybridViewerViewport();
 
   function exportStores() {
-    const camera = genericRenderWindow.value.getRenderer().getActiveCamera();
-    return { zScale: zScale.value, camera_options: getCameraOptions(camera) || camera_options };
-  }
-
-  async function importStores(snapshot) {
-    await applySnapshot(snapshot, {
-      genericRenderWindow: genericRenderWindow.value,
-      setZScaling,
-      syncRemoteCamera,
-      setCamera,
-    });
-  }
-
-  function clear() {
-    performClear({ genericRenderWindow: genericRenderWindow.value, hybridDb });
+    const renderer = genericRenderWindow.value.getRenderer();
+    const camera = renderer.getActiveCamera();
+    return {
+      zScale: sceneStore.zScale.value,
+      camera_options: getCameraOptions(camera) || cameraStore.camera_options,
+    };
   }
 
   return {
-    hybridDb,
     genericRenderWindow,
-    addItem,
-    removeItem,
-    setVisibility,
-    setZScaling,
-    setClippingPlanes,
-    setShrink,
-    syncRemoteCamera,
-    setCamera,
+    status,
+    is_moving,
+    is_picking,
     initHybridViewer,
     remoteRender,
-    resize,
-    resetCamera,
-    focusCameraOnObject,
-    setCameraOrientation,
-    setContainer,
-    zScale,
-    is_picking,
-    is_hover_highlight,
-    hover_highlight_field_type,
-    clearHoverHighlight,
-    hoverData,
-    hoverPosition,
-    clear,
     exportStores,
-    importStores,
-    camera_options,
-    latestImage,
-    getAverageBrightness,
+    importStores: applySnapshot,
+    ...brightnessStore,
+    ...sceneStore,
+    ...viewportStore,
+    ...filtersStore,
+    ...highlightStore,
+    ...cameraStore,
   };
 });

package/internal/stores/{hybrid_viewer_brightness.js → hybrid_viewer/brightness.js}

@@ -1,9 +1,32 @@
-import { BACKGROUND_GREY_VALUE, RGB_MAX } from "./hybrid_viewer_constants";
+import { BACKGROUND_GREY_VALUE, RGB_MAX } from "./constants";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 
 const RGBA_CHANNELS = 4;
 const SAMPLE_SIZE = 10;
 const TOTAL_CHANNELS = 400;
 
+function useHybridViewerBrightness() {
+  const latestImage = ref(undefined);
+  const offscreenCanvas =
+    typeof document === "undefined" ? undefined : document.createElement("canvas");
+  const offscreenCtx = offscreenCanvas
+    ? offscreenCanvas.getContext("2d", { willReadFrequently: true })
+    : undefined;
+
+  function getAverageBrightness(rect) {
+    return computeAverageBrightness(rect, {
+      latestImage: latestImage.value,
+      offscreenCtx,
+      offscreenCanvas,
+    });
+  }
+
+  return {
+    latestImage,
+    getAverageBrightness,
+  };
+}
+
 function mapRect(rect, latestImage, canvasRect) {
   const scaleX = latestImage.width / canvasRect.width;
   const scaleY = latestImage.height / canvasRect.height;
@@ -16,11 +39,12 @@ function mapRect(rect, latestImage, canvasRect) {
 }
 
 function computeAverageBrightness(rect, options) {
-  const { latestImage, offscreenCtx, offscreenCanvas, genericRenderWindow } = options;
-  if (!latestImage || !offscreenCtx || !offscreenCanvas || !genericRenderWindow) {
+  const { latestImage, offscreenCtx, offscreenCanvas } = options;
+  const { genericRenderWindow } = useHybridViewerStore();
+  if (!latestImage || !offscreenCtx || !offscreenCanvas || !genericRenderWindow.value) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
-  const canvas = genericRenderWindow.getApiSpecificRenderWindow().getCanvas();
+  const canvas = genericRenderWindow.value.getApiSpecificRenderWindow().getCanvas();
   if (!canvas) {
     return BACKGROUND_GREY_VALUE / RGB_MAX;
   }
@@ -59,4 +83,4 @@ function computeAverageBrightness(rect, options) {
   }
 }
 
-export { computeAverageBrightness };
+export { computeAverageBrightness, useHybridViewerBrightness };

package/internal/stores/{hybrid_viewer_camera.js → hybrid_viewer/camera.js}

@@ -3,8 +3,11 @@ import {
   SHORT_ANIMATION_DURATION,
   animateCamera,
   computeAnimationDuration,
-} from "@ogw_internal/stores/hybrid_viewer_camera_animation";
+} from "./camera_animation";
 import { dot } from "@kitware/vtk.js/Common/Core/Math";
+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";
 
 const BUMP_MULTIPLIER = 0.2;
 const ALIGNMENT_THRESHOLD = 0.9;
@@ -19,8 +22,59 @@ const ORIENTATIONS = {
   xminus: { position: [-1, 0, 0], view_up: [0, 0, 1] },
 };
 
+function getImageStyle() {
+  const { genericRenderWindow } = useHybridViewerStore();
+  if (!genericRenderWindow.value) {
+    return undefined;
+  }
+  const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
+  if (!webGLRenderWindow) {
+    return undefined;
+  }
+  const bgImage = webGLRenderWindow.getReferenceByName("bgImage");
+  return bgImage ? bgImage.style : undefined;
+}
+
+function useHybridViewerCamera() {
+  const camera_options = reactive({});
+
+  function syncRemoteCamera() {
+    performSyncRemoteCamera();
+  }
+
+  function setCamera(targetCameraOptions) {
+    performSetCamera(targetCameraOptions);
+  }
+
+  function resetCamera() {
+    const { genericRenderWindow } = useHybridViewerStore();
+    const renderer = genericRenderWindow.value.getRenderer();
+    renderer.resetCamera();
+    const renderWindow = genericRenderWindow.value.getRenderWindow();
+    renderWindow.render();
+    syncRemoteCamera();
+  }
+
+  async function focusCameraOnObject(id, block_ids = []) {
+    await performFocusCameraOnObject(id, block_ids);
+  }
+
+  function setCameraOrientation(orientation) {
+    performCameraOrientation(orientation);
+  }
+
+  return {
+    camera_options,
+    syncRemoteCamera,
+    setCamera,
+    resetCamera,
+    focusCameraOnObject,
+    setCameraOrientation,
+  };
+}
+
 function getCameraOptions(camera) {
-  if (!camera?.getFocalPoint) {
+  if (!camera || !camera.getFocalPoint) {
     return camera;
   }
   return {
@@ -34,7 +88,7 @@ function getCameraOptions(camera) {
 }
 
 function applyCameraOptions(camera, options) {
-  if (camera?.set && options) {
+  if (camera && camera.set && options) {
     camera.set({
       focalPoint: options.focal_point,
       viewUp: options.view_up,
@@ -59,9 +113,13 @@ function centerCameraOnPosition(camera, pickedPosition) {
   );
 }
 
-function performSetCamera(targetCameraOptions, options) {
-  const { genericRenderWindow, is_moving, imageStyle, syncRemoteCamera } = options;
-  const camera = genericRenderWindow.getRenderer().getActiveCamera();
+function performSetCamera(targetCameraOptions) {
+  const hybridViewerStore = useHybridViewerStore();
+  const { genericRenderWindow, syncRemoteCamera } = hybridViewerStore;
+  const { is_moving } = storeToRefs(hybridViewerStore);
+  const imageStyle = getImageStyle();
+  const renderer = genericRenderWindow.value.getRenderer();
+  const camera = renderer.getActiveCamera();
   const startState = getCameraOptions(camera);
   const duration = computeAnimationDuration(startState, targetCameraOptions);
   is_moving.value = true;
@@ -75,20 +133,27 @@ function performSetCamera(targetCameraOptions, options) {
     duration,
     bumpMultiplier: 0,
     easeExponent: EASE_EXPONENT,
-    onUpdate: () => genericRenderWindow.getRenderWindow().render(),
+    onUpdate: () => {
+      const renderWindow = genericRenderWindow.value.getRenderWindow();
+      renderWindow.render();
+    },
     onEnd: () => {
       applyCameraOptions(camera, targetCameraOptions);
-      genericRenderWindow.getRenderWindow().render();
+      const renderWindow = genericRenderWindow.value.getRenderWindow();
+      renderWindow.render();
       is_moving.value = false;
       syncRemoteCamera();
     },
   });
 }
 
-function performCameraOrientation(orientation, options) {
-  const { genericRenderWindow, is_moving, imageStyle, syncRemoteCamera } = options;
+function performCameraOrientation(orientation) {
+  const hybridViewerStore = useHybridViewerStore();
+  const { genericRenderWindow, syncRemoteCamera } = hybridViewerStore;
+  const { is_moving } = storeToRefs(hybridViewerStore);
+  const imageStyle = getImageStyle();
   const config = ORIENTATIONS[orientation.toLowerCase()];
-  const renderer = genericRenderWindow.getRenderer();
+  const renderer = genericRenderWindow.value.getRenderer();
   const camera = renderer.getActiveCamera();
   const startState = getCameraOptions(camera);
 
@@ -105,7 +170,9 @@ function performCameraOrientation(orientation, options) {
   const duration =
     alignment > ALIGNMENT_THRESHOLD ? LONG_ANIMATION_DURATION : SHORT_ANIMATION_DURATION;
   is_moving.value = true;
-  imageStyle.opacity = 0;
+  if (imageStyle) {
+    imageStyle.opacity = 0;
+  }
 
   animateCamera({
     camera,
@@ -114,7 +181,10 @@ function performCameraOrientation(orientation, options) {
     duration,
     bumpMultiplier: BUMP_MULTIPLIER,
     easeExponent: EASE_EXPONENT,
-    onUpdate: () => genericRenderWindow.getRenderWindow().render(),
+    onUpdate: () => {
+      const renderWindow = genericRenderWindow.value.getRenderWindow();
+      renderWindow.render();
+    },
     onEnd: () => {
       is_moving.value = false;
       syncRemoteCamera();
@@ -122,22 +192,14 @@ function performCameraOrientation(orientation, options) {
   });
 }
 
-async function performFocusCameraOnObject(id, options) {
-  const {
-    hybridDb,
-    viewerStore,
-    viewer_schemas,
-    genericRenderWindow,
-    block_ids = [],
-    is_moving,
-    imageStyle,
-    syncRemoteCamera,
-  } = options;
+async function performFocusCameraOnObject(id, block_ids = []) {
+  const { genericRenderWindow, hybridDb } = useHybridViewerStore();
 
   if (!hybridDb[id]) {
     return;
   }
 
+  const viewerStore = useViewerStore();
   let bounds = [];
   if (block_ids.length > 0) {
     const schema = viewer_schemas.opengeodeweb_viewer.model.get_blocks_bounds;
@@ -147,25 +209,21 @@ async function performFocusCameraOnObject(id, options) {
     bounds = hybridDb[id].actor.getBounds();
   }
 
-  const renderer = genericRenderWindow.getRenderer();
+  const renderer = genericRenderWindow.value.getRenderer();
   const camera = renderer.getActiveCamera();
   const startOptions = getCameraOptions(camera);
   renderer.resetCamera(bounds);
   const targetOptions = getCameraOptions(camera);
   applyCameraOptions(camera, startOptions);
 
-  performSetCamera(targetOptions, {
-    genericRenderWindow,
-    is_moving,
-    imageStyle,
-    syncRemoteCamera,
-  });
+  performSetCamera(targetOptions);
 }
 
-function performSyncRemoteCamera(options) {
-  const { genericRenderWindow, viewerStore, viewer_schemas, remoteRender, camera_options } =
-    options;
-  const camera = genericRenderWindow.getRenderer().getActiveCamera();
+function performSyncRemoteCamera() {
+  const { genericRenderWindow, camera_options, remoteRender } = useHybridViewerStore();
+  const viewerStore = useViewerStore();
+  const renderer = genericRenderWindow.value.getRenderer();
+  const camera = renderer.getActiveCamera();
   const options_camera = getCameraOptions(camera);
   const schema = viewer_schemas.opengeodeweb_viewer.viewer.update_camera;
   const params = { camera_options: options_camera };
@@ -177,39 +235,30 @@ function performSyncRemoteCamera(options) {
     {
       response_function: () => {
         remoteRender();
-        Object.assign(camera_options, options_camera);
+        if (camera_options) {
+          Object.assign(camera_options, options_camera);
+        }
       },
     },
   );
 }
 
-async function applySnapshot(snapshot, options) {
-  const { genericRenderWindow, setZScaling, syncRemoteCamera, setCamera } = options;
+async function applySnapshot(snapshot) {
   if (!snapshot) {
     return;
   }
-  const z_scale = snapshot.zScale;
-  if (typeof z_scale === "number") {
-    await setZScaling(z_scale);
-  }
-  const { camera_options: snapshot_camera_options } = snapshot;
-  if (snapshot_camera_options) {
-    if (setCamera) {
-      setCamera(snapshot_camera_options);
-    } else {
-      applyCameraOptions(
-        genericRenderWindow.getRenderer().getActiveCamera(),
-        snapshot_camera_options,
-      );
-      genericRenderWindow.getRenderWindow().render();
-      syncRemoteCamera();
-    }
+  const { setZScaling, setCamera } = useHybridViewerStore();
+  if (typeof snapshot.zScale === "number") {
+    await setZScaling(snapshot.zScale);
+  }
+  if (snapshot.camera_options) {
+    setCamera(snapshot.camera_options);
   }
 }
 
 export {
-  BUMP_MULTIPLIER,
   ALIGNMENT_THRESHOLD,
+  BUMP_MULTIPLIER,
   EASE_EXPONENT,
   ORIENTATIONS,
   applyCameraOptions,
@@ -220,4 +269,5 @@ export {
   performFocusCameraOnObject,
   performSetCamera,
   performSyncRemoteCamera,
+  useHybridViewerCamera,
 };