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

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/scene.js

@@ -0,0 +1,141 @@
+import { ACTOR_COLOR } from "./constants";
+import { useDataStore } from "@ogw_front/stores/data";
+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";
+import { newInstance as vtkActor } from "@kitware/vtk.js/Rendering/Core/Actor";
+import { newInstance as vtkMapper } from "@kitware/vtk.js/Rendering/Core/Mapper";
+import { newInstance as vtkXMLPolyDataReader } from "@kitware/vtk.js/IO/XML/XMLPolyDataReader";
+
+function useHybridViewerScene() {
+  const hybridDb = reactive({});
+  const zScale = ref(1);
+
+  async function addItem(id) {
+    await performAddItem(id);
+  }
+
+  function removeItem(id) {
+    performRemoveItem(id);
+  }
+
+  function setVisibility(id, visibility) {
+    performSetVisibility(id, visibility);
+  }
+
+  async function setZScaling(z_scale) {
+    await performSetZScaling(z_scale);
+  }
+
+  function clear() {
+    performClear();
+  }
+
+  return {
+    hybridDb,
+    zScale,
+    addItem,
+    removeItem,
+    setVisibility,
+    setZScaling,
+    clear,
+  };
+}
+
+async function performAddItem(id) {
+  const { genericRenderWindow, hybridDb } = useHybridViewerStore();
+  if (!genericRenderWindow.value) {
+    return;
+  }
+  const dataStore = useDataStore();
+  const value = await dataStore.item(id);
+  if (value && !dataStore.isItemViewable(value)) {
+    return;
+  }
+
+  const reader = vtkXMLPolyDataReader();
+  await reader.parseAsArrayBuffer(new TextEncoder().encode(value.binary_light_viewable));
+  const actor = vtkActor();
+  const mapper = vtkMapper();
+  const polydata = reader.getOutputData(0);
+  mapper.setInputData(polydata);
+  const property = actor.getProperty();
+  property.setColor(ACTOR_COLOR);
+  actor.setMapper(mapper);
+  const renderer = genericRenderWindow.value.getRenderer();
+  if (hybridDb[id] && hybridDb[id].actor) {
+    renderer.removeActor(hybridDb[id].actor);
+  }
+  const actors = renderer.getActors();
+  const isFirst = actors.length === 0;
+  renderer.addActor(actor);
+  if (isFirst) {
+    renderer.resetCamera();
+  }
+  hybridDb[id] = { actor, polydata, mapper };
+}
+
+function performRemoveItem(id) {
+  const { genericRenderWindow, hybridDb } = useHybridViewerStore();
+  if (!hybridDb[id]) {
+    return;
+  }
+  const renderer = genericRenderWindow.value.getRenderer();
+  renderer.removeActor(hybridDb[id].actor);
+  const renderWindow = genericRenderWindow.value.getRenderWindow();
+  renderWindow.render();
+  delete hybridDb[id];
+}
+
+function performSetVisibility(id, visibility) {
+  const { genericRenderWindow, hybridDb } = useHybridViewerStore();
+  if (!hybridDb[id]) {
+    return;
+  }
+  hybridDb[id].actor.setVisibility(visibility);
+  const renderWindow = genericRenderWindow.value.getRenderWindow();
+  renderWindow.render();
+}
+
+async function performSetZScaling(z_scale) {
+  const hybridViewerStore = useHybridViewerStore();
+  const { genericRenderWindow, remoteRender } = hybridViewerStore;
+  const { zScale } = storeToRefs(hybridViewerStore);
+  zScale.value = z_scale;
+
+  const renderer = genericRenderWindow.value.getRenderer();
+  for (const actor of renderer.getActors()) {
+    const scale = actor.getScale();
+    actor.setScale(scale[0], scale[1], z_scale);
+  }
+  renderer.resetCamera();
+  const renderWindow = genericRenderWindow.value.getRenderWindow();
+  renderWindow.render();
+  const viewerStore = useViewerStore();
+  const schema = viewer_schemas.opengeodeweb_viewer.viewer.set_z_scaling;
+  const params = { z_scale };
+  await viewerStore.request({ schema, params });
+  await remoteRender();
+}
+
+function performClear() {
+  const { genericRenderWindow, hybridDb } = useHybridViewerStore();
+  const renderer = genericRenderWindow.value.getRenderer();
+  for (const actor of renderer.getActors()) {
+    renderer.removeActor(actor);
+  }
+  const renderWindow = genericRenderWindow.value.getRenderWindow();
+  renderWindow.render();
+  for (const id of Object.keys(hybridDb)) {
+    delete hybridDb[id];
+  }
+}
+
+export {
+  performAddItem,
+  performClear,
+  performRemoveItem,
+  performSetVisibility,
+  performSetZScaling,
+  useHybridViewerScene,
+};

