@geode/opengeodeweb-front 10.2.1 → 10.3.0

package/app/components/Viewer/TreeComponent.vue

@@ -13,90 +13,40 @@
 
   const emit = defineEmits(["show-menu"])
 
-  const items = dataStore.formatedMeshComponents(props.id)
-  const mesh_components_selection = ref(
-    dataStyleStore.visibleMeshComponents(props.id),
+  const items = ref([])
+  const mesh_components_selection = dataStyleStore.visibleMeshComponents(
+    props.id,
   )
 
+  watchEffect(async () => {
+    items.value = await dataStore.formatedMeshComponents(props.id)
+  })
+
   watch(
     mesh_components_selection,
-    (current, previous) => {
-      if (!previous) previous = []
-      else {
-        const { added, removed } = compareSelections(current, previous)
+    async (current, previous) => {
+      if (!previous) return
+
+      const { added, removed } = compareSelections(current, previous)
 
-        const [added_corners, added_lines, added_surfaces, added_blocks] =
-          sortMeshComponents(added)
-        const [
-          removed_corners,
-          removed_lines,
-          removed_surfaces,
-          removed_blocks,
-        ] = sortMeshComponents(removed)
-        if (added_corners.length > 0) {
-          dataStyleStore.setModelCornersVisibility(
-            props.id,
-            added_corners,
-            true,
-          )
-        }
-        if (added_lines.length > 0) {
-          dataStyleStore.setModelLinesVisibility(props.id, added_lines, true)
-        }
-        if (added_surfaces.length > 0) {
-          dataStyleStore.setModelSurfacesVisibility(
-            props.id,
-            added_surfaces,
-            true,
-          )
-        }
-        if (added_blocks.length > 0) {
-          dataStyleStore.setModelBlocksVisibility(props.id, added_blocks, true)
-        }
-        if (removed_corners.length > 0) {
-          dataStyleStore.setModelCornersVisibility(
-            props.id,
-            removed_corners,
-            false,
-          )
-        }
-        if (removed_lines.length > 0) {
-          dataStyleStore.setModelLinesVisibility(props.id, removed_lines, false)
-        }
-        if (removed_surfaces.length > 0) {
-          dataStyleStore.setModelSurfacesVisibility(
-            props.id,
-            removed_surfaces,
-            false,
-          )
-        }
-        if (removed_blocks.length > 0) {
-          dataStyleStore.setModelBlocksVisibility(
-            props.id,
-            removed_blocks,
-            false,
-          )
-        }
-        hybridViewerStore.remoteRender()
+      if (added.length > 0) {
+        await dataStyleStore.setModelMeshComponentsVisibility(
+          props.id,
+          added,
+          true,
+        )
+      }
+      if (removed.length > 0) {
+        await dataStyleStore.setModelMeshComponentsVisibility(
+          props.id,
+          removed,
+          false,
+        )
       }
+      hybridViewerStore.remoteRender()
     },
-    { immediate: true, deep: true },
+    { deep: true },
   )
-
-  function sortMeshComponents(items) {
-    var corner_ids = [],
-      line_ids = [],
-      surface_ids = [],
-      block_ids = []
-    for (const item of items) {
-      const item_type = dataStore.meshComponentType(props.id, item)
-      if (item_type === "corner") corner_ids.push(item)
-      else if (item_type === "line") line_ids.push(item)
-      else if (item_type === "surface") surface_ids.push(item)
-      else if (item_type === "block") block_ids.push(item)
-    }
-    return [corner_ids, line_ids, surface_ids, block_ids]
-  }
 </script>
 
 <template>

package/app/stores/data_style.js

@@ -1,8 +1,8 @@
 import { getDefaultStyle } from "@ogw_front/utils/default_styles"
 import { useDataStore } from "@ogw_front/stores/data"
-import { useDataStyleStateStore } from "../../internal/stores/data_style_state"
-import useMeshStyle from "../../internal/stores/mesh/index"
-import useModelStyle from "../../internal/stores/model/index"
+import { useDataStyleStateStore } from "../../internal/stores/data_style/state"
+import useMeshStyle from "../../internal/stores/data_style/mesh/index"
+import useModelStyle from "../../internal/stores/data_style/model/index"
 
 export const useDataStyleStore = defineStore("dataStyle", () => {
   const dataStyleState = useDataStyleStateStore()

package/app/utils/colormap.js

@@ -0,0 +1,5 @@
+import vtkColorMaps from "@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps"
+
+export function getRGBPointsFromPreset(presetName) {
+  return vtkColorMaps.getPresetByName(presetName).RGBPoints
+}

package/app/utils/default_styles.js

@@ -32,7 +32,10 @@ const meshPointsDefaultStyle = (
     coloring: {
       active: "color",
       color,
-      vertex: null,
+      vertex: {
+        name: null,
+        storedConfigs: {},
+      },
     },
     size,
   }
@@ -48,8 +51,14 @@ const meshEdgesDefaultStyle = (
     coloring: {
       active: "color",
       color,
-      edge: null,
-      vertex: null,
+      edge: {
+        name: null,
+        storedConfigs: {},
+      },
+      vertex: {
+        name: null,
+        storedConfigs: {},
+      },
     },
     width,
   }
@@ -63,10 +72,16 @@ const meshCellsDefaultStyle = (
     visibility,
     coloring: {
       active: "color",
-      cell: null,
+      cell: {
+        name: null,
+        storedConfigs: {},
+      },
       color,
       textures: null,
-      vertex: null,
+      vertex: {
+        name: null,
+        storedConfigs: {},
+      },
     },
   }
 }
@@ -81,8 +96,14 @@ const meshPolygonsDefaultStyle = (
       active: "color",
       color,
       textures: null,
-      polygon: null,
-      vertex: null,
+      polygon: {
+        name: null,
+        storedConfigs: {},
+      },
+      vertex: {
+        name: null,
+        storedConfigs: {},
+      },
     },
   }
 }
@@ -96,8 +117,14 @@ const meshPolyhedraDefaultStyle = (
     coloring: {
       active: "color",
       color,
-      polyhedron: null,
-      vertex: null,
+      polyhedron: {
+        name: null,
+        storedConfigs: {},
+      },
+      vertex: {
+        name: null,
+        storedConfigs: {},
+      },
     },
   }
 }

package/internal/stores/data_style/mesh/cells/cell.js

@@ -0,0 +1,153 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap"
+import { useMeshCellsCommonStyle } from "./common"
+
+// Local constants
+const meshCellsCellAttributeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.cells.attribute.cell
+
+export function useMeshCellsCellAttributeStyle() {
+  const viewerStore = useViewerStore()
+  const meshCellsCommonStyle = useMeshCellsCommonStyle()
+
+  function meshCellsCellAttribute(id) {
+    return meshCellsCommonStyle.meshCellsColoring(id).cell
+  }
+
+  async function updateMeshCellsCellAttribute(id) {
+    const name = meshCellsCellAttributeName(id)
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name)
+    await meshCellsCellAttributeRange(
+      id,
+      storedConfig.minimum,
+      storedConfig.maximum,
+    )
+    await meshCellsCellAttributeColorMap(id, storedConfig.colorMap)
+  }
+
+  function meshCellsCellAttributeStoredConfig(id, name) {
+    const storedConfigs = meshCellsCellAttribute(id).storedConfigs
+    if (name in storedConfigs) {
+      return storedConfigs[name]
+    }
+    return setMeshCellsCellAttributeStoredConfig(id, name, {
+      minimum: 0,
+      maximum: 1,
+      colorMap: "Cool to Warm",
+    })
+  }
+
+  function setMeshCellsCellAttributeStoredConfig(
+    id,
+    name,
+    { minimum, maximum, colorMap },
+  ) {
+    const storedConfigs = meshCellsCellAttribute(id).storedConfigs
+    storedConfigs[name] = { minimum, maximum, colorMap }
+    return storedConfigs[name]
+  }
+
+  function meshCellsCellAttributeName(id) {
+    console.log(
+      meshCellsCellAttributeName.name,
+      { id },
+      meshCellsCellAttribute(id),
+    )
+    return meshCellsCellAttribute(id).name
+  }
+  function setMeshCellsCellAttributeName(id, name) {
+    console.log(setMeshCellsCellAttributeName.name, { id, name })
+    return viewerStore.request(
+      meshCellsCellAttributeSchemas.name,
+      { id, name },
+      {
+        response_function: async () => {
+          meshCellsCellAttribute(id).name = name
+          const { minimum, maximum, colorMap } =
+            meshCellsCellAttributeStoredConfig(id, name)
+          await setMeshCellsCellAttributeRange(id, minimum, maximum)
+          await setMeshCellsCellAttributeColorMap(id, colorMap)
+          console.log(
+            setMeshCellsCellAttributeName.name,
+            { id },
+            meshCellsCellAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshCellsCellAttributeRange(id) {
+    const name = meshCellsCellAttributeName(id)
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name)
+    const { minimum, maximum } = storedConfig
+    return [minimum, maximum]
+  }
+  function setMeshCellsCellAttributeRange(id, minimum, maximum) {
+    const name = meshCellsCellAttributeName(id)
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name)
+    return viewerStore.request(
+      meshCellsCellAttributeSchemas.scalar_range,
+      { id, minimum, maximum },
+      {
+        response_function: () => {
+          storedConfig.minimum = minimum
+          storedConfig.maximum = maximum
+          console.log(
+            setMeshCellsCellAttributeRange.name,
+            { id },
+            meshCellsCellAttributeRange(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshCellsCellAttributeColorMap(id) {
+    const name = meshCellsCellAttributeName(id)
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name)
+    const { colorMap } = storedConfig
+    return colorMap
+  }
+  function setMeshCellsCellAttributeColorMap(id, colorMap) {
+    const name = meshCellsCellAttributeName(id)
+    const storedConfig = meshCellsCellAttributeStoredConfig(id, name)
+    const points = getRGBPointsFromPreset(colorMap)
+    const { minimum, maximum } = storedConfig
+
+    console.log(setMeshCellsCellAttributeColorMap.name, {
+      id,
+      minimum,
+      maximum,
+      colorMap,
+    })
+    return viewerStore.request(
+      meshCellsCellAttributeSchemas.color_map,
+      { id, points, minimum, maximum },
+      {
+        response_function: () => {
+          storedConfig.colorMap = colorMap
+          console.log(
+            setMeshCellsCellAttributeColorMap.name,
+            { id },
+            meshCellsCellAttributeColorMap(id),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshCellsCellAttributeName,
+    meshCellsCellAttributeRange,
+    meshCellsCellAttributeColorMap,
+    setMeshCellsCellAttributeName,
+    setMeshCellsCellAttributeRange,
+    setMeshCellsCellAttributeColorMap,
+    updateMeshCellsCellAttribute,
+  }
+}

package/internal/stores/data_style/mesh/cells/color.js

@@ -0,0 +1,40 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshCellsCommonStyle } from "./common"
+
+// Local constants
+const meshCellsColorSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.cells.color
+
+export function useMeshCellsColorStyle() {
+  const viewerStore = useViewerStore()
+  const meshCellsCommonStyle = useMeshCellsCommonStyle()
+
+  function meshCellsColor(id) {
+    return meshCellsCommonStyle.meshCellsColoring(id).color
+  }
+  function setMeshCellsColor(id, color) {
+    return viewerStore.request(
+      meshCellsColorSchemas,
+      { id, color },
+      {
+        response_function: () => {
+          meshCellsCommonStyle.meshCellsColoring(id).color = color
+          console.log(
+            setMeshCellsColor.name,
+            { id },
+            JSON.stringify(meshCellsColor(id)),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshCellsColor,
+    setMeshCellsColor,
+  }
+}

package/internal/stores/data_style/mesh/cells/common.js

@@ -0,0 +1,23 @@
+import { useDataStyleStateStore } from "../../state"
+
+export function useMeshCellsCommonStyle() {
+  const dataStyleStateStore = useDataStyleStateStore()
+
+  function meshCellsStyle(id) {
+    return dataStyleStateStore.getStyle(id).cells
+  }
+
+  function meshCellsColoring(id) {
+    return meshCellsStyle(id).coloring
+  }
+
+  function meshCellsActiveColoring(id) {
+    return meshCellsColoring(id).active
+  }
+
+  return {
+    meshCellsStyle,
+    meshCellsColoring,
+    meshCellsActiveColoring,
+  }
+}

package/internal/stores/data_style/mesh/cells/index.js

@@ -0,0 +1,84 @@
+// Third party imports
+
+// Local imports
+import { useMeshCellsCommonStyle } from "./common"
+import { useMeshCellsVisibilityStyle } from "./visibility"
+import { useMeshCellsColorStyle } from "./color"
+import { useMeshCellsTexturesStyle } from "./textures"
+import { useMeshCellsVertexAttributeStyle } from "./vertex"
+import { useMeshCellsCellAttributeStyle } from "./cell"
+
+// Local constants
+
+export function useMeshCellsStyle() {
+  const meshCellsCommonStyle = useMeshCellsCommonStyle()
+  const meshCellsVisibility = useMeshCellsVisibilityStyle()
+  const meshCellsColorStyle = useMeshCellsColorStyle()
+  const meshCellsTexturesStore = useMeshCellsTexturesStyle()
+  const meshCellsVertexAttributeStyle = useMeshCellsVertexAttributeStyle()
+  const meshCellsCellAttributeStyle = useMeshCellsCellAttributeStyle()
+
+  async function setMeshCellsActiveColoring(id, type) {
+    const coloring = meshCellsCommonStyle.meshCellsColoring(id)
+    coloring.active = type
+    console.log(
+      setMeshCellsActiveColoring.name,
+      { id },
+      meshCellsCommonStyle.meshCellsActiveColoring(id),
+    )
+    if (type === "color") {
+      return meshCellsColorStyle.setMeshCellsColor(
+        id,
+        meshCellsColorStyle.meshCellsColor(id),
+      )
+    } else if (type === "textures") {
+      const textures = meshCellsTexturesStore.meshCellsTextures(id)
+      if (textures === null) {
+        return Promise.resolve()
+      }
+      return meshCellsTexturesStore.setMeshCellsTextures(id, textures)
+    } else if (type === "vertex") {
+      const name =
+        meshCellsVertexAttributeStyle.meshCellsVertexAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      return meshCellsVertexAttributeStyle.setMeshCellsVertexAttributeName(
+        id,
+        name,
+      )
+    } else if (type === "cell") {
+      const name = meshCellsCellAttributeStyle.meshCellsCellAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      await meshCellsCellAttributeStyle.setMeshCellsCellAttributeName(id, name)
+    } else {
+      throw new Error("Unknown mesh cells coloring type: " + type)
+    }
+  }
+
+  function applyMeshCellsStyle(id) {
+    return Promise.all([
+      meshCellsVisibility.setMeshCellsVisibility(
+        id,
+        meshCellsVisibility.meshCellsVisibility(id),
+      ),
+      setMeshCellsActiveColoring(
+        id,
+        meshCellsCommonStyle.meshCellsActiveColoring(id),
+      ),
+    ])
+  }
+
+  return {
+    ...meshCellsCommonStyle,
+    setMeshCellsActiveColoring,
+    applyMeshCellsStyle,
+    ...meshCellsVisibility,
+    ...meshCellsColorStyle,
+    ...meshCellsTexturesStore,
+    ...meshCellsVertexAttributeStyle,
+    ...meshCellsCellAttributeStyle,
+  }
+}

package/internal/stores/data_style/mesh/cells/textures.js

@@ -0,0 +1,36 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+// Local imports
+import { useViewerStore } from "@ogw_front/stores/viewer"
+import { useMeshCellsCommonStyle } from "./common"
+
+// Local constants
+const meshCellsTexturesSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.cells.apply_textures
+
+export function useMeshCellsTexturesStyle() {
+  const viewerStore = useViewerStore()
+  const meshCellsCommonStyle = useMeshCellsCommonStyle()
+
+  function meshCellsTextures(id) {
+    return meshCellsCommonStyle.meshCellsColoring(id).textures
+  }
+  function setMeshCellsTextures(id, textures) {
+    return viewerStore.request(
+      meshCellsTexturesSchemas,
+      { id, textures },
+      {
+        response_function: () => {
+          meshCellsCommonStyle.meshCellsColoring(id).textures = textures
+          console.log(setMeshCellsTextures.name, { id }, meshCellsTextures(id))
+        },
+      },
+    )
+  }
+
+  return {
+    meshCellsTextures,
+    setMeshCellsTextures,
+  }
+}