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

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.32.0-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",

package/internal/stores/hybrid_viewer.js

@@ -1,300 +0,0 @@
-import { centerCameraOnPosition } from "./hybrid_viewer_camera";
-
-function performClickPicking(event, options) {
-  const { container, viewerStore, viewer_schemas, genericRenderWindow, syncRemoteCamera } = options;
-  const rect = container.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 camera = genericRenderWindow.getRenderer().getActiveCamera();
-          centerCameraOnPosition(camera, pickedPos);
-          genericRenderWindow.getRenderWindow().render();
-          syncRemoteCamera();
-        }
-      },
-    },
-  );
-}
-
-function performHoverHighlight(event, options) {
-  const {
-    is_hover_highlight,
-    genericRenderWindow,
-    viewerStore,
-    viewer_schemas,
-    hover_highlight_field_type,
-    hybridDb,
-    onResponse,
-  } = options;
-  if (!is_hover_highlight.value) {
-    return;
-  }
-  const container = genericRenderWindow.getContainer();
-  if (!container) {
-    return;
-  }
-  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(options) {
-  const { viewerStore, viewer_schemas, hover_highlight_field_type, hybridDb } = options;
-  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 });
-}
-
-async function performAddItem(id, options) {
-  const {
-    genericRenderWindow,
-    dataStore,
-    vtkXMLPolyDataReader,
-    vtkActor,
-    vtkMapper,
-    actorColor,
-    hybridDb,
-  } = options;
-  if (!genericRenderWindow) {
-    return;
-  }
-  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);
-  actor.getProperty().setColor(actorColor);
-  actor.setMapper(mapper);
-  const renderer = genericRenderWindow.getRenderer();
-  if (hybridDb[id] && hybridDb[id].actor) {
-    renderer.removeActor(hybridDb[id].actor);
-  }
-  const isFirst = renderer.getActors().length === 0;
-  renderer.addActor(actor);
-  if (isFirst) {
-    renderer.resetCamera();
-  }
-  hybridDb[id] = { actor, polydata, mapper };
-}
-
-async function performSetZScaling(z_scale, options) {
-  const { zScale, genericRenderWindow, gridActor, viewerStore, viewer_schemas, remoteRender } =
-    options;
-  zScale.value = z_scale;
-  const renderer = genericRenderWindow.getRenderer();
-  for (const actor of renderer.getActors()) {
-    if (actor !== gridActor) {
-      const scale = actor.getScale();
-      actor.setScale(scale[0], scale[1], z_scale);
-    }
-  }
-  renderer.resetCamera();
-  genericRenderWindow.getRenderWindow().render();
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.set_z_scaling;
-  const params = { z_scale };
-  await viewerStore.request({ schema, params });
-  remoteRender();
-}
-
-function performSetContainer(options) {
-  const {
-    container,
-    genericRenderWindow,
-    imageStyleSetter,
-    resize,
-    useMousePressed,
-    useEventListener,
-    is_picking,
-    is_moving,
-    clickPickingCallback,
-    viewerStore,
-    viewer_schemas,
-    syncRemoteCamera,
-    hoverHighlight,
-    wheelTimeoutMs,
-    wheelEventEndTimeout,
-    wheelTimeoutSetter,
-  } = options;
-
-  if (!container.value) {
-    return;
-  }
-
-  genericRenderWindow.setContainer(container.value.$el);
-  const webGLRenderWindow = genericRenderWindow.getApiSpecificRenderWindow();
-  webGLRenderWindow.setUseBackgroundImage(true);
-  const imageStyle = webGLRenderWindow.getReferenceByName("bgImage").style;
-  Object.assign(imageStyle, { transition: "opacity 0.1s ease-in", zIndex: 1 });
-  imageStyleSetter(imageStyle);
-
-  resize(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) {
-        clickPickingCallback(event, {
-          container: container.value.$el,
-          viewerStore,
-          viewer_schemas,
-          genericRenderWindow,
-          syncRemoteCamera,
-        });
-        is_picking.value = false;
-        return;
-      }
-      is_moving.value = true;
-      has_dragged = false;
-      event.stopPropagation();
-    },
-    onReleased: () => {
-      is_moving.value = false;
-      if (has_dragged) {
-        genericRenderWindow.getRenderer().resetCameraClippingRange();
-        syncRemoteCamera();
-      }
-      has_dragged = false;
-    },
-  });
-
-  useEventListener(container, "mousemove", (event) => {
-    if (is_moving.value) {
-      has_dragged = true;
-      if (imageStyle) {
-        imageStyle.opacity = 0;
-      }
-    }
-    hoverHighlight(event);
-  });
-  useEventListener(container, "wheel", () => {
-    is_moving.value = true;
-    if (imageStyle) {
-      imageStyle.opacity = 0;
-    }
-    clearTimeout(wheelEventEndTimeout);
-    wheelTimeoutSetter(
-      setTimeout(() => {
-        is_moving.value = false;
-        genericRenderWindow.getRenderer().resetCameraClippingRange();
-        syncRemoteCamera();
-      }, wheelTimeoutMs),
-    );
-  });
-}
-
-function performRemoveItem(id, options) {
-  const { genericRenderWindow, hybridDb } = options;
-  if (!hybridDb[id]) {
-    return;
-  }
-  genericRenderWindow.getRenderer().removeActor(hybridDb[id].actor);
-  genericRenderWindow.getRenderWindow().render();
-  delete hybridDb[id];
-}
-
-function performSetVisibility(id, visibility, options) {
-  const { genericRenderWindow, hybridDb } = options;
-  if (!hybridDb[id]) {
-    return;
-  }
-  hybridDb[id].actor.setVisibility(visibility);
-  genericRenderWindow.getRenderWindow().render();
-}
-
-function performClear(options) {
-  const { genericRenderWindow, hybridDb } = options;
-  const renderer = genericRenderWindow.getRenderer();
-  for (const actor of renderer.getActors()) {
-    renderer.removeActor(actor);
-  }
-  genericRenderWindow.getRenderWindow().render();
-  for (const id of Object.keys(hybridDb)) {
-    delete hybridDb[id];
-  }
-}
-
-async function performSetClippingPlanes(ids, planes, options) {
-  const { viewerStore, viewer_schemas, remoteRender } = options;
-  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, options) {
-  const { viewerStore, viewer_schemas, remoteRender } = options;
-  const schema = viewer_schemas.opengeodeweb_viewer.viewer.shrink;
-  const params = { ids, shrink_factor };
-  await viewerStore.request({ schema, params });
-  await remoteRender();
-}
-
-async function performResize(width, height, options) {
-  const { viewerStore, status, Status, genericRenderWindow, viewStream, remoteRender } = options;
-  if (viewerStore.status !== Status.CONNECTED || status.value !== Status.CREATED) {
-    return;
-  }
-  const webGLRenderWindow = genericRenderWindow.getApiSpecificRenderWindow();
-  const canvas = webGLRenderWindow.getCanvas();
-  canvas.width = width;
-  canvas.height = height;
-  await nextTick();
-  webGLRenderWindow.setSize(width, height);
-  viewStream.setSize(width, height);
-  genericRenderWindow.getRenderWindow().render();
-  remoteRender();
-}
-
-export {
-  performAddItem,
-  performClear,
-  performClearHoverHighlight,
-  performClickPicking,
-  performHoverHighlight,
-  performRemoveItem,
-  performResize,
-  performSetClippingPlanes,
-  performSetContainer,
-  performSetShrink,
-  performSetVisibility,
-  performSetZScaling,
-};