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

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"

package/app/components/Viewer/Options/AttributeSelector.vue

@@ -4,14 +4,10 @@ import { useBackStore } from "@ogw_front/stores/back";
 
 const backStore = useBackStore();
 
-const name = defineModel("name", {
-  type: String,
-  default: undefined,
-  set: (value) => value ?? name.value,
-});
-
-const range = defineModel("range", { type: Array });
-const colorMap = defineModel("colorMap", { type: String });
+const attributeName = defineModel("attributeName", { type: String });
+const attributeItem = defineModel("attributeItem", { type: Number });
+const attributeRange = defineModel("attributeRange", { type: Array });
+const attributeColorMap = defineModel("attributeColorMap", { type: String });
 
 const { id, componentId, schema } = defineProps({
   id: { type: String, required: true },
@@ -22,40 +18,54 @@ const { id, componentId, schema } = defineProps({
 const attributes = ref([]);
 
 const rangeMin = computed({
-  get: () => (range.value ? range.value[0] : undefined),
+  get: () => (attributeRange.value ? attributeRange.value[0] : undefined),
   set: (val) => {
-    const currentMax = range.value ? range.value[1] : undefined;
+    const currentMax = attributeRange.value ? attributeRange.value[1] : undefined;
     let newMin = val;
     if (currentMax !== undefined && val > currentMax) {
       newMin = currentMax;
     }
-    range.value = [newMin, currentMax];
+    attributeRange.value = [newMin, currentMax];
   },
 });
 const rangeMax = computed({
-  get: () => (range.value ? range.value[1] : undefined),
+  get: () => (attributeRange.value ? attributeRange.value[1] : undefined),
   set: (val) => {
-    const currentMin = range.value ? range.value[0] : undefined;
+    const currentMin = attributeRange.value ? attributeRange.value[0] : undefined;
     let newMax = val;
     if (currentMin !== undefined && val < currentMin) {
       newMax = currentMin;
     }
-    range.value = [currentMin, newMax];
+    attributeRange.value = [currentMin, newMax];
   },
 });
 
 const currentAttribute = computed(() =>
-  attributes.value.find((attr) => attr.attribute_name === name.value),
+  attributes.value.find((attr) => attr.attribute_name === attributeName.value),
 );
 
+const componentItems = computed(() => {
+  if (!currentAttribute.value) {
+    return [];
+  }
+  return Array.from({ length: currentAttribute.value.nb_items }, (_, index) => ({
+    title: `Item ${index + 1}`,
+    value: index,
+  }));
+});
+
 function resetRange() {
   if (currentAttribute.value) {
-    range.value = [currentAttribute.value.min_value, currentAttribute.value.max_value];
+    const comp = attributeItem.value ?? 0;
+    attributeRange.value = [
+      currentAttribute.value.min_values[comp],
+      currentAttribute.value.max_values[comp],
+    ];
   }
 }
 
 function getAttributes() {
-  if (schema.properties?.component_id && componentId === undefined) {
+  if (schema.properties.component_id && componentId === undefined) {
     return;
   }
   const params = { id };
@@ -83,24 +93,11 @@ watch(
   },
 );
 
-watch(
-  () => [name.value, attributes.value],
-  () => {
-    if (
-      name.value &&
-      attributes.value.length > 0 &&
-      (range.value === undefined || range.value[0] === undefined || colorMap.value === undefined)
-    ) {
-      resetRange();
-      if (colorMap.value === undefined) {
-        colorMap.value = "batlow";
-      }
-    }
-  },
-);
-
-watch(name, (newName, oldName) => {
-  if (newName !== oldName) {
+watch([attributeName, attributeItem], () => {
+  if (attributeColorMap.value === undefined) {
+    attributeColorMap.value = "batlow";
+  }
+  if (!attributeRange.value || attributeRange.value[0] === undefined) {
     resetRange();
   }
 });
@@ -109,7 +106,7 @@ watch(name, (newName, oldName) => {
 <template>
   <v-select
     data-testid="attributeSelector"
-    v-model="name"
+    v-model="attributeName"
     :items="attributes.map((attribute) => attribute.attribute_name)"
     item-title="attribute_name"
     item-value="attribute_name"
@@ -117,11 +114,23 @@ watch(name, (newName, oldName) => {
     label="Select an attribute"
     hide-details
   />
+  <v-select
+    v-if="currentAttribute && currentAttribute.nb_items > 1"
+    data-testid="itemSelector"
+    v-model="attributeItem"
+    :items="componentItems"
+    item-title="title"
+    item-value="value"
+    density="compact"
+    label="Select an item"
+    class="mt-3"
+    hide-details
+  />
   <ViewerOptionsAttributeColorBar
-    v-if="name"
+    v-if="attributeName"
     v-model:minimum="rangeMin"
     v-model:maximum="rangeMax"
-    v-model:colorMap="colorMap"
+    v-model:colorMap="attributeColorMap"
     @reset="resetRange"
   />
 </template>

package/app/components/Viewer/Options/ColoringTypeSelector.vue

@@ -10,34 +10,33 @@ const color = defineModel("color", { type: Object });
 const textures = defineModel("textures", { type: Array });
 
 const vertex_attribute_name = defineModel("vertex_attribute_name", { type: String });
+const vertex_attribute_item = defineModel("vertex_attribute_item", { type: Number });
 const vertex_attribute_range = defineModel("vertex_attribute_range", { type: Array });
 const vertex_attribute_color_map = defineModel("vertex_attribute_color_map", { type: String });
 
 const edge_attribute_name = defineModel("edge_attribute_name", { type: String });
+const edge_attribute_item = defineModel("edge_attribute_item", { type: Number });
 const edge_attribute_range = defineModel("edge_attribute_range", { type: Array });
 const edge_attribute_color_map = defineModel("edge_attribute_color_map", { type: String });
 
 const cell_attribute_name = defineModel("cell_attribute_name", { type: String });
+const cell_attribute_item = defineModel("cell_attribute_item", { type: Number });
 const cell_attribute_range = defineModel("cell_attribute_range", { type: Array });
 const cell_attribute_color_map = defineModel("cell_attribute_color_map", { type: String });
 
 const polygon_attribute_name = defineModel("polygon_attribute_name", { type: String });
+const polygon_attribute_item = defineModel("polygon_attribute_item", { type: Number });
 const polygon_attribute_range = defineModel("polygon_attribute_range", { type: Array });
 const polygon_attribute_color_map = defineModel("polygon_attribute_color_map", { type: String });
 
 const polyhedron_attribute_name = defineModel("polyhedron_attribute_name", { type: String });
+const polyhedron_attribute_item = defineModel("polyhedron_attribute_item", { type: Number });
 const polyhedron_attribute_range = defineModel("polyhedron_attribute_range", { type: Array });
 const polyhedron_attribute_color_map = defineModel("polyhedron_attribute_color_map", {
   type: String,
 });
 
-const {
-  id,
-  componentId,
-  capabilities,
-  schemas,
-  allowRandom = false,
-} = defineProps({
+const { id, componentId, capabilities, schemas, allowRandom } = defineProps({
   id: { type: String, required: true },
   componentId: { type: String, default: undefined },
   capabilities: {
@@ -211,9 +210,10 @@ watch(
       </template>
       <template v-if="active_key === vertex_dict['value'] && hasColorMap('vertex')">
         <ViewerOptionsAttributeSelector
-          v-model:name="vertex_attribute_name"
-          v-model:range="vertex_attribute_range"
-          v-model:colorMap="vertex_attribute_color_map"
+          v-model:attributeName="vertex_attribute_name"
+          v-model:attributeItem="vertex_attribute_item"
+          v-model:attributeRange="vertex_attribute_range"
+          v-model:attributeColorMap="vertex_attribute_color_map"
           :id="id"
           :componentId="componentId"
           :schema="vertexSchema"
@@ -221,9 +221,10 @@ watch(
       </template>
       <template v-if="active_key === edge_dict['value'] && hasColorMap('edge')">
         <ViewerOptionsAttributeSelector
-          v-model:name="edge_attribute_name"
-          v-model:range="edge_attribute_range"
-          v-model:colorMap="edge_attribute_color_map"
+          v-model:attributeName="edge_attribute_name"
+          v-model:attributeItem="edge_attribute_item"
+          v-model:attributeRange="edge_attribute_range"
+          v-model:attributeColorMap="edge_attribute_color_map"
           :id="id"
           :componentId="componentId"
           :schema="edgeSchema"
@@ -231,9 +232,10 @@ watch(
       </template>
       <template v-if="active_key === cell_dict['value'] && hasColorMap('cell')">
         <ViewerOptionsAttributeSelector
-          v-model:name="cell_attribute_name"
-          v-model:range="cell_attribute_range"
-          v-model:colorMap="cell_attribute_color_map"
+          v-model:attributeName="cell_attribute_name"
+          v-model:attributeItem="cell_attribute_item"
+          v-model:attributeRange="cell_attribute_range"
+          v-model:attributeColorMap="cell_attribute_color_map"
           :id="id"
           :componentId="componentId"
           :schema="cellSchema"
@@ -241,9 +243,10 @@ watch(
       </template>
       <template v-if="active_key === polygon_dict['value'] && hasColorMap('polygon')">
         <ViewerOptionsAttributeSelector
-          v-model:name="polygon_attribute_name"
-          v-model:range="polygon_attribute_range"
-          v-model:colorMap="polygon_attribute_color_map"
+          v-model:attributeName="polygon_attribute_name"
+          v-model:attributeItem="polygon_attribute_item"
+          v-model:attributeRange="polygon_attribute_range"
+          v-model:attributeColorMap="polygon_attribute_color_map"
           :id="id"
           :componentId="componentId"
           :schema="polygonSchema"
@@ -251,9 +254,10 @@ watch(
       </template>
       <template v-if="active_key === polyhedron_dict['value'] && hasColorMap('polyhedron')">
         <ViewerOptionsAttributeSelector
-          v-model:name="polyhedron_attribute_name"
-          v-model:range="polyhedron_attribute_range"
-          v-model:colorMap="polyhedron_attribute_color_map"
+          v-model:attributeName="polyhedron_attribute_name"
+          v-model:attributeItem="polyhedron_attribute_item"
+          v-model:attributeRange="polyhedron_attribute_range"
+          v-model:attributeColorMap="polyhedron_attribute_color_map"
           :id="id"
           :componentId="componentId"
           :schema="polyhedronSchema"

package/app/components/Viewer/PointSet/SpecificPointsOptions.vue

@@ -64,6 +64,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) => {
@@ -103,6 +112,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"
           :vertex_has_colormap="true"

package/app/components/Viewer/Solid/SpecificPolyhedraOptions.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) => {
@@ -121,9 +139,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"
         />

package/app/components/Viewer/Surface/PolygonsOptions.vue

@@ -64,6 +64,15 @@ const vertex_attribute_name = computed({
     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) => {
@@ -91,6 +100,15 @@ const polygon_attribute_name = computed({
     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) => {
@@ -130,9 +148,11 @@ const polygon_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: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"
         />