fix(modelColor): Fix model color Inheritance

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

@@ -44,28 +44,24 @@ const blocksColor = computed({
 const blockColor = computed({
   get: () => dataStyleStore.modelBlockColor(modelId, blockId),
   set: async (color) => {
-    if (blockId) {
-      await dataStyleStore.setModelBlocksColor(modelId, [blockId], color);
-      hybridViewerStore.remoteRender();
-    }
+    await dataStyleStore.setModelBlocksColor(modelId, [blockId], color);
+    hybridViewerStore.remoteRender();
   },
 });
 
-const blocksColorMode = computed({
-  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId, "Block"),
-  set: async (colorMode) => {
-    await dataStyleStore.setModelComponentTypeColorMode(modelId, "Block", colorMode);
+const blocksActiveColoring = computed({
+  get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Block"),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Block", coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
-const blockColorMode = computed({
-  get: () => dataStyleStore.modelBlockColorMode(modelId, blockId),
-  set: async (colorMode) => {
-    if (blockId) {
-      await dataStyleStore.setModelComponentColorMode(modelId, blockId, colorMode);
-      hybridViewerStore.remoteRender();
-    }
+const blockActiveColoring = computed({
+  get: () => dataStyleStore.modelBlockActiveColoring(modelId, blockId),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelBlocksActiveColoring(modelId, [blockId], coloringType);
+    hybridViewerStore.remoteRender();
   },
 });
 
@@ -211,7 +207,7 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="targetBlockIds[0]"
-      v-model:coloring_style_key="blocksColorMode"
+      v-model:coloring_style_key="blocksActiveColoring"
       v-model:color="blocksColor"
       v-model:vertex_attribute_name="blocksVertexAttributeName"
       v-model:vertex_attribute_range="blocksVertexAttributeRange"
@@ -230,7 +226,7 @@ const polyhedronSchema = back_schemas.opengeodeweb_back.model_component_polyhedr
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="blockId"
-      v-model:coloring_style_key="blockColorMode"
+      v-model:coloring_style_key="blockActiveColoring"
       v-model:color="blockColor"
       v-model:vertex_attribute_name="vertexAttributeName"
       v-model:vertex_attribute_range="vertexAttributeRange"

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

@@ -44,28 +44,24 @@ const cornersColor = computed({
 const cornerColor = computed({
   get: () => dataStyleStore.modelCornerColor(modelId, cornerId),
   set: async (color) => {
-    if (cornerId) {
-      await dataStyleStore.setModelCornersColor(modelId, [cornerId], color);
-      hybridViewerStore.remoteRender();
-    }
+    await dataStyleStore.setModelCornersColor(modelId, [cornerId], color);
+    hybridViewerStore.remoteRender();
   },
 });
 
-const cornersColorMode = computed({
-  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId, "Corner"),
-  set: async (colorMode) => {
-    await dataStyleStore.setModelComponentTypeColorMode(modelId, "Corner", colorMode);
+const cornersActiveColoring = computed({
+  get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Corner"),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Corner", coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
-const cornerColorMode = computed({
-  get: () => dataStyleStore.modelCornerColorMode(modelId, cornerId),
-  set: async (colorMode) => {
-    if (cornerId) {
-      await dataStyleStore.setModelComponentColorMode(modelId, cornerId, colorMode);
-      hybridViewerStore.remoteRender();
-    }
+const cornerActiveColoring = computed({
+  get: () => dataStyleStore.modelCornerActiveColoring(modelId, cornerId),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelCornersActiveColoring(modelId, [cornerId], coloringType);
+    hybridViewerStore.remoteRender();
   },
 });
 
@@ -148,7 +144,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="targetCornerIds[0]"
-      v-model:coloring_style_key="cornersColorMode"
+      v-model:coloring_style_key="cornersActiveColoring"
       v-model:color="cornersColor"
       v-model:vertex_attribute_name="cornersVertexAttributeName"
       v-model:vertex_attribute_range="cornersVertexAttributeRange"
@@ -164,7 +160,7 @@ const vertexSchema = back_schemas.opengeodeweb_back.model_component_vertex_attri
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="cornerId"
-      v-model:coloring_style_key="cornerColorMode"
+      v-model:coloring_style_key="cornerActiveColoring"
       v-model:color="cornerColor"
       v-model:vertex_attribute_name="vertexAttributeName"
       v-model:vertex_attribute_range="vertexAttributeRange"

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

@@ -44,28 +44,24 @@ const linesColor = computed({
 const lineColor = computed({
   get: () => dataStyleStore.modelLineColor(modelId, lineId),
   set: async (color) => {
-    if (lineId) {
-      await dataStyleStore.setModelLinesColor(modelId, [lineId], color);
-      hybridViewerStore.remoteRender();
-    }
+    await dataStyleStore.setModelLinesColor(modelId, [lineId], color);
+    hybridViewerStore.remoteRender();
   },
 });
 
-const linesColorMode = computed({
-  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId, "Line"),
-  set: async (colorMode) => {
-    await dataStyleStore.setModelComponentTypeColorMode(modelId, "Line", colorMode);
+const linesActiveColoring = computed({
+  get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Line"),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Line", coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
-const lineColorMode = computed({
-  get: () => dataStyleStore.modelLineColorMode(modelId, lineId),
-  set: async (colorMode) => {
-    if (lineId) {
-      await dataStyleStore.setModelComponentColorMode(modelId, lineId, colorMode);
-      hybridViewerStore.remoteRender();
-    }
+const lineActiveColoring = computed({
+  get: () => dataStyleStore.modelLineActiveColoring(modelId, lineId),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelLinesActiveColoring(modelId, [lineId], coloringType);
+    hybridViewerStore.remoteRender();
   },
 });
 
@@ -207,7 +203,7 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="targetLineIds[0]"
-      v-model:coloring_style_key="linesColorMode"
+      v-model:coloring_style_key="linesActiveColoring"
       v-model:color="linesColor"
       v-model:vertex_attribute_name="linesVertexAttributeName"
       v-model:vertex_attribute_range="linesVertexAttributeRange"
@@ -226,7 +222,7 @@ const edgeSchema = back_schemas.opengeodeweb_back.model_component_edge_attribute
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="lineId"
-      v-model:coloring_style_key="lineColorMode"
+      v-model:coloring_style_key="lineActiveColoring"
       v-model:color="lineColor"
       v-model:vertex_attribute_name="vertexAttributeName"
       v-model:vertex_attribute_range="vertexAttributeRange"

app/components/Viewer/Generic/Model/ModelStyleCard.vue

@@ -1,6 +1,6 @@
 <script setup>
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
-import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
+import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
@@ -86,43 +86,36 @@ const modelVisibility = computed({
   },
 });
 
-const colorModes = [
-  { title: "Constant", value: "constant" },
-  { title: "Random", value: "random" },
-];
-
-const modelComponentsColorMode = ref("constant");
-
-const modelComponentsColor = computed({
-  get: () => {
-    if (selection.value.length > 0) {
-      return dataStyleStore.getModelComponentColor(modelId.value, selection.value[0]);
-    }
-    return { red: 255, green: 255, blue: 255 };
-  },
-  set: async (color) => {
-    if (selection.value.length > 0) {
-      await dataStyleStore.setModelComponentsColor(
-        modelId.value,
-        selection.value,
-        color,
-        modelComponentsColorMode.value,
-      );
-      hybridViewerStore.remoteRender();
-    }
+const modelComponentsActiveColoring = computed({
+  get: () => dataStyleStore.getModelActiveColoring(modelId.value),
+  set: async (coloringType) => {
+    await dataStyleStore.mutateStyle(modelId.value, {
+      coloring: { active: coloringType },
+    });
+    await dataStyleStore.setModelComponentsColor(
+      modelId.value,
+      selection.value,
+      modelComponentsColor.value,
+      coloringType,
+    );
+    hybridViewerStore.remoteRender();
   },
 });
 
-watch(modelComponentsColorMode, async (colorMode) => {
-  if (colorMode === "random" && selection.value.length > 0) {
+const modelComponentsColor = computed({
+  get: () => dataStyleStore.getModelColor(modelId.value),
+  set: async (color) => {
+    await dataStyleStore.mutateStyle(modelId.value, {
+      coloring: { constant: color },
+    });
     await dataStyleStore.setModelComponentsColor(
       modelId.value,
       selection.value,
-      undefined,
-      colorMode,
+      color,
+      modelComponentsActiveColoring.value,
     );
     hybridViewerStore.remoteRender();
-  }
+  },
 });
 </script>
 
@@ -133,20 +126,13 @@ watch(modelComponentsColorMode, async (colorMode) => {
     </OptionsSection>
 
     <OptionsSection v-if="!componentType && !componentId" title="Components Options" class="mt-4">
-      <v-label class="text-caption mb-1 mt-2">Color Mode</v-label>
-      <v-select
-        v-model="modelComponentsColorMode"
-        :items="colorModes"
-        density="compact"
-        hide-details
-        class="mb-3"
-        variant="outlined"
+      <ViewerOptionsColoringTypeSelector
+        :id="modelId"
+        v-model:coloring_style_key="modelComponentsActiveColoring"
+        v-model:color="modelComponentsColor"
+        :capabilities="{ color: { available: true } }"
+        :allowRandom="true"
       />
-
-      <template v-if="modelComponentsColorMode === 'constant'">
-        <v-label class="text-caption mb-1">Color</v-label>
-        <ViewerOptionsColorPicker v-model="modelComponentsColor" />
-      </template>
     </OptionsSection>
 
     <BlocksOptions

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

@@ -44,28 +44,24 @@ const surfacesColor = computed({
 const surfaceColor = computed({
   get: () => dataStyleStore.modelSurfaceColor(modelId, surfaceId),
   set: async (color) => {
-    if (surfaceId) {
-      await dataStyleStore.setModelSurfacesColor(modelId, [surfaceId], color);
-      hybridViewerStore.remoteRender();
-    }
+    await dataStyleStore.setModelSurfacesColor(modelId, [surfaceId], color);
+    hybridViewerStore.remoteRender();
   },
 });
 
-const surfacesColorMode = computed({
-  get: () => dataStyleStore.getModelComponentTypeColorMode(modelId, "Surface"),
-  set: async (colorMode) => {
-    await dataStyleStore.setModelComponentTypeColorMode(modelId, "Surface", colorMode);
+const surfacesActiveColoring = computed({
+  get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Surface"),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Surface", coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
-const surfaceColorMode = computed({
-  get: () => dataStyleStore.modelSurfaceColorMode(modelId, surfaceId),
-  set: async (colorMode) => {
-    if (surfaceId) {
-      await dataStyleStore.setModelComponentColorMode(modelId, surfaceId, colorMode);
-      hybridViewerStore.remoteRender();
-    }
+const surfaceActiveColoring = computed({
+  get: () => dataStyleStore.modelSurfaceActiveColoring(modelId, surfaceId),
+  set: async (coloringType) => {
+    await dataStyleStore.setModelSurfacesActiveColoring(modelId, [surfaceId], coloringType);
+    hybridViewerStore.remoteRender();
   },
 });
 
@@ -215,7 +211,7 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="targetSurfaceIds[0]"
-      v-model:coloring_style_key="surfacesColorMode"
+      v-model:coloring_style_key="surfacesActiveColoring"
       v-model:color="surfacesColor"
       v-model:vertex_attribute_name="surfacesVertexAttributeName"
       v-model:vertex_attribute_range="surfacesVertexAttributeRange"
@@ -234,7 +230,7 @@ const polygonSchema = back_schemas.opengeodeweb_back.model_component_polygon_att
     <ViewerOptionsColoringTypeSelector
       :id="modelId"
       :componentId="surfaceId"
-      v-model:coloring_style_key="surfaceColorMode"
+      v-model:coloring_style_key="surfaceActiveColoring"
       v-model:color="surfaceColor"
       v-model:vertex_attribute_name="vertexAttributeName"
       v-model:vertex_attribute_range="vertexAttributeRange"

app/components/Viewer/Options/AttributeSelector.vue

@@ -4,7 +4,12 @@ import { useBackStore } from "@ogw_front/stores/back";
 
 const backStore = useBackStore();
 
-const name = defineModel("name", { type: String });
+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 });