@geode/opengeodeweb-front 10.28.1-rc.4 → 10.29.0-rc.1

package/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -64,6 +64,15 @@ const vertex_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_item = computed({
+  get: () => dataStyleStore.meshEdgesVertexAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
   set: async (newValue) => {
@@ -91,6 +100,15 @@ const edge_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const edge_attribute_item = computed({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const edge_attribute_range = computed({
   get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
   set: async (newValue) => {
@@ -110,6 +128,7 @@ const edge_attribute_color_map = computed({
   },
 });
 </script>
+
 <template>
   <ViewerContextMenuItem
     data-testid="meshEdgesMenu"
@@ -127,9 +146,11 @@ const edge_attribute_color_map = computed({
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:edge_attribute_name="edge_attribute_name"
+          v-model:edge_attribute_item="edge_attribute_item"
           v-model:edge_attribute_range="edge_attribute_range"
           v-model:edge_attribute_color_map="edge_attribute_color_map"
         />

package/app/components/Viewer/Generic/Mesh/CellsOptions.vue

@@ -55,6 +55,7 @@ const textures = computed({
     hybridViewerStore.remoteRender();
   },
 });
+
 const vertex_attribute_name = computed({
   get: () => dataStyleStore.meshCellsVertexAttributeName(id.value),
   set: async (newValue) => {
@@ -64,6 +65,15 @@ const vertex_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_item = computed({
+  get: () => dataStyleStore.meshCellsVertexAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsVertexAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshCellsVertexAttributeRange(id.value),
   set: async (newValue) => {
@@ -91,6 +101,15 @@ const cell_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const cell_attribute_item = computed({
+  get: () => dataStyleStore.meshCellsCellAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshCellsCellAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const cell_attribute_range = computed({
   get: () => dataStyleStore.meshCellsCellAttributeRange(id.value),
   set: async (newValue) => {
@@ -128,9 +147,11 @@ const cell_attribute_color_map = computed({
           v-model:color="color"
           v-model:textures="textures"
           v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:cell_attribute_name="cell_attribute_name"
+          v-model:cell_attribute_item="cell_attribute_item"
           v-model:cell_attribute_range="cell_attribute_range"
           v-model:cell_attribute_color_map="cell_attribute_color_map"
         />

package/app/components/Viewer/Generic/Mesh/EdgesOptions.vue

@@ -56,6 +56,78 @@ const color = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_name = computed({
+  get: () => dataStyleStore.meshEdgesVertexAttributeName(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeName(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_item = computed({
+  get: () => dataStyleStore.meshEdgesVertexAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_range = computed({
+  get: () => dataStyleStore.meshEdgesVertexAttributeRange(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_color_map = computed({
+  get: () => dataStyleStore.meshEdgesVertexAttributeColorMap(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesVertexAttributeColorMap(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_name = computed({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeName(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeName(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_item = computed({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_range = computed({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeRange(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeRange(targetId, newValue[0], newValue[1]),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const edge_attribute_color_map = computed({
+  get: () => dataStyleStore.meshEdgesEdgeAttributeColorMap(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshEdgesEdgeAttributeColorMap(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 </script>
 
 <template>
@@ -81,6 +153,14 @@ const color = computed({
           :id="id"
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_item="vertex_attribute_item"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:edge_attribute_name="edge_attribute_name"
+          v-model:edge_attribute_item="edge_attribute_item"
+          v-model:edge_attribute_range="edge_attribute_range"
+          v-model:edge_attribute_color_map="edge_attribute_color_map"
         />
       </template>
     </template>

package/app/components/Viewer/Generic/Mesh/PointsOptions.vue

@@ -65,6 +65,15 @@ const vertex_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_item = computed({
+  get: () => dataStyleStore.meshPointsVertexAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPointsVertexAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshPointsVertexAttributeRange(id.value),
   set: async (newValue) => {
@@ -109,6 +118,7 @@ const vertex_attribute_color_map = computed({
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           :capabilities="{ vertex: { available: false } }"

package/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue

@@ -56,6 +56,79 @@ const textures = computed({
     hybridViewerStore.remoteRender();
   },
 });
+
+const vertex_attribute_name = computed({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeName(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeName(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_item = computed({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_range = computed({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeRange(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeRange(targetId, newValue[0], newValue[1]),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const vertex_attribute_color_map = computed({
+  get: () => dataStyleStore.meshPolygonsVertexAttributeColorMap(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsVertexAttributeColorMap(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_name = computed({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeName(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeName(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_item = computed({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_range = computed({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeRange(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeRange(targetId, newValue[0], newValue[1]),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
+const polygon_attribute_color_map = computed({
+  get: () => dataStyleStore.meshPolygonsPolygonAttributeColorMap(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolygonsPolygonAttributeColorMap(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 </script>
 
 <template>
@@ -77,6 +150,14 @@ const textures = computed({
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:textures="textures"
+          v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_item="vertex_attribute_item"
+          v-model:vertex_attribute_range="vertex_attribute_range"
+          v-model:vertex_attribute_color_map="vertex_attribute_color_map"
+          v-model:polygon_attribute_name="polygon_attribute_name"
+          v-model:polygon_attribute_item="polygon_attribute_item"
+          v-model:polygon_attribute_range="polygon_attribute_range"
+          v-model:polygon_attribute_color_map="polygon_attribute_color_map"
           :capabilities="capabilities"
         />
       </template>

package/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue

@@ -55,6 +55,15 @@ const vertex_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const vertex_attribute_item = computed({
+  get: () => dataStyleStore.meshPolyhedraVertexAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraVertexAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const vertex_attribute_range = computed({
   get: () => dataStyleStore.meshPolyhedraVertexAttributeRange(id.value),
   set: async (newValue) => {
@@ -82,6 +91,15 @@ const polyhedron_attribute_name = computed({
     hybridViewerStore.remoteRender();
   },
 });
+const polyhedron_attribute_item = computed({
+  get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeItem(id.value),
+  set: async (newValue) => {
+    await applyBatchStyle(id.value, (targetId) =>
+      dataStyleStore.setMeshPolyhedraPolyhedronAttributeItem(targetId, newValue),
+    );
+    hybridViewerStore.remoteRender();
+  },
+});
 const polyhedron_attribute_range = computed({
   get: () => dataStyleStore.meshPolyhedraPolyhedronAttributeRange(id.value),
   set: async (newValue) => {
@@ -123,9 +141,11 @@ const polyhedron_attribute_color_map = computed({
           v-model:coloring_style_key="coloring_style_key"
           v-model:color="color"
           v-model:vertex_attribute_name="vertex_attribute_name"
+          v-model:vertex_attribute_item="vertex_attribute_item"
           v-model:vertex_attribute_range="vertex_attribute_range"
           v-model:vertex_attribute_color_map="vertex_attribute_color_map"
           v-model:polyhedron_attribute_name="polyhedron_attribute_name"
+          v-model:polyhedron_attribute_item="polyhedron_attribute_item"
           v-model:polyhedron_attribute_range="polyhedron_attribute_range"
           v-model:polyhedron_attribute_color_map="polyhedron_attribute_color_map"
           :capabilities="{

package/app/components/Viewer/Generic/Model/BlocksOptions.vue

@@ -74,6 +74,14 @@ const blocksVertexAttributeName = computed({
   },
 });
 
+const blocksVertexAttributeItem = computed({
+  get: () => dataStyleStore.modelBlocksVertexAttributeItem(modelId, targetBlockIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksVertexAttributeItem(modelId, targetBlockIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const blocksVertexAttributeRange = computed({
   get: () => dataStyleStore.modelBlocksVertexAttributeRange(modelId, targetBlockIds[0]),
   set: async (newValue) => {
@@ -103,6 +111,14 @@ const blocksPolyhedronAttributeName = computed({
   },
 });
 
+const blocksPolyhedronAttributeItem = computed({
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeItem(modelId, targetBlockIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksPolyhedronAttributeItem(modelId, targetBlockIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const blocksPolyhedronAttributeRange = computed({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeRange(modelId, targetBlockIds[0]),
   set: async (newValue) => {
@@ -137,6 +153,14 @@ const vertexAttributeName = computed({
   },
 });
 
+const vertexAttributeItem = computed({
+  get: () => dataStyleStore.modelBlocksVertexAttributeItem(modelId, blockId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksVertexAttributeItem(modelId, [blockId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const vertexAttributeRange = computed({
   get: () => dataStyleStore.modelBlocksVertexAttributeRange(modelId, blockId),
   set: async (newValue) => {
@@ -166,6 +190,14 @@ const polyhedronAttributeName = computed({
   },
 });
 
+const polyhedronAttributeItem = computed({
+  get: () => dataStyleStore.modelBlocksPolyhedronAttributeItem(modelId, blockId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelBlocksPolyhedronAttributeItem(modelId, [blockId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const polyhedronAttributeRange = computed({
   get: () => dataStyleStore.modelBlocksPolyhedronAttributeRange(modelId, blockId),
   set: async (newValue) => {
@@ -210,9 +242,11 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
       v-model:coloring_style_key="blocksActiveColoring"
       v-model:color="blocksColor"
       v-model:vertex_attribute_name="blocksVertexAttributeName"
+      v-model:vertex_attribute_item="blocksVertexAttributeItem"
       v-model:vertex_attribute_range="blocksVertexAttributeRange"
       v-model:vertex_attribute_color_map="blocksVertexAttributeColorMap"
       v-model:polyhedron_attribute_name="blocksPolyhedronAttributeName"
+      v-model:polyhedron_attribute_item="blocksPolyhedronAttributeItem"
       v-model:polyhedron_attribute_range="blocksPolyhedronAttributeRange"
       v-model:polyhedron_attribute_color_map="blocksPolyhedronAttributeColorMap"
       :capabilities="capabilities"
@@ -229,9 +263,11 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
       v-model:coloring_style_key="blockActiveColoring"
       v-model:color="blockColor"
       v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_item="vertexAttributeItem"
       v-model:vertex_attribute_range="vertexAttributeRange"
       v-model:vertex_attribute_color_map="vertexAttributeColorMap"
       v-model:polyhedron_attribute_name="polyhedronAttributeName"
+      v-model:polyhedron_attribute_item="polyhedronAttributeItem"
       v-model:polyhedron_attribute_range="polyhedronAttributeRange"
       v-model:polyhedron_attribute_color_map="polyhedronAttributeColorMap"
       :capabilities="capabilities"

package/app/components/Viewer/Generic/Model/CornersOptions.vue

@@ -75,6 +75,14 @@ const cornersVertexAttributeName = computed({
   },
 });
 
+const cornersVertexAttributeItem = computed({
+  get: () => dataStyleStore.modelCornersVertexAttributeItem(modelId, targetCornerIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeItem(modelId, targetCornerIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const cornersVertexAttributeRange = computed({
   get: () => dataStyleStore.modelCornersVertexAttributeRange(modelId, targetCornerIds[0]),
   set: async (newValue) => {
@@ -105,6 +113,14 @@ const vertexAttributeName = computed({
   },
 });
 
+const vertexAttributeItem = computed({
+  get: () => dataStyleStore.modelCornersVertexAttributeItem(modelId, cornerId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelCornersVertexAttributeItem(modelId, [cornerId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const vertexAttributeRange = computed({
   get: () => dataStyleStore.modelCornersVertexAttributeRange(modelId, cornerId),
   set: async (newValue) => {
@@ -148,6 +164,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
       v-model:coloring_style_key="cornersActiveColoring"
       v-model:color="cornersColor"
       v-model:vertex_attribute_name="cornersVertexAttributeName"
+      v-model:vertex_attribute_item="cornersVertexAttributeItem"
       v-model:vertex_attribute_range="cornersVertexAttributeRange"
       v-model:vertex_attribute_color_map="cornersVertexAttributeColorMap"
       :capabilities="capabilities"
@@ -164,6 +181,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
       v-model:coloring_style_key="cornerActiveColoring"
       v-model:color="cornerColor"
       v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_item="vertexAttributeItem"
       v-model:vertex_attribute_range="vertexAttributeRange"
       v-model:vertex_attribute_color_map="vertexAttributeColorMap"
       :capabilities="capabilities"

package/app/components/Viewer/Generic/Model/LinesOptions.vue

@@ -74,6 +74,14 @@ const linesVertexAttributeName = computed({
   },
 });
 
+const linesVertexAttributeItem = computed({
+  get: () => dataStyleStore.modelLinesVertexAttributeItem(modelId, targetLineIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVertexAttributeItem(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const linesVertexAttributeRange = computed({
   get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId, targetLineIds[0]),
   set: async (newValue) => {
@@ -103,6 +111,14 @@ const linesEdgeAttributeName = computed({
   },
 });
 
+const linesEdgeAttributeItem = computed({
+  get: () => dataStyleStore.modelLinesEdgeAttributeItem(modelId, targetLineIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesEdgeAttributeItem(modelId, targetLineIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const linesEdgeAttributeRange = computed({
   get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId, targetLineIds[0]),
   set: async (newValue) => {
@@ -133,6 +149,14 @@ const vertexAttributeName = computed({
   },
 });
 
+const vertexAttributeItem = computed({
+  get: () => dataStyleStore.modelLinesVertexAttributeItem(modelId, lineId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesVertexAttributeItem(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const vertexAttributeRange = computed({
   get: () => dataStyleStore.modelLinesVertexAttributeRange(modelId, lineId),
   set: async (newValue) => {
@@ -162,6 +186,14 @@ const edgeAttributeName = computed({
   },
 });
 
+const edgeAttributeItem = computed({
+  get: () => dataStyleStore.modelLinesEdgeAttributeItem(modelId, lineId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelLinesEdgeAttributeItem(modelId, [lineId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const edgeAttributeRange = computed({
   get: () => dataStyleStore.modelLinesEdgeAttributeRange(modelId, lineId),
   set: async (newValue) => {
@@ -206,9 +238,11 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
       v-model:coloring_style_key="linesActiveColoring"
       v-model:color="linesColor"
       v-model:vertex_attribute_name="linesVertexAttributeName"
+      v-model:vertex_attribute_item="linesVertexAttributeItem"
       v-model:vertex_attribute_range="linesVertexAttributeRange"
       v-model:vertex_attribute_color_map="linesVertexAttributeColorMap"
       v-model:edge_attribute_name="linesEdgeAttributeName"
+      v-model:edge_attribute_item="linesEdgeAttributeItem"
       v-model:edge_attribute_range="linesEdgeAttributeRange"
       v-model:edge_attribute_color_map="linesEdgeAttributeColorMap"
       :capabilities="capabilities"
@@ -225,9 +259,11 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
       v-model:coloring_style_key="lineActiveColoring"
       v-model:color="lineColor"
       v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_item="vertexAttributeItem"
       v-model:vertex_attribute_range="vertexAttributeRange"
       v-model:vertex_attribute_color_map="vertexAttributeColorMap"
       v-model:edge_attribute_name="edgeAttributeName"
+      v-model:edge_attribute_item="edgeAttributeItem"
       v-model:edge_attribute_range="edgeAttributeRange"
       v-model:edge_attribute_color_map="edgeAttributeColorMap"
       :capabilities="capabilities"

package/app/components/Viewer/Generic/Model/SurfacesOptions.vue

@@ -74,6 +74,14 @@ const surfacesVertexAttributeName = computed({
   },
 });
 
+const surfacesVertexAttributeItem = computed({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeItem(modelId, targetSurfaceIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesVertexAttributeItem(modelId, targetSurfaceIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const surfacesVertexAttributeRange = computed({
   get: () => dataStyleStore.modelSurfacesVertexAttributeRange(modelId, targetSurfaceIds[0]),
   set: async (newValue) => {
@@ -107,6 +115,14 @@ const surfacesPolygonAttributeName = computed({
   },
 });
 
+const surfacesPolygonAttributeItem = computed({
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeItem(modelId, targetSurfaceIds[0]),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesPolygonAttributeItem(modelId, targetSurfaceIds, newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const surfacesPolygonAttributeRange = computed({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeRange(modelId, targetSurfaceIds[0]),
   set: async (newValue) => {
@@ -141,6 +157,14 @@ const vertexAttributeName = computed({
   },
 });
 
+const vertexAttributeItem = computed({
+  get: () => dataStyleStore.modelSurfacesVertexAttributeItem(modelId, surfaceId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesVertexAttributeItem(modelId, [surfaceId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const vertexAttributeRange = computed({
   get: () => dataStyleStore.modelSurfacesVertexAttributeRange(modelId, surfaceId),
   set: async (newValue) => {
@@ -170,6 +194,14 @@ const polygonAttributeName = computed({
   },
 });
 
+const polygonAttributeItem = computed({
+  get: () => dataStyleStore.modelSurfacesPolygonAttributeItem(modelId, surfaceId),
+  set: async (newValue) => {
+    await dataStyleStore.setModelSurfacesPolygonAttributeItem(modelId, [surfaceId], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+
 const polygonAttributeRange = computed({
   get: () => dataStyleStore.modelSurfacesPolygonAttributeRange(modelId, surfaceId),
   set: async (newValue) => {
@@ -214,9 +246,11 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
       v-model:coloring_style_key="surfacesActiveColoring"
       v-model:color="surfacesColor"
       v-model:vertex_attribute_name="surfacesVertexAttributeName"
+      v-model:vertex_attribute_item="surfacesVertexAttributeItem"
       v-model:vertex_attribute_range="surfacesVertexAttributeRange"
       v-model:vertex_attribute_color_map="surfacesVertexAttributeColorMap"
       v-model:polygon_attribute_name="surfacesPolygonAttributeName"
+      v-model:polygon_attribute_item="surfacesPolygonAttributeItem"
       v-model:polygon_attribute_range="surfacesPolygonAttributeRange"
       v-model:polygon_attribute_color_map="surfacesPolygonAttributeColorMap"
       :capabilities="capabilities"
@@ -233,9 +267,11 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
       v-model:coloring_style_key="surfaceActiveColoring"
       v-model:color="surfaceColor"
       v-model:vertex_attribute_name="vertexAttributeName"
+      v-model:vertex_attribute_item="vertexAttributeItem"
       v-model:vertex_attribute_range="vertexAttributeRange"
       v-model:vertex_attribute_color_map="vertexAttributeColorMap"
       v-model:polygon_attribute_name="polygonAttributeName"
+      v-model:polygon_attribute_item="polygonAttributeItem"
       v-model:polygon_attribute_range="polygonAttributeRange"
       v-model:polygon_attribute_color_map="polygonAttributeColorMap"
       :capabilities="capabilities"