@geode/opengeodeweb-front 10.2.1 → 10.3.0

package/internal/stores/data_style/mesh/edges/width.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 { useMeshEdgesCommonStyle } from "./common"
+
+// Local constants
+const meshEdgesWidthSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.edges.width
+
+export function useMeshEdgesWidthStyle() {
+  const viewerStore = useViewerStore()
+  const meshEdgesCommonStyle = useMeshEdgesCommonStyle()
+
+  function meshEdgesWidth(id) {
+    return meshEdgesCommonStyle.meshEdgesStyle(id).width
+  }
+  function setMeshEdgesWidth(id, width) {
+    return viewerStore.request(
+      meshEdgesWidthSchemas,
+      { id, width },
+      {
+        response_function: () => {
+          meshEdgesCommonStyle.meshEdgesStyle(id).width = width
+          console.log(
+            setMeshEdgesWidth.name,
+            { id },
+            JSON.stringify(meshEdgesWidth(id)),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshEdgesWidth,
+    setMeshEdgesWidth,
+  }
+}

package/internal/stores/{mesh → data_style/mesh}/index.js

@@ -3,8 +3,9 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 
 // Local imports
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer"
-import { useDataStyleStateStore } from "../data_style_state"
 import { useViewerStore } from "@ogw_front/stores/viewer"
+
+import { useDataStyleStateStore } from "../state"
 import { useMeshPointsStyle } from "./points"
 import { useMeshEdgesStyle } from "./edges"
 import { useMeshCellsStyle } from "./cells"
@@ -12,29 +13,29 @@ import { useMeshPolygonsStyle } from "./polygons"
 import { useMeshPolyhedraStyle } from "./polyhedra"
 
 // Local constants
-const mesh_schemas = viewer_schemas.opengeodeweb_viewer.mesh
+const meshSchemas = viewer_schemas.opengeodeweb_viewer.mesh
 
 export default function useMeshStyle() {
-  const dataStyleStateStore = useDataStyleStateStore()
-  const meshCellsStyleStore = useMeshCellsStyle()
-  const meshEdgesStyleStore = useMeshEdgesStyle()
-  const meshPointsStyleStore = useMeshPointsStyle()
-  const meshPolygonsStyleStore = useMeshPolygonsStyle()
-  const meshPolyhedraStyleStore = useMeshPolyhedraStyle()
-  const viewerStore = useViewerStore()
   const hybridViewerStore = useHybridViewerStore()
+  const viewerStore = useViewerStore()
+  const dataStyleState = useDataStyleStateStore()
+  const meshPointsStyle = useMeshPointsStyle()
+  const meshEdgesStyle = useMeshEdgesStyle()
+  const meshCellsStyle = useMeshCellsStyle()
+  const meshPolygonsStyle = useMeshPolygonsStyle()
+  const meshPolyhedraStyle = useMeshPolyhedraStyle()
 
   function meshVisibility(id) {
-    return dataStyleStateStore.getStyle(id).visibility
+    return dataStyleState.getStyle(id).visibility
   }
   function setMeshVisibility(id, visibility) {
     return viewerStore.request(
-      mesh_schemas.visibility,
+      meshSchemas.visibility,
       { id, visibility },
       {
         response_function: () => {
           hybridViewerStore.setVisibility(id, visibility)
-          dataStyleStateStore.getStyle(id).visibility = visibility
+          dataStyleState.getStyle(id).visibility = visibility
           console.log(setMeshVisibility.name, { id }, meshVisibility(id))
         },
       },
@@ -42,21 +43,22 @@ export default function useMeshStyle() {
   }
 
   function applyMeshStyle(id) {
-    const style = dataStyleStateStore.getStyle(id)
+    const style = dataStyleState.getStyle(id)
     const promise_array = []
     for (const [key, value] of Object.entries(style)) {
       if (key === "visibility") {
         promise_array.push(setMeshVisibility(id, value))
       } else if (key === "points") {
-        promise_array.push(meshPointsStyleStore.applyMeshPointsStyle(id))
+        promise_array.push(meshPointsStyle.applyMeshPointsStyle(id))
       } else if (key === "edges") {
-        promise_array.push(meshEdgesStyleStore.applyMeshEdgesStyle(id))
+        promise_array.push(meshEdgesStyle.applyMeshEdgesStyle(id))
       } else if (key === "cells") {
-        promise_array.push(meshCellsStyleStore.applyMeshCellsStyle(id))
+        promise_array.push(meshCellsStyle.applyMeshCellsStyle(id))
       } else if (key === "polygons") {
-        promise_array.push(meshPolygonsStyleStore.applyMeshPolygonsStyle(id))
+        promise_array.push(meshPolygonsStyle.applyMeshPolygonsStyle(id))
       } else if (key === "polyhedra") {
-        promise_array.push(meshPolyhedraStyleStore.applyMeshPolyhedraStyle(id))
+        promise_array.push(meshPolyhedraStyle.applyMeshPolyhedraStyle(id))
+      } else if (key === "attributes") {
       } else {
         throw new Error("Unknown mesh key: " + key)
       }
@@ -68,10 +70,10 @@ export default function useMeshStyle() {
     meshVisibility,
     setMeshVisibility,
     applyMeshStyle,
-    ...useMeshPointsStyle(),
-    ...useMeshEdgesStyle(),
-    ...useMeshCellsStyle(),
-    ...useMeshPolygonsStyle(),
-    ...useMeshPolyhedraStyle(),
+    ...meshPointsStyle,
+    ...meshEdgesStyle,
+    ...meshCellsStyle,
+    ...meshPolygonsStyle,
+    ...meshPolyhedraStyle,
   }
 }

package/internal/stores/data_style/mesh/points/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 { useMeshPointsCommonStyle } from "./common"
+
+// Local constants
+const meshPointsColorSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.points.color
+
+export function useMeshPointsColorStyle() {
+  const viewerStore = useViewerStore()
+  const meshPointsCommonStyle = useMeshPointsCommonStyle()
+
+  function meshPointsColor(id) {
+    return meshPointsCommonStyle.meshPointsColoring(id).color
+  }
+  function setMeshPointsColor(id, color) {
+    return viewerStore.request(
+      meshPointsColorSchemas,
+      { id, color },
+      {
+        response_function: () => {
+          meshPointsCommonStyle.meshPointsColoring(id).color = color
+          console.log(
+            setMeshPointsColor.name,
+            { id },
+            JSON.stringify(meshPointsColor(id)),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPointsColor,
+    setMeshPointsColor,
+  }
+}

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

@@ -0,0 +1,23 @@
+import { useDataStyleStateStore } from "../../state"
+
+export function useMeshPointsCommonStyle() {
+  const dataStyleStateStore = useDataStyleStateStore()
+
+  function meshPointsStyle(id) {
+    return dataStyleStateStore.getStyle(id).points
+  }
+
+  function meshPointsColoring(id) {
+    return meshPointsStyle(id).coloring
+  }
+
+  function meshPointsActiveColoring(id) {
+    return meshPointsColoring(id).active
+  }
+
+  return {
+    meshPointsStyle,
+    meshPointsColoring,
+    meshPointsActiveColoring,
+  }
+}

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

@@ -0,0 +1,89 @@
+// Third party imports
+
+// Local imports
+import { useMeshPointsCommonStyle } from "./common"
+import { useMeshPointsVisibilityStyle } from "./visibility"
+import { useMeshPointsColorStyle } from "./color"
+import { useMeshPointsSizeStyle } from "./size"
+import { useMeshPointsVertexAttributeStyle } from "./vertex"
+
+// Local constants
+
+export function useMeshPointsStyle() {
+  const meshPointsCommonStyle = useMeshPointsCommonStyle()
+  const meshPointsVisibility = useMeshPointsVisibilityStyle()
+  const meshPointsColorStyle = useMeshPointsColorStyle()
+  const meshPointsSizeStyle = useMeshPointsSizeStyle()
+  const meshPointsVertexAttributeStyle = useMeshPointsVertexAttributeStyle()
+
+  async function setMeshPointsActiveColoring(id, type) {
+    const coloring = meshPointsCommonStyle.meshPointsColoring(id)
+    coloring.active = type
+    console.log(
+      setMeshPointsActiveColoring.name,
+      { id },
+      meshPointsCommonStyle.meshPointsActiveColoring(id),
+    )
+    if (type === "color") {
+      return meshPointsColorStyle.setMeshPointsColor(
+        id,
+        meshPointsColorStyle.meshPointsColor(id),
+      )
+    } else if (type === "textures") {
+      const textures = meshPointsTexturesStore.meshPointsTextures(id)
+      if (textures === null) {
+        return Promise.resolve()
+      }
+      return meshPointsTexturesStore.setMeshPointsTextures(id, textures)
+    } else if (type === "vertex") {
+      const name =
+        meshPointsVertexAttributeStyle.meshPointsVertexAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      return meshPointsVertexAttributeStyle.setMeshPointsVertexAttributeName(
+        id,
+        name,
+      )
+    } else if (type === "polygon") {
+      const name =
+        meshPointsPolygonAttributeStyleStore.meshPointsPolygonAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      await meshPointsPolygonAttributeStyleStore.setMeshPointsPolygonAttributeName(
+        id,
+        name,
+      )
+    } else {
+      throw new Error("Unknown mesh points coloring type: " + type)
+    }
+  }
+
+  function applyMeshPointsStyle(id) {
+    return Promise.all([
+      meshPointsVisibility.setMeshPointsVisibility(
+        id,
+        meshPointsVisibility.meshPointsVisibility(id),
+      ),
+      meshPointsSizeStyle.setMeshPointsSize(
+        id,
+        meshPointsSizeStyle.meshPointsSize(id),
+      ),
+      setMeshPointsActiveColoring(
+        id,
+        meshPointsCommonStyle.meshPointsActiveColoring(id),
+      ),
+    ])
+  }
+
+  return {
+    setMeshPointsActiveColoring,
+    applyMeshPointsStyle,
+    ...meshPointsCommonStyle,
+    ...meshPointsVisibility,
+    ...meshPointsColorStyle,
+    ...meshPointsSizeStyle,
+    ...meshPointsVertexAttributeStyle,
+  }
+}

package/internal/stores/data_style/mesh/points/size.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 { useMeshPointsCommonStyle } from "./common"
+
+// Local constants
+const meshPointsSizeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.points.size
+
+export function useMeshPointsSizeStyle() {
+  const viewerStore = useViewerStore()
+  const meshPointsCommonStyle = useMeshPointsCommonStyle()
+
+  function meshPointsSize(id) {
+    return meshPointsCommonStyle.meshPointsStyle(id).size
+  }
+  function setMeshPointsSize(id, size) {
+    return viewerStore.request(
+      meshPointsSizeSchemas,
+      { id, size },
+      {
+        response_function: () => {
+          meshPointsCommonStyle.meshPointsStyle(id).size = size
+          console.log(
+            setMeshPointsSize.name,
+            { id },
+            JSON.stringify(meshPointsSize(id)),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPointsSize,
+    setMeshPointsSize,
+  }
+}

package/internal/stores/data_style/mesh/points/vertex.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 { useMeshPointsCommonStyle } from "./common"
+
+// Local constants
+const meshPointsVertexAttributeSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.points.attribute.vertex
+
+export function useMeshPointsVertexAttributeStyle() {
+  const viewerStore = useViewerStore()
+  const meshPointsCommonStyle = useMeshPointsCommonStyle()
+
+  function meshPointsVertexAttribute(id) {
+    return meshPointsCommonStyle.meshPointsColoring(id).vertex
+  }
+
+  async function updateMeshPointsVertexAttribute(id) {
+    const name = meshPointsVertexAttributeName(id)
+    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name)
+    await meshPointsVertexAttributeRange(
+      id,
+      storedConfig.minimum,
+      storedConfig.maximum,
+    )
+    await meshPointsVertexAttributeColorMap(id, storedConfig.colorMap)
+  }
+
+  function meshPointsVertexAttributeStoredConfig(id, name) {
+    const storedConfigs = meshPointsVertexAttribute(id).storedConfigs
+    if (name in storedConfigs) {
+      return storedConfigs[name]
+    }
+    return setMeshPointsVertexAttributeStoredConfig(id, name, {
+      minimum: 0,
+      maximum: 1,
+      colorMap: "Cool to Warm",
+    })
+  }
+
+  function setMeshPointsVertexAttributeStoredConfig(
+    id,
+    name,
+    { minimum, maximum, colorMap },
+  ) {
+    const storedConfigs = meshPointsVertexAttribute(id).storedConfigs
+    storedConfigs[name] = { minimum, maximum, colorMap }
+    return storedConfigs[name]
+  }
+
+  function meshPointsVertexAttributeName(id) {
+    console.log(
+      meshPointsVertexAttributeName.name,
+      { id },
+      meshPointsVertexAttribute(id),
+    )
+    return meshPointsVertexAttribute(id).name
+  }
+  function setMeshPointsVertexAttributeName(id, name) {
+    console.log(setMeshPointsVertexAttributeName.name, { id, name })
+    return viewerStore.request(
+      meshPointsVertexAttributeSchemas.name,
+      { id, name },
+      {
+        response_function: async () => {
+          meshPointsVertexAttribute(id).name = name
+          const { minimum, maximum, colorMap } =
+            meshPointsVertexAttributeStoredConfig(id, name)
+          await setMeshPointsVertexAttributeRange(id, minimum, maximum)
+          await setMeshPointsVertexAttributeColorMap(id, colorMap)
+          console.log(
+            setMeshPointsVertexAttributeName.name,
+            { id },
+            meshPointsVertexAttributeName(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshPointsVertexAttributeRange(id) {
+    const name = meshPointsVertexAttributeName(id)
+    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name)
+    const { minimum, maximum } = storedConfig
+    return [minimum, maximum]
+  }
+  function setMeshPointsVertexAttributeRange(id, minimum, maximum) {
+    const name = meshPointsVertexAttributeName(id)
+    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name)
+    return viewerStore.request(
+      meshPointsVertexAttributeSchemas.scalar_range,
+      { id, minimum, maximum },
+      {
+        response_function: () => {
+          storedConfig.minimum = minimum
+          storedConfig.maximum = maximum
+          console.log(
+            setMeshPointsVertexAttributeRange.name,
+            { id },
+            meshPointsVertexAttributeRange(id),
+          )
+        },
+      },
+    )
+  }
+
+  function meshPointsVertexAttributeColorMap(id) {
+    const name = meshPointsVertexAttributeName(id)
+    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name)
+    const { colorMap } = storedConfig
+    return colorMap
+  }
+  function setMeshPointsVertexAttributeColorMap(id, colorMap) {
+    const name = meshPointsVertexAttributeName(id)
+    const storedConfig = meshPointsVertexAttributeStoredConfig(id, name)
+    const points = getRGBPointsFromPreset(colorMap)
+    const { minimum, maximum } = storedConfig
+
+    console.log(setMeshPointsVertexAttributeColorMap.name, {
+      id,
+      minimum,
+      maximum,
+      colorMap,
+    })
+    return viewerStore.request(
+      meshPointsVertexAttributeSchemas.color_map,
+      { id, points, minimum, maximum },
+      {
+        response_function: () => {
+          storedConfig.colorMap = colorMap
+          console.log(
+            setMeshPointsVertexAttributeColorMap.name,
+            { id },
+            meshPointsVertexAttributeColorMap(id),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPointsVertexAttributeName,
+    meshPointsVertexAttributeRange,
+    meshPointsVertexAttributeColorMap,
+    setMeshPointsVertexAttributeName,
+    setMeshPointsVertexAttributeRange,
+    setMeshPointsVertexAttributeColorMap,
+    updateMeshPointsVertexAttribute,
+  }
+}

package/internal/stores/data_style/mesh/points/visibility.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 { useMeshPointsCommonStyle } from "./common"
+
+// Local constants
+const meshPointsVisibilitySchema =
+  viewer_schemas.opengeodeweb_viewer.mesh.points.visibility
+
+export function useMeshPointsVisibilityStyle() {
+  const viewerStore = useViewerStore()
+  const meshPointsCommonStyle = useMeshPointsCommonStyle()
+
+  function meshPointsVisibility(id) {
+    return meshPointsCommonStyle.meshPointsStyle(id).visibility
+  }
+  function setMeshPointsVisibility(id, visibility) {
+    return viewerStore.request(
+      meshPointsVisibilitySchema,
+      { id, visibility },
+      {
+        response_function: () => {
+          meshPointsCommonStyle.meshPointsStyle(id).visibility = visibility
+          console.log(
+            setMeshPointsVisibility.name,
+            { id },
+            meshPointsVisibility(id),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPointsVisibility,
+    setMeshPointsVisibility,
+  }
+}

package/internal/stores/data_style/mesh/polygons/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 { useMeshPolygonsCommonStyle } from "./common"
+
+// Local constants
+const meshPolygonsColorSchemas =
+  viewer_schemas.opengeodeweb_viewer.mesh.polygons.color
+
+export function useMeshPolygonsColorStyle() {
+  const viewerStore = useViewerStore()
+  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle()
+
+  function meshPolygonsColor(id) {
+    return meshPolygonsCommonStyle.meshPolygonsColoring(id).color
+  }
+  function setMeshPolygonsColor(id, color) {
+    return viewerStore.request(
+      meshPolygonsColorSchemas,
+      { id, color },
+      {
+        response_function: () => {
+          meshPolygonsCommonStyle.meshPolygonsColoring(id).color = color
+          console.log(
+            setMeshPolygonsColor.name,
+            { id },
+            JSON.stringify(meshPolygonsColor(id)),
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    meshPolygonsColor,
+    setMeshPolygonsColor,
+  }
+}

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

@@ -0,0 +1,23 @@
+import { useDataStyleStateStore } from "../../state"
+
+export function useMeshPolygonsCommonStyle() {
+  const dataStyleStateStore = useDataStyleStateStore()
+
+  function meshPolygonsStyle(id) {
+    return dataStyleStateStore.getStyle(id).polygons
+  }
+
+  function meshPolygonsColoring(id) {
+    return meshPolygonsStyle(id).coloring
+  }
+
+  function meshPolygonsActiveColoring(id) {
+    return meshPolygonsColoring(id).active
+  }
+
+  return {
+    meshPolygonsStyle,
+    meshPolygonsColoring,
+    meshPolygonsActiveColoring,
+  }
+}

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

@@ -0,0 +1,89 @@
+// Third party imports
+
+// Local imports
+import { useMeshPolygonsCommonStyle } from "./common"
+import { useMeshPolygonsVisibilityStyle } from "./visibility"
+import { useMeshPolygonsColorStyle } from "./color"
+import { useMeshPolygonsTexturesStyle } from "./textures"
+import { useMeshPolygonsVertexAttributeStyle } from "./vertex"
+import { useMeshPolygonsPolygonAttributeStyle } from "./polygon"
+
+// Local constants
+
+export function useMeshPolygonsStyle() {
+  const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle()
+  const meshPolygonsVisibility = useMeshPolygonsVisibilityStyle()
+  const meshPolygonsColorStyle = useMeshPolygonsColorStyle()
+  const meshPolygonsTexturesStyle = useMeshPolygonsTexturesStyle()
+  const meshPolygonsVertexAttributeStyle = useMeshPolygonsVertexAttributeStyle()
+  const meshPolygonsPolygonAttributeStyle =
+    useMeshPolygonsPolygonAttributeStyle()
+
+  async function setMeshPolygonsActiveColoring(id, type) {
+    const coloring = meshPolygonsCommonStyle.meshPolygonsColoring(id)
+    coloring.active = type
+    console.log(
+      setMeshPolygonsActiveColoring.name,
+      { id },
+      meshPolygonsCommonStyle.meshPolygonsActiveColoring(id),
+    )
+    if (type === "color") {
+      return meshPolygonsColorStyle.setMeshPolygonsColor(
+        id,
+        meshPolygonsColorStyle.meshPolygonsColor(id),
+      )
+    } else if (type === "textures") {
+      const textures = meshPolygonsTexturesStyle.meshPolygonsTextures(id)
+      if (textures === null) {
+        return Promise.resolve()
+      }
+      return meshPolygonsTexturesStyle.setMeshPolygonsTextures(id, textures)
+    } else if (type === "vertex") {
+      const name =
+        meshPolygonsVertexAttributeStyle.meshPolygonsVertexAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      return meshPolygonsVertexAttributeStyle.setMeshPolygonsVertexAttributeName(
+        id,
+        name,
+      )
+    } else if (type === "polygon") {
+      const name =
+        meshPolygonsPolygonAttributeStyle.meshPolygonsPolygonAttributeName(id)
+      if (name === null) {
+        return Promise.resolve()
+      }
+      await meshPolygonsPolygonAttributeStyle.setMeshPolygonsPolygonAttributeName(
+        id,
+        name,
+      )
+    } else {
+      throw new Error("Unknown mesh polygons coloring type: " + type)
+    }
+  }
+
+  function applyMeshPolygonsStyle(id) {
+    return Promise.all([
+      meshPolygonsVisibility.setMeshPolygonsVisibility(
+        id,
+        meshPolygonsVisibility.meshPolygonsVisibility(id),
+      ),
+      setMeshPolygonsActiveColoring(
+        id,
+        meshPolygonsCommonStyle.meshPolygonsActiveColoring(id),
+      ),
+    ])
+  }
+
+  return {
+    setMeshPolygonsActiveColoring,
+    applyMeshPolygonsStyle,
+    ...meshPolygonsCommonStyle,
+    ...meshPolygonsVisibility,
+    ...meshPolygonsColorStyle,
+    ...meshPolygonsTexturesStyle,
+    ...meshPolygonsVertexAttributeStyle,
+    ...meshPolygonsPolygonAttributeStyle,
+  }
+}