@geode/opengeodeweb-front 10.22.1 → 10.23.0-rc.1

package/internal/stores/data_style/model/blocks/polyhedron.js

@@ -0,0 +1,144 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+// Local imports
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelBlocksCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const schema = viewer_schemas.opengeodeweb_viewer.model.blocks.attribute.polyhedron;
+
+export function useModelBlocksPolyhedronAttribute() {
+  const dataStore = useDataStore();
+  const modelBlocksCommonStyle = useModelBlocksCommonStyle();
+  const viewerStore = useViewerStore();
+
+  function modelBlocksPolyhedronAttribute(modelId, blockId) {
+    return modelBlocksCommonStyle.modelBlockStyle(modelId, blockId).polyhedron_attribute;
+  }
+
+  function modelBlocksPolyhedronAttributeStoredConfig(modelId, blockId, name) {
+    const { storedConfigs } = modelBlocksPolyhedronAttribute(modelId, blockId);
+    if (name && storedConfigs && name in storedConfigs) {
+      return storedConfigs[name];
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+    };
+  }
+
+  function mutateModelBlocksPolyhedronStyle(modelId, blockIds, values) {
+    return modelBlocksCommonStyle.mutateModelBlocksStyle(modelId, blockIds, {
+      polyhedron_attribute: values,
+    });
+  }
+
+  function setModelBlocksPolyhedronAttributeStoredConfig(modelId, blockIds, name, config) {
+    return mutateModelBlocksPolyhedronStyle(modelId, blockIds, {
+      storedConfigs: {
+        [name]: config,
+      },
+    });
+  }
+
+  function modelBlocksPolyhedronAttributeName(modelId, blockId) {
+    return modelBlocksPolyhedronAttribute(modelId, blockId).name;
+  }
+
+  async function setModelBlocksPolyhedronAttributeName(modelId, blockIds, name) {
+    const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, blockIds);
+
+    const updates = { name };
+    const polyhedron = modelBlocksPolyhedronAttribute(modelId, blockIds[0]);
+    if (!(name in polyhedron.storedConfigs)) {
+      updates.storedConfigs = {
+        [name]: {
+          minimum: undefined,
+          maximum: undefined,
+          colorMap: undefined,
+        },
+      };
+    }
+
+    const params = { id: modelId, block_ids: viewer_ids, name };
+    return viewerStore.request(
+      { schema: schema.name, params },
+      {
+        response_function: () => mutateModelBlocksPolyhedronStyle(modelId, blockIds, updates),
+      },
+    );
+  }
+
+  function modelBlocksPolyhedronAttributeRange(modelId, blockId) {
+    const name = modelBlocksPolyhedronAttributeName(modelId, blockId);
+    const storedConfig = modelBlocksPolyhedronAttributeStoredConfig(modelId, blockId, name);
+    const { minimum, maximum } = storedConfig;
+    return [minimum, maximum];
+  }
+
+  async function setModelBlocksPolyhedronAttributeRange(modelId, blockIds, minimum, maximum) {
+    const name = modelBlocksPolyhedronAttributeName(modelId, blockIds[0]);
+    const colorMap = modelBlocksPolyhedronAttributeColorMap(modelId, blockIds[0]);
+    const points = getRGBPointsFromPreset(colorMap);
+
+    if (points.length > 0 && minimum !== undefined && maximum !== undefined) {
+      const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, blockIds);
+      const params = { id: modelId, block_ids: viewer_ids, points, minimum, maximum };
+      return viewerStore.request(
+        { schema: schema.color_map, params },
+        {
+          response_function: () =>
+            setModelBlocksPolyhedronAttributeStoredConfig(modelId, blockIds, name, {
+              minimum,
+              maximum,
+            }),
+        },
+      );
+    }
+    return setModelBlocksPolyhedronAttributeStoredConfig(modelId, blockIds, name, {
+      minimum,
+      maximum,
+    });
+  }
+
+  function modelBlocksPolyhedronAttributeColorMap(modelId, blockId) {
+    const name = modelBlocksPolyhedronAttributeName(modelId, blockId);
+    const storedConfig = modelBlocksPolyhedronAttributeStoredConfig(modelId, blockId, name);
+    const { colorMap } = storedConfig;
+    return colorMap;
+  }
+
+  async function setModelBlocksPolyhedronAttributeColorMap(modelId, blockIds, colorMap) {
+    const name = modelBlocksPolyhedronAttributeName(modelId, blockIds[0]);
+    const storedConfig = modelBlocksPolyhedronAttributeStoredConfig(modelId, blockIds[0], name);
+    const points = getRGBPointsFromPreset(colorMap);
+    const { minimum, maximum } = storedConfig;
+
+    if (points.length > 0 && minimum !== undefined && maximum !== undefined) {
+      const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, blockIds);
+      const params = { id: modelId, block_ids: viewer_ids, points, minimum, maximum };
+      return viewerStore.request(
+        { schema: schema.color_map, params },
+        {
+          response_function: () =>
+            setModelBlocksPolyhedronAttributeStoredConfig(modelId, blockIds, name, { colorMap }),
+        },
+      );
+    }
+    return setModelBlocksPolyhedronAttributeStoredConfig(modelId, blockIds, name, { colorMap });
+  }
+
+  return {
+    modelBlocksPolyhedronAttributeName,
+    modelBlocksPolyhedronAttributeRange,
+    modelBlocksPolyhedronAttributeColorMap,
+    modelBlocksPolyhedronAttributeStoredConfig,
+    setModelBlocksPolyhedronAttributeName,
+    setModelBlocksPolyhedronAttributeRange,
+    setModelBlocksPolyhedronAttributeColorMap,
+  };
+}

