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

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,
 };

package/internal/stores/hybrid_viewer/filters.js

@@ -0,0 +1,38 @@
+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 useHybridViewerFilters() {
+  async function setClippingPlanes(ids, planes) {
+    await performSetClippingPlanes(ids, planes);
+  }
+
+  async function setShrink(ids, shrink_factor) {
+    await performSetShrink(ids, shrink_factor);
+  }
+
+  return {
+    setClippingPlanes,
+    setShrink,
+  };
+}
+
+async function performSetClippingPlanes(ids, planes) {
+  const viewerStore = useViewerStore();
+  const { remoteRender } = useHybridViewerStore();
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.clipping_planes;
+  const params = { ids, planes };
+  await viewerStore.request({ schema, params });
+  await remoteRender();
+}
+
+async function performSetShrink(ids, shrink_factor) {
+  const viewerStore = useViewerStore();
+  const { remoteRender } = useHybridViewerStore();
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.shrink;
+  const params = { ids, shrink_factor };
+  await viewerStore.request({ schema, params });
+  await remoteRender();
+}
+
+export { performSetClippingPlanes, performSetShrink, useHybridViewerFilters };

package/internal/stores/hybrid_viewer/highlight.js

@@ -0,0 +1,162 @@
+import { HOVER_DEBOUNCE_MS, HOVER_TIMEOUT_MS } from "./constants";
+import { database } from "@ogw_internal/database/database.js";
+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 useHybridViewerHighlight() {
+  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 hoverTimeoutRef = ref(undefined);
+  const currentHoverId = ref(undefined);
+
+  const clearHoverData = createClearHoverData(hoverTimeoutRef, hoverData, currentHoverId);
+
+  const hoverHighlight = createHoverHighlight({ hoverTimeoutRef, currentHoverId, clearHoverData });
+
+  function clearHoverHighlight() {
+    clearHoverData();
+    performClearHoverHighlight();
+  }
+
+  return {
+    is_hover_highlight,
+    hover_highlight_field_type,
+    hoverData,
+    hoverPosition,
+    clearHoverHighlight,
+    hoverHighlight,
+  };
+}
+
+function performHoverHighlight(event, onResponse) {
+  const hybridViewerStore = useHybridViewerStore();
+  const { genericRenderWindow, hybridDb } = hybridViewerStore;
+  const { is_hover_highlight, hover_highlight_field_type } = storeToRefs(hybridViewerStore);
+  if (!is_hover_highlight.value) {
+    return;
+  }
+  const container = genericRenderWindow.value?.getContainer();
+  if (!container) {
+    return;
+  }
+  const viewerStore = useViewerStore();
+  const rect = container.getBoundingClientRect();
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
+  const params = {
+    x: Math.round(event.clientX - rect.left),
+    y: Math.round(rect.height - (event.clientY - rect.top)),
+    field_type: hover_highlight_field_type.value,
+    ids: Object.keys(hybridDb),
+  };
+  viewerStore.request({ schema, params }, { response_function: onResponse });
+}
+
+function performClearHoverHighlight() {
+  const { hybridDb } = useHybridViewerStore();
+  const { hover_highlight_field_type } = storeToRefs(useHybridViewerStore());
+  const viewerStore = useViewerStore();
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.highlight;
+  const params = {
+    x: -1,
+    y: -1,
+    field_type: hover_highlight_field_type.value,
+    ids: Object.keys(hybridDb),
+  };
+  viewerStore.request({ schema, params });
+}
+
+function createClearHoverData(hoverTimeoutRef, hoverData, currentHoverId) {
+  return function clearHoverData() {
+    if (hoverTimeoutRef.value) {
+      clearTimeout(hoverTimeoutRef.value);
+      hoverTimeoutRef.value = undefined;
+    }
+    hoverData.value = undefined;
+    currentHoverId.value = undefined;
+  };
+}
+
+function createHoverHighlight({ hoverTimeoutRef, currentHoverId, clearHoverData }) {
+  return useDebounceFn((event) => {
+    const hybridViewerStore = useHybridViewerStore();
+    const { genericRenderWindow } = hybridViewerStore;
+    const { is_hover_highlight, hoverData, hoverPosition } = storeToRefs(hybridViewerStore);
+    const containerElement = genericRenderWindow.value?.getContainer();
+    const relativeMousePosition = containerElement
+      ? {
+          x: event.clientX - containerElement.getBoundingClientRect().left,
+          y: event.clientY - containerElement.getBoundingClientRect().top,
+        }
+      : { x: event.clientX, y: event.clientY };
+
+    performHoverHighlight(event, async (response) => {
+      const isResponseValid =
+        response && response.id && response.picked_id !== undefined && response.picked_id !== -1;
+      if (!is_hover_highlight.value || !isResponseValid) {
+        clearHoverData();
+        return;
+      }
+
+      const hoverKey = `${response.id}_${response.field_type}_${response.picked_id}`;
+      if (currentHoverId.value === hoverKey) {
+        return;
+      }
+
+      if (hoverTimeoutRef.value) {
+        clearTimeout(hoverTimeoutRef.value);
+        hoverTimeoutRef.value = undefined;
+      }
+
+      hoverData.value = undefined;
+      currentHoverId.value = hoverKey;
+
+      let componentInfo = undefined;
+      let modelName = undefined;
+
+      const modelRecord = await database.data.get(response.id);
+      if (modelRecord) {
+        modelName = modelRecord.name;
+      }
+
+      if (response.geode_id) {
+        const components = database.model_components.where("[id+geode_id]");
+        const query = components.equals([response.id, response.geode_id]);
+        const component = await query.first();
+        if (component) {
+          componentInfo = {
+            name: component.name,
+            id: component.geode_id,
+            type: component.type,
+          };
+        }
+      }
+
+      const newHoverData = {
+        modelId: response.id,
+        modelName,
+        blockName: response.geode_id,
+        pickedId: response.picked_id,
+        fieldType: response.field_type,
+        component: componentInfo,
+        attributes: response.attributes || {},
+      };
+
+      hoverTimeoutRef.value = setTimeout(() => {
+        hoverPosition.value = relativeMousePosition;
+        hoverData.value = newHoverData;
+        hoverTimeoutRef.value = undefined;
+      }, HOVER_TIMEOUT_MS);
+    });
+  }, HOVER_DEBOUNCE_MS);
+}
+
+export {
+  createClearHoverData,
+  createHoverHighlight,
+  performClearHoverHighlight,
+  performHoverHighlight,
+  useHybridViewerHighlight,
+};

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 };