package/internal/stores/hybrid_viewer/viewport.js

@@ -0,0 +1,148 @@
+import { Status } from "@ogw_front/utils/status";
+import { WHEEL_TIME_OUT_MS } from "./constants";
+import { centerCameraOnPosition } from "./camera";
+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 useHybridViewerViewport() {
+  const viewStream = ref(undefined);
+
+  function setContainer(container) {
+    performSetContainer(container);
+  }
+
+  async function resize(width, height) {
+    await performResize(width, height);
+  }
+
+  return {
+    setContainer,
+    resize,
+    viewStream,
+  };
+}
+
+function performClickPicking(event, containerElement) {
+  const { genericRenderWindow, syncRemoteCamera } = useHybridViewerStore();
+  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)),
+  };
+  viewerStore.request(
+    {
+      schema,
+      params,
+    },
+    {
+      response_function: ({ x, y, z }) => {
+        const pickedPos = [x, y, z];
+        if (pickedPos.some((val) => val !== 0)) {
+          const renderer = genericRenderWindow.value.getRenderer();
+          const camera = renderer.getActiveCamera();
+          centerCameraOnPosition(camera, pickedPos);
+          const renderWindow = genericRenderWindow.value.getRenderWindow();
+          renderWindow.render();
+          syncRemoteCamera();
+        }
+      },
+    },
+  );
+}
+
+function performSetContainer(container) {
+  if (!container || !container.value) {
+    return;
+  }
+
+  const hybridViewerStore = useHybridViewerStore();
+  const { genericRenderWindow, syncRemoteCamera, hoverHighlight } = hybridViewerStore;
+  const { is_picking, is_moving } = storeToRefs(hybridViewerStore);
+
+  genericRenderWindow.value.setContainer(container.value.$el);
+  const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
+  webGLRenderWindow.setUseBackgroundImage(true);
+  const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
+  Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
+
+  performResize(container.value.$el.offsetWidth, container.value.$el.offsetHeight);
+
+  let has_dragged = false;
+  useMousePressed({
+    target: container,
+    onPressed: (event) => {
+      if (event.button !== 0 && event.button !== 1) {
+        return;
+      }
+      if (event.button === 0 && is_picking.value) {
+        performClickPicking(event, container.value.$el);
+        is_picking.value = false;
+        return;
+      }
+      is_moving.value = true;
+      has_dragged = false;
+      event.stopPropagation();
+    },
+    onReleased: () => {
+      is_moving.value = false;
+      if (has_dragged) {
+        const renderer = genericRenderWindow.value.getRenderer();
+        renderer.resetCameraClippingRange();
+        syncRemoteCamera();
+      }
+      has_dragged = false;
+    },
+  });
+
+  useEventListener(container, "mousemove", (event) => {
+    if (is_moving.value) {
+      has_dragged = true;
+      if (imageStyle) {
+        imageStyle.opacity = 0;
+      }
+    }
+    hoverHighlight(event);
+  });
+
+  let wheelEventEndTimeout = undefined;
+  useEventListener(container, "wheel", () => {
+    is_moving.value = true;
+    if (imageStyle) {
+      imageStyle.opacity = 0;
+    }
+    clearTimeout(wheelEventEndTimeout);
+    wheelEventEndTimeout = setTimeout(() => {
+      is_moving.value = false;
+      const renderer = genericRenderWindow.value.getRenderer();
+      renderer.resetCameraClippingRange();
+      syncRemoteCamera();
+    }, WHEEL_TIME_OUT_MS);
+  });
+}
+
+async function performResize(width, height) {
+  const hybridViewerStore = useHybridViewerStore();
+  const { genericRenderWindow, remoteRender } = hybridViewerStore;
+  const { status, viewStream } = storeToRefs(hybridViewerStore);
+  const viewerStore = useViewerStore();
+  if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) {
+    return;
+  }
+  const webGLRenderWindow = genericRenderWindow.value.getApiSpecificRenderWindow();
+  const canvas = webGLRenderWindow.getCanvas();
+  canvas.width = width;
+  canvas.height = height;
+  await nextTick();
+  webGLRenderWindow.setSize(width, height);
+  if (viewStream.value) {
+    viewStream.value.setSize(width, height);
+  }
+  const renderWindow = genericRenderWindow.value.getRenderWindow();
+  renderWindow.render();
+  await remoteRender();
+}
+
+export { performClickPicking, performResize, performSetContainer, useHybridViewerViewport };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.31.0",
+  "version": "10.31.1-rc.1",
   "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": "latest",
-    "@geode/opengeodeweb-viewer": "latest",
+    "@geode/opengeodeweb-back": "next",
+    "@geode/opengeodeweb-viewer": "next",
     "@google-cloud/run": "3.2.0",
     "@kitware/vtk.js": "33.3.0",
     "@mdi/font": "7.4.47",