package/internal/stores/data_style/model/blocks/vertex.js

@@ -0,0 +1,141 @@
+// Third party imports
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+// Local imports
+import { getRGBPointsFromPreset } from "@ogw_front/utils/colormap";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useModelBlocksCommonStyle } from "./common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+// Local constants
+const schema = viewer_schemas.opengeodeweb_viewer.model.blocks.attribute.vertex;
+
+export function useModelBlocksVertexAttribute() {
+  const dataStore = useDataStore();
+  const modelBlocksCommonStyle = useModelBlocksCommonStyle();
+  const viewerStore = useViewerStore();
+
+  function modelBlocksVertexAttribute(modelId, blockId) {
+    return modelBlocksCommonStyle.modelBlockStyle(modelId, blockId).vertex_attribute;
+  }
+
+  function modelBlocksVertexAttributeStoredConfig(modelId, blockId, name) {
+    const { storedConfigs } = modelBlocksVertexAttribute(modelId, blockId);
+    if (name && storedConfigs && name in storedConfigs) {
+      return storedConfigs[name];
+    }
+    return {
+      minimum: undefined,
+      maximum: undefined,
+      colorMap: undefined,
+    };
+  }
+
+  function mutateModelBlocksVertexStyle(modelId, blockIds, values) {
+    return modelBlocksCommonStyle.mutateModelBlocksStyle(modelId, blockIds, {
+      vertex_attribute: values,
+    });
+  }
+
+  function setModelBlocksVertexAttributeStoredConfig(modelId, blockIds, name, config) {
+    return mutateModelBlocksVertexStyle(modelId, blockIds, {
+      storedConfigs: {
+        [name]: config,
+      },
+    });
+  }
+
+  function modelBlocksVertexAttributeName(modelId, blockId) {
+    return modelBlocksVertexAttribute(modelId, blockId).name;
+  }
+
+  async function setModelBlocksVertexAttributeName(modelId, blockIds, name) {
+    const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, blockIds);
+
+    const updates = { name };
+    const vertex = modelBlocksVertexAttribute(modelId, blockIds[0]);
+    if (!(name in vertex.storedConfigs)) {
+      updates.storedConfigs = {
+        [name]: {
+          minimum: undefined,
+          maximum: undefined,
+          colorMap: undefined,
+        },
+      };
+    }
+
+    const params = { id: modelId, block_ids: viewer_ids, name };
+    return viewerStore.request(
+      { schema: schema.name, params },
+      {
+        response_function: () => mutateModelBlocksVertexStyle(modelId, blockIds, updates),
+      },
+    );
+  }
+
+  function modelBlocksVertexAttributeRange(modelId, blockId) {
+    const name = modelBlocksVertexAttributeName(modelId, blockId);
+    const storedConfig = modelBlocksVertexAttributeStoredConfig(modelId, blockId, name);
+    const { minimum, maximum } = storedConfig;
+    return [minimum, maximum];
+  }
+
+  async function setModelBlocksVertexAttributeRange(modelId, blockIds, minimum, maximum) {
+    const name = modelBlocksVertexAttributeName(modelId, blockIds[0]);
+    const colorMap = modelBlocksVertexAttributeColorMap(modelId, blockIds[0]);
+    const points = getRGBPointsFromPreset(colorMap);
+
+    if (points.length > 0 && minimum !== undefined && maximum !== undefined) {
+      const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, blockIds);
+      const params = { id: modelId, block_ids: viewer_ids, points, minimum, maximum };
+      return viewerStore.request(
+        { schema: schema.color_map, params },
+        {
+          response_function: () =>
+            setModelBlocksVertexAttributeStoredConfig(modelId, blockIds, name, {
+              minimum,
+              maximum,
+            }),
+        },
+      );
+    }
+    return setModelBlocksVertexAttributeStoredConfig(modelId, blockIds, name, { minimum, maximum });
+  }
+
+  function modelBlocksVertexAttributeColorMap(modelId, blockId) {
+    const name = modelBlocksVertexAttributeName(modelId, blockId);
+    const storedConfig = modelBlocksVertexAttributeStoredConfig(modelId, blockId, name);
+    const { colorMap } = storedConfig;
+    return colorMap;
+  }
+
+  async function setModelBlocksVertexAttributeColorMap(modelId, blockIds, colorMap) {
+    const name = modelBlocksVertexAttributeName(modelId, blockIds[0]);
+    const storedConfig = modelBlocksVertexAttributeStoredConfig(modelId, blockIds[0], name);
+    const points = getRGBPointsFromPreset(colorMap);
+    const { minimum, maximum } = storedConfig;
+
+    if (points.length > 0 && minimum !== undefined && maximum !== undefined) {
+      const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, blockIds);
+      const params = { id: modelId, block_ids: viewer_ids, points, minimum, maximum };
+      return viewerStore.request(
+        { schema: schema.color_map, params },
+        {
+          response_function: () =>
+            setModelBlocksVertexAttributeStoredConfig(modelId, blockIds, name, { colorMap }),
+        },
+      );
+    }
+    return setModelBlocksVertexAttributeStoredConfig(modelId, blockIds, name, { colorMap });
+  }
+
+  return {
+    modelBlocksVertexAttributeName,
+    modelBlocksVertexAttributeRange,
+    modelBlocksVertexAttributeColorMap,
+    modelBlocksVertexAttributeStoredConfig,
+    setModelBlocksVertexAttributeName,
+    setModelBlocksVertexAttributeRange,
+    setModelBlocksVertexAttributeColorMap,
+  };
+}

package/internal/stores/data_style/model/color.js

@@ -9,6 +9,75 @@ function useModelColorStyle(componentStyleFunctions) {
   const dataStyleState = useDataStyleState();
   const modelCommonStyle = useModelCommonStyle();
 
+  const { Surface, Line, Block, Corner } = componentStyleFunctions;
+
+  const ATTRIBUTE_FUNCTIONS = {
+    Surface: {
+      vertex: {
+        getName: Surface.modelSurfacesVertexAttributeName,
+        setName: Surface.setModelSurfacesVertexAttributeName,
+        getRange: Surface.modelSurfacesVertexAttributeRange,
+        setRange: Surface.setModelSurfacesVertexAttributeRange,
+        getColorMap: Surface.modelSurfacesVertexAttributeColorMap,
+        setColorMap: Surface.setModelSurfacesVertexAttributeColorMap,
+      },
+      polygon: {
+        getName: Surface.modelSurfacesPolygonAttributeName,
+        setName: Surface.setModelSurfacesPolygonAttributeName,
+        getRange: Surface.modelSurfacesPolygonAttributeRange,
+        setRange: Surface.setModelSurfacesPolygonAttributeRange,
+        getColorMap: Surface.modelSurfacesPolygonAttributeColorMap,
+        setColorMap: Surface.setModelSurfacesPolygonAttributeColorMap,
+      },
+    },
+    Line: {
+      vertex: {
+        getName: Line.modelLinesVertexAttributeName,
+        setName: Line.setModelLinesVertexAttributeName,
+        getRange: Line.modelLinesVertexAttributeRange,
+        setRange: Line.setModelLinesVertexAttributeRange,
+        getColorMap: Line.modelLinesVertexAttributeColorMap,
+        setColorMap: Line.setModelLinesVertexAttributeColorMap,
+      },
+      edge: {
+        getName: Line.modelLinesEdgeAttributeName,
+        setName: Line.setModelLinesEdgeAttributeName,
+        getRange: Line.modelLinesEdgeAttributeRange,
+        setRange: Line.setModelLinesEdgeAttributeRange,
+        getColorMap: Line.modelLinesEdgeAttributeColorMap,
+        setColorMap: Line.setModelLinesEdgeAttributeColorMap,
+      },
+    },
+    Block: {
+      vertex: {
+        getName: Block.modelBlocksVertexAttributeName,
+        setName: Block.setModelBlocksVertexAttributeName,
+        getRange: Block.modelBlocksVertexAttributeRange,
+        setRange: Block.setModelBlocksVertexAttributeRange,
+        getColorMap: Block.modelBlocksVertexAttributeColorMap,
+        setColorMap: Block.setModelBlocksVertexAttributeColorMap,
+      },
+      polyhedron: {
+        getName: Block.modelBlocksPolyhedronAttributeName,
+        setName: Block.setModelBlocksPolyhedronAttributeName,
+        getRange: Block.modelBlocksPolyhedronAttributeRange,
+        setRange: Block.setModelBlocksPolyhedronAttributeRange,
+        getColorMap: Block.modelBlocksPolyhedronAttributeColorMap,
+        setColorMap: Block.setModelBlocksPolyhedronAttributeColorMap,
+      },
+    },
+    Corner: {
+      vertex: {
+        getName: Corner.modelCornersVertexAttributeName,
+        setName: Corner.setModelCornersVertexAttributeName,
+        getRange: Corner.modelCornersVertexAttributeRange,
+        setRange: Corner.setModelCornersVertexAttributeRange,
+        getColorMap: Corner.modelCornersVertexAttributeColorMap,
+        setColorMap: Corner.setModelCornersVertexAttributeColorMap,
+      },
+    },
+  };
+
   function getModelComponentColor(modelId, componentId) {
     return dataStyleState.getComponentStyle(modelId, componentId).color;
   }
@@ -18,14 +87,15 @@ function useModelColorStyle(componentStyleFunctions) {
     if (individualColor !== undefined) {
       return individualColor;
     }
-    return getModelComponentTypeColor(modelId, type);
+    return modelComponentTypeColor(modelId, type);
   }
 
   function getModelComponentColorMode(modelId, componentId) {
-    return dataStyleState.getComponentStyle(modelId, componentId).color_mode || "constant";
+    const mode = dataStyleState.getComponentStyle(modelId, componentId).color_mode || "constant";
+    return mode === "constant" ? "color" : mode;
   }
 
-  function getModelComponentTypeColor(modelId, type) {
+  function modelComponentTypeColor(modelId, type) {
     return (
       dataStyleState.getModelComponentTypeStyle(modelId, type).color ||
       DEFAULT_MODEL_COMPONENT_TYPE_COLORS[type]
@@ -33,7 +103,8 @@ function useModelColorStyle(componentStyleFunctions) {
   }
 
   function getModelComponentTypeColorMode(modelId, type) {
-    return dataStyleState.getModelComponentTypeStyle(modelId, type).color_mode || "constant";
+    const mode = dataStyleState.getModelComponentTypeStyle(modelId, type).color_mode || "constant";
+    return mode === "constant" ? "color" : mode;
   }
 
   async function setModelComponentTypeColor(modelId, type, color) {
@@ -49,23 +120,59 @@ function useModelColorStyle(componentStyleFunctions) {
   }
 
   async function setModelComponentTypeColorMode(modelId, type, color_mode) {
-    await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, { color_mode });
+    const mode = color_mode === "color" ? "constant" : color_mode;
+    await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, { color_mode: mode });
     const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
     if (idsForType.length === 0) {
       return;
     }
 
-    if (color_mode === "random") {
-      await setModelComponentsColor(modelId, idsForType, undefined, color_mode);
+    if (mode === "random" || mode === "constant") {
+      await setModelComponentsColor(modelId, idsForType, undefined, mode);
       return;
     }
-    await modelCommonStyle.mutateComponentStyles(modelId, idsForType, { color_mode });
+
+    await modelCommonStyle.mutateComponentStyles(modelId, idsForType, { color_mode: mode });
+    const { getName, setName, getRange, setRange, getColorMap, setColorMap } =
+      ATTRIBUTE_FUNCTIONS[type][mode];
+
+    const name = getName(modelId, idsForType[0]);
+    if (name) {
+      await setName(modelId, idsForType, name);
+      const [minimum, maximum] = getRange(modelId, idsForType[0]);
+      if (minimum !== undefined && maximum !== undefined) {
+        await setRange(modelId, idsForType, minimum, maximum);
+      }
+      const colorMap = getColorMap(modelId, idsForType[0]);
+      if (colorMap) {
+        await setColorMap(modelId, idsForType, colorMap);
+      }
+    }
   }
 
   async function setModelComponentColorMode(modelId, componentId, color_mode) {
-    await modelCommonStyle.mutateComponentStyle(modelId, componentId, { color_mode });
-    if (color_mode === "random") {
-      await setModelComponentsColor(modelId, [componentId], undefined, color_mode);
+    const mode = color_mode === "color" ? "constant" : color_mode;
+    await modelCommonStyle.mutateComponentStyle(modelId, componentId, { color_mode: mode });
+    if (mode === "random" || mode === "constant") {
+      await setModelComponentsColor(modelId, [componentId], undefined, mode);
+      return;
+    }
+
+    const type = await dataStore.meshComponentType(modelId, componentId);
+    const { getName, setName, getRange, setRange, getColorMap, setColorMap } =
+      ATTRIBUTE_FUNCTIONS[type][mode];
+
+    const name = getName(modelId, componentId);
+    if (name) {
+      await setName(modelId, [componentId], name);
+      const [minimum, maximum] = getRange(modelId, componentId);
+      if (minimum !== undefined && maximum !== undefined) {
+        await setRange(modelId, [componentId], minimum, maximum);
+      }
+      const colorMap = getColorMap(modelId, componentId);
+      if (colorMap) {
+        await setColorMap(modelId, [componentId], colorMap);
+      }
     }
   }
 
@@ -85,7 +192,7 @@ function useModelColorStyle(componentStyleFunctions) {
     getModelComponentColor,
     getModelComponentEffectiveColor,
     getModelComponentColorMode,
-    getModelComponentTypeColor,
+    modelComponentTypeColor,
     getModelComponentTypeColorMode,
     setModelComponentTypeColor,
     setModelComponentTypeColorMode,

package/internal/stores/data_style/model/common.js

@@ -1,16 +1,19 @@
 import { database } from "@ogw_internal/database/database";
 import merge from "lodash/merge";
 import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
 // oxlint-disable-next-line max-lines-per-function
 export function useModelCommonStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
+  const dataStyleState = useDataStyleState();
   const model_component_datastyle_db = database.model_component_datastyle;
   const model_component_type_datastyle_db = database.model_component_type_datastyle;
 
   async function mutateComponentStyle(id_model, id_component, values) {
+    dataStyleState.updateComponentStyleCache(id_model, id_component, values);
     const key = [id_model, id_component];
     const entry = (await model_component_datastyle_db.get(key)) || { id_model, id_component };
     merge(entry, values);
@@ -18,6 +21,7 @@ export function useModelCommonStyle() {
   }
 
   function mutateModelComponentTypeStyle(id_model, type, values) {
+    dataStyleState.updateModelComponentTypeStyleCache(id_model, type, values);
     return database.transaction("rw", model_component_type_datastyle_db, async () => {
       const key = [id_model, type];
       const entry = (await model_component_type_datastyle_db.get(key)) || { id_model, type };
@@ -27,19 +31,12 @@ export function useModelCommonStyle() {
   }
 
   function mutateComponentStyles(id_model, id_components, values) {
+    dataStyleState.bulkUpdateComponentStylesCache(id_model, id_components, values);
     return database.transaction("rw", model_component_datastyle_db, async () => {
-      const all_styles = await model_component_datastyle_db
-        .where("id_model")
-        .equals(id_model)
-        .toArray();
-
-      const style_map = {};
-      for (const style of all_styles) {
-        style_map[style.id_component] = style;
-      }
-
-      const updates = id_components.map((id_component) => {
-        const style = style_map[id_component] || { id_model, id_component };
+      const keys = id_components.map((id_component) => [id_model, id_component]);
+      const existing = await model_component_datastyle_db.bulkGet(keys);
+      const updates = id_components.map((id_component, index) => {
+        const style = existing[index] || { id_model, id_component };
         merge(style, values);
         return toRaw(style);
       });
@@ -49,16 +46,12 @@ export function useModelCommonStyle() {
   }
 
   function bulkMutateComponentStylesPerComponent(id_model, component_updates) {
+    dataStyleState.bulkUpdateComponentStyleCache(id_model, component_updates);
     return database.transaction("rw", model_component_datastyle_db, async () => {
-      const component_ids = new Set(component_updates.map((update) => update.id_component));
-      const all_styles = await model_component_datastyle_db
-        .where("id_model")
-        .equals(id_model)
-        .and((style) => component_ids.has(style.id_component))
-        .toArray();
-      const style_map = Object.fromEntries(all_styles.map((style) => [style.id_component, style]));
-      const updates = component_updates.map(({ id_component, values }) => {
-        const style = style_map[id_component] || { id_model, id_component };
+      const keys = component_updates.map((update) => [id_model, update.id_component]);
+      const existing = await model_component_datastyle_db.bulkGet(keys);
+      const updates = component_updates.map(({ id_component, values }, index) => {
+        const style = existing[index] || { id_model, id_component };
         merge(style, values);
         return toRaw(style);
       });
@@ -76,6 +69,10 @@ export function useModelCommonStyle() {
       return;
     }
 
+    if (color_mode === "constant" && color !== undefined) {
+      await mutateComponentStyles(id, component_ids, { color });
+    }
+
     const params = { id, block_ids: viewer_ids, color_mode };
     if (color_mode === "constant" && color !== undefined) {
       params.color = color;

package/internal/stores/data_style/model/corners/color.js

@@ -16,5 +16,14 @@ export function useModelCornersColor() {
     return modelCommonStyle.setModelTypeColor(modelId, corners_ids, color, schema, color_mode);
   }
 
-  return { setModelCornersColor, modelCornerColor };
+  function modelCornerColorMode(id, corner_id) {
+    const mode = modelCornersCommonStyle.modelCornerStyle(id, corner_id).color_mode || "constant";
+    return mode === "constant" ? "color" : mode;
+  }
+
+  function setModelCornerColorMode(modelId, corner_id, color_mode) {
+    return modelCommonStyle.setModelComponentColorMode(modelId, corner_id, color_mode);
+  }
+
+  return { setModelCornersColor, modelCornerColor, modelCornerColorMode, setModelCornerColorMode };
 }

package/internal/stores/data_style/model/corners/index.js

@@ -1,6 +1,7 @@
 import { useDataStore } from "@ogw_front/stores/data";
 import { useModelCornersColor } from "./color";
 import { useModelCornersCommonStyle } from "./common";
+import { useModelCornersVertexAttribute } from "./vertex";
 import { useModelCornersVisibility } from "./visibility";
 
 async function setModelCornersDefaultStyle(_id) {
@@ -12,6 +13,7 @@ export function useModelCornersStyle() {
   const modelCommonStyle = useModelCornersCommonStyle();
   const modelVisibilityStyle = useModelCornersVisibility();
   const modelColorStyle = useModelCornersColor();
+  const modelCornersVertexAttribute = useModelCornersVertexAttribute();
 
   async function applyModelCornersStyle(modelId) {
     const corners_ids = await dataStore.getCornersGeodeIds(modelId);
@@ -21,6 +23,7 @@ export function useModelCornersStyle() {
 
     const visibilityGroups = {};
     const colorGroups = {};
+    const attributeGroups = {};
 
     for (const corner_id of corners_ids) {
       const style = modelCommonStyle.modelCornerStyle(modelId, corner_id);
@@ -32,11 +35,34 @@ export function useModelCornersStyle() {
       visibilityGroups[visibility].push(corner_id);
 
       const color_mode = style.color_mode || "constant";
-      const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
-      if (!colorGroups[color_key]) {
-        colorGroups[color_key] = { color_mode, color: style.color, corners_ids: [] };
+      if (color_mode === "constant" || color_mode === "random") {
+        const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+        if (!colorGroups[color_key]) {
+          colorGroups[color_key] = { color_mode, color: style.color, corners_ids: [] };
+        }
+        colorGroups[color_key].corners_ids.push(corner_id);
+      } else {
+        const attributeTypeKey = `${color_mode}_attribute`;
+        const attributeStyle = style[attributeTypeKey] || {};
+        const { name } = attributeStyle;
+        if (name) {
+          const storedConfig =
+            (attributeStyle.storedConfigs && attributeStyle.storedConfigs[name]) || {};
+          const { minimum, maximum, colorMap } = storedConfig;
+          const attributeGroupKey = `${color_mode}_${name}_${colorMap}_${minimum}_${maximum}`;
+          if (!attributeGroups[attributeGroupKey]) {
+            attributeGroups[attributeGroupKey] = {
+              color_mode,
+              name,
+              minimum,
+              maximum,
+              colorMap,
+              corners_ids: [],
+            };
+          }
+          attributeGroups[attributeGroupKey].corners_ids.push(corner_id);
+        }
       }
-      colorGroups[color_key].corners_ids.push(corner_id);
     }
 
     const promises = [
@@ -46,6 +72,23 @@ export function useModelCornersStyle() {
       ...Object.values(colorGroups).map(({ color_mode, color, corners_ids: ids }) =>
         modelColorStyle.setModelCornersColor(modelId, ids, color, color_mode),
       ),
+      ...Object.values(attributeGroups).flatMap(
+        ({ name, minimum, maximum, colorMap, corners_ids: ids }) => {
+          const attribute = modelCornersVertexAttribute;
+          const setAttributeName = attribute.setModelCornersVertexAttributeName;
+          const setAttributeRange = attribute.setModelCornersVertexAttributeRange;
+          const setAttributeColorMap = attribute.setModelCornersVertexAttributeColorMap;
+
+          const list = [setAttributeName(modelId, ids, name)];
+          if (minimum !== undefined && maximum !== undefined) {
+            list.push(setAttributeRange(modelId, ids, minimum, maximum));
+          }
+          if (colorMap) {
+            list.push(setAttributeColorMap(modelId, ids, colorMap));
+          }
+          return list;
+        },
+      ),
     ];
 
     return Promise.all(promises);
@@ -57,5 +100,6 @@ export function useModelCornersStyle() {
     ...modelCommonStyle,
     ...modelVisibilityStyle,
     ...modelColorStyle,
+    ...modelCornersVertexAttribute,
   };
 }