From 3ecb7acb8e40308d4ee0a5b812b093f2aca13195 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 10 Jun 2026 14:46:57 +0200
Subject: [PATCH 01/23] fix(modelColor): Fix model color Inheritance

---
 .../Viewer/Generic/Model/ModelStyleCard.vue   | 45 +++++++++----------
 .../data_style/model/index.nuxt.test.js       | 29 ++++++++++++
 2 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index e415744c..e8f2027a 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -91,38 +91,35 @@ const colorModes = [
   { 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 modelComponentsColorMode = computed({
+  get: () => dataStyleStore.getStyle(modelId.value).color_mode || "constant",
+  set: async (colorMode) => {
+    await dataStyleStore.mutateStyle(modelId.value, { color_mode: colorMode });
+    await dataStyleStore.setModelComponentsColor(
+      modelId.value,
+      selection.value,
+      colorMode === "random" ? undefined : modelComponentsColor.value,
+      colorMode,
+    );
+    hybridViewerStore.remoteRender();
   },
 });
 
-watch(modelComponentsColorMode, async (colorMode) => {
-  if (colorMode === "random" && selection.value.length > 0) {
+const modelComponentsColor = computed({
+  get: () =>
+    dataStyleStore.getStyle(modelId.value).color ||
+    dataStyleStore.getModelComponentColor(modelId.value, selection.value[0]) ||
+    { red: 255, green: 255, blue: 255 },
+  set: async (color) => {
+    await dataStyleStore.mutateStyle(modelId.value, { color });
     await dataStyleStore.setModelComponentsColor(
       modelId.value,
       selection.value,
-      undefined,
-      colorMode,
+      color,
+      modelComponentsColorMode.value,
     );
     hybridViewerStore.remoteRender();
-  }
+  },
 });
 </script>
 
diff --git a/tests/integration/stores/data_style/model/index.nuxt.test.js b/tests/integration/stores/data_style/model/index.nuxt.test.js
index 01f6bd40..7a2eed83 100644
--- a/tests/integration/stores/data_style/model/index.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/index.nuxt.test.js
@@ -6,6 +6,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 import { beforeAllTimeout, setupIntegrationTests } from "@ogw_tests/integration/setup";
 import { Status } from "@ogw_front/utils/status";
 import { cleanupBackend } from "@ogw_front/utils/local/cleanup";
+import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
@@ -58,4 +59,32 @@ describe("model", () => {
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
   });
+
+  describe("model color inheritance", () => {
+    test("inheritance workflow model > surfaces > surface", async () => {
+      const dataStyleStore = useDataStyleStore();
+      const dataStore = useDataStore();
+
+      const surface_ids = await dataStore.getSurfacesGeodeIds(id);
+      const [surface_id] = surface_ids;
+
+      const red = { red: 255, green: 0, blue: 0, alpha: 1 };
+      const green = { red: 0, green: 255, blue: 0, alpha: 1 };
+      const blue = { red: 0, green: 0, blue: 255, alpha: 1 };
+
+      await dataStyleStore.mutateStyle(id, { color: red, color_mode: "constant" });
+      await dataStyleStore.setModelComponentsColor(id, surface_ids, red);
+      await sleep(SLEEP_MS);
+
+      await dataStyleStore.setModelComponentTypeColor(id, "Surface", green);
+      await sleep(SLEEP_MS);
+
+      await dataStyleStore.setModelSurfacesColor(id, [surface_id], blue);
+      await sleep(SLEEP_MS);
+
+      expect(dataStyleStore.getStyle(id).color).toStrictEqual(red);
+      expect(dataStyleStore.modelComponentTypeColor(id, "Surface")).toStrictEqual(green);
+      expect(dataStyleStore.modelSurfaceColor(id, surface_id)).toStrictEqual(blue);
+    });
+  });
 });

From 793b2618eba0abd04b4c27f9158b61f0cb1be961 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Wed, 10 Jun 2026 12:53:24 +0000
Subject: [PATCH 02/23] Apply prepare changes

---
 app/components/Viewer/Generic/Model/ModelStyleCard.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index e8f2027a..6710c5cf 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -108,8 +108,11 @@ const modelComponentsColorMode = computed({
 const modelComponentsColor = computed({
   get: () =>
     dataStyleStore.getStyle(modelId.value).color ||
-    dataStyleStore.getModelComponentColor(modelId.value, selection.value[0]) ||
-    { red: 255, green: 255, blue: 255 },
+    dataStyleStore.getModelComponentColor(modelId.value, selection.value[0]) || {
+      red: 255,
+      green: 255,
+      blue: 255,
+    },
   set: async (color) => {
     await dataStyleStore.mutateStyle(modelId.value, { color });
     await dataStyleStore.setModelComponentsColor(

From b5fe1c911570b9d6f66c271e0521b89efab90685 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 10 Jun 2026 15:38:38 +0200
Subject: [PATCH 03/23] model default color and color_mode

---
 .../Viewer/Generic/Model/ModelStyleCard.vue        | 11 +++--------
 app/utils/default_styles/constants.js              |  5 +++++
 app/utils/default_styles/index.js                  |  2 +-
 app/utils/default_styles/models.js                 | 14 ++++++++++++++
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 6710c5cf..2ce78bbd 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { MODEL_DEFAULT_COLOR, MODEL_DEFAULT_COLOR_MODE } from "@ogw_front/utils/default_styles";
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
@@ -92,7 +93,7 @@ const colorModes = [
 ];
 
 const modelComponentsColorMode = computed({
-  get: () => dataStyleStore.getStyle(modelId.value).color_mode || "constant",
+  get: () => dataStyleStore.getStyle(modelId.value).color_mode ?? MODEL_DEFAULT_COLOR_MODE,
   set: async (colorMode) => {
     await dataStyleStore.mutateStyle(modelId.value, { color_mode: colorMode });
     await dataStyleStore.setModelComponentsColor(
@@ -106,13 +107,7 @@ const modelComponentsColorMode = computed({
 });
 
 const modelComponentsColor = computed({
-  get: () =>
-    dataStyleStore.getStyle(modelId.value).color ||
-    dataStyleStore.getModelComponentColor(modelId.value, selection.value[0]) || {
-      red: 255,
-      green: 255,
-      blue: 255,
-    },
+  get: () => dataStyleStore.getStyle(modelId.value).color ?? MODEL_DEFAULT_COLOR,
   set: async (color) => {
     await dataStyleStore.mutateStyle(modelId.value, { color });
     await dataStyleStore.setModelComponentsColor(
diff --git a/app/utils/default_styles/constants.js b/app/utils/default_styles/constants.js
index 24751db8..3be8e493 100644
--- a/app/utils/default_styles/constants.js
+++ b/app/utils/default_styles/constants.js
@@ -13,6 +13,9 @@ const POLYHEDRA_DEFAULT_VISIBILITY = true;
 const POLYHEDRA_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
 
 // Model
+const MODEL_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
+const MODEL_DEFAULT_COLOR_MODE = "constant";
+
 const CORNERS_DEFAULT_VISIBILITY = true;
 const CORNERS_DEFAULT_COLOR = { red: 20, green: 20, blue: 20, alpha: 1 };
 const LINES_DEFAULT_VISIBILITY = true;
@@ -54,4 +57,6 @@ export {
   BLOCKS_DEFAULT_COLOR,
   MESH_COMPONENT_TYPES,
   DEFAULT_MODEL_COMPONENT_TYPE_COLORS,
+  MODEL_DEFAULT_COLOR,
+  MODEL_DEFAULT_COLOR_MODE,
 };
diff --git a/app/utils/default_styles/index.js b/app/utils/default_styles/index.js
index 13b3a9e7..07f09dc1 100644
--- a/app/utils/default_styles/index.js
+++ b/app/utils/default_styles/index.js
@@ -50,5 +50,5 @@ function getDefaultStyle(type) {
 }
 
 export { DEFAULT_MODEL_COMPONENT_TYPE_STYLES } from "./models";
-export { MESH_COMPONENT_TYPES, DEFAULT_MODEL_COMPONENT_TYPE_COLORS } from "./constants";
+export { MESH_COMPONENT_TYPES, DEFAULT_MODEL_COMPONENT_TYPE_COLORS, MODEL_DEFAULT_COLOR, MODEL_DEFAULT_COLOR_MODE } from "./constants";
 export { getDefaultStyle };
diff --git a/app/utils/default_styles/models.js b/app/utils/default_styles/models.js
index 82ac5be8..597ef90b 100644
--- a/app/utils/default_styles/models.js
+++ b/app/utils/default_styles/models.js
@@ -7,6 +7,8 @@ import {
   EDGES_DEFAULT_WIDTH,
   LINES_DEFAULT_COLOR,
   LINES_DEFAULT_VISIBILITY,
+  MODEL_DEFAULT_COLOR,
+  MODEL_DEFAULT_COLOR_MODE,
   POINTS_DEFAULT_SIZE,
   POINTS_DEFAULT_VISIBILITY,
   SURFACES_DEFAULT_COLOR,
@@ -109,6 +111,8 @@ const DEFAULT_MODEL_COMPONENT_TYPE_STYLES = {
 function brepDefaultStyle() {
   return {
     visibility: true,
+    color: MODEL_DEFAULT_COLOR,
+    color_mode: MODEL_DEFAULT_COLOR_MODE,
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -121,6 +125,8 @@ function brepDefaultStyle() {
 function crossSectionDefaultStyle() {
   return {
     visibility: true,
+    color: MODEL_DEFAULT_COLOR,
+    color_mode: MODEL_DEFAULT_COLOR_MODE,
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -132,6 +138,8 @@ function crossSectionDefaultStyle() {
 function structuralModelDefaultStyle() {
   return {
     visibility: true,
+    color: MODEL_DEFAULT_COLOR,
+    color_mode: MODEL_DEFAULT_COLOR_MODE,
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -144,6 +152,8 @@ function structuralModelDefaultStyle() {
 function sectionDefaultStyle() {
   return {
     visibility: true,
+    color: MODEL_DEFAULT_COLOR,
+    color_mode: MODEL_DEFAULT_COLOR_MODE,
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -155,6 +165,8 @@ function sectionDefaultStyle() {
 function implicitCrossSectionDefaultStyle() {
   return {
     visibility: true,
+    color: MODEL_DEFAULT_COLOR,
+    color_mode: MODEL_DEFAULT_COLOR_MODE,
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -166,6 +178,8 @@ function implicitCrossSectionDefaultStyle() {
 function implicitStructuralModelDefaultStyle() {
   return {
     visibility: true,
+    color: MODEL_DEFAULT_COLOR,
+    color_mode: MODEL_DEFAULT_COLOR_MODE,
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),

From d05129bb513c5e1610a22b260b660a540599287a Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Wed, 10 Jun 2026 13:39:33 +0000
Subject: [PATCH 04/23] Apply prepare changes

---
 app/utils/default_styles/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/utils/default_styles/index.js b/app/utils/default_styles/index.js
index 07f09dc1..0ee3e4ac 100644
--- a/app/utils/default_styles/index.js
+++ b/app/utils/default_styles/index.js
@@ -50,5 +50,10 @@ function getDefaultStyle(type) {
 }
 
 export { DEFAULT_MODEL_COMPONENT_TYPE_STYLES } from "./models";
-export { MESH_COMPONENT_TYPES, DEFAULT_MODEL_COMPONENT_TYPE_COLORS, MODEL_DEFAULT_COLOR, MODEL_DEFAULT_COLOR_MODE } from "./constants";
+export {
+  MESH_COMPONENT_TYPES,
+  DEFAULT_MODEL_COMPONENT_TYPE_COLORS,
+  MODEL_DEFAULT_COLOR,
+  MODEL_DEFAULT_COLOR_MODE,
+} from "./constants";
 export { getDefaultStyle };

From 07783627fe1e58be22430ca5f124c762c17bf5f0 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 10 Jun 2026 15:51:04 +0200
Subject: [PATCH 05/23] getters in store

---
 .../Viewer/Generic/Model/ModelStyleCard.vue          |  5 ++---
 internal/stores/data_style/model/color.js            | 12 +++++++++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 2ce78bbd..74f3df00 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -1,5 +1,4 @@
 <script setup>
-import { MODEL_DEFAULT_COLOR, MODEL_DEFAULT_COLOR_MODE } from "@ogw_front/utils/default_styles";
 import OptionsSection from "@ogw_front/components/Viewer/Options/OptionsSection.vue";
 import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
 import VisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch.vue";
@@ -93,7 +92,7 @@ const colorModes = [
 ];
 
 const modelComponentsColorMode = computed({
-  get: () => dataStyleStore.getStyle(modelId.value).color_mode ?? MODEL_DEFAULT_COLOR_MODE,
+  get: () => dataStyleStore.getModelColorMode(modelId.value),
   set: async (colorMode) => {
     await dataStyleStore.mutateStyle(modelId.value, { color_mode: colorMode });
     await dataStyleStore.setModelComponentsColor(
@@ -107,7 +106,7 @@ const modelComponentsColorMode = computed({
 });
 
 const modelComponentsColor = computed({
-  get: () => dataStyleStore.getStyle(modelId.value).color ?? MODEL_DEFAULT_COLOR,
+  get: () => dataStyleStore.getModelColor(modelId.value),
   set: async (color) => {
     await dataStyleStore.mutateStyle(modelId.value, { color });
     await dataStyleStore.setModelComponentsColor(
diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index bdb5dc7a..a9b920f6 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -1,4 +1,4 @@
-import { DEFAULT_MODEL_COMPONENT_TYPE_COLORS } from "@ogw_front/utils/default_styles";
+import { DEFAULT_MODEL_COMPONENT_TYPE_COLORS, MODEL_DEFAULT_COLOR, MODEL_DEFAULT_COLOR_MODE } from "@ogw_front/utils/default_styles";
 import { dispatchToComponentTypes } from "./visibility";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
@@ -188,7 +188,17 @@ function useModelColorStyle(componentStyleFunctions) {
     );
   }
 
+  function getModelColor(modelId) {
+    return dataStyleState.getStyle(modelId).color ?? MODEL_DEFAULT_COLOR;
+  }
+
+  function getModelColorMode(modelId) {
+    return dataStyleState.getStyle(modelId).color_mode ?? MODEL_DEFAULT_COLOR_MODE;
+  }
+
   return {
+    getModelColor,
+    getModelColorMode,
     getModelComponentColor,
     getModelComponentEffectiveColor,
     getModelComponentColorMode,

From 625f1ae418f889bca24ed736f1c9a796d28e6e06 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Wed, 10 Jun 2026 13:53:26 +0000
Subject: [PATCH 06/23] Apply prepare changes

---
 internal/stores/data_style/model/color.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index a9b920f6..5a168d00 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -1,4 +1,8 @@
-import { DEFAULT_MODEL_COMPONENT_TYPE_COLORS, MODEL_DEFAULT_COLOR, MODEL_DEFAULT_COLOR_MODE } from "@ogw_front/utils/default_styles";
+import {
+  DEFAULT_MODEL_COMPONENT_TYPE_COLORS,
+  MODEL_DEFAULT_COLOR,
+  MODEL_DEFAULT_COLOR_MODE,
+} from "@ogw_front/utils/default_styles";
 import { dispatchToComponentTypes } from "./visibility";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";

From d0fe5b6a42c88f11e3c0d50537c00065011d28cc Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Wed, 10 Jun 2026 16:40:57 +0200
Subject: [PATCH 07/23] default style

---
 .../Viewer/Generic/Model/ModelStyleCard.vue   |   4 +-
 app/utils/default_styles/constants.js         |   2 +
 app/utils/default_styles/meshes.js            |  11 +-
 app/utils/default_styles/models.js            | 116 ++++++++++--------
 4 files changed, 78 insertions(+), 55 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 74f3df00..622714bf 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -127,7 +127,7 @@ const modelComponentsColor = computed({
     </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-label class="text-caption mb-1 mt-2">Select coloring style</v-label>
       <v-select
         v-model="modelComponentsColorMode"
         :items="colorModes"
@@ -138,7 +138,7 @@ const modelComponentsColor = computed({
       />
 
       <template v-if="modelComponentsColorMode === 'constant'">
-        <v-label class="text-caption mb-1">Color</v-label>
+        <v-label class="text-caption mb-1">Constant</v-label>
         <ViewerOptionsColorPicker v-model="modelComponentsColor" />
       </template>
     </OptionsSection>
diff --git a/app/utils/default_styles/constants.js b/app/utils/default_styles/constants.js
index 3be8e493..f27d5a35 100644
--- a/app/utils/default_styles/constants.js
+++ b/app/utils/default_styles/constants.js
@@ -1,4 +1,5 @@
 // Mesh
+const MESH_DEFAULT_COLOR_MODE = "constant";
 const POINTS_DEFAULT_VISIBILITY = true;
 const POINTS_DEFAULT_SIZE = 10;
 const POINTS_DEFAULT_COLOR = { red: 20, green: 20, blue: 20, alpha: 1 };
@@ -58,5 +59,6 @@ export {
   MESH_COMPONENT_TYPES,
   DEFAULT_MODEL_COMPONENT_TYPE_COLORS,
   MODEL_DEFAULT_COLOR,
+  MESH_DEFAULT_COLOR_MODE,
   MODEL_DEFAULT_COLOR_MODE,
 };
diff --git a/app/utils/default_styles/meshes.js b/app/utils/default_styles/meshes.js
index c6b697fb..ea872092 100644
--- a/app/utils/default_styles/meshes.js
+++ b/app/utils/default_styles/meshes.js
@@ -4,6 +4,7 @@ import {
   EDGES_DEFAULT_COLOR,
   EDGES_DEFAULT_VISIBILITY,
   EDGES_DEFAULT_WIDTH,
+  MESH_DEFAULT_COLOR_MODE,
   POINTS_DEFAULT_COLOR,
   POINTS_DEFAULT_SIZE,
   POINTS_DEFAULT_VISIBILITY,
@@ -21,7 +22,7 @@ function meshPointsDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: "color",
+      active: MESH_DEFAULT_COLOR_MODE,
       color,
       vertex: {
         name: undefined,
@@ -40,7 +41,7 @@ function meshEdgesDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: "color",
+      active: MESH_DEFAULT_COLOR_MODE,
       color,
       edge: {
         name: undefined,
@@ -59,7 +60,7 @@ function meshCellsDefaultStyle(visibility = CELLS_DEFAULT_VISIBILITY, color = CE
   return {
     visibility,
     coloring: {
-      active: "color",
+      active: MESH_DEFAULT_COLOR_MODE,
       cell: {
         name: undefined,
         storedConfigs: {},
@@ -81,7 +82,7 @@ function meshPolygonsDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: "color",
+      active: MESH_DEFAULT_COLOR_MODE,
       color,
       textures: undefined,
       polygon: {
@@ -103,7 +104,7 @@ function meshPolyhedraDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: "color",
+      active: MESH_DEFAULT_COLOR_MODE,
       color,
       polyhedron: {
         name: undefined,
diff --git a/app/utils/default_styles/models.js b/app/utils/default_styles/models.js
index 597ef90b..b2090b30 100644
--- a/app/utils/default_styles/models.js
+++ b/app/utils/default_styles/models.js
@@ -17,72 +17,80 @@ import {
 
 function modelCornersDefaultStyle(
   visibility = CORNERS_DEFAULT_VISIBILITY,
-  color = CORNERS_DEFAULT_COLOR,
+  constant = CORNERS_DEFAULT_COLOR,
 ) {
   return {
     visibility,
-    color,
-    color_mode: "constant",
-    vertex_attribute: {
-      name: undefined,
-      storedConfigs: {},
+    coloring: {
+      active: "constant",
+      constant,
+      vertex: {
+        name: undefined,
+        storedConfigs: {},
+      },
     },
   };
 }
 
 function modelLinesDefaultStyle(
   visibility = LINES_DEFAULT_VISIBILITY,
-  color = LINES_DEFAULT_COLOR,
+  constant = LINES_DEFAULT_COLOR,
 ) {
   return {
     visibility,
-    color,
-    color_mode: "constant",
-    vertex_attribute: {
-      name: undefined,
-      storedConfigs: {},
-    },
-    edge_attribute: {
-      name: undefined,
-      storedConfigs: {},
+    coloring: {
+      active: "constant",
+      constant,
+      vertex: {
+        name: undefined,
+        storedConfigs: {},
+      },
+      edge_attribute: {
+        name: undefined,
+        storedConfigs: {},
+      },
     },
   };
 }
 
 function modelSurfacesDefaultStyle(
   visibility = SURFACES_DEFAULT_VISIBILITY,
-  color = SURFACES_DEFAULT_COLOR,
+  constant = SURFACES_DEFAULT_COLOR,
 ) {
   return {
     visibility,
-    color,
-    color_mode: "constant",
-    vertex_attribute: {
-      name: undefined,
-      storedConfigs: {},
-    },
-    polygon_attribute: {
-      name: undefined,
-      storedConfigs: {},
+    coloring: {
+      active: "constant",
+      constant,
+      vertex: {
+        name: undefined,
+        storedConfigs: {},
+      },
+      polygon_attribute: {
+        name: undefined,
+        storedConfigs: {},
+      },
     },
   };
 }
 
 function modelBlocksDefaultStyle(
   visibility = BLOCKS_DEFAULT_VISIBILITY,
-  color = BLOCKS_DEFAULT_COLOR,
+  constant = BLOCKS_DEFAULT_COLOR,
 ) {
   return {
     visibility,
-    color,
-    color_mode: "constant",
-    vertex_attribute: {
-      name: undefined,
-      storedConfigs: {},
-    },
-    polyhedron_attribute: {
-      name: undefined,
-      storedConfigs: {},
+    coloring: {
+      active: "constant",
+      constant,
+      vertex: {
+        name: undefined,
+        storedConfigs: {},
+      },
+      polyhedron_attribute: {
+        name: undefined,
+        storedConfigs: {},
+      },
     },
   };
 }
@@ -111,8 +119,10 @@ const DEFAULT_MODEL_COMPONENT_TYPE_STYLES = {
 function brepDefaultStyle() {
   return {
     visibility: true,
-    color: MODEL_DEFAULT_COLOR,
-    color_mode: MODEL_DEFAULT_COLOR_MODE,
+    coloring: {
+      active: MODEL_DEFAULT_COLOR_MODE,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -125,8 +135,10 @@ function brepDefaultStyle() {
 function crossSectionDefaultStyle() {
   return {
     visibility: true,
-    color: MODEL_DEFAULT_COLOR,
-    color_mode: MODEL_DEFAULT_COLOR_MODE,
+    coloring: {
+      active: MODEL_DEFAULT_COLOR_MODE,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -138,8 +150,10 @@ function crossSectionDefaultStyle() {
 function structuralModelDefaultStyle() {
   return {
     visibility: true,
-    color: MODEL_DEFAULT_COLOR,
-    color_mode: MODEL_DEFAULT_COLOR_MODE,
+    coloring: {
+      active: MODEL_DEFAULT_COLOR_MODE,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -152,8 +166,10 @@ function structuralModelDefaultStyle() {
 function sectionDefaultStyle() {
   return {
     visibility: true,
-    color: MODEL_DEFAULT_COLOR,
-    color_mode: MODEL_DEFAULT_COLOR_MODE,
+    coloring: {
+      active: MODEL_DEFAULT_COLOR_MODE,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -165,8 +181,10 @@ function sectionDefaultStyle() {
 function implicitCrossSectionDefaultStyle() {
   return {
     visibility: true,
-    color: MODEL_DEFAULT_COLOR,
-    color_mode: MODEL_DEFAULT_COLOR_MODE,
+    coloring: {
+      active: MODEL_DEFAULT_COLOR_MODE,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),
@@ -178,8 +196,10 @@ function implicitCrossSectionDefaultStyle() {
 function implicitStructuralModelDefaultStyle() {
   return {
     visibility: true,
-    color: MODEL_DEFAULT_COLOR,
-    color_mode: MODEL_DEFAULT_COLOR_MODE,
+    coloring: {
+      active: MODEL_DEFAULT_COLOR_MODE,
+      constant: MODEL_DEFAULT_COLOR,
+    },
     corners: modelCornersDefaultStyle(),
     lines: modelLinesDefaultStyle(),
     surfaces: modelSurfacesDefaultStyle(),

From 016ccbfae0d1729e507649965f37560205ad8dbf Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 11 Jun 2026 10:10:02 +0200
Subject: [PATCH 08/23] refacto coloring and harmonize everywhere

---
 .../Viewer/Generic/Model/ModelStyleCard.vue   | 34 ++++------
 .../Viewer/Options/ColoringTypeSelector.vue   |  6 +-
 app/utils/default_styles/models.js            |  6 +-
 .../stores/data_style/mesh/cells/index.js     |  2 +-
 .../stores/data_style/mesh/edges/index.js     |  2 +-
 .../stores/data_style/mesh/points/index.js    |  2 +-
 .../stores/data_style/mesh/polygons/index.js  |  2 +-
 .../stores/data_style/mesh/polyhedra/index.js |  2 +-
 .../stores/data_style/model/blocks/color.js   |  5 +-
 .../stores/data_style/model/blocks/index.js   | 13 ++--
 .../data_style/model/blocks/polyhedron.js     |  6 +-
 .../stores/data_style/model/blocks/vertex.js  |  6 +-
 internal/stores/data_style/model/color.js     | 63 ++++++++++---------
 internal/stores/data_style/model/common.js    | 18 +++++-
 .../stores/data_style/model/corners/color.js  |  5 +-
 .../stores/data_style/model/corners/index.js  | 13 ++--
 .../stores/data_style/model/corners/vertex.js |  6 +-
 .../stores/data_style/model/lines/color.js    |  5 +-
 .../stores/data_style/model/lines/edge.js     |  6 +-
 .../stores/data_style/model/lines/index.js    | 13 ++--
 .../stores/data_style/model/lines/vertex.js   |  6 +-
 .../stores/data_style/model/surfaces/color.js |  6 +-
 .../stores/data_style/model/surfaces/index.js | 13 ++--
 .../data_style/model/surfaces/polygon.js      |  6 +-
 .../data_style/model/surfaces/vertex.js       |  6 +-
 internal/stores/data_style/state.js           |  4 +-
 .../stores/data_style/mesh/cells.nuxt.test.js |  2 +-
 .../stores/data_style/mesh/edges.nuxt.test.js |  2 +-
 .../data_style/mesh/points.nuxt.test.js       |  2 +-
 .../data_style/mesh/polygons.nuxt.test.js     |  2 +-
 .../data_style/mesh/polyhedra.nuxt.test.js    |  2 +-
 .../data_style/model/blocks.nuxt.test.js      |  2 +-
 .../data_style/model/corners.nuxt.test.js     |  2 +-
 .../data_style/model/lines.nuxt.test.js       |  2 +-
 .../data_style/model/surfaces.nuxt.test.js    |  2 +-
 35 files changed, 145 insertions(+), 129 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 622714bf..2dbef9df 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/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,15 +86,12 @@ const modelVisibility = computed({
   },
 });
 
-const colorModes = [
-  { title: "Constant", value: "constant" },
-  { title: "Random", value: "random" },
-];
-
 const modelComponentsColorMode = computed({
   get: () => dataStyleStore.getModelColorMode(modelId.value),
   set: async (colorMode) => {
-    await dataStyleStore.mutateStyle(modelId.value, { color_mode: colorMode });
+    await dataStyleStore.mutateStyle(modelId.value, {
+      coloring: { active: colorMode },
+    });
     await dataStyleStore.setModelComponentsColor(
       modelId.value,
       selection.value,
@@ -108,7 +105,9 @@ const modelComponentsColorMode = computed({
 const modelComponentsColor = computed({
   get: () => dataStyleStore.getModelColor(modelId.value),
   set: async (color) => {
-    await dataStyleStore.mutateStyle(modelId.value, { color });
+    await dataStyleStore.mutateStyle(modelId.value, {
+      coloring: { constant: color },
+    });
     await dataStyleStore.setModelComponentsColor(
       modelId.value,
       selection.value,
@@ -127,20 +126,13 @@ const modelComponentsColor = computed({
     </OptionsSection>
 
     <OptionsSection v-if="!componentType && !componentId" title="Components Options" class="mt-4">
-      <v-label class="text-caption mb-1 mt-2">Select coloring style</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="modelComponentsColorMode"
+        v-model:color="modelComponentsColor"
+        :capabilities="{ color: { available: true } }"
+        :allowRandom="true"
       />
-
-      <template v-if="modelComponentsColorMode === 'constant'">
-        <v-label class="text-caption mb-1">Constant</v-label>
-        <ViewerOptionsColorPicker v-model="modelComponentsColor" />
-      </template>
     </OptionsSection>
 
     <BlocksOptions
diff --git a/app/components/Viewer/Options/ColoringTypeSelector.vue b/app/components/Viewer/Options/ColoringTypeSelector.vue
index 4d4049ca..a8f628f9 100644
--- a/app/components/Viewer/Options/ColoringTypeSelector.vue
+++ b/app/components/Viewer/Options/ColoringTypeSelector.vue
@@ -98,8 +98,8 @@ const has_polyhedra = computed(
     hasColorMap("polyhedron"),
 );
 
-const color_dict = { name: "Color", value: "color" };
-const random_dict = { name: "Random color", value: "random" };
+const color_dict = { name: "Constant", value: "constant" };
+const random_dict = { name: "Random", value: "random" };
 const textures_dict = { name: "Textures", value: "textures" };
 const vertex_dict = { name: "Vertex attribute", value: "vertex" };
 const edge_dict = { name: "Edge attribute", value: "edge" };
@@ -173,7 +173,7 @@ watch(
         data-testid="coloringStyleSelector"
         v-model="coloring_style_label"
         :items="coloring_styles.labels"
-        label="Select a coloring style"
+        label="Select coloring style"
         density="compact"
         hide-details
       />
diff --git a/app/utils/default_styles/models.js b/app/utils/default_styles/models.js
index b2090b30..33650a73 100644
--- a/app/utils/default_styles/models.js
+++ b/app/utils/default_styles/models.js
@@ -45,7 +45,7 @@ function modelLinesDefaultStyle(
         name: undefined,
         storedConfigs: {},
       },
-      edge_attribute: {
+      edge: {
         name: undefined,
         storedConfigs: {},
       },
@@ -66,7 +66,7 @@ function modelSurfacesDefaultStyle(
         name: undefined,
         storedConfigs: {},
       },
-      polygon_attribute: {
+      polygon: {
         name: undefined,
         storedConfigs: {},
       },
@@ -87,7 +87,7 @@ function modelBlocksDefaultStyle(
         name: undefined,
         storedConfigs: {},
       },
-      polyhedron_attribute: {
+      polyhedron: {
         name: undefined,
         storedConfigs: {},
       },
diff --git a/internal/stores/data_style/mesh/cells/index.js b/internal/stores/data_style/mesh/cells/index.js
index 17f961b9..d5f0bfd2 100644
--- a/internal/stores/data_style/mesh/cells/index.js
+++ b/internal/stores/data_style/mesh/cells/index.js
@@ -31,7 +31,7 @@ export function useMeshCellsStyle() {
       coloring: { active: type },
     });
     console.log(setMeshCellsActiveColoring.name, { id }, type);
-    if (type === "color") {
+    if (type === "constant") {
       return meshCellsColorStyle.setMeshCellsColor(id, meshCellsColorStyle.meshCellsColor(id));
     }
     if (type === "textures") {
diff --git a/internal/stores/data_style/mesh/edges/index.js b/internal/stores/data_style/mesh/edges/index.js
index be3cc81a..b4481796 100644
--- a/internal/stores/data_style/mesh/edges/index.js
+++ b/internal/stores/data_style/mesh/edges/index.js
@@ -30,7 +30,7 @@ export function useMeshEdgesStyle() {
     await meshEdgesCommonStyle.mutateMeshEdgesStyle(id, {
       coloring: { active: type },
     });
-    if (type === "color") {
+    if (type === "constant") {
       return meshEdgesColorStyle.setMeshEdgesColor(id, meshEdgesColorStyle.meshEdgesColor(id));
     }
     if (type === "vertex") {
diff --git a/internal/stores/data_style/mesh/points/index.js b/internal/stores/data_style/mesh/points/index.js
index c5c1ad5d..1a0279b3 100644
--- a/internal/stores/data_style/mesh/points/index.js
+++ b/internal/stores/data_style/mesh/points/index.js
@@ -26,7 +26,7 @@ function useMeshPointsColoringStyle() {
     await meshPointsCommonStyle.mutateMeshPointsStyle(id, {
       coloring: { active: type },
     });
-    if (type === "color") {
+    if (type === "constant") {
       return meshPointsColorStyle.setMeshPointsColor(id, meshPointsColorStyle.meshPointsColor(id));
     } else if (type === "vertex") {
       const name = meshPointsVertexAttributeStyle.meshPointsVertexAttributeName(id);
diff --git a/internal/stores/data_style/mesh/polygons/index.js b/internal/stores/data_style/mesh/polygons/index.js
index bd5572ee..917a2367 100644
--- a/internal/stores/data_style/mesh/polygons/index.js
+++ b/internal/stores/data_style/mesh/polygons/index.js
@@ -29,7 +29,7 @@ function useMeshPolygonsColoringStyle() {
     await meshPolygonsCommonStyle.mutateMeshPolygonsStyle(id, {
       coloring: { active: type },
     });
-    if (type === "color") {
+    if (type === "constant") {
       return meshPolygonsColorStyle.setMeshPolygonsColor(
         id,
         meshPolygonsColorStyle.meshPolygonsColor(id),
diff --git a/internal/stores/data_style/mesh/polyhedra/index.js b/internal/stores/data_style/mesh/polyhedra/index.js
index a0ba78ee..16025495 100644
--- a/internal/stores/data_style/mesh/polyhedra/index.js
+++ b/internal/stores/data_style/mesh/polyhedra/index.js
@@ -30,7 +30,7 @@ export function useMeshPolyhedraStyle() {
       coloring: { active: type },
     });
     console.log(setMeshPolyhedraActiveColoring.name, { id }, type);
-    if (type === "color") {
+    if (type === "constant") {
       return meshPolyhedraColorStyle.setMeshPolyhedraColor(
         id,
         meshPolyhedraColorStyle.meshPolyhedraColor(id),
diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
index 2710df04..2bcb852f 100644
--- a/internal/stores/data_style/model/blocks/color.js
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -9,7 +9,7 @@ export function useModelBlocksColor() {
   const modelBlocksCommonStyle = useModelBlocksCommonStyle();
 
   function modelBlockColor(id, block_id) {
-    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).color;
+    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).coloring.constant;
   }
 
   function setModelBlocksColor(modelId, blocks_ids, color, color_mode = "constant") {
@@ -17,8 +17,7 @@ export function useModelBlocksColor() {
   }
 
   function modelBlockColorMode(id, block_id) {
-    const mode = modelBlocksCommonStyle.modelBlockStyle(id, block_id).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).coloring.active;
   }
 
   return { setModelBlocksColor, modelBlockColor, modelBlockColorMode };
diff --git a/internal/stores/data_style/model/blocks/index.js b/internal/stores/data_style/model/blocks/index.js
index 81a44b81..99ce327d 100644
--- a/internal/stores/data_style/model/blocks/index.js
+++ b/internal/stores/data_style/model/blocks/index.js
@@ -36,20 +36,19 @@ export function useModelBlocksStyle() {
       }
       visibilityGroups[visibility].push(block_id);
 
-      const color_mode = style.color_mode || "constant";
+      const color_mode = style.coloring.active;
       if (color_mode === "constant" || color_mode === "random") {
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+        const color = style.coloring.constant;
+        const color_key = color_mode === "random" ? "random" : JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color: style.color, blocks_ids: [] };
+          colorGroups[color_key] = { color_mode, color, blocks_ids: [] };
         }
         colorGroups[color_key].blocks_ids.push(block_id);
       } else {
-        const attributeTypeKey = `${color_mode}_attribute`;
-        const attributeStyle = style[attributeTypeKey] || {};
+        const attributeStyle = style.coloring[color_mode];
         const { name } = attributeStyle;
         if (name) {
-          const storedConfig =
-            (attributeStyle.storedConfigs && attributeStyle.storedConfigs[name]) || {};
+          const storedConfig = attributeStyle.storedConfigs[name] || {};
           const { minimum, maximum, colorMap } = storedConfig;
           const attributeGroupKey = `${color_mode}_${name}_${colorMap}_${minimum}_${maximum}`;
           if (!attributeGroups[attributeGroupKey]) {
diff --git a/internal/stores/data_style/model/blocks/polyhedron.js b/internal/stores/data_style/model/blocks/polyhedron.js
index 3b32b1d3..9f00f88a 100644
--- a/internal/stores/data_style/model/blocks/polyhedron.js
+++ b/internal/stores/data_style/model/blocks/polyhedron.js
@@ -16,7 +16,7 @@ export function useModelBlocksPolyhedronAttribute() {
   const viewerStore = useViewerStore();
 
   function modelBlocksPolyhedronAttribute(modelId, blockId) {
-    return modelBlocksCommonStyle.modelBlockStyle(modelId, blockId).polyhedron_attribute;
+    return modelBlocksCommonStyle.modelBlockStyle(modelId, blockId).coloring.polyhedron;
   }
 
   function modelBlocksPolyhedronAttributeStoredConfig(modelId, blockId, name) {
@@ -33,7 +33,9 @@ export function useModelBlocksPolyhedronAttribute() {
 
   function mutateModelBlocksPolyhedronStyle(modelId, blockIds, values) {
     return modelBlocksCommonStyle.mutateModelBlocksStyle(modelId, blockIds, {
-      polyhedron_attribute: values,
+      coloring: {
+        polyhedron: values,
+      },
     });
   }
 
diff --git a/internal/stores/data_style/model/blocks/vertex.js b/internal/stores/data_style/model/blocks/vertex.js
index 9e756eb8..7b3b1b72 100644
--- a/internal/stores/data_style/model/blocks/vertex.js
+++ b/internal/stores/data_style/model/blocks/vertex.js
@@ -16,7 +16,7 @@ export function useModelBlocksVertexAttribute() {
   const viewerStore = useViewerStore();
 
   function modelBlocksVertexAttribute(modelId, blockId) {
-    return modelBlocksCommonStyle.modelBlockStyle(modelId, blockId).vertex_attribute;
+    return modelBlocksCommonStyle.modelBlockStyle(modelId, blockId).coloring.vertex;
   }
 
   function modelBlocksVertexAttributeStoredConfig(modelId, blockId, name) {
@@ -33,7 +33,9 @@ export function useModelBlocksVertexAttribute() {
 
   function mutateModelBlocksVertexStyle(modelId, blockIds, values) {
     return modelBlocksCommonStyle.mutateModelBlocksStyle(modelId, blockIds, {
-      vertex_attribute: values,
+      coloring: {
+        vertex: values,
+      },
     });
   }
 
diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index 5a168d00..2f117cf2 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -1,8 +1,3 @@
-import {
-  DEFAULT_MODEL_COMPONENT_TYPE_COLORS,
-  MODEL_DEFAULT_COLOR,
-  MODEL_DEFAULT_COLOR_MODE,
-} from "@ogw_front/utils/default_styles";
 import { dispatchToComponentTypes } from "./visibility";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
@@ -83,7 +78,7 @@ function useModelColorStyle(componentStyleFunctions) {
   };
 
   function getModelComponentColor(modelId, componentId) {
-    return dataStyleState.getComponentStyle(modelId, componentId).color;
+    return dataStyleState.getComponentStyle(modelId, componentId).coloring.constant;
   }
 
   function getModelComponentEffectiveColor(modelId, componentId, type) {
@@ -95,26 +90,29 @@ function useModelColorStyle(componentStyleFunctions) {
   }
 
   function getModelComponentColorMode(modelId, componentId) {
-    const mode = dataStyleState.getComponentStyle(modelId, componentId).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+    return dataStyleState.getComponentStyle(modelId, componentId).coloring.active;
   }
 
   function modelComponentTypeColor(modelId, type) {
     return (
-      dataStyleState.getModelComponentTypeStyle(modelId, type).color ||
-      DEFAULT_MODEL_COMPONENT_TYPE_COLORS[type]
+      dataStyleState.getModelComponentTypeStyle(modelId, type).coloring.constant ||
+      dataStyleState.getStyle(modelId)[`${type.toLowerCase()}s`].coloring.constant
     );
   }
 
   function getModelComponentTypeColorMode(modelId, type) {
-    const mode = dataStyleState.getModelComponentTypeStyle(modelId, type).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+    return (
+      dataStyleState.getModelComponentTypeStyle(modelId, type).coloring.active ||
+      dataStyleState.getStyle(modelId)[`${type.toLowerCase()}s`].coloring.active
+    );
   }
 
   async function setModelComponentTypeColor(modelId, type, color) {
     await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, {
-      color,
-      color_mode: "constant",
+      coloring: {
+        constant: color,
+        active: "constant",
+      },
     });
     const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
     if (idsForType.length === 0) {
@@ -124,21 +122,24 @@ function useModelColorStyle(componentStyleFunctions) {
   }
 
   async function setModelComponentTypeColorMode(modelId, type, color_mode) {
-    const mode = color_mode === "color" ? "constant" : color_mode;
-    await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, { color_mode: mode });
+    await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, {
+      coloring: { active: color_mode },
+    });
     const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
     if (idsForType.length === 0) {
       return;
     }
 
-    if (mode === "random" || mode === "constant") {
-      await setModelComponentsColor(modelId, idsForType, undefined, mode);
+    if (color_mode === "random" || color_mode === "constant") {
+      await setModelComponentsColor(modelId, idsForType, undefined, color_mode);
       return;
     }
 
-    await modelCommonStyle.mutateComponentStyles(modelId, idsForType, { color_mode: mode });
+    await modelCommonStyle.mutateComponentStyles(modelId, idsForType, {
+      coloring: { active: color_mode },
+    });
     const { getName, setName, getRange, setRange, getColorMap, setColorMap } =
-      ATTRIBUTE_FUNCTIONS[type][mode];
+      ATTRIBUTE_FUNCTIONS[type][color_mode];
 
     const name = getName(modelId, idsForType[0]);
     if (name) {
@@ -155,16 +156,17 @@ function useModelColorStyle(componentStyleFunctions) {
   }
 
   async function setModelComponentColorMode(modelId, componentId, 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);
+    await modelCommonStyle.mutateComponentStyle(modelId, componentId, {
+      coloring: { active: color_mode },
+    });
+    if (color_mode === "random" || color_mode === "constant") {
+      await setModelComponentsColor(modelId, [componentId], undefined, color_mode);
       return;
     }
 
     const type = await dataStore.meshComponentType(modelId, componentId);
     const { getName, setName, getRange, setRange, getColorMap, setColorMap } =
-      ATTRIBUTE_FUNCTIONS[type][mode];
+      ATTRIBUTE_FUNCTIONS[type][color_mode];
 
     const name = getName(modelId, componentId);
     if (name) {
@@ -181,7 +183,12 @@ function useModelColorStyle(componentStyleFunctions) {
   }
 
   async function setModelComponentsColor(modelId, componentIds, color, color_mode = "constant") {
-    await modelCommonStyle.mutateComponentStyles(modelId, componentIds, { color, color_mode });
+    await modelCommonStyle.mutateComponentStyles(modelId, componentIds, {
+      coloring: {
+        constant: color,
+        active: color_mode,
+      },
+    });
     return await dispatchToComponentTypes(
       modelId,
       componentIds,
@@ -193,11 +200,11 @@ function useModelColorStyle(componentStyleFunctions) {
   }
 
   function getModelColor(modelId) {
-    return dataStyleState.getStyle(modelId).color ?? MODEL_DEFAULT_COLOR;
+    return dataStyleState.getStyle(modelId).coloring.constant;
   }
 
   function getModelColorMode(modelId) {
-    return dataStyleState.getStyle(modelId).color_mode ?? MODEL_DEFAULT_COLOR_MODE;
+    return dataStyleState.getStyle(modelId).coloring.active;
   }
 
   return {
diff --git a/internal/stores/data_style/model/common.js b/internal/stores/data_style/model/common.js
index 5fcd0bbc..ab5770bd 100644
--- a/internal/stores/data_style/model/common.js
+++ b/internal/stores/data_style/model/common.js
@@ -70,7 +70,11 @@ export function useModelCommonStyle() {
     }
 
     if (color_mode === "constant" && color !== undefined) {
-      await mutateComponentStyles(id, component_ids, { color });
+      await mutateComponentStyles(id, component_ids, {
+        coloring: {
+          constant: color,
+        },
+      });
     }
 
     const params = { id, block_ids: viewer_ids, color_mode };
@@ -83,7 +87,11 @@ export function useModelCommonStyle() {
       {
         response_function: async (colors) => {
           if (color_mode === "constant" && color !== undefined) {
-            await mutateComponentStyles(id, component_ids, { color });
+            await mutateComponentStyles(id, component_ids, {
+              coloring: {
+                constant: color,
+              },
+            });
             return;
           }
 
@@ -95,7 +103,11 @@ export function useModelCommonStyle() {
             id,
             colors.map(({ geode_id, color: color_value }) => ({
               id_component: geode_id,
-              values: { color: color_value },
+              values: {
+                coloring: {
+                  constant: color_value,
+                },
+              },
             })),
           );
         },
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
index 5df090d1..c661fabf 100644
--- a/internal/stores/data_style/model/corners/color.js
+++ b/internal/stores/data_style/model/corners/color.js
@@ -9,7 +9,7 @@ export function useModelCornersColor() {
   const modelCornersCommonStyle = useModelCornersCommonStyle();
 
   function modelCornerColor(id, corner_id) {
-    return modelCornersCommonStyle.modelCornerStyle(id, corner_id).color;
+    return modelCornersCommonStyle.modelCornerStyle(id, corner_id).coloring.constant;
   }
 
   function setModelCornersColor(modelId, corners_ids, color, color_mode = "constant") {
@@ -17,8 +17,7 @@ export function useModelCornersColor() {
   }
 
   function modelCornerColorMode(id, corner_id) {
-    const mode = modelCornersCommonStyle.modelCornerStyle(id, corner_id).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+    return modelCornersCommonStyle.modelCornerStyle(id, corner_id).coloring.active;
   }
 
   return { setModelCornersColor, modelCornerColor, modelCornerColorMode };
diff --git a/internal/stores/data_style/model/corners/index.js b/internal/stores/data_style/model/corners/index.js
index 0fc0bb3d..3279ca73 100644
--- a/internal/stores/data_style/model/corners/index.js
+++ b/internal/stores/data_style/model/corners/index.js
@@ -34,20 +34,19 @@ export function useModelCornersStyle() {
       }
       visibilityGroups[visibility].push(corner_id);
 
-      const color_mode = style.color_mode || "constant";
+      const color_mode = style.coloring.active;
       if (color_mode === "constant" || color_mode === "random") {
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+        const color = style.coloring.constant;
+        const color_key = color_mode === "random" ? "random" : JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color: style.color, corners_ids: [] };
+          colorGroups[color_key] = { color_mode, color, corners_ids: [] };
         }
         colorGroups[color_key].corners_ids.push(corner_id);
       } else {
-        const attributeTypeKey = `${color_mode}_attribute`;
-        const attributeStyle = style[attributeTypeKey] || {};
+        const attributeStyle = style.coloring[color_mode];
         const { name } = attributeStyle;
         if (name) {
-          const storedConfig =
-            (attributeStyle.storedConfigs && attributeStyle.storedConfigs[name]) || {};
+          const storedConfig = attributeStyle.storedConfigs[name] || {};
           const { minimum, maximum, colorMap } = storedConfig;
           const attributeGroupKey = `${color_mode}_${name}_${colorMap}_${minimum}_${maximum}`;
           if (!attributeGroups[attributeGroupKey]) {
diff --git a/internal/stores/data_style/model/corners/vertex.js b/internal/stores/data_style/model/corners/vertex.js
index df4ca5d1..467cd4ad 100644
--- a/internal/stores/data_style/model/corners/vertex.js
+++ b/internal/stores/data_style/model/corners/vertex.js
@@ -16,7 +16,7 @@ export function useModelCornersVertexAttribute() {
   const viewerStore = useViewerStore();
 
   function modelCornersVertexAttribute(modelId, cornerId) {
-    return modelCornersCommonStyle.modelCornerStyle(modelId, cornerId).vertex_attribute;
+    return modelCornersCommonStyle.modelCornerStyle(modelId, cornerId).coloring.vertex;
   }
 
   function modelCornersVertexAttributeStoredConfig(modelId, cornerId, name) {
@@ -33,7 +33,9 @@ export function useModelCornersVertexAttribute() {
 
   function mutateModelCornersVertexStyle(modelId, cornerIds, values) {
     return modelCornersCommonStyle.mutateModelCornersStyle(modelId, cornerIds, {
-      vertex_attribute: values,
+      coloring: {
+        vertex: values,
+      },
     });
   }
 
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
index 0873e74e..3bdedf1e 100644
--- a/internal/stores/data_style/model/lines/color.js
+++ b/internal/stores/data_style/model/lines/color.js
@@ -9,7 +9,7 @@ export function useModelLinesColor() {
   const modelLinesCommonStyle = useModelLinesCommonStyle();
 
   function modelLineColor(id, line_id) {
-    return modelLinesCommonStyle.modelLineStyle(id, line_id).color;
+    return modelLinesCommonStyle.modelLineStyle(id, line_id).coloring.constant;
   }
 
   function setModelLinesColor(modelId, lines_ids, color, color_mode = "constant") {
@@ -17,8 +17,7 @@ export function useModelLinesColor() {
   }
 
   function modelLineColorMode(id, line_id) {
-    const mode = modelLinesCommonStyle.modelLineStyle(id, line_id).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+    return modelLinesCommonStyle.modelLineStyle(id, line_id).coloring.active;
   }
 
   return { setModelLinesColor, modelLineColor, modelLineColorMode };
diff --git a/internal/stores/data_style/model/lines/edge.js b/internal/stores/data_style/model/lines/edge.js
index 3da247f0..fd880e56 100644
--- a/internal/stores/data_style/model/lines/edge.js
+++ b/internal/stores/data_style/model/lines/edge.js
@@ -16,7 +16,7 @@ export function useModelLinesEdgeAttribute() {
   const viewerStore = useViewerStore();
 
   function modelLinesEdgeAttribute(modelId, lineId) {
-    return modelLinesCommonStyle.modelLineStyle(modelId, lineId).edge_attribute;
+    return modelLinesCommonStyle.modelLineStyle(modelId, lineId).coloring.edge;
   }
 
   function modelLinesEdgeAttributeStoredConfig(modelId, lineId, name) {
@@ -33,7 +33,9 @@ export function useModelLinesEdgeAttribute() {
 
   function mutateModelLinesEdgeStyle(modelId, lineIds, values) {
     return modelLinesCommonStyle.mutateModelLinesStyle(modelId, lineIds, {
-      edge_attribute: values,
+      coloring: {
+        edge: values,
+      },
     });
   }
 
diff --git a/internal/stores/data_style/model/lines/index.js b/internal/stores/data_style/model/lines/index.js
index 88431853..a8d445c4 100644
--- a/internal/stores/data_style/model/lines/index.js
+++ b/internal/stores/data_style/model/lines/index.js
@@ -36,20 +36,19 @@ export function useModelLinesStyle() {
       }
       visibilityGroups[visibility].push(line_id);
 
-      const color_mode = style.color_mode || "constant";
+      const color_mode = style.coloring.active;
       if (color_mode === "constant" || color_mode === "random") {
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+        const color = style.coloring.constant;
+        const color_key = color_mode === "random" ? "random" : JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color: style.color, lines_ids: [] };
+          colorGroups[color_key] = { color_mode, color, lines_ids: [] };
         }
         colorGroups[color_key].lines_ids.push(line_id);
       } else {
-        const attributeTypeKey = `${color_mode}_attribute`;
-        const attributeStyle = style[attributeTypeKey] || {};
+        const attributeStyle = style.coloring[color_mode];
         const { name } = attributeStyle;
         if (name) {
-          const storedConfig =
-            (attributeStyle.storedConfigs && attributeStyle.storedConfigs[name]) || {};
+          const storedConfig = attributeStyle.storedConfigs[name] || {};
           const { minimum, maximum, colorMap } = storedConfig;
           const attributeGroupKey = `${color_mode}_${name}_${colorMap}_${minimum}_${maximum}`;
           if (!attributeGroups[attributeGroupKey]) {
diff --git a/internal/stores/data_style/model/lines/vertex.js b/internal/stores/data_style/model/lines/vertex.js
index 112a1ca7..c31a4cbc 100644
--- a/internal/stores/data_style/model/lines/vertex.js
+++ b/internal/stores/data_style/model/lines/vertex.js
@@ -16,7 +16,7 @@ export function useModelLinesVertexAttribute() {
   const viewerStore = useViewerStore();
 
   function modelLinesVertexAttribute(modelId, lineId) {
-    return modelLinesCommonStyle.modelLineStyle(modelId, lineId).vertex_attribute;
+    return modelLinesCommonStyle.modelLineStyle(modelId, lineId).coloring.vertex;
   }
 
   function modelLinesVertexAttributeStoredConfig(modelId, lineId, name) {
@@ -33,7 +33,9 @@ export function useModelLinesVertexAttribute() {
 
   function mutateModelLinesVertexStyle(modelId, lineIds, values) {
     return modelLinesCommonStyle.mutateModelLinesStyle(modelId, lineIds, {
-      vertex_attribute: values,
+      coloring: {
+        vertex: values,
+      },
     });
   }
 
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
index ca14a089..f91f9eb3 100644
--- a/internal/stores/data_style/model/surfaces/color.js
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -9,7 +9,7 @@ export function useModelSurfacesColor() {
   const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
 
   function modelSurfaceColor(id, surface_id) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color;
+    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).coloring.constant;
   }
 
   function setModelSurfacesColor(modelId, surfaces_ids, color, color_mode = "constant") {
@@ -17,9 +17,7 @@ export function useModelSurfacesColor() {
   }
 
   function modelSurfaceColorMode(id, surface_id) {
-    const mode =
-      modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color_mode || "constant";
-    return mode === "constant" ? "color" : mode;
+    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).coloring.active;
   }
 
   return {
diff --git a/internal/stores/data_style/model/surfaces/index.js b/internal/stores/data_style/model/surfaces/index.js
index 10954809..cf035587 100644
--- a/internal/stores/data_style/model/surfaces/index.js
+++ b/internal/stores/data_style/model/surfaces/index.js
@@ -36,20 +36,19 @@ export function useModelSurfacesStyle() {
       }
       visibilityGroups[visibility].push(surfaces_id);
 
-      const color_mode = style.color_mode || "constant";
+      const color_mode = style.coloring.active;
       if (color_mode === "constant" || color_mode === "random") {
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+        const color = style.coloring.constant;
+        const color_key = color_mode === "random" ? "random" : JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color: style.color, surfaces_ids: [] };
+          colorGroups[color_key] = { color_mode, color, surfaces_ids: [] };
         }
         colorGroups[color_key].surfaces_ids.push(surfaces_id);
       } else {
-        const attributeTypeKey = `${color_mode}_attribute`;
-        const attributeStyle = style[attributeTypeKey] || {};
+        const attributeStyle = style.coloring[color_mode];
         const { name } = attributeStyle;
         if (name) {
-          const storedConfig =
-            (attributeStyle.storedConfigs && attributeStyle.storedConfigs[name]) || {};
+          const storedConfig = attributeStyle.storedConfigs[name] || {};
           const { minimum, maximum, colorMap } = storedConfig;
           const attributeGroupKey = `${color_mode}_${name}_${colorMap}_${minimum}_${maximum}`;
           if (!attributeGroups[attributeGroupKey]) {
diff --git a/internal/stores/data_style/model/surfaces/polygon.js b/internal/stores/data_style/model/surfaces/polygon.js
index 1d297456..9101b058 100644
--- a/internal/stores/data_style/model/surfaces/polygon.js
+++ b/internal/stores/data_style/model/surfaces/polygon.js
@@ -16,7 +16,7 @@ export function useModelSurfacesPolygonAttribute() {
   const viewerStore = useViewerStore();
 
   function modelSurfacesPolygonAttribute(modelId, surfaceId) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(modelId, surfaceId).polygon_attribute;
+    return modelSurfacesCommonStyle.modelSurfaceStyle(modelId, surfaceId).coloring.polygon;
   }
 
   function modelSurfacesPolygonAttributeStoredConfig(modelId, surfaceId, name) {
@@ -33,7 +33,9 @@ export function useModelSurfacesPolygonAttribute() {
 
   function mutateModelSurfacesPolygonStyle(modelId, surfaceIds, values) {
     return modelSurfacesCommonStyle.mutateModelSurfacesStyle(modelId, surfaceIds, {
-      polygon_attribute: values,
+      coloring: {
+        polygon: values,
+      },
     });
   }
 
diff --git a/internal/stores/data_style/model/surfaces/vertex.js b/internal/stores/data_style/model/surfaces/vertex.js
index a742b1aa..37e5d7f5 100644
--- a/internal/stores/data_style/model/surfaces/vertex.js
+++ b/internal/stores/data_style/model/surfaces/vertex.js
@@ -16,7 +16,7 @@ export function useModelSurfacesVertexAttribute() {
   const viewerStore = useViewerStore();
 
   function modelSurfacesVertexAttribute(modelId, surfaceId) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(modelId, surfaceId).vertex_attribute;
+    return modelSurfacesCommonStyle.modelSurfaceStyle(modelId, surfaceId).coloring.vertex;
   }
 
   function modelSurfacesVertexAttributeStoredConfig(modelId, surfaceId, name) {
@@ -33,7 +33,9 @@ export function useModelSurfacesVertexAttribute() {
 
   function mutateModelSurfacesVertexStyle(modelId, surfaceIds, values) {
     return modelSurfacesCommonStyle.mutateModelSurfacesStyle(modelId, surfaceIds, {
-      vertex_attribute: values,
+      coloring: {
+        vertex: values,
+      },
     });
   }
 
diff --git a/internal/stores/data_style/state.js b/internal/stores/data_style/state.js
index c9c108ff..2f78b7c6 100644
--- a/internal/stores/data_style/state.js
+++ b/internal/stores/data_style/state.js
@@ -157,12 +157,12 @@ export function useDataStyleState() {
 
   function getComponentStyle(id_model, id_component) {
     const key = `${id_model}_${id_component}`;
-    return componentStyles.value[key] || {};
+    return componentStyles.value[key] || { coloring: {} };
   }
 
   function getModelComponentTypeStyle(id_model, type) {
     const key = `${id_model}_${type}`;
-    return modelComponentTypeStyles.value[key] || {};
+    return modelComponentTypeStyles.value[key] || { coloring: {} };
   }
 
   function clear() {
diff --git a/tests/integration/stores/data_style/mesh/cells.nuxt.test.js b/tests/integration/stores/data_style/mesh/cells.nuxt.test.js
index 5794f63a..643750d2 100644
--- a/tests/integration/stores/data_style/mesh/cells.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/cells.nuxt.test.js
@@ -121,7 +121,7 @@ describe("mesh cells", () => {
     test("coloring color", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const coloringName = "color";
+      const coloringName = "constant";
       const result = dataStyleStore.setMeshCellsActiveColoring(id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
diff --git a/tests/integration/stores/data_style/mesh/edges.nuxt.test.js b/tests/integration/stores/data_style/mesh/edges.nuxt.test.js
index 2f56ae92..5ce86900 100644
--- a/tests/integration/stores/data_style/mesh/edges.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/edges.nuxt.test.js
@@ -109,7 +109,7 @@ describe("mesh edges", () => {
     test("coloring color", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const coloringName = "color";
+      const coloringName = "constant";
       const result = dataStyleStore.setMeshEdgesActiveColoring(id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
diff --git a/tests/integration/stores/data_style/mesh/points.nuxt.test.js b/tests/integration/stores/data_style/mesh/points.nuxt.test.js
index d1a90d52..09a4debe 100644
--- a/tests/integration/stores/data_style/mesh/points.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/points.nuxt.test.js
@@ -76,7 +76,7 @@ describe("mesh points", () => {
     test("coloring color", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const coloringName = "color";
+      const coloringName = "constant";
       const result = dataStyleStore.setMeshPointsActiveColoring(id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
diff --git a/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js b/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js
index 97aa22a8..13c61ad4 100644
--- a/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/polygons.nuxt.test.js
@@ -119,7 +119,7 @@ describe("mesh polygons", () => {
     test("coloring color", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const coloringName = "color";
+      const coloringName = "constant";
       const result = dataStyleStore.setMeshPolygonsActiveColoring(id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
diff --git a/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js b/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js
index c19848c5..8c41c22c 100644
--- a/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js
+++ b/tests/integration/stores/data_style/mesh/polyhedra.nuxt.test.js
@@ -73,7 +73,7 @@ describe("mesh polyhedra", () => {
     test("coloring color", async () => {
       const dataStyleStore = useDataStyleStore();
       const viewerStore = useViewerStore();
-      const coloringName = "color";
+      const coloringName = "constant";
       const result = dataStyleStore.setMeshPolyhedraActiveColoring(id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
diff --git a/tests/integration/stores/data_style/model/blocks.nuxt.test.js b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
index dd46c3ae..8bead04e 100644
--- a/tests/integration/stores/data_style/model/blocks.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
@@ -180,7 +180,7 @@ describe("model blocks", () => {
       const dataStore = useDataStore();
       const block_ids = await dataStore.getBlocksGeodeIds(id);
       const [block_id] = block_ids;
-      const coloringName = "color";
+      const coloringName = "constant";
       const result = dataStyleStore.setModelComponentColorMode(id, block_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
diff --git a/tests/integration/stores/data_style/model/corners.nuxt.test.js b/tests/integration/stores/data_style/model/corners.nuxt.test.js
index e4c420c7..724a0a0a 100644
--- a/tests/integration/stores/data_style/model/corners.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/corners.nuxt.test.js
@@ -145,7 +145,7 @@ describe("model corners", () => {
       const dataStore = useDataStore();
       const corner_ids = await dataStore.getCornersGeodeIds(id);
       const [corner_id] = corner_ids;
-      const coloringName = "color";
+      const coloringName = "constant";
       const result = dataStyleStore.setModelComponentColorMode(id, corner_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
diff --git a/tests/integration/stores/data_style/model/lines.nuxt.test.js b/tests/integration/stores/data_style/model/lines.nuxt.test.js
index 7ba5513b..e559f7c8 100644
--- a/tests/integration/stores/data_style/model/lines.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/lines.nuxt.test.js
@@ -178,7 +178,7 @@ describe("model lines", () => {
       const dataStore = useDataStore();
       const line_ids = await dataStore.getLinesGeodeIds(id);
       const [line_id] = line_ids;
-      const coloringName = "color";
+      const coloringName = "constant";
       const result = dataStyleStore.setModelComponentColorMode(id, line_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
diff --git a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
index c675f9ca..92bfd379 100644
--- a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
@@ -182,7 +182,7 @@ describe("model surfaces", () => {
       const dataStore = useDataStore();
       const surface_ids = await dataStore.getSurfacesGeodeIds(id);
       const [surface_id] = surface_ids;
-      const coloringName = "color";
+      const coloringName = "constant";
       const result = dataStyleStore.setModelComponentColorMode(id, surface_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;

From 860e9e27b1bceb321ac25ae7733512d76a0184d8 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 11 Jun 2026 10:20:16 +0200
Subject: [PATCH 09/23] activecolor instead of colorMode

---
 .../Viewer/Generic/Model/BlocksOptions.vue    | 20 +++++++++----------
 .../Viewer/Generic/Model/CornersOptions.vue   | 20 +++++++++----------
 .../Viewer/Generic/Model/LinesOptions.vue     | 20 +++++++++----------
 .../Viewer/Generic/Model/ModelStyleCard.vue   | 16 +++++++--------
 .../Viewer/Generic/Model/SurfacesOptions.vue  | 20 +++++++++----------
 .../stores/data_style/model/blocks/color.js   |  4 ++--
 internal/stores/data_style/model/color.js     | 20 +++++++++----------
 .../stores/data_style/model/corners/color.js  |  4 ++--
 .../stores/data_style/model/lines/color.js    |  4 ++--
 .../stores/data_style/model/surfaces/color.js |  4 ++--
 .../data_style/model/blocks.nuxt.test.js      | 12 +++++------
 .../data_style/model/corners.nuxt.test.js     |  8 ++++----
 .../data_style/model/lines.nuxt.test.js       | 12 +++++------
 .../data_style/model/surfaces.nuxt.test.js    | 12 +++++------
 14 files changed, 88 insertions(+), 88 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/BlocksOptions.vue b/app/components/Viewer/Generic/Model/BlocksOptions.vue
index 551b2d8b..54892151 100644
--- a/app/components/Viewer/Generic/Model/BlocksOptions.vue
+++ b/app/components/Viewer/Generic/Model/BlocksOptions.vue
@@ -51,19 +51,19 @@ const blockColor = computed({
   },
 });
 
-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 (activeColoring) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Block", activeColoring);
     hybridViewerStore.remoteRender();
   },
 });
 
-const blockColorMode = computed({
-  get: () => dataStyleStore.modelBlockColorMode(modelId, blockId),
-  set: async (colorMode) => {
+const blockActiveColoring = computed({
+  get: () => dataStyleStore.modelBlockActiveColoring(modelId, blockId),
+  set: async (activeColoring) => {
     if (blockId) {
-      await dataStyleStore.setModelComponentColorMode(modelId, blockId, colorMode);
+      await dataStyleStore.setModelComponentActiveColoring(modelId, blockId, activeColoring);
       hybridViewerStore.remoteRender();
     }
   },
@@ -211,7 +211,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 +230,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"
diff --git a/app/components/Viewer/Generic/Model/CornersOptions.vue b/app/components/Viewer/Generic/Model/CornersOptions.vue
index 872bf2b9..225235e1 100644
--- a/app/components/Viewer/Generic/Model/CornersOptions.vue
+++ b/app/components/Viewer/Generic/Model/CornersOptions.vue
@@ -51,19 +51,19 @@ const cornerColor = computed({
   },
 });
 
-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 (activeColoring) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Corner", activeColoring);
     hybridViewerStore.remoteRender();
   },
 });
 
-const cornerColorMode = computed({
-  get: () => dataStyleStore.modelCornerColorMode(modelId, cornerId),
-  set: async (colorMode) => {
+const cornerActiveColoring = computed({
+  get: () => dataStyleStore.modelCornerActiveColoring(modelId, cornerId),
+  set: async (activeColoring) => {
     if (cornerId) {
-      await dataStyleStore.setModelComponentColorMode(modelId, cornerId, colorMode);
+      await dataStyleStore.setModelComponentActiveColoring(modelId, cornerId, activeColoring);
       hybridViewerStore.remoteRender();
     }
   },
@@ -148,7 +148,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 +164,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"
diff --git a/app/components/Viewer/Generic/Model/LinesOptions.vue b/app/components/Viewer/Generic/Model/LinesOptions.vue
index ea471903..cb4fa8bc 100644
--- a/app/components/Viewer/Generic/Model/LinesOptions.vue
+++ b/app/components/Viewer/Generic/Model/LinesOptions.vue
@@ -51,19 +51,19 @@ const lineColor = computed({
   },
 });
 
-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 (activeColoring) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Line", activeColoring);
     hybridViewerStore.remoteRender();
   },
 });
 
-const lineColorMode = computed({
-  get: () => dataStyleStore.modelLineColorMode(modelId, lineId),
-  set: async (colorMode) => {
+const lineActiveColoring = computed({
+  get: () => dataStyleStore.modelLineActiveColoring(modelId, lineId),
+  set: async (activeColoring) => {
     if (lineId) {
-      await dataStyleStore.setModelComponentColorMode(modelId, lineId, colorMode);
+      await dataStyleStore.setModelComponentActiveColoring(modelId, lineId, activeColoring);
       hybridViewerStore.remoteRender();
     }
   },
@@ -207,7 +207,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 +226,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"
diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 2dbef9df..5674832f 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -86,17 +86,17 @@ const modelVisibility = computed({
   },
 });
 
-const modelComponentsColorMode = computed({
-  get: () => dataStyleStore.getModelColorMode(modelId.value),
-  set: async (colorMode) => {
+const modelComponentsActiveColoring = computed({
+  get: () => dataStyleStore.getModelActiveColoring(modelId.value),
+  set: async (activeColoring) => {
     await dataStyleStore.mutateStyle(modelId.value, {
-      coloring: { active: colorMode },
+      coloring: { active: activeColoring },
     });
     await dataStyleStore.setModelComponentsColor(
       modelId.value,
       selection.value,
-      colorMode === "random" ? undefined : modelComponentsColor.value,
-      colorMode,
+      activeColoring === "random" ? undefined : modelComponentsColor.value,
+      activeColoring,
     );
     hybridViewerStore.remoteRender();
   },
@@ -112,7 +112,7 @@ const modelComponentsColor = computed({
       modelId.value,
       selection.value,
       color,
-      modelComponentsColorMode.value,
+      modelComponentsActiveColoring.value,
     );
     hybridViewerStore.remoteRender();
   },
@@ -128,7 +128,7 @@ const modelComponentsColor = computed({
     <OptionsSection v-if="!componentType && !componentId" title="Components Options" class="mt-4">
       <ViewerOptionsColoringTypeSelector
         :id="modelId"
-        v-model:coloring_style_key="modelComponentsColorMode"
+        v-model:coloring_style_key="modelComponentsActiveColoring"
         v-model:color="modelComponentsColor"
         :capabilities="{ color: { available: true } }"
         :allowRandom="true"
diff --git a/app/components/Viewer/Generic/Model/SurfacesOptions.vue b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
index f5e6d5d8..18206214 100644
--- a/app/components/Viewer/Generic/Model/SurfacesOptions.vue
+++ b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
@@ -51,19 +51,19 @@ const surfaceColor = computed({
   },
 });
 
-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 (activeColoring) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Surface", activeColoring);
     hybridViewerStore.remoteRender();
   },
 });
 
-const surfaceColorMode = computed({
-  get: () => dataStyleStore.modelSurfaceColorMode(modelId, surfaceId),
-  set: async (colorMode) => {
+const surfaceActiveColoring = computed({
+  get: () => dataStyleStore.modelSurfaceActiveColoring(modelId, surfaceId),
+  set: async (activeColoring) => {
     if (surfaceId) {
-      await dataStyleStore.setModelComponentColorMode(modelId, surfaceId, colorMode);
+      await dataStyleStore.setModelComponentActiveColoring(modelId, surfaceId, activeColoring);
       hybridViewerStore.remoteRender();
     }
   },
@@ -215,7 +215,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 +234,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"
diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
index 2bcb852f..5229627f 100644
--- a/internal/stores/data_style/model/blocks/color.js
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -16,9 +16,9 @@ export function useModelBlocksColor() {
     return modelCommonStyle.setModelTypeColor(modelId, blocks_ids, color, schema, color_mode);
   }
 
-  function modelBlockColorMode(id, block_id) {
+  function modelBlockActiveColoring(id, block_id) {
     return modelBlocksCommonStyle.modelBlockStyle(id, block_id).coloring.active;
   }
 
-  return { setModelBlocksColor, modelBlockColor, modelBlockColorMode };
+  return { setModelBlocksColor, modelBlockColor, modelBlockActiveColoring };
 }
diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index 2f117cf2..3e2566f8 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -89,7 +89,7 @@ function useModelColorStyle(componentStyleFunctions) {
     return modelComponentTypeColor(modelId, type);
   }
 
-  function getModelComponentColorMode(modelId, componentId) {
+  function getModelComponentActiveColoring(modelId, componentId) {
     return dataStyleState.getComponentStyle(modelId, componentId).coloring.active;
   }
 
@@ -100,7 +100,7 @@ function useModelColorStyle(componentStyleFunctions) {
     );
   }
 
-  function getModelComponentTypeColorMode(modelId, type) {
+  function getModelComponentTypeActiveColoring(modelId, type) {
     return (
       dataStyleState.getModelComponentTypeStyle(modelId, type).coloring.active ||
       dataStyleState.getStyle(modelId)[`${type.toLowerCase()}s`].coloring.active
@@ -121,7 +121,7 @@ function useModelColorStyle(componentStyleFunctions) {
     await setModelComponentsColor(modelId, idsForType, color);
   }
 
-  async function setModelComponentTypeColorMode(modelId, type, color_mode) {
+  async function setModelComponentTypeActiveColoring(modelId, type, color_mode) {
     await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, {
       coloring: { active: color_mode },
     });
@@ -155,7 +155,7 @@ function useModelColorStyle(componentStyleFunctions) {
     }
   }
 
-  async function setModelComponentColorMode(modelId, componentId, color_mode) {
+  async function setModelComponentActiveColoring(modelId, componentId, color_mode) {
     await modelCommonStyle.mutateComponentStyle(modelId, componentId, {
       coloring: { active: color_mode },
     });
@@ -203,21 +203,21 @@ function useModelColorStyle(componentStyleFunctions) {
     return dataStyleState.getStyle(modelId).coloring.constant;
   }
 
-  function getModelColorMode(modelId) {
+  function getModelActiveColoring(modelId) {
     return dataStyleState.getStyle(modelId).coloring.active;
   }
 
   return {
     getModelColor,
-    getModelColorMode,
+    getModelActiveColoring,
     getModelComponentColor,
     getModelComponentEffectiveColor,
-    getModelComponentColorMode,
+    getModelComponentActiveColoring,
     modelComponentTypeColor,
-    getModelComponentTypeColorMode,
+    getModelComponentTypeActiveColoring,
     setModelComponentTypeColor,
-    setModelComponentTypeColorMode,
-    setModelComponentColorMode,
+    setModelComponentTypeActiveColoring,
+    setModelComponentActiveColoring,
     setModelComponentsColor,
   };
 }
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
index c661fabf..ef013e96 100644
--- a/internal/stores/data_style/model/corners/color.js
+++ b/internal/stores/data_style/model/corners/color.js
@@ -16,9 +16,9 @@ export function useModelCornersColor() {
     return modelCommonStyle.setModelTypeColor(modelId, corners_ids, color, schema, color_mode);
   }
 
-  function modelCornerColorMode(id, corner_id) {
+  function modelCornerActiveColoring(id, corner_id) {
     return modelCornersCommonStyle.modelCornerStyle(id, corner_id).coloring.active;
   }
 
-  return { setModelCornersColor, modelCornerColor, modelCornerColorMode };
+  return { setModelCornersColor, modelCornerColor, modelCornerActiveColoring };
 }
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
index 3bdedf1e..351903b8 100644
--- a/internal/stores/data_style/model/lines/color.js
+++ b/internal/stores/data_style/model/lines/color.js
@@ -16,9 +16,9 @@ export function useModelLinesColor() {
     return modelCommonStyle.setModelTypeColor(modelId, lines_ids, color, schema, color_mode);
   }
 
-  function modelLineColorMode(id, line_id) {
+  function modelLineActiveColoring(id, line_id) {
     return modelLinesCommonStyle.modelLineStyle(id, line_id).coloring.active;
   }
 
-  return { setModelLinesColor, modelLineColor, modelLineColorMode };
+  return { setModelLinesColor, modelLineColor, modelLineActiveColoring };
 }
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
index f91f9eb3..c3474487 100644
--- a/internal/stores/data_style/model/surfaces/color.js
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -16,13 +16,13 @@ export function useModelSurfacesColor() {
     return modelCommonStyle.setModelTypeColor(modelId, surfaces_ids, color, schema, color_mode);
   }
 
-  function modelSurfaceColorMode(id, surface_id) {
+  function modelSurfaceActiveColoring(id, surface_id) {
     return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).coloring.active;
   }
 
   return {
     setModelSurfacesColor,
     modelSurfaceColor,
-    modelSurfaceColorMode,
+    modelSurfaceActiveColoring,
   };
 }
diff --git a/tests/integration/stores/data_style/model/blocks.nuxt.test.js b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
index 8bead04e..650722c0 100644
--- a/tests/integration/stores/data_style/model/blocks.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/blocks.nuxt.test.js
@@ -181,10 +181,10 @@ describe("model blocks", () => {
       const block_ids = await dataStore.getBlocksGeodeIds(id);
       const [block_id] = block_ids;
       const coloringName = "constant";
-      const result = dataStyleStore.setModelComponentColorMode(id, block_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, block_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelBlockColorMode(id, block_id)).toBe(coloringName);
+      expect(dataStyleStore.modelBlockActiveColoring(id, block_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
@@ -196,10 +196,10 @@ describe("model blocks", () => {
       const [block_id] = block_ids;
       await dataStyleStore.setModelBlocksVertexAttributeName(id, [block_id], "points");
       const coloringName = "vertex";
-      const result = dataStyleStore.setModelComponentColorMode(id, block_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, block_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelBlockColorMode(id, block_id)).toBe(coloringName);
+      expect(dataStyleStore.modelBlockActiveColoring(id, block_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
@@ -211,10 +211,10 @@ describe("model blocks", () => {
       const [block_id] = block_ids;
       await dataStyleStore.setModelBlocksPolyhedronAttributeName(id, [block_id], "test_attribute");
       const coloringName = "polyhedron";
-      const result = dataStyleStore.setModelComponentColorMode(id, block_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, block_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelBlockColorMode(id, block_id)).toBe(coloringName);
+      expect(dataStyleStore.modelBlockActiveColoring(id, block_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
   });
diff --git a/tests/integration/stores/data_style/model/corners.nuxt.test.js b/tests/integration/stores/data_style/model/corners.nuxt.test.js
index 724a0a0a..d9fc2b0f 100644
--- a/tests/integration/stores/data_style/model/corners.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/corners.nuxt.test.js
@@ -146,10 +146,10 @@ describe("model corners", () => {
       const corner_ids = await dataStore.getCornersGeodeIds(id);
       const [corner_id] = corner_ids;
       const coloringName = "constant";
-      const result = dataStyleStore.setModelComponentColorMode(id, corner_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, corner_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelCornerColorMode(id, corner_id)).toBe(coloringName);
+      expect(dataStyleStore.modelCornerActiveColoring(id, corner_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
@@ -161,10 +161,10 @@ describe("model corners", () => {
       const [corner_id] = corner_ids;
       await dataStyleStore.setModelCornersVertexAttributeName(id, [corner_id], "points");
       const coloringName = "vertex";
-      const result = dataStyleStore.setModelComponentColorMode(id, corner_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, corner_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelCornerColorMode(id, corner_id)).toBe(coloringName);
+      expect(dataStyleStore.modelCornerActiveColoring(id, corner_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
   });
diff --git a/tests/integration/stores/data_style/model/lines.nuxt.test.js b/tests/integration/stores/data_style/model/lines.nuxt.test.js
index e559f7c8..72fa174c 100644
--- a/tests/integration/stores/data_style/model/lines.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/lines.nuxt.test.js
@@ -179,10 +179,10 @@ describe("model lines", () => {
       const line_ids = await dataStore.getLinesGeodeIds(id);
       const [line_id] = line_ids;
       const coloringName = "constant";
-      const result = dataStyleStore.setModelComponentColorMode(id, line_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, line_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelLineColorMode(id, line_id)).toBe(coloringName);
+      expect(dataStyleStore.modelLineActiveColoring(id, line_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
@@ -194,10 +194,10 @@ describe("model lines", () => {
       const [line_id] = line_ids;
       await dataStyleStore.setModelLinesVertexAttributeName(id, [line_id], "points");
       const coloringName = "vertex";
-      const result = dataStyleStore.setModelComponentColorMode(id, line_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, line_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelLineColorMode(id, line_id)).toBe(coloringName);
+      expect(dataStyleStore.modelLineActiveColoring(id, line_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
@@ -209,10 +209,10 @@ describe("model lines", () => {
       const [line_id] = line_ids;
       await dataStyleStore.setModelLinesEdgeAttributeName(id, [line_id], "test_attribute");
       const coloringName = "edge";
-      const result = dataStyleStore.setModelComponentColorMode(id, line_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, line_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelLineColorMode(id, line_id)).toBe(coloringName);
+      expect(dataStyleStore.modelLineActiveColoring(id, line_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
   });
diff --git a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
index 92bfd379..65493ae4 100644
--- a/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/surfaces.nuxt.test.js
@@ -183,10 +183,10 @@ describe("model surfaces", () => {
       const surface_ids = await dataStore.getSurfacesGeodeIds(id);
       const [surface_id] = surface_ids;
       const coloringName = "constant";
-      const result = dataStyleStore.setModelComponentColorMode(id, surface_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, surface_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelSurfaceColorMode(id, surface_id)).toBe(coloringName);
+      expect(dataStyleStore.modelSurfaceActiveColoring(id, surface_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
@@ -198,10 +198,10 @@ describe("model surfaces", () => {
       const [surface_id] = surface_ids;
       await dataStyleStore.setModelSurfacesVertexAttributeName(id, [surface_id], "points");
       const coloringName = "vertex";
-      const result = dataStyleStore.setModelComponentColorMode(id, surface_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, surface_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelSurfaceColorMode(id, surface_id)).toBe(coloringName);
+      expect(dataStyleStore.modelSurfaceActiveColoring(id, surface_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
 
@@ -213,10 +213,10 @@ describe("model surfaces", () => {
       const [surface_id] = surface_ids;
       await dataStyleStore.setModelSurfacesPolygonAttributeName(id, [surface_id], "test_attribute");
       const coloringName = "polygon";
-      const result = dataStyleStore.setModelComponentColorMode(id, surface_id, coloringName);
+      const result = dataStyleStore.setModelComponentActiveColoring(id, surface_id, coloringName);
       expect(result).toBeInstanceOf(Promise);
       await result;
-      expect(dataStyleStore.modelSurfaceColorMode(id, surface_id)).toBe(coloringName);
+      expect(dataStyleStore.modelSurfaceActiveColoring(id, surface_id)).toBe(coloringName);
       expect(viewerStore.status).toBe(Status.CONNECTED);
     });
   });

From ee4047c20f42f873822c3ac7dda2f6b03a946e29 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 11 Jun 2026 10:26:38 +0200
Subject: [PATCH 10/23] rm fallbacks

---
 .../Viewer/Generic/Model/BlocksOptions.vue           | 12 ++++--------
 .../Viewer/Generic/Model/CornersOptions.vue          | 12 ++++--------
 app/components/Viewer/Generic/Model/LinesOptions.vue | 12 ++++--------
 .../Viewer/Generic/Model/SurfacesOptions.vue         | 12 ++++--------
 4 files changed, 16 insertions(+), 32 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/BlocksOptions.vue b/app/components/Viewer/Generic/Model/BlocksOptions.vue
index 54892151..eb1b32bc 100644
--- a/app/components/Viewer/Generic/Model/BlocksOptions.vue
+++ b/app/components/Viewer/Generic/Model/BlocksOptions.vue
@@ -44,10 +44,8 @@ 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();
   },
 });
 
@@ -62,10 +60,8 @@ const blocksActiveColoring = computed({
 const blockActiveColoring = computed({
   get: () => dataStyleStore.modelBlockActiveColoring(modelId, blockId),
   set: async (activeColoring) => {
-    if (blockId) {
-      await dataStyleStore.setModelComponentActiveColoring(modelId, blockId, activeColoring);
-      hybridViewerStore.remoteRender();
-    }
+    await dataStyleStore.setModelComponentActiveColoring(modelId, blockId, activeColoring);
+    hybridViewerStore.remoteRender();
   },
 });
 
diff --git a/app/components/Viewer/Generic/Model/CornersOptions.vue b/app/components/Viewer/Generic/Model/CornersOptions.vue
index 225235e1..b8a7b376 100644
--- a/app/components/Viewer/Generic/Model/CornersOptions.vue
+++ b/app/components/Viewer/Generic/Model/CornersOptions.vue
@@ -44,10 +44,8 @@ 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();
   },
 });
 
@@ -62,10 +60,8 @@ const cornersActiveColoring = computed({
 const cornerActiveColoring = computed({
   get: () => dataStyleStore.modelCornerActiveColoring(modelId, cornerId),
   set: async (activeColoring) => {
-    if (cornerId) {
-      await dataStyleStore.setModelComponentActiveColoring(modelId, cornerId, activeColoring);
-      hybridViewerStore.remoteRender();
-    }
+    await dataStyleStore.setModelComponentActiveColoring(modelId, cornerId, activeColoring);
+    hybridViewerStore.remoteRender();
   },
 });
 
diff --git a/app/components/Viewer/Generic/Model/LinesOptions.vue b/app/components/Viewer/Generic/Model/LinesOptions.vue
index cb4fa8bc..4cd74354 100644
--- a/app/components/Viewer/Generic/Model/LinesOptions.vue
+++ b/app/components/Viewer/Generic/Model/LinesOptions.vue
@@ -44,10 +44,8 @@ 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();
   },
 });
 
@@ -62,10 +60,8 @@ const linesActiveColoring = computed({
 const lineActiveColoring = computed({
   get: () => dataStyleStore.modelLineActiveColoring(modelId, lineId),
   set: async (activeColoring) => {
-    if (lineId) {
-      await dataStyleStore.setModelComponentActiveColoring(modelId, lineId, activeColoring);
-      hybridViewerStore.remoteRender();
-    }
+    await dataStyleStore.setModelComponentActiveColoring(modelId, lineId, activeColoring);
+    hybridViewerStore.remoteRender();
   },
 });
 
diff --git a/app/components/Viewer/Generic/Model/SurfacesOptions.vue b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
index 18206214..ebec4984 100644
--- a/app/components/Viewer/Generic/Model/SurfacesOptions.vue
+++ b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
@@ -44,10 +44,8 @@ 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();
   },
 });
 
@@ -62,10 +60,8 @@ const surfacesActiveColoring = computed({
 const surfaceActiveColoring = computed({
   get: () => dataStyleStore.modelSurfaceActiveColoring(modelId, surfaceId),
   set: async (activeColoring) => {
-    if (surfaceId) {
-      await dataStyleStore.setModelComponentActiveColoring(modelId, surfaceId, activeColoring);
-      hybridViewerStore.remoteRender();
-    }
+    await dataStyleStore.setModelComponentActiveColoring(modelId, surfaceId, activeColoring);
+    hybridViewerStore.remoteRender();
   },
 });
 

From ffb35b994274420d77d5d8c89691c5991b99c959 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 11 Jun 2026 12:04:20 +0200
Subject: [PATCH 11/23] activeColoring over color_mode refacto
 setModelBlocksActiveColoring rm some fallbacks

---
 .../Viewer/Generic/Model/BlocksOptions.vue    |  2 +-
 .../Viewer/Generic/Model/CornersOptions.vue   |  2 +-
 .../Viewer/Generic/Model/LinesOptions.vue     |  2 +-
 .../Viewer/Generic/Model/SurfacesOptions.vue  |  2 +-
 app/utils/default_styles/constants.js         |  8 +-
 app/utils/default_styles/index.js             |  2 +-
 app/utils/default_styles/meshes.js            | 12 +--
 app/utils/default_styles/models.js            | 14 +--
 .../stores/data_style/mesh/cells/index.js     |  9 --
 .../stores/data_style/mesh/edges/index.js     |  6 --
 .../stores/data_style/mesh/points/index.js    |  3 -
 .../stores/data_style/mesh/polygons/index.js  |  9 --
 .../stores/data_style/mesh/polyhedra/index.js |  6 --
 .../stores/data_style/model/blocks/color.js   | 90 +++++++++++++++++--
 .../stores/data_style/model/blocks/index.js   | 53 +++++------
 internal/stores/data_style/model/color.js     | 28 +++---
 internal/stores/data_style/model/common.js    | 10 +--
 .../stores/data_style/model/corners/color.js  | 63 +++++++++++--
 .../stores/data_style/model/corners/index.js  | 49 +++++-----
 .../stores/data_style/model/lines/color.js    | 75 ++++++++++++++--
 .../stores/data_style/model/lines/index.js    | 53 +++++------
 .../stores/data_style/model/surfaces/color.js | 88 +++++++++++++++++-
 .../stores/data_style/model/surfaces/index.js | 53 +++++------
 .../data_style/model/index.nuxt.test.js       |  6 +-
 24 files changed, 452 insertions(+), 193 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/BlocksOptions.vue b/app/components/Viewer/Generic/Model/BlocksOptions.vue
index eb1b32bc..fa4ca823 100644
--- a/app/components/Viewer/Generic/Model/BlocksOptions.vue
+++ b/app/components/Viewer/Generic/Model/BlocksOptions.vue
@@ -60,7 +60,7 @@ const blocksActiveColoring = computed({
 const blockActiveColoring = computed({
   get: () => dataStyleStore.modelBlockActiveColoring(modelId, blockId),
   set: async (activeColoring) => {
-    await dataStyleStore.setModelComponentActiveColoring(modelId, blockId, activeColoring);
+    await dataStyleStore.setModelBlocksActiveColoring(modelId, [blockId], activeColoring);
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/Generic/Model/CornersOptions.vue b/app/components/Viewer/Generic/Model/CornersOptions.vue
index b8a7b376..333e831a 100644
--- a/app/components/Viewer/Generic/Model/CornersOptions.vue
+++ b/app/components/Viewer/Generic/Model/CornersOptions.vue
@@ -60,7 +60,7 @@ const cornersActiveColoring = computed({
 const cornerActiveColoring = computed({
   get: () => dataStyleStore.modelCornerActiveColoring(modelId, cornerId),
   set: async (activeColoring) => {
-    await dataStyleStore.setModelComponentActiveColoring(modelId, cornerId, activeColoring);
+    await dataStyleStore.setModelCornersActiveColoring(modelId, [cornerId], activeColoring);
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/Generic/Model/LinesOptions.vue b/app/components/Viewer/Generic/Model/LinesOptions.vue
index 4cd74354..16fde75f 100644
--- a/app/components/Viewer/Generic/Model/LinesOptions.vue
+++ b/app/components/Viewer/Generic/Model/LinesOptions.vue
@@ -60,7 +60,7 @@ const linesActiveColoring = computed({
 const lineActiveColoring = computed({
   get: () => dataStyleStore.modelLineActiveColoring(modelId, lineId),
   set: async (activeColoring) => {
-    await dataStyleStore.setModelComponentActiveColoring(modelId, lineId, activeColoring);
+    await dataStyleStore.setModelLinesActiveColoring(modelId, [lineId], activeColoring);
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/Generic/Model/SurfacesOptions.vue b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
index ebec4984..3d9f2a48 100644
--- a/app/components/Viewer/Generic/Model/SurfacesOptions.vue
+++ b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
@@ -60,7 +60,7 @@ const surfacesActiveColoring = computed({
 const surfaceActiveColoring = computed({
   get: () => dataStyleStore.modelSurfaceActiveColoring(modelId, surfaceId),
   set: async (activeColoring) => {
-    await dataStyleStore.setModelComponentActiveColoring(modelId, surfaceId, activeColoring);
+    await dataStyleStore.setModelSurfacesActiveColoring(modelId, [surfaceId], activeColoring);
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/utils/default_styles/constants.js b/app/utils/default_styles/constants.js
index f27d5a35..09faab98 100644
--- a/app/utils/default_styles/constants.js
+++ b/app/utils/default_styles/constants.js
@@ -1,5 +1,5 @@
 // Mesh
-const MESH_DEFAULT_COLOR_MODE = "constant";
+const MESH_DEFAULT_ACTIVE_COLORING = "constant";
 const POINTS_DEFAULT_VISIBILITY = true;
 const POINTS_DEFAULT_SIZE = 10;
 const POINTS_DEFAULT_COLOR = { red: 20, green: 20, blue: 20, alpha: 1 };
@@ -15,7 +15,7 @@ const POLYHEDRA_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
 
 // Model
 const MODEL_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
-const MODEL_DEFAULT_COLOR_MODE = "constant";
+const MODEL_DEFAULT_ACTIVE_COLORING = "constant";
 
 const CORNERS_DEFAULT_VISIBILITY = true;
 const CORNERS_DEFAULT_COLOR = { red: 20, green: 20, blue: 20, alpha: 1 };
@@ -59,6 +59,6 @@ export {
   MESH_COMPONENT_TYPES,
   DEFAULT_MODEL_COMPONENT_TYPE_COLORS,
   MODEL_DEFAULT_COLOR,
-  MESH_DEFAULT_COLOR_MODE,
-  MODEL_DEFAULT_COLOR_MODE,
+  MESH_DEFAULT_ACTIVE_COLORING,
+  MODEL_DEFAULT_ACTIVE_COLORING,
 };
diff --git a/app/utils/default_styles/index.js b/app/utils/default_styles/index.js
index 0ee3e4ac..4a455d42 100644
--- a/app/utils/default_styles/index.js
+++ b/app/utils/default_styles/index.js
@@ -54,6 +54,6 @@ export {
   MESH_COMPONENT_TYPES,
   DEFAULT_MODEL_COMPONENT_TYPE_COLORS,
   MODEL_DEFAULT_COLOR,
-  MODEL_DEFAULT_COLOR_MODE,
+  MODEL_DEFAULT_ACTIVE_COLORING,
 } from "./constants";
 export { getDefaultStyle };
diff --git a/app/utils/default_styles/meshes.js b/app/utils/default_styles/meshes.js
index ea872092..e0186f4e 100644
--- a/app/utils/default_styles/meshes.js
+++ b/app/utils/default_styles/meshes.js
@@ -4,7 +4,7 @@ import {
   EDGES_DEFAULT_COLOR,
   EDGES_DEFAULT_VISIBILITY,
   EDGES_DEFAULT_WIDTH,
-  MESH_DEFAULT_COLOR_MODE,
+  MESH_DEFAULT_ACTIVE_COLORING,
   POINTS_DEFAULT_COLOR,
   POINTS_DEFAULT_SIZE,
   POINTS_DEFAULT_VISIBILITY,
@@ -22,7 +22,7 @@ function meshPointsDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: MESH_DEFAULT_COLOR_MODE,
+      active: MESH_DEFAULT_ACTIVE_COLORING,
       color,
       vertex: {
         name: undefined,
@@ -41,7 +41,7 @@ function meshEdgesDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: MESH_DEFAULT_COLOR_MODE,
+      active: MESH_DEFAULT_ACTIVE_COLORING,
       color,
       edge: {
         name: undefined,
@@ -60,7 +60,7 @@ function meshCellsDefaultStyle(visibility = CELLS_DEFAULT_VISIBILITY, color = CE
   return {
     visibility,
     coloring: {
-      active: MESH_DEFAULT_COLOR_MODE,
+      active: MESH_DEFAULT_ACTIVE_COLORING,
       cell: {
         name: undefined,
         storedConfigs: {},
@@ -82,7 +82,7 @@ function meshPolygonsDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: MESH_DEFAULT_COLOR_MODE,
+      active: MESH_DEFAULT_ACTIVE_COLORING,
       color,
       textures: undefined,
       polygon: {
@@ -104,7 +104,7 @@ function meshPolyhedraDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: MESH_DEFAULT_COLOR_MODE,
+      active: MESH_DEFAULT_ACTIVE_COLORING,
       color,
       polyhedron: {
         name: undefined,
diff --git a/app/utils/default_styles/models.js b/app/utils/default_styles/models.js
index 33650a73..818c36f8 100644
--- a/app/utils/default_styles/models.js
+++ b/app/utils/default_styles/models.js
@@ -7,8 +7,8 @@ import {
   EDGES_DEFAULT_WIDTH,
   LINES_DEFAULT_COLOR,
   LINES_DEFAULT_VISIBILITY,
+  MODEL_DEFAULT_ACTIVE_COLORING,
   MODEL_DEFAULT_COLOR,
-  MODEL_DEFAULT_COLOR_MODE,
   POINTS_DEFAULT_SIZE,
   POINTS_DEFAULT_VISIBILITY,
   SURFACES_DEFAULT_COLOR,
@@ -120,7 +120,7 @@ function brepDefaultStyle() {
   return {
     visibility: true,
     coloring: {
-      active: MODEL_DEFAULT_COLOR_MODE,
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
       constant: MODEL_DEFAULT_COLOR,
     },
     corners: modelCornersDefaultStyle(),
@@ -136,7 +136,7 @@ function crossSectionDefaultStyle() {
   return {
     visibility: true,
     coloring: {
-      active: MODEL_DEFAULT_COLOR_MODE,
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
       constant: MODEL_DEFAULT_COLOR,
     },
     corners: modelCornersDefaultStyle(),
@@ -151,7 +151,7 @@ function structuralModelDefaultStyle() {
   return {
     visibility: true,
     coloring: {
-      active: MODEL_DEFAULT_COLOR_MODE,
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
       constant: MODEL_DEFAULT_COLOR,
     },
     corners: modelCornersDefaultStyle(),
@@ -167,7 +167,7 @@ function sectionDefaultStyle() {
   return {
     visibility: true,
     coloring: {
-      active: MODEL_DEFAULT_COLOR_MODE,
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
       constant: MODEL_DEFAULT_COLOR,
     },
     corners: modelCornersDefaultStyle(),
@@ -182,7 +182,7 @@ function implicitCrossSectionDefaultStyle() {
   return {
     visibility: true,
     coloring: {
-      active: MODEL_DEFAULT_COLOR_MODE,
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
       constant: MODEL_DEFAULT_COLOR,
     },
     corners: modelCornersDefaultStyle(),
@@ -197,7 +197,7 @@ function implicitStructuralModelDefaultStyle() {
   return {
     visibility: true,
     coloring: {
-      active: MODEL_DEFAULT_COLOR_MODE,
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
       constant: MODEL_DEFAULT_COLOR,
     },
     corners: modelCornersDefaultStyle(),
diff --git a/internal/stores/data_style/mesh/cells/index.js b/internal/stores/data_style/mesh/cells/index.js
index d5f0bfd2..6630cf96 100644
--- a/internal/stores/data_style/mesh/cells/index.js
+++ b/internal/stores/data_style/mesh/cells/index.js
@@ -36,23 +36,14 @@ export function useMeshCellsStyle() {
     }
     if (type === "textures") {
       const textures = meshCellsTexturesStore.meshCellsTextures(id);
-      if (textures === undefined) {
-        return;
-      }
       return meshCellsTexturesStore.setMeshCellsTextures(id, textures);
     }
     if (type === "vertex") {
       const name = meshCellsVertexAttributeStyle.meshCellsVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshCellsVertexAttributeStyle.setMeshCellsVertexAttributeName(id, name);
     }
     if (type === "cell") {
       const name = meshCellsCellAttributeStyle.meshCellsCellAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshCellsCellAttributeStyle.setMeshCellsCellAttributeName(id, name);
     }
     throw new Error(`Unknown mesh cells coloring type: ${type}`);
diff --git a/internal/stores/data_style/mesh/edges/index.js b/internal/stores/data_style/mesh/edges/index.js
index b4481796..969dc769 100644
--- a/internal/stores/data_style/mesh/edges/index.js
+++ b/internal/stores/data_style/mesh/edges/index.js
@@ -35,16 +35,10 @@ export function useMeshEdgesStyle() {
     }
     if (type === "vertex") {
       const name = meshEdgesVertexAttributeStyle.meshEdgesVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshEdgesVertexAttributeStyle.setMeshEdgesVertexAttributeName(id, name);
     }
     if (type === "edge") {
       const name = meshEdgesEdgeAttributeStyle.meshEdgesEdgeAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshEdgesEdgeAttributeStyle.setMeshEdgesEdgeAttributeName(id, name);
     }
     throw new Error(`Unknown mesh edges coloring type: ${type}`);
diff --git a/internal/stores/data_style/mesh/points/index.js b/internal/stores/data_style/mesh/points/index.js
index 1a0279b3..11e0bdc8 100644
--- a/internal/stores/data_style/mesh/points/index.js
+++ b/internal/stores/data_style/mesh/points/index.js
@@ -30,9 +30,6 @@ function useMeshPointsColoringStyle() {
       return meshPointsColorStyle.setMeshPointsColor(id, meshPointsColorStyle.meshPointsColor(id));
     } else if (type === "vertex") {
       const name = meshPointsVertexAttributeStyle.meshPointsVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPointsVertexAttributeStyle.setMeshPointsVertexAttributeName(id, name);
     }
     throw new Error(`Unknown mesh points coloring type: ${type}`);
diff --git a/internal/stores/data_style/mesh/polygons/index.js b/internal/stores/data_style/mesh/polygons/index.js
index 917a2367..1a81c52b 100644
--- a/internal/stores/data_style/mesh/polygons/index.js
+++ b/internal/stores/data_style/mesh/polygons/index.js
@@ -36,21 +36,12 @@ function useMeshPolygonsColoringStyle() {
       );
     } else if (type === "textures") {
       const textures = meshPolygonsTexturesStyle.meshPolygonsTextures(id);
-      if (textures === undefined) {
-        return;
-      }
       return meshPolygonsTexturesStyle.setMeshPolygonsTextures(id, textures);
     } else if (type === "vertex") {
       const name = meshPolygonsVertexAttributeStyle.meshPolygonsVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPolygonsVertexAttributeStyle.setMeshPolygonsVertexAttributeName(id, name);
     } else if (type === "polygon") {
       const name = meshPolygonsPolygonAttributeStyle.meshPolygonsPolygonAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPolygonsPolygonAttributeStyle.setMeshPolygonsPolygonAttributeName(id, name);
     }
     throw new Error(`Unknown mesh polygons coloring type: ${type}`);
diff --git a/internal/stores/data_style/mesh/polyhedra/index.js b/internal/stores/data_style/mesh/polyhedra/index.js
index 16025495..e3c0d258 100644
--- a/internal/stores/data_style/mesh/polyhedra/index.js
+++ b/internal/stores/data_style/mesh/polyhedra/index.js
@@ -38,16 +38,10 @@ export function useMeshPolyhedraStyle() {
     }
     if (type === "vertex") {
       const name = meshPolyhedraVertexAttributeStyle.meshPolyhedraVertexAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPolyhedraVertexAttributeStyle.setMeshPolyhedraVertexAttributeName(id, name);
     }
     if (type === "polyhedron") {
       const name = meshPolyhedraPolyhedronAttributeStyle.meshPolyhedraPolyhedronAttributeName(id);
-      if (name === undefined) {
-        return;
-      }
       return meshPolyhedraPolyhedronAttributeStyle.setMeshPolyhedraPolyhedronAttributeName(
         id,
         name,
diff --git a/internal/stores/data_style/model/blocks/color.js b/internal/stores/data_style/model/blocks/color.js
index 5229627f..4aecb0e2 100644
--- a/internal/stores/data_style/model/blocks/color.js
+++ b/internal/stores/data_style/model/blocks/color.js
@@ -1,4 +1,6 @@
 import { useModelBlocksCommonStyle } from "./common";
+import { useModelBlocksPolyhedronAttribute } from "./polyhedron";
+import { useModelBlocksVertexAttribute } from "./vertex";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
@@ -7,18 +9,96 @@ const schema = viewer_schemas.opengeodeweb_viewer.model.blocks.color;
 export function useModelBlocksColor() {
   const modelCommonStyle = useModelCommonStyle();
   const modelBlocksCommonStyle = useModelBlocksCommonStyle();
+  const modelBlocksVertexAttribute = useModelBlocksVertexAttribute();
+  const modelBlocksPolyhedronAttribute = useModelBlocksPolyhedronAttribute();
+
+  function modelBlockColoring(id, block_id) {
+    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).coloring;
+  }
 
   function modelBlockColor(id, block_id) {
-    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).coloring.constant;
+    return modelBlockColoring(id, block_id).constant;
   }
 
-  function setModelBlocksColor(modelId, blocks_ids, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, blocks_ids, color, schema, color_mode);
+  function setModelBlocksColor(modelId, blocks_ids, color, activeColoring = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, blocks_ids, color, schema, activeColoring);
   }
 
   function modelBlockActiveColoring(id, block_id) {
-    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).coloring.active;
+    return modelBlockColoring(id, block_id).active;
+  }
+
+  async function setModelBlocksActiveColoring(modelId, blocks_ids, activeColoring) {
+    await modelCommonStyle.mutateComponentStyles(modelId, blocks_ids, {
+      coloring: { active: activeColoring },
+    });
+    if (activeColoring === "constant" || activeColoring === "random") {
+      const color = modelBlockColor(modelId, blocks_ids[0]);
+      return setModelBlocksColor(modelId, blocks_ids, color, activeColoring);
+    }
+
+    if (activeColoring === "vertex") {
+      const name = modelBlocksVertexAttribute.modelBlocksVertexAttributeName(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksVertexAttribute.setModelBlocksVertexAttributeName(modelId, blocks_ids, name);
+      const [min, max] = modelBlocksVertexAttribute.modelBlocksVertexAttributeRange(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksVertexAttribute.setModelBlocksVertexAttributeRange(
+        modelId,
+        blocks_ids,
+        min,
+        max,
+      );
+      const colorMap = modelBlocksVertexAttribute.modelBlocksVertexAttributeColorMap(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksVertexAttribute.setModelBlocksVertexAttributeColorMap(
+        modelId,
+        blocks_ids,
+        colorMap,
+      );
+    } else if (activeColoring === "polyhedron") {
+      const name = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeName(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttributeName(
+        modelId,
+        blocks_ids,
+        name,
+      );
+      const [min, max] = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeRange(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttributeRange(
+        modelId,
+        blocks_ids,
+        min,
+        max,
+      );
+      const colorMap = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeColorMap(
+        modelId,
+        blocks_ids[0],
+      );
+      await modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttributeColorMap(
+        modelId,
+        blocks_ids,
+        colorMap,
+      );
+    }
   }
 
-  return { setModelBlocksColor, modelBlockColor, modelBlockActiveColoring };
+  return {
+    setModelBlocksColor,
+    modelBlockColoring,
+    modelBlockColor,
+    modelBlockActiveColoring,
+    setModelBlocksActiveColoring,
+  };
 }
diff --git a/internal/stores/data_style/model/blocks/index.js b/internal/stores/data_style/model/blocks/index.js
index 99ce327d..b0644c83 100644
--- a/internal/stores/data_style/model/blocks/index.js
+++ b/internal/stores/data_style/model/blocks/index.js
@@ -36,33 +36,36 @@ export function useModelBlocksStyle() {
       }
       visibilityGroups[visibility].push(block_id);
 
-      const color_mode = style.coloring.active;
-      if (color_mode === "constant" || color_mode === "random") {
-        const color = style.coloring.constant;
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(color);
+      const coloring = modelColorStyle.modelBlockColoring(modelId, block_id);
+      const activeColoring = coloring.active;
+      if (activeColoring === "constant") {
+        const color = coloring.constant;
+        const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color, blocks_ids: [] };
+          colorGroups[color_key] = { activeColoring, color, blocks_ids: [] };
         }
         colorGroups[color_key].blocks_ids.push(block_id);
+      } else if (activeColoring === "random") {
+        if (!colorGroups["random"]) {
+          colorGroups["random"] = { activeColoring, color: undefined, blocks_ids: [] };
+        }
+        colorGroups["random"].blocks_ids.push(block_id);
       } else {
-        const attributeStyle = style.coloring[color_mode];
+        const attributeStyle = coloring[activeColoring];
         const { name } = attributeStyle;
-        if (name) {
-          const storedConfig = 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,
-              blocks_ids: [],
-            };
-          }
-          attributeGroups[attributeGroupKey].blocks_ids.push(block_id);
+        const { minimum, maximum, colorMap } = attributeStyle.storedConfigs[name];
+        const attributeGroupKey = `${activeColoring}_${name}_${colorMap}_${minimum}_${maximum}`;
+        if (!attributeGroups[attributeGroupKey]) {
+          attributeGroups[attributeGroupKey] = {
+            activeColoring,
+            name,
+            minimum,
+            maximum,
+            colorMap,
+            blocks_ids: [],
+          };
         }
+        attributeGroups[attributeGroupKey].blocks_ids.push(block_id);
       }
     }
 
@@ -70,12 +73,12 @@ export function useModelBlocksStyle() {
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         modelVisibilityStyle.setModelBlocksVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, blocks_ids: ids }) =>
-        modelColorStyle.setModelBlocksColor(modelId, ids, color, color_mode),
+      ...Object.values(colorGroups).map(({ activeColoring, color, blocks_ids: ids }) =>
+        modelColorStyle.setModelBlocksColor(modelId, ids, color, activeColoring),
       ),
       ...Object.values(attributeGroups).flatMap(
-        ({ color_mode, name, minimum, maximum, colorMap, blocks_ids: ids }) => {
-          const isVertex = color_mode === "vertex";
+        ({ activeColoring, name, minimum, maximum, colorMap, blocks_ids: ids }) => {
+          const isVertex = activeColoring === "vertex";
           const attributeStyle = isVertex
             ? modelBlocksVertexAttribute
             : modelBlocksPolyhedronAttribute;
diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index 3e2566f8..740f20c7 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -121,25 +121,25 @@ function useModelColorStyle(componentStyleFunctions) {
     await setModelComponentsColor(modelId, idsForType, color);
   }
 
-  async function setModelComponentTypeActiveColoring(modelId, type, color_mode) {
+  async function setModelComponentTypeActiveColoring(modelId, type, activeColoring) {
     await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, {
-      coloring: { active: color_mode },
+      coloring: { active: activeColoring },
     });
     const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
     if (idsForType.length === 0) {
       return;
     }
 
-    if (color_mode === "random" || color_mode === "constant") {
-      await setModelComponentsColor(modelId, idsForType, undefined, color_mode);
+    if (activeColoring === "random" || activeColoring === "constant") {
+      await setModelComponentsColor(modelId, idsForType, undefined, activeColoring);
       return;
     }
 
     await modelCommonStyle.mutateComponentStyles(modelId, idsForType, {
-      coloring: { active: color_mode },
+      coloring: { active: activeColoring },
     });
     const { getName, setName, getRange, setRange, getColorMap, setColorMap } =
-      ATTRIBUTE_FUNCTIONS[type][color_mode];
+      ATTRIBUTE_FUNCTIONS[type][activeColoring];
 
     const name = getName(modelId, idsForType[0]);
     if (name) {
@@ -155,18 +155,18 @@ function useModelColorStyle(componentStyleFunctions) {
     }
   }
 
-  async function setModelComponentActiveColoring(modelId, componentId, color_mode) {
+  async function setModelComponentActiveColoring(modelId, componentId, activeColoring) {
     await modelCommonStyle.mutateComponentStyle(modelId, componentId, {
-      coloring: { active: color_mode },
+      coloring: { active: activeColoring },
     });
-    if (color_mode === "random" || color_mode === "constant") {
-      await setModelComponentsColor(modelId, [componentId], undefined, color_mode);
+    if (activeColoring === "random" || activeColoring === "constant") {
+      await setModelComponentsColor(modelId, [componentId], undefined, activeColoring);
       return;
     }
 
     const type = await dataStore.meshComponentType(modelId, componentId);
     const { getName, setName, getRange, setRange, getColorMap, setColorMap } =
-      ATTRIBUTE_FUNCTIONS[type][color_mode];
+      ATTRIBUTE_FUNCTIONS[type][activeColoring];
 
     const name = getName(modelId, componentId);
     if (name) {
@@ -182,11 +182,11 @@ function useModelColorStyle(componentStyleFunctions) {
     }
   }
 
-  async function setModelComponentsColor(modelId, componentIds, color, color_mode = "constant") {
+  async function setModelComponentsColor(modelId, componentIds, color, activeColoring = "constant") {
     await modelCommonStyle.mutateComponentStyles(modelId, componentIds, {
       coloring: {
         constant: color,
-        active: color_mode,
+        active: activeColoring,
       },
     });
     return await dispatchToComponentTypes(
@@ -195,7 +195,7 @@ function useModelColorStyle(componentStyleFunctions) {
       "Color",
       { componentStyleFunctions },
       color,
-      color_mode,
+      activeColoring,
     );
   }
 
diff --git a/internal/stores/data_style/model/common.js b/internal/stores/data_style/model/common.js
index ab5770bd..cbd15dc1 100644
--- a/internal/stores/data_style/model/common.js
+++ b/internal/stores/data_style/model/common.js
@@ -59,7 +59,7 @@ export function useModelCommonStyle() {
     });
   }
 
-  async function setModelTypeColor(id, component_ids, color, schema, color_mode = "constant") {
+  async function setModelTypeColor(id, component_ids, color, schema, activeColoring = "constant") {
     if (!component_ids?.length) {
       return;
     }
@@ -69,7 +69,7 @@ export function useModelCommonStyle() {
       return;
     }
 
-    if (color_mode === "constant" && color !== undefined) {
+    if (activeColoring === "constant") {
       await mutateComponentStyles(id, component_ids, {
         coloring: {
           constant: color,
@@ -77,8 +77,8 @@ export function useModelCommonStyle() {
       });
     }
 
-    const params = { id, block_ids: viewer_ids, color_mode };
-    if (color_mode === "constant" && color !== undefined) {
+    const params = { id, block_ids: viewer_ids, color_mode: activeColoring };
+    if (activeColoring === "constant") {
       params.color = color;
     }
 
@@ -86,7 +86,7 @@ export function useModelCommonStyle() {
       { schema, params },
       {
         response_function: async (colors) => {
-          if (color_mode === "constant" && color !== undefined) {
+          if (activeColoring === "constant") {
             await mutateComponentStyles(id, component_ids, {
               coloring: {
                 constant: color,
diff --git a/internal/stores/data_style/model/corners/color.js b/internal/stores/data_style/model/corners/color.js
index ef013e96..35d57ce4 100644
--- a/internal/stores/data_style/model/corners/color.js
+++ b/internal/stores/data_style/model/corners/color.js
@@ -1,5 +1,6 @@
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelCornersCommonStyle } from "./common";
+import { useModelCornersVertexAttribute } from "./vertex";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.corners.color;
@@ -7,18 +8,70 @@ const schema = viewer_schemas.opengeodeweb_viewer.model.corners.color;
 export function useModelCornersColor() {
   const modelCommonStyle = useModelCommonStyle();
   const modelCornersCommonStyle = useModelCornersCommonStyle();
+  const modelCornersVertexAttribute = useModelCornersVertexAttribute();
+
+  function modelCornerColoring(id, corner_id) {
+    return modelCornersCommonStyle.modelCornerStyle(id, corner_id).coloring;
+  }
 
   function modelCornerColor(id, corner_id) {
-    return modelCornersCommonStyle.modelCornerStyle(id, corner_id).coloring.constant;
+    return modelCornerColoring(id, corner_id).constant;
   }
 
-  function setModelCornersColor(modelId, corners_ids, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, corners_ids, color, schema, color_mode);
+  function setModelCornersColor(modelId, corners_ids, color, activeColoring = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, corners_ids, color, schema, activeColoring);
   }
 
   function modelCornerActiveColoring(id, corner_id) {
-    return modelCornersCommonStyle.modelCornerStyle(id, corner_id).coloring.active;
+    return modelCornerColoring(id, corner_id).active;
+  }
+
+  async function setModelCornersActiveColoring(modelId, corners_ids, activeColoring) {
+    await modelCommonStyle.mutateComponentStyles(modelId, corners_ids, {
+      coloring: { active: activeColoring },
+    });
+    if (activeColoring === "constant" || activeColoring === "random") {
+      const color = modelCornerColor(modelId, corners_ids[0]);
+      return setModelCornersColor(modelId, corners_ids, color, activeColoring);
+    }
+
+    if (activeColoring === "vertex") {
+      const name = modelCornersVertexAttribute.modelCornersVertexAttributeName(
+        modelId,
+        corners_ids[0],
+      );
+      await modelCornersVertexAttribute.setModelCornersVertexAttributeName(
+        modelId,
+        corners_ids,
+        name,
+      );
+      const [min, max] = modelCornersVertexAttribute.modelCornersVertexAttributeRange(
+        modelId,
+        corners_ids[0],
+      );
+      await modelCornersVertexAttribute.setModelCornersVertexAttributeRange(
+        modelId,
+        corners_ids,
+        min,
+        max,
+      );
+      const colorMap = modelCornersVertexAttribute.modelCornersVertexAttributeColorMap(
+        modelId,
+        corners_ids[0],
+      );
+      await modelCornersVertexAttribute.setModelCornersVertexAttributeColorMap(
+        modelId,
+        corners_ids,
+        colorMap,
+      );
+    }
   }
 
-  return { setModelCornersColor, modelCornerColor, modelCornerActiveColoring };
+  return {
+    setModelCornersColor,
+    modelCornerColoring,
+    modelCornerColor,
+    modelCornerActiveColoring,
+    setModelCornersActiveColoring,
+  };
 }
diff --git a/internal/stores/data_style/model/corners/index.js b/internal/stores/data_style/model/corners/index.js
index 3279ca73..8f002874 100644
--- a/internal/stores/data_style/model/corners/index.js
+++ b/internal/stores/data_style/model/corners/index.js
@@ -34,33 +34,36 @@ export function useModelCornersStyle() {
       }
       visibilityGroups[visibility].push(corner_id);
 
-      const color_mode = style.coloring.active;
-      if (color_mode === "constant" || color_mode === "random") {
-        const color = style.coloring.constant;
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(color);
+      const coloring = modelColorStyle.modelCornerColoring(modelId, corner_id);
+      const activeColoring = coloring.active;
+      if (activeColoring === "constant") {
+        const color = coloring.constant;
+        const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color, corners_ids: [] };
+          colorGroups[color_key] = { activeColoring, color, corners_ids: [] };
         }
         colorGroups[color_key].corners_ids.push(corner_id);
+      } else if (activeColoring === "random") {
+        if (!colorGroups["random"]) {
+          colorGroups["random"] = { activeColoring, color: undefined, corners_ids: [] };
+        }
+        colorGroups["random"].corners_ids.push(corner_id);
       } else {
-        const attributeStyle = style.coloring[color_mode];
+        const attributeStyle = coloring[activeColoring];
         const { name } = attributeStyle;
-        if (name) {
-          const storedConfig = 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);
+        const { minimum, maximum, colorMap } = attributeStyle.storedConfigs[name];
+        const attributeGroupKey = `${activeColoring}_${name}_${colorMap}_${minimum}_${maximum}`;
+        if (!attributeGroups[attributeGroupKey]) {
+          attributeGroups[attributeGroupKey] = {
+            activeColoring,
+            name,
+            minimum,
+            maximum,
+            colorMap,
+            corners_ids: [],
+          };
         }
+        attributeGroups[attributeGroupKey].corners_ids.push(corner_id);
       }
     }
 
@@ -68,8 +71,8 @@ export function useModelCornersStyle() {
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         modelVisibilityStyle.setModelCornersVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, corners_ids: ids }) =>
-        modelColorStyle.setModelCornersColor(modelId, ids, color, color_mode),
+      ...Object.values(colorGroups).map(({ activeColoring, color, corners_ids: ids }) =>
+        modelColorStyle.setModelCornersColor(modelId, ids, color, activeColoring),
       ),
       ...Object.values(attributeGroups).flatMap(
         ({ name, minimum, maximum, colorMap, corners_ids: ids }) => {
diff --git a/internal/stores/data_style/model/lines/color.js b/internal/stores/data_style/model/lines/color.js
index 351903b8..5332a512 100644
--- a/internal/stores/data_style/model/lines/color.js
+++ b/internal/stores/data_style/model/lines/color.js
@@ -1,5 +1,7 @@
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelLinesCommonStyle } from "./common";
+import { useModelLinesEdgeAttribute } from "./edge";
+import { useModelLinesVertexAttribute } from "./vertex";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.lines.color;
@@ -7,18 +9,81 @@ const schema = viewer_schemas.opengeodeweb_viewer.model.lines.color;
 export function useModelLinesColor() {
   const modelCommonStyle = useModelCommonStyle();
   const modelLinesCommonStyle = useModelLinesCommonStyle();
+  const modelLinesVertexAttribute = useModelLinesVertexAttribute();
+  const modelLinesEdgeAttribute = useModelLinesEdgeAttribute();
+
+  function modelLineColoring(id, line_id) {
+    return modelLinesCommonStyle.modelLineStyle(id, line_id).coloring;
+  }
 
   function modelLineColor(id, line_id) {
-    return modelLinesCommonStyle.modelLineStyle(id, line_id).coloring.constant;
+    return modelLineColoring(id, line_id).constant;
   }
 
-  function setModelLinesColor(modelId, lines_ids, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, lines_ids, color, schema, color_mode);
+  function setModelLinesColor(modelId, lines_ids, color, activeColoring = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, lines_ids, color, schema, activeColoring);
   }
 
   function modelLineActiveColoring(id, line_id) {
-    return modelLinesCommonStyle.modelLineStyle(id, line_id).coloring.active;
+    return modelLineColoring(id, line_id).active;
+  }
+
+  async function setModelLinesActiveColoring(modelId, lines_ids, activeColoring) {
+    await modelCommonStyle.mutateComponentStyles(modelId, lines_ids, {
+      coloring: { active: activeColoring },
+    });
+    if (activeColoring === "constant" || activeColoring === "random") {
+      const color = modelLineColor(modelId, lines_ids[0]);
+      return setModelLinesColor(modelId, lines_ids, color, activeColoring);
+    }
+
+    if (activeColoring === "vertex") {
+      const name = modelLinesVertexAttribute.modelLinesVertexAttributeName(modelId, lines_ids[0]);
+      await modelLinesVertexAttribute.setModelLinesVertexAttributeName(modelId, lines_ids, name);
+      const [min, max] = modelLinesVertexAttribute.modelLinesVertexAttributeRange(
+        modelId,
+        lines_ids[0],
+      );
+      await modelLinesVertexAttribute.setModelLinesVertexAttributeRange(
+        modelId,
+        lines_ids,
+        min,
+        max,
+      );
+      const colorMap = modelLinesVertexAttribute.modelLinesVertexAttributeColorMap(
+        modelId,
+        lines_ids[0],
+      );
+      await modelLinesVertexAttribute.setModelLinesVertexAttributeColorMap(
+        modelId,
+        lines_ids,
+        colorMap,
+      );
+    } else if (activeColoring === "edge") {
+      const name = modelLinesEdgeAttribute.modelLinesEdgeAttributeName(modelId, lines_ids[0]);
+      await modelLinesEdgeAttribute.setModelLinesEdgeAttributeName(modelId, lines_ids, name);
+      const [min, max] = modelLinesEdgeAttribute.modelLinesEdgeAttributeRange(
+        modelId,
+        lines_ids[0],
+      );
+      await modelLinesEdgeAttribute.setModelLinesEdgeAttributeRange(modelId, lines_ids, min, max);
+      const colorMap = modelLinesEdgeAttribute.modelLinesEdgeAttributeColorMap(
+        modelId,
+        lines_ids[0],
+      );
+      await modelLinesEdgeAttribute.setModelLinesEdgeAttributeColorMap(
+        modelId,
+        lines_ids,
+        colorMap,
+      );
+    }
   }
 
-  return { setModelLinesColor, modelLineColor, modelLineActiveColoring };
+  return {
+    setModelLinesColor,
+    modelLineColoring,
+    modelLineColor,
+    modelLineActiveColoring,
+    setModelLinesActiveColoring,
+  };
 }
diff --git a/internal/stores/data_style/model/lines/index.js b/internal/stores/data_style/model/lines/index.js
index a8d445c4..0dcb5d1c 100644
--- a/internal/stores/data_style/model/lines/index.js
+++ b/internal/stores/data_style/model/lines/index.js
@@ -36,33 +36,36 @@ export function useModelLinesStyle() {
       }
       visibilityGroups[visibility].push(line_id);
 
-      const color_mode = style.coloring.active;
-      if (color_mode === "constant" || color_mode === "random") {
-        const color = style.coloring.constant;
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(color);
+      const coloring = modelColorStyle.modelLineColoring(modelId, line_id);
+      const activeColoring = coloring.active;
+      if (activeColoring === "constant") {
+        const color = coloring.constant;
+        const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color, lines_ids: [] };
+          colorGroups[color_key] = { activeColoring, color, lines_ids: [] };
         }
         colorGroups[color_key].lines_ids.push(line_id);
+      } else if (activeColoring === "random") {
+        if (!colorGroups["random"]) {
+          colorGroups["random"] = { activeColoring, color: undefined, lines_ids: [] };
+        }
+        colorGroups["random"].lines_ids.push(line_id);
       } else {
-        const attributeStyle = style.coloring[color_mode];
+        const attributeStyle = coloring[activeColoring];
         const { name } = attributeStyle;
-        if (name) {
-          const storedConfig = 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,
-              lines_ids: [],
-            };
-          }
-          attributeGroups[attributeGroupKey].lines_ids.push(line_id);
+        const { minimum, maximum, colorMap } = attributeStyle.storedConfigs[name];
+        const attributeGroupKey = `${activeColoring}_${name}_${colorMap}_${minimum}_${maximum}`;
+        if (!attributeGroups[attributeGroupKey]) {
+          attributeGroups[attributeGroupKey] = {
+            activeColoring,
+            name,
+            minimum,
+            maximum,
+            colorMap,
+            lines_ids: [],
+          };
         }
+        attributeGroups[attributeGroupKey].lines_ids.push(line_id);
       }
     }
 
@@ -70,12 +73,12 @@ export function useModelLinesStyle() {
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         modelVisibilityStyle.setModelLinesVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, lines_ids: ids }) =>
-        modelColorStyle.setModelLinesColor(modelId, ids, color, color_mode),
+      ...Object.values(colorGroups).map(({ activeColoring, color, lines_ids: ids }) =>
+        modelColorStyle.setModelLinesColor(modelId, ids, color, activeColoring),
       ),
       ...Object.values(attributeGroups).flatMap(
-        ({ color_mode, name, minimum, maximum, colorMap, lines_ids: ids }) => {
-          const isVertex = color_mode === "vertex";
+        ({ activeColoring, name, minimum, maximum, colorMap, lines_ids: ids }) => {
+          const isVertex = activeColoring === "vertex";
           const attributeStyle = isVertex ? modelLinesVertexAttribute : modelLinesEdgeAttribute;
           const setAttributeName = isVertex
             ? attributeStyle.setModelLinesVertexAttributeName
diff --git a/internal/stores/data_style/model/surfaces/color.js b/internal/stores/data_style/model/surfaces/color.js
index c3474487..c7716235 100644
--- a/internal/stores/data_style/model/surfaces/color.js
+++ b/internal/stores/data_style/model/surfaces/color.js
@@ -1,5 +1,7 @@
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelSurfacesCommonStyle } from "./common";
+import { useModelSurfacesPolygonAttribute } from "./polygon";
+import { useModelSurfacesVertexAttribute } from "./vertex";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.surfaces.color;
@@ -7,22 +9,100 @@ const schema = viewer_schemas.opengeodeweb_viewer.model.surfaces.color;
 export function useModelSurfacesColor() {
   const modelCommonStyle = useModelCommonStyle();
   const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
+  const modelSurfacesVertexAttribute = useModelSurfacesVertexAttribute();
+  const modelSurfacesPolygonAttribute = useModelSurfacesPolygonAttribute();
+
+  function modelSurfaceColoring(id, surface_id) {
+    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).coloring;
+  }
 
   function modelSurfaceColor(id, surface_id) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).coloring.constant;
+    return modelSurfaceColoring(id, surface_id).constant;
   }
 
-  function setModelSurfacesColor(modelId, surfaces_ids, color, color_mode = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, surfaces_ids, color, schema, color_mode);
+  function setModelSurfacesColor(modelId, surfaces_ids, color, activeColoring = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, surfaces_ids, color, schema, activeColoring);
   }
 
   function modelSurfaceActiveColoring(id, surface_id) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).coloring.active;
+    return modelSurfaceColoring(id, surface_id).active;
+  }
+
+  async function setModelSurfacesActiveColoring(modelId, surfaces_ids, activeColoring) {
+    await modelCommonStyle.mutateComponentStyles(modelId, surfaces_ids, {
+      coloring: { active: activeColoring },
+    });
+    if (activeColoring === "constant" || activeColoring === "random") {
+      const color = modelSurfaceColor(modelId, surfaces_ids[0]);
+      return setModelSurfacesColor(modelId, surfaces_ids, color, activeColoring);
+    }
+
+    if (activeColoring === "vertex") {
+      const name = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeName(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesVertexAttribute.setModelSurfacesVertexAttributeName(
+        modelId,
+        surfaces_ids,
+        name,
+      );
+      const [min, max] = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeRange(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesVertexAttribute.setModelSurfacesVertexAttributeRange(
+        modelId,
+        surfaces_ids,
+        min,
+        max,
+      );
+      const colorMap = modelSurfacesVertexAttribute.modelSurfacesVertexAttributeColorMap(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesVertexAttribute.setModelSurfacesVertexAttributeColorMap(
+        modelId,
+        surfaces_ids,
+        colorMap,
+      );
+    } else if (activeColoring === "polygon") {
+      const name = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeName(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesPolygonAttribute.setModelSurfacesPolygonAttributeName(
+        modelId,
+        surfaces_ids,
+        name,
+      );
+      const [min, max] = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeRange(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesPolygonAttribute.setModelSurfacesPolygonAttributeRange(
+        modelId,
+        surfaces_ids,
+        min,
+        max,
+      );
+      const colorMap = modelSurfacesPolygonAttribute.modelSurfacesPolygonAttributeColorMap(
+        modelId,
+        surfaces_ids[0],
+      );
+      await modelSurfacesPolygonAttribute.setModelSurfacesPolygonAttributeColorMap(
+        modelId,
+        surfaces_ids,
+        colorMap,
+      );
+    }
   }
 
   return {
     setModelSurfacesColor,
+    modelSurfaceColoring,
     modelSurfaceColor,
     modelSurfaceActiveColoring,
+    setModelSurfacesActiveColoring,
   };
 }
diff --git a/internal/stores/data_style/model/surfaces/index.js b/internal/stores/data_style/model/surfaces/index.js
index cf035587..fab65317 100644
--- a/internal/stores/data_style/model/surfaces/index.js
+++ b/internal/stores/data_style/model/surfaces/index.js
@@ -36,33 +36,36 @@ export function useModelSurfacesStyle() {
       }
       visibilityGroups[visibility].push(surfaces_id);
 
-      const color_mode = style.coloring.active;
-      if (color_mode === "constant" || color_mode === "random") {
-        const color = style.coloring.constant;
-        const color_key = color_mode === "random" ? "random" : JSON.stringify(color);
+      const coloring = modelColorStyle.modelSurfaceColoring(modelId, surfaces_id);
+      const activeColoring = coloring.active;
+      if (activeColoring === "constant") {
+        const color = coloring.constant;
+        const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
-          colorGroups[color_key] = { color_mode, color, surfaces_ids: [] };
+          colorGroups[color_key] = { activeColoring, color, surfaces_ids: [] };
         }
         colorGroups[color_key].surfaces_ids.push(surfaces_id);
+      } else if (activeColoring === "random") {
+        if (!colorGroups["random"]) {
+          colorGroups["random"] = { activeColoring, color: undefined, surfaces_ids: [] };
+        }
+        colorGroups["random"].surfaces_ids.push(surfaces_id);
       } else {
-        const attributeStyle = style.coloring[color_mode];
+        const attributeStyle = coloring[activeColoring];
         const { name } = attributeStyle;
-        if (name) {
-          const storedConfig = 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,
-              surfaces_ids: [],
-            };
-          }
-          attributeGroups[attributeGroupKey].surfaces_ids.push(surfaces_id);
+        const { minimum, maximum, colorMap } = attributeStyle.storedConfigs[name];
+        const attributeGroupKey = `${activeColoring}_${name}_${colorMap}_${minimum}_${maximum}`;
+        if (!attributeGroups[attributeGroupKey]) {
+          attributeGroups[attributeGroupKey] = {
+            activeColoring,
+            name,
+            minimum,
+            maximum,
+            colorMap,
+            surfaces_ids: [],
+          };
         }
+        attributeGroups[attributeGroupKey].surfaces_ids.push(surfaces_id);
       }
     }
 
@@ -70,12 +73,12 @@ export function useModelSurfacesStyle() {
       ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
         modelVisibilityStyle.setModelSurfacesVisibility(modelId, ids, visibility === "true"),
       ),
-      ...Object.values(colorGroups).map(({ color_mode, color, surfaces_ids: ids }) =>
-        modelColorStyle.setModelSurfacesColor(modelId, ids, color, color_mode),
+      ...Object.values(colorGroups).map(({ activeColoring, color, surfaces_ids: ids }) =>
+        modelColorStyle.setModelSurfacesColor(modelId, ids, color, activeColoring),
       ),
       ...Object.values(attributeGroups).flatMap(
-        ({ color_mode, name, minimum, maximum, colorMap, surfaces_ids: ids }) => {
-          const isVertex = color_mode === "vertex";
+        ({ activeColoring, name, minimum, maximum, colorMap, surfaces_ids: ids }) => {
+          const isVertex = activeColoring === "vertex";
           const attributeStyle = isVertex
             ? modelSurfacesVertexAttribute
             : modelSurfacesPolygonAttribute;
diff --git a/tests/integration/stores/data_style/model/index.nuxt.test.js b/tests/integration/stores/data_style/model/index.nuxt.test.js
index 7a2eed83..d2d81a9c 100644
--- a/tests/integration/stores/data_style/model/index.nuxt.test.js
+++ b/tests/integration/stores/data_style/model/index.nuxt.test.js
@@ -72,7 +72,9 @@ describe("model", () => {
       const green = { red: 0, green: 255, blue: 0, alpha: 1 };
       const blue = { red: 0, green: 0, blue: 255, alpha: 1 };
 
-      await dataStyleStore.mutateStyle(id, { color: red, color_mode: "constant" });
+      await dataStyleStore.mutateStyle(id, {
+        coloring: { constant: red, active: "constant" },
+      });
       await dataStyleStore.setModelComponentsColor(id, surface_ids, red);
       await sleep(SLEEP_MS);
 
@@ -82,7 +84,7 @@ describe("model", () => {
       await dataStyleStore.setModelSurfacesColor(id, [surface_id], blue);
       await sleep(SLEEP_MS);
 
-      expect(dataStyleStore.getStyle(id).color).toStrictEqual(red);
+      expect(dataStyleStore.getModelColor(id)).toStrictEqual(red);
       expect(dataStyleStore.modelComponentTypeColor(id, "Surface")).toStrictEqual(green);
       expect(dataStyleStore.modelSurfaceColor(id, surface_id)).toStrictEqual(blue);
     });

From bfe6a859f37723d136f17dffb7777ef288a5a1c5 Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Thu, 11 Jun 2026 10:05:12 +0000
Subject: [PATCH 12/23] Apply prepare changes

---
 internal/stores/data_style/model/color.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/internal/stores/data_style/model/color.js b/internal/stores/data_style/model/color.js
index 740f20c7..0f13c171 100644
--- a/internal/stores/data_style/model/color.js
+++ b/internal/stores/data_style/model/color.js
@@ -182,7 +182,12 @@ function useModelColorStyle(componentStyleFunctions) {
     }
   }
 
-  async function setModelComponentsColor(modelId, componentIds, color, activeColoring = "constant") {
+  async function setModelComponentsColor(
+    modelId,
+    componentIds,
+    color,
+    activeColoring = "constant",
+  ) {
     await modelCommonStyle.mutateComponentStyles(modelId, componentIds, {
       coloring: {
         constant: color,

From d88506bfa1a9ab2a8eac3de35ee0efc99b781aff Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 11 Jun 2026 14:58:24 +0200
Subject: [PATCH 13/23] no more guards for every attribute. constant over color
 for meshes

---
 .../Viewer/Options/AttributeSelector.vue      | 10 +++-
 .../Viewer/Options/ColoringTypeSelector.vue   | 46 ++++++++++++++-----
 app/utils/default_styles/meshes.js            | 23 ++++++----
 3 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/app/components/Viewer/Options/AttributeSelector.vue b/app/components/Viewer/Options/AttributeSelector.vue
index ebddff69..75af57f9 100644
--- a/app/components/Viewer/Options/AttributeSelector.vue
+++ b/app/components/Viewer/Options/AttributeSelector.vue
@@ -4,7 +4,15 @@ import { useBackStore } from "@ogw_front/stores/back";
 
 const backStore = useBackStore();
 
-const name = defineModel("name", { type: String });
+const name = defineModel("name", {
+  type: String,
+  set(value) {
+    if (value === null || value === undefined) {
+      return name.value;
+    }
+    return value;
+  },
+});
 const range = defineModel("range", { type: Array });
 const colorMap = defineModel("colorMap", { type: String });
 
diff --git a/app/components/Viewer/Options/ColoringTypeSelector.vue b/app/components/Viewer/Options/ColoringTypeSelector.vue
index a8f628f9..44e084f8 100644
--- a/app/components/Viewer/Options/ColoringTypeSelector.vue
+++ b/app/components/Viewer/Options/ColoringTypeSelector.vue
@@ -144,13 +144,35 @@ const coloring_styles = computed(() => {
 
 const coloring_style_label = ref("");
 
-watch(coloring_style_label, (value) => {
-  const index = coloring_styles.value.labels.indexOf(value);
-  if (index !== -1) {
-    coloring_style_key.value = coloring_styles.value.values[index];
-  }
+const active_key = computed(() => {
+  const index = coloring_styles.value.labels.indexOf(coloring_style_label.value);
+  return index === -1 ? coloring_style_key.value : coloring_styles.value.values[index];
 });
 
+watch(
+  [
+    coloring_style_label,
+    vertex_attribute_name,
+    edge_attribute_name,
+    cell_attribute_name,
+    polygon_attribute_name,
+    polyhedron_attribute_name,
+  ],
+  () => {
+    const key = active_key.value;
+    const names = {
+      vertex: vertex_attribute_name.value,
+      edge: edge_attribute_name.value,
+      cell: cell_attribute_name.value,
+      polygon: polygon_attribute_name.value,
+      polyhedron: polyhedron_attribute_name.value,
+    };
+    if (!(key in names) || names[key]) {
+      coloring_style_key.value = key;
+    }
+  }
+);
+
 watch(
   coloring_style_key,
   (value) => {
@@ -181,13 +203,13 @@ watch(
   </v-row>
   <v-row class="mt-3 px-2" no-gutters>
     <v-col cols="12" class="ps-7 pe-1">
-      <template v-if="coloring_style_key === color_dict['value']">
+      <template v-if="active_key === color_dict['value']">
         <ViewerOptionsColorPicker v-model="color" />
       </template>
-      <template v-if="coloring_style_key === textures_dict['value']">
+      <template v-if="active_key === textures_dict['value']">
         <ViewerOptionsTexturesSelector v-model="textures" :id="id" />
       </template>
-      <template v-if="coloring_style_key === vertex_dict['value'] && hasColorMap('vertex')">
+      <template v-if="active_key === vertex_dict['value'] && hasColorMap('vertex')">
         <ViewerOptionsAttributeSelector
           v-model:name="vertex_attribute_name"
           v-model:range="vertex_attribute_range"
@@ -197,7 +219,7 @@ watch(
           :schema="vertexSchema"
         />
       </template>
-      <template v-if="coloring_style_key === edge_dict['value'] && hasColorMap('edge')">
+      <template v-if="active_key === edge_dict['value'] && hasColorMap('edge')">
         <ViewerOptionsAttributeSelector
           v-model:name="edge_attribute_name"
           v-model:range="edge_attribute_range"
@@ -207,7 +229,7 @@ watch(
           :schema="edgeSchema"
         />
       </template>
-      <template v-if="coloring_style_key === cell_dict['value'] && hasColorMap('cell')">
+      <template v-if="active_key === cell_dict['value'] && hasColorMap('cell')">
         <ViewerOptionsAttributeSelector
           v-model:name="cell_attribute_name"
           v-model:range="cell_attribute_range"
@@ -217,7 +239,7 @@ watch(
           :schema="cellSchema"
         />
       </template>
-      <template v-if="coloring_style_key === polygon_dict['value'] && hasColorMap('polygon')">
+      <template v-if="active_key === polygon_dict['value'] && hasColorMap('polygon')">
         <ViewerOptionsAttributeSelector
           v-model:name="polygon_attribute_name"
           v-model:range="polygon_attribute_range"
@@ -227,7 +249,7 @@ watch(
           :schema="polygonSchema"
         />
       </template>
-      <template v-if="coloring_style_key === polyhedron_dict['value'] && hasColorMap('polyhedron')">
+      <template v-if="active_key === polyhedron_dict['value'] && hasColorMap('polyhedron')">
         <ViewerOptionsAttributeSelector
           v-model:name="polyhedron_attribute_name"
           v-model:range="polyhedron_attribute_range"
diff --git a/app/utils/default_styles/meshes.js b/app/utils/default_styles/meshes.js
index e0186f4e..75887030 100644
--- a/app/utils/default_styles/meshes.js
+++ b/app/utils/default_styles/meshes.js
@@ -17,13 +17,13 @@ import {
 function meshPointsDefaultStyle(
   visibility = POINTS_DEFAULT_VISIBILITY,
   size = POINTS_DEFAULT_SIZE,
-  color = POINTS_DEFAULT_COLOR,
+  constant = POINTS_DEFAULT_COLOR,
 ) {
   return {
     visibility,
     coloring: {
       active: MESH_DEFAULT_ACTIVE_COLORING,
-      color,
+      constant,
       vertex: {
         name: undefined,
         storedConfigs: {},
@@ -36,13 +36,13 @@ function meshPointsDefaultStyle(
 function meshEdgesDefaultStyle(
   visibility = EDGES_DEFAULT_VISIBILITY,
   width = EDGES_DEFAULT_WIDTH,
-  color = EDGES_DEFAULT_COLOR,
+  constant = EDGES_DEFAULT_COLOR,
 ) {
   return {
     visibility,
     coloring: {
       active: MESH_DEFAULT_ACTIVE_COLORING,
-      color,
+      constant,
       edge: {
         name: undefined,
         storedConfigs: {},
@@ -56,7 +56,10 @@ function meshEdgesDefaultStyle(
   };
 }
 
-function meshCellsDefaultStyle(visibility = CELLS_DEFAULT_VISIBILITY, color = CELLS_DEFAULT_COLOR) {
+function meshCellsDefaultStyle(
+  visibility = CELLS_DEFAULT_VISIBILITY,
+  constant = CELLS_DEFAULT_COLOR,
+) {
   return {
     visibility,
     coloring: {
@@ -65,7 +68,7 @@ function meshCellsDefaultStyle(visibility = CELLS_DEFAULT_VISIBILITY, color = CE
         name: undefined,
         storedConfigs: {},
       },
-      color,
+      constant,
       textures: undefined,
       vertex: {
         name: undefined,
@@ -77,13 +80,13 @@ function meshCellsDefaultStyle(visibility = CELLS_DEFAULT_VISIBILITY, color = CE
 
 function meshPolygonsDefaultStyle(
   visibility = POLYGONS_DEFAULT_VISIBILITY,
-  color = POLYGONS_DEFAULT_COLOR,
+  constant = POLYGONS_DEFAULT_COLOR,
 ) {
   return {
     visibility,
     coloring: {
       active: MESH_DEFAULT_ACTIVE_COLORING,
-      color,
+      constant,
       textures: undefined,
       polygon: {
         name: undefined,
@@ -99,13 +102,13 @@ function meshPolygonsDefaultStyle(
 
 function meshPolyhedraDefaultStyle(
   visibility = POLYHEDRA_DEFAULT_VISIBILITY,
-  color = POLYHEDRA_DEFAULT_COLOR,
+  constant = POLYHEDRA_DEFAULT_COLOR,
 ) {
   return {
     visibility,
     coloring: {
       active: MESH_DEFAULT_ACTIVE_COLORING,
-      color,
+      constant,
       polyhedron: {
         name: undefined,
         storedConfigs: {},

From 984d4df9ec7d0fcf7332eee4457512e6364ce92d Mon Sep 17 00:00:00 2001
From: MaxNumerique <144453705+MaxNumerique@users.noreply.github.com>
Date: Thu, 11 Jun 2026 12:59:20 +0000
Subject: [PATCH 14/23] Apply prepare changes

---
 app/components/Viewer/Options/ColoringTypeSelector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Viewer/Options/ColoringTypeSelector.vue b/app/components/Viewer/Options/ColoringTypeSelector.vue
index 44e084f8..c9a70146 100644
--- a/app/components/Viewer/Options/ColoringTypeSelector.vue
+++ b/app/components/Viewer/Options/ColoringTypeSelector.vue
@@ -170,7 +170,7 @@ watch(
     if (!(key in names) || names[key]) {
       coloring_style_key.value = key;
     }
-  }
+  },
 );
 
 watch(

From ee03cbcc3fd4f4a8cfbb4f44ff357456af6463e0 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 11 Jun 2026 15:00:49 +0200
Subject: [PATCH 15/23] constant over color

---
 internal/stores/data_style/mesh/cells/color.js     | 4 ++--
 internal/stores/data_style/mesh/edges/color.js     | 4 ++--
 internal/stores/data_style/mesh/points/color.js    | 4 ++--
 internal/stores/data_style/mesh/polygons/color.js  | 4 ++--
 internal/stores/data_style/mesh/polyhedra/color.js | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/internal/stores/data_style/mesh/cells/color.js b/internal/stores/data_style/mesh/cells/color.js
index 21cf41b2..bea09a3f 100644
--- a/internal/stores/data_style/mesh/cells/color.js
+++ b/internal/stores/data_style/mesh/cells/color.js
@@ -13,7 +13,7 @@ export function useMeshCellsColorStyle() {
   const meshCellsCommonStyle = useMeshCellsCommonStyle();
 
   function meshCellsColor(id) {
-    return meshCellsCommonStyle.meshCellsColoring(id).color;
+    return meshCellsCommonStyle.meshCellsColoring(id).constant;
   }
   function setMeshCellsColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshCellsColorStyle() {
       {
         response_function: () =>
           meshCellsCommonStyle.mutateMeshCellsColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );
diff --git a/internal/stores/data_style/mesh/edges/color.js b/internal/stores/data_style/mesh/edges/color.js
index 3b560d0e..99b80380 100644
--- a/internal/stores/data_style/mesh/edges/color.js
+++ b/internal/stores/data_style/mesh/edges/color.js
@@ -13,7 +13,7 @@ export function useMeshEdgesColorStyle() {
   const meshEdgesCommonStyle = useMeshEdgesCommonStyle();
 
   function meshEdgesColor(id) {
-    return meshEdgesCommonStyle.meshEdgesColoring(id).color;
+    return meshEdgesCommonStyle.meshEdgesColoring(id).constant;
   }
   function setMeshEdgesColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshEdgesColorStyle() {
       {
         response_function: () =>
           meshEdgesCommonStyle.mutateMeshEdgesColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );
diff --git a/internal/stores/data_style/mesh/points/color.js b/internal/stores/data_style/mesh/points/color.js
index 5efa8473..6c7fc360 100644
--- a/internal/stores/data_style/mesh/points/color.js
+++ b/internal/stores/data_style/mesh/points/color.js
@@ -13,7 +13,7 @@ export function useMeshPointsColorStyle() {
   const meshPointsCommonStyle = useMeshPointsCommonStyle();
 
   function meshPointsColor(id) {
-    return meshPointsCommonStyle.meshPointsColoring(id).color;
+    return meshPointsCommonStyle.meshPointsColoring(id).constant;
   }
   function setMeshPointsColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshPointsColorStyle() {
       {
         response_function: () =>
           meshPointsCommonStyle.mutateMeshPointsColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );
diff --git a/internal/stores/data_style/mesh/polygons/color.js b/internal/stores/data_style/mesh/polygons/color.js
index 9d437523..a3102c9c 100644
--- a/internal/stores/data_style/mesh/polygons/color.js
+++ b/internal/stores/data_style/mesh/polygons/color.js
@@ -13,7 +13,7 @@ export function useMeshPolygonsColorStyle() {
   const meshPolygonsCommonStyle = useMeshPolygonsCommonStyle();
 
   function meshPolygonsColor(id) {
-    return meshPolygonsCommonStyle.meshPolygonsColoring(id).color;
+    return meshPolygonsCommonStyle.meshPolygonsColoring(id).constant;
   }
   function setMeshPolygonsColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshPolygonsColorStyle() {
       {
         response_function: () =>
           meshPolygonsCommonStyle.mutateMeshPolygonsColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );
diff --git a/internal/stores/data_style/mesh/polyhedra/color.js b/internal/stores/data_style/mesh/polyhedra/color.js
index 3141a100..cc3a0d3f 100644
--- a/internal/stores/data_style/mesh/polyhedra/color.js
+++ b/internal/stores/data_style/mesh/polyhedra/color.js
@@ -13,7 +13,7 @@ export function useMeshPolyhedraColorStyle() {
   const meshPolyhedraCommonStyle = useMeshPolyhedraCommonStyle();
 
   function meshPolyhedraColor(id) {
-    return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).color;
+    return meshPolyhedraCommonStyle.meshPolyhedraColoring(id).constant;
   }
   function setMeshPolyhedraColor(id, color) {
     const params = { id, color };
@@ -25,7 +25,7 @@ export function useMeshPolyhedraColorStyle() {
       {
         response_function: () =>
           meshPolyhedraCommonStyle.mutateMeshPolyhedraColoring(id, {
-            color,
+            constant: color,
           }),
       },
     );

From 08822fd68d2653c0ece46c22bfd5177811fcfe42 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 11 Jun 2026 15:16:41 +0200
Subject: [PATCH 16/23] MODEL_DEFAULT_ACTIVE_COLORING

---
 app/utils/default_styles/models.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/utils/default_styles/models.js b/app/utils/default_styles/models.js
index 818c36f8..a854fa1d 100644
--- a/app/utils/default_styles/models.js
+++ b/app/utils/default_styles/models.js
@@ -22,7 +22,7 @@ function modelCornersDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: "constant",
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
       constant,
       vertex: {
         name: undefined,
@@ -39,7 +39,7 @@ function modelLinesDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: "constant",
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
       constant,
       vertex: {
         name: undefined,
@@ -60,7 +60,7 @@ function modelSurfacesDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: "constant",
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
       constant,
       vertex: {
         name: undefined,
@@ -81,7 +81,7 @@ function modelBlocksDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: "constant",
+      active: MODEL_DEFAULT_ACTIVE_COLORING,
       constant,
       vertex: {
         name: undefined,

From b32e840e9bdbee9832c64e68da3dc9dc5e70e97d Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 11 Jun 2026 15:33:25 +0200
Subject: [PATCH 17/23] coloringType

---
 app/components/Viewer/Generic/Model/BlocksOptions.vue   | 8 ++++----
 app/components/Viewer/Generic/Model/CornersOptions.vue  | 8 ++++----
 app/components/Viewer/Generic/Model/LinesOptions.vue    | 8 ++++----
 app/components/Viewer/Generic/Model/ModelStyleCard.vue  | 8 ++++----
 app/components/Viewer/Generic/Model/SurfacesOptions.vue | 8 ++++----
 5 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/app/components/Viewer/Generic/Model/BlocksOptions.vue b/app/components/Viewer/Generic/Model/BlocksOptions.vue
index fa4ca823..b594b9f8 100644
--- a/app/components/Viewer/Generic/Model/BlocksOptions.vue
+++ b/app/components/Viewer/Generic/Model/BlocksOptions.vue
@@ -51,16 +51,16 @@ const blockColor = computed({
 
 const blocksActiveColoring = computed({
   get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Block"),
-  set: async (activeColoring) => {
-    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Block", activeColoring);
+  set: async (coloringType) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Block", coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
 const blockActiveColoring = computed({
   get: () => dataStyleStore.modelBlockActiveColoring(modelId, blockId),
-  set: async (activeColoring) => {
-    await dataStyleStore.setModelBlocksActiveColoring(modelId, [blockId], activeColoring);
+  set: async (coloringType) => {
+    await dataStyleStore.setModelBlocksActiveColoring(modelId, [blockId], coloringType);
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/Generic/Model/CornersOptions.vue b/app/components/Viewer/Generic/Model/CornersOptions.vue
index 333e831a..4e7686e7 100644
--- a/app/components/Viewer/Generic/Model/CornersOptions.vue
+++ b/app/components/Viewer/Generic/Model/CornersOptions.vue
@@ -51,16 +51,16 @@ const cornerColor = computed({
 
 const cornersActiveColoring = computed({
   get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Corner"),
-  set: async (activeColoring) => {
-    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Corner", activeColoring);
+  set: async (coloringType) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Corner", coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
 const cornerActiveColoring = computed({
   get: () => dataStyleStore.modelCornerActiveColoring(modelId, cornerId),
-  set: async (activeColoring) => {
-    await dataStyleStore.setModelCornersActiveColoring(modelId, [cornerId], activeColoring);
+  set: async (coloringType) => {
+    await dataStyleStore.setModelCornersActiveColoring(modelId, [cornerId], coloringType);
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/Generic/Model/LinesOptions.vue b/app/components/Viewer/Generic/Model/LinesOptions.vue
index 16fde75f..fe9a0a27 100644
--- a/app/components/Viewer/Generic/Model/LinesOptions.vue
+++ b/app/components/Viewer/Generic/Model/LinesOptions.vue
@@ -51,16 +51,16 @@ const lineColor = computed({
 
 const linesActiveColoring = computed({
   get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Line"),
-  set: async (activeColoring) => {
-    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Line", activeColoring);
+  set: async (coloringType) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Line", coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
 const lineActiveColoring = computed({
   get: () => dataStyleStore.modelLineActiveColoring(modelId, lineId),
-  set: async (activeColoring) => {
-    await dataStyleStore.setModelLinesActiveColoring(modelId, [lineId], activeColoring);
+  set: async (coloringType) => {
+    await dataStyleStore.setModelLinesActiveColoring(modelId, [lineId], coloringType);
     hybridViewerStore.remoteRender();
   },
 });
diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 5674832f..57eb1a69 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -88,15 +88,15 @@ const modelVisibility = computed({
 
 const modelComponentsActiveColoring = computed({
   get: () => dataStyleStore.getModelActiveColoring(modelId.value),
-  set: async (activeColoring) => {
+  set: async (coloringType) => {
     await dataStyleStore.mutateStyle(modelId.value, {
-      coloring: { active: activeColoring },
+      coloring: { active: coloringType },
     });
     await dataStyleStore.setModelComponentsColor(
       modelId.value,
       selection.value,
-      activeColoring === "random" ? undefined : modelComponentsColor.value,
-      activeColoring,
+      coloringType === "random" ? undefined : modelComponentsColor.value,
+      coloringType,
     );
     hybridViewerStore.remoteRender();
   },
diff --git a/app/components/Viewer/Generic/Model/SurfacesOptions.vue b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
index 3d9f2a48..4e725b27 100644
--- a/app/components/Viewer/Generic/Model/SurfacesOptions.vue
+++ b/app/components/Viewer/Generic/Model/SurfacesOptions.vue
@@ -51,16 +51,16 @@ const surfaceColor = computed({
 
 const surfacesActiveColoring = computed({
   get: () => dataStyleStore.getModelComponentTypeActiveColoring(modelId, "Surface"),
-  set: async (activeColoring) => {
-    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Surface", activeColoring);
+  set: async (coloringType) => {
+    await dataStyleStore.setModelComponentTypeActiveColoring(modelId, "Surface", coloringType);
     hybridViewerStore.remoteRender();
   },
 });
 
 const surfaceActiveColoring = computed({
   get: () => dataStyleStore.modelSurfaceActiveColoring(modelId, surfaceId),
-  set: async (activeColoring) => {
-    await dataStyleStore.setModelSurfacesActiveColoring(modelId, [surfaceId], activeColoring);
+  set: async (coloringType) => {
+    await dataStyleStore.setModelSurfacesActiveColoring(modelId, [surfaceId], coloringType);
     hybridViewerStore.remoteRender();
   },
 });

From 89c164e202b341185556eab483e17b447078ad49 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 11 Jun 2026 15:59:04 +0200
Subject: [PATCH 18/23] internal stores models

---
 .../stores/data_style/model/blocks/common.js  | 21 ++++++++++----
 .../data_style/model/blocks/polyhedron.js     | 29 +++++--------------
 .../stores/data_style/model/blocks/vertex.js  | 29 +++++--------------
 .../stores/data_style/model/corners/common.js | 21 ++++++++++----
 .../stores/data_style/model/corners/vertex.js | 29 +++++--------------
 .../stores/data_style/model/lines/common.js   | 21 ++++++++++----
 .../stores/data_style/model/lines/edge.js     | 29 +++++--------------
 .../stores/data_style/model/lines/vertex.js   | 29 +++++--------------
 .../data_style/model/surfaces/common.js       | 21 ++++++++++----
 .../data_style/model/surfaces/polygon.js      | 29 +++++--------------
 .../data_style/model/surfaces/vertex.js       | 29 +++++--------------
 11 files changed, 109 insertions(+), 178 deletions(-)

diff --git a/internal/stores/data_style/model/blocks/common.js b/internal/stores/data_style/model/blocks/common.js
index c297f837..1a655516 100644
--- a/internal/stores/data_style/model/blocks/common.js
+++ b/internal/stores/data_style/model/blocks/common.js
@@ -16,18 +16,27 @@ export function useModelBlocksCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelBlocksStyle(id, blocks_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, blocks_ids, values);
+  function modelBlockColoring(id, block_id) {
+    return modelBlockStyle(id, block_id).coloring;
   }
 
-  function mutateModelBlockStyle(id, block_id, values) {
-    return modelCommonStyle.mutateComponentStyle(id, block_id, values);
+  function mutateModelBlocksColoring(id, blocks_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, blocks_ids, {
+      coloring: values,
+    });
+  }
+
+  function mutateModelBlockColoring(id, block_id, values) {
+    return modelCommonStyle.mutateComponentStyle(id, block_id, {
+      coloring: values,
+    });
   }
 
   return {
     modelBlocksStyle,
     modelBlockStyle,
-    mutateModelBlocksStyle,
-    mutateModelBlockStyle,
+    modelBlockColoring,
+    mutateModelBlocksColoring,
+    mutateModelBlockColoring,
   };
 }
diff --git a/internal/stores/data_style/model/blocks/polyhedron.js b/internal/stores/data_style/model/blocks/polyhedron.js
index 9f00f88a..c13838eb 100644
--- a/internal/stores/data_style/model/blocks/polyhedron.js
+++ b/internal/stores/data_style/model/blocks/polyhedron.js
@@ -16,26 +16,24 @@ export function useModelBlocksPolyhedronAttribute() {
   const viewerStore = useViewerStore();
 
   function modelBlocksPolyhedronAttribute(modelId, blockId) {
-    return modelBlocksCommonStyle.modelBlockStyle(modelId, blockId).coloring.polyhedron;
+    return modelBlocksCommonStyle.modelBlockColoring(modelId, blockId).polyhedron;
   }
 
   function modelBlocksPolyhedronAttributeStoredConfig(modelId, blockId, name) {
     const { storedConfigs } = modelBlocksPolyhedronAttribute(modelId, blockId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelBlocksPolyhedronAttributeStoredConfig(modelId, [blockId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelBlocksPolyhedronStyle(modelId, blockIds, values) {
-    return modelBlocksCommonStyle.mutateModelBlocksStyle(modelId, blockIds, {
-      coloring: {
-        polyhedron: values,
-      },
+    return modelBlocksCommonStyle.mutateModelBlocksColoring(modelId, blockIds, {
+      polyhedron: values,
     });
   }
 
@@ -53,24 +51,11 @@ export function useModelBlocksPolyhedronAttribute() {
 
   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),
+        response_function: () => mutateModelBlocksPolyhedronStyle(modelId, blockIds, { name }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/blocks/vertex.js b/internal/stores/data_style/model/blocks/vertex.js
index 7b3b1b72..2e95386f 100644
--- a/internal/stores/data_style/model/blocks/vertex.js
+++ b/internal/stores/data_style/model/blocks/vertex.js
@@ -16,26 +16,24 @@ export function useModelBlocksVertexAttribute() {
   const viewerStore = useViewerStore();
 
   function modelBlocksVertexAttribute(modelId, blockId) {
-    return modelBlocksCommonStyle.modelBlockStyle(modelId, blockId).coloring.vertex;
+    return modelBlocksCommonStyle.modelBlockColoring(modelId, blockId).vertex;
   }
 
   function modelBlocksVertexAttributeStoredConfig(modelId, blockId, name) {
     const { storedConfigs } = modelBlocksVertexAttribute(modelId, blockId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelBlocksVertexAttributeStoredConfig(modelId, [blockId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelBlocksVertexStyle(modelId, blockIds, values) {
-    return modelBlocksCommonStyle.mutateModelBlocksStyle(modelId, blockIds, {
-      coloring: {
-        vertex: values,
-      },
+    return modelBlocksCommonStyle.mutateModelBlocksColoring(modelId, blockIds, {
+      vertex: values,
     });
   }
 
@@ -53,24 +51,11 @@ export function useModelBlocksVertexAttribute() {
 
   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),
+        response_function: () => mutateModelBlocksVertexStyle(modelId, blockIds, { name }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/corners/common.js b/internal/stores/data_style/model/corners/common.js
index c426c084..e03edbda 100644
--- a/internal/stores/data_style/model/corners/common.js
+++ b/internal/stores/data_style/model/corners/common.js
@@ -16,18 +16,27 @@ export function useModelCornersCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelCornersStyle(id, corners_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, corners_ids, values);
+  function modelCornerColoring(id, corner_id) {
+    return modelCornerStyle(id, corner_id).coloring;
   }
 
-  function mutateModelCornerStyle(id, corner_id, values) {
-    return modelCommonStyle.mutateComponentStyle(id, corner_id, values);
+  function mutateModelCornersColoring(id, corners_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, corners_ids, {
+      coloring: values,
+    });
+  }
+
+  function mutateModelCornerColoring(id, corner_id, values) {
+    return modelCommonStyle.mutateComponentStyle(id, corner_id, {
+      coloring: values,
+    });
   }
 
   return {
     modelCornersStyle,
     modelCornerStyle,
-    mutateModelCornersStyle,
-    mutateModelCornerStyle,
+    modelCornerColoring,
+    mutateModelCornersColoring,
+    mutateModelCornerColoring,
   };
 }
diff --git a/internal/stores/data_style/model/corners/vertex.js b/internal/stores/data_style/model/corners/vertex.js
index 467cd4ad..a332a14c 100644
--- a/internal/stores/data_style/model/corners/vertex.js
+++ b/internal/stores/data_style/model/corners/vertex.js
@@ -16,26 +16,24 @@ export function useModelCornersVertexAttribute() {
   const viewerStore = useViewerStore();
 
   function modelCornersVertexAttribute(modelId, cornerId) {
-    return modelCornersCommonStyle.modelCornerStyle(modelId, cornerId).coloring.vertex;
+    return modelCornersCommonStyle.modelCornerColoring(modelId, cornerId).vertex;
   }
 
   function modelCornersVertexAttributeStoredConfig(modelId, cornerId, name) {
     const { storedConfigs } = modelCornersVertexAttribute(modelId, cornerId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelCornersVertexAttributeStoredConfig(modelId, [cornerId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelCornersVertexStyle(modelId, cornerIds, values) {
-    return modelCornersCommonStyle.mutateModelCornersStyle(modelId, cornerIds, {
-      coloring: {
-        vertex: values,
-      },
+    return modelCornersCommonStyle.mutateModelCornersColoring(modelId, cornerIds, {
+      vertex: values,
     });
   }
 
@@ -53,24 +51,11 @@ export function useModelCornersVertexAttribute() {
 
   async function setModelCornersVertexAttributeName(modelId, cornerIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, cornerIds);
-
-    const updates = { name };
-    const vertex = modelCornersVertexAttribute(modelId, cornerIds[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: () => mutateModelCornersVertexStyle(modelId, cornerIds, updates),
+        response_function: () => mutateModelCornersVertexStyle(modelId, cornerIds, { name }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/lines/common.js b/internal/stores/data_style/model/lines/common.js
index 4576a645..c7b3362c 100644
--- a/internal/stores/data_style/model/lines/common.js
+++ b/internal/stores/data_style/model/lines/common.js
@@ -16,18 +16,27 @@ export function useModelLinesCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelLinesStyle(id, lines_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, lines_ids, values);
+  function modelLineColoring(id, line_id) {
+    return modelLineStyle(id, line_id).coloring;
   }
 
-  function mutateModelLineStyle(id, line_id, values) {
-    return modelCommonStyle.mutateComponentStyle(id, line_id, values);
+  function mutateModelLinesColoring(id, lines_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, lines_ids, {
+      coloring: values,
+    });
+  }
+
+  function mutateModelLineColoring(id, line_id, values) {
+    return modelCommonStyle.mutateComponentStyle(id, line_id, {
+      coloring: values,
+    });
   }
 
   return {
     modelLinesStyle,
     modelLineStyle,
-    mutateModelLinesStyle,
-    mutateModelLineStyle,
+    modelLineColoring,
+    mutateModelLinesColoring,
+    mutateModelLineColoring,
   };
 }
diff --git a/internal/stores/data_style/model/lines/edge.js b/internal/stores/data_style/model/lines/edge.js
index fd880e56..ce5ea006 100644
--- a/internal/stores/data_style/model/lines/edge.js
+++ b/internal/stores/data_style/model/lines/edge.js
@@ -16,26 +16,24 @@ export function useModelLinesEdgeAttribute() {
   const viewerStore = useViewerStore();
 
   function modelLinesEdgeAttribute(modelId, lineId) {
-    return modelLinesCommonStyle.modelLineStyle(modelId, lineId).coloring.edge;
+    return modelLinesCommonStyle.modelLineColoring(modelId, lineId).edge;
   }
 
   function modelLinesEdgeAttributeStoredConfig(modelId, lineId, name) {
     const { storedConfigs } = modelLinesEdgeAttribute(modelId, lineId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelLinesEdgeAttributeStoredConfig(modelId, [lineId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelLinesEdgeStyle(modelId, lineIds, values) {
-    return modelLinesCommonStyle.mutateModelLinesStyle(modelId, lineIds, {
-      coloring: {
-        edge: values,
-      },
+    return modelLinesCommonStyle.mutateModelLinesColoring(modelId, lineIds, {
+      edge: values,
     });
   }
 
@@ -53,24 +51,11 @@ export function useModelLinesEdgeAttribute() {
 
   async function setModelLinesEdgeAttributeName(modelId, lineIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
-
-    const updates = { name };
-    const edge = modelLinesEdgeAttribute(modelId, lineIds[0]);
-    if (!(name in edge.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: () => mutateModelLinesEdgeStyle(modelId, lineIds, updates),
+        response_function: () => mutateModelLinesEdgeStyle(modelId, lineIds, { name }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/lines/vertex.js b/internal/stores/data_style/model/lines/vertex.js
index c31a4cbc..6efecfb2 100644
--- a/internal/stores/data_style/model/lines/vertex.js
+++ b/internal/stores/data_style/model/lines/vertex.js
@@ -16,26 +16,24 @@ export function useModelLinesVertexAttribute() {
   const viewerStore = useViewerStore();
 
   function modelLinesVertexAttribute(modelId, lineId) {
-    return modelLinesCommonStyle.modelLineStyle(modelId, lineId).coloring.vertex;
+    return modelLinesCommonStyle.modelLineColoring(modelId, lineId).vertex;
   }
 
   function modelLinesVertexAttributeStoredConfig(modelId, lineId, name) {
     const { storedConfigs } = modelLinesVertexAttribute(modelId, lineId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelLinesVertexAttributeStoredConfig(modelId, [lineId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelLinesVertexStyle(modelId, lineIds, values) {
-    return modelLinesCommonStyle.mutateModelLinesStyle(modelId, lineIds, {
-      coloring: {
-        vertex: values,
-      },
+    return modelLinesCommonStyle.mutateModelLinesColoring(modelId, lineIds, {
+      vertex: values,
     });
   }
 
@@ -53,24 +51,11 @@ export function useModelLinesVertexAttribute() {
 
   async function setModelLinesVertexAttributeName(modelId, lineIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, lineIds);
-
-    const updates = { name };
-    const vertex = modelLinesVertexAttribute(modelId, lineIds[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: () => mutateModelLinesVertexStyle(modelId, lineIds, updates),
+        response_function: () => mutateModelLinesVertexStyle(modelId, lineIds, { name }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/surfaces/common.js b/internal/stores/data_style/model/surfaces/common.js
index 5fc3e229..baa41317 100644
--- a/internal/stores/data_style/model/surfaces/common.js
+++ b/internal/stores/data_style/model/surfaces/common.js
@@ -16,18 +16,27 @@ export function useModelSurfacesCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelSurfacesStyle(id, surfaces_ids, values) {
-    return modelCommonStyle.mutateComponentStyles(id, surfaces_ids, values);
+  function modelSurfaceColoring(id, surface_id) {
+    return modelSurfaceStyle(id, surface_id).coloring;
   }
 
-  function mutateModelSurfaceStyle(id, surface_id, values) {
-    return modelCommonStyle.mutateComponentStyle(id, surface_id, values);
+  function mutateModelSurfacesColoring(id, surfaces_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, surfaces_ids, {
+      coloring: values,
+    });
+  }
+
+  function mutateModelSurfaceColoring(id, surface_id, values) {
+    return modelCommonStyle.mutateComponentStyle(id, surface_id, {
+      coloring: values,
+    });
   }
 
   return {
     modelSurfacesStyle,
     modelSurfaceStyle,
-    mutateModelSurfacesStyle,
-    mutateModelSurfaceStyle,
+    modelSurfaceColoring,
+    mutateModelSurfacesColoring,
+    mutateModelSurfaceColoring,
   };
 }
diff --git a/internal/stores/data_style/model/surfaces/polygon.js b/internal/stores/data_style/model/surfaces/polygon.js
index 9101b058..faf1964d 100644
--- a/internal/stores/data_style/model/surfaces/polygon.js
+++ b/internal/stores/data_style/model/surfaces/polygon.js
@@ -16,26 +16,24 @@ export function useModelSurfacesPolygonAttribute() {
   const viewerStore = useViewerStore();
 
   function modelSurfacesPolygonAttribute(modelId, surfaceId) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(modelId, surfaceId).coloring.polygon;
+    return modelSurfacesCommonStyle.modelSurfaceColoring(modelId, surfaceId).polygon;
   }
 
   function modelSurfacesPolygonAttributeStoredConfig(modelId, surfaceId, name) {
     const { storedConfigs } = modelSurfacesPolygonAttribute(modelId, surfaceId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelSurfacesPolygonAttributeStoredConfig(modelId, [surfaceId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelSurfacesPolygonStyle(modelId, surfaceIds, values) {
-    return modelSurfacesCommonStyle.mutateModelSurfacesStyle(modelId, surfaceIds, {
-      coloring: {
-        polygon: values,
-      },
+    return modelSurfacesCommonStyle.mutateModelSurfacesColoring(modelId, surfaceIds, {
+      polygon: values,
     });
   }
 
@@ -53,24 +51,11 @@ export function useModelSurfacesPolygonAttribute() {
 
   async function setModelSurfacesPolygonAttributeName(modelId, surfaceIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, surfaceIds);
-
-    const updates = { name };
-    const polygon = modelSurfacesPolygonAttribute(modelId, surfaceIds[0]);
-    if (!(name in polygon.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: () => mutateModelSurfacesPolygonStyle(modelId, surfaceIds, updates),
+        response_function: () => mutateModelSurfacesPolygonStyle(modelId, surfaceIds, { name }),
       },
     );
   }
diff --git a/internal/stores/data_style/model/surfaces/vertex.js b/internal/stores/data_style/model/surfaces/vertex.js
index 37e5d7f5..c7e1369f 100644
--- a/internal/stores/data_style/model/surfaces/vertex.js
+++ b/internal/stores/data_style/model/surfaces/vertex.js
@@ -16,26 +16,24 @@ export function useModelSurfacesVertexAttribute() {
   const viewerStore = useViewerStore();
 
   function modelSurfacesVertexAttribute(modelId, surfaceId) {
-    return modelSurfacesCommonStyle.modelSurfaceStyle(modelId, surfaceId).coloring.vertex;
+    return modelSurfacesCommonStyle.modelSurfaceColoring(modelId, surfaceId).vertex;
   }
 
   function modelSurfacesVertexAttributeStoredConfig(modelId, surfaceId, name) {
     const { storedConfigs } = modelSurfacesVertexAttribute(modelId, surfaceId);
-    if (name && storedConfigs && name in storedConfigs) {
+    if (name in storedConfigs) {
       return storedConfigs[name];
     }
-    return {
+    return setModelSurfacesVertexAttributeStoredConfig(modelId, [surfaceId], name, {
       minimum: undefined,
       maximum: undefined,
       colorMap: undefined,
-    };
+    });
   }
 
   function mutateModelSurfacesVertexStyle(modelId, surfaceIds, values) {
-    return modelSurfacesCommonStyle.mutateModelSurfacesStyle(modelId, surfaceIds, {
-      coloring: {
-        vertex: values,
-      },
+    return modelSurfacesCommonStyle.mutateModelSurfacesColoring(modelId, surfaceIds, {
+      vertex: values,
     });
   }
 
@@ -53,24 +51,11 @@ export function useModelSurfacesVertexAttribute() {
 
   async function setModelSurfacesVertexAttributeName(modelId, surfaceIds, name) {
     const viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, surfaceIds);
-
-    const updates = { name };
-    const vertex = modelSurfacesVertexAttribute(modelId, surfaceIds[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: () => mutateModelSurfacesVertexStyle(modelId, surfaceIds, updates),
+        response_function: () => mutateModelSurfacesVertexStyle(modelId, surfaceIds, { name }),
       },
     );
   }

From 2d76f91e333e46833e49b191799c81d0a1a08527 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 11 Jun 2026 16:10:58 +0200
Subject: [PATCH 19/23] modelComponentsColor.value

---
 app/components/Viewer/Generic/Model/ModelStyleCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Viewer/Generic/Model/ModelStyleCard.vue b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
index 57eb1a69..040e8797 100644
--- a/app/components/Viewer/Generic/Model/ModelStyleCard.vue
+++ b/app/components/Viewer/Generic/Model/ModelStyleCard.vue
@@ -95,7 +95,7 @@ const modelComponentsActiveColoring = computed({
     await dataStyleStore.setModelComponentsColor(
       modelId.value,
       selection.value,
-      coloringType === "random" ? undefined : modelComponentsColor.value,
+      modelComponentsColor.value,
       coloringType,
     );
     hybridViewerStore.remoteRender();

From d39dfbf4909ae1be5bb95a6b2f42af69829a375f Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 11 Jun 2026 16:48:03 +0200
Subject: [PATCH 20/23] default

---
 app/components/Viewer/Options/AttributeSelector.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/components/Viewer/Options/AttributeSelector.vue b/app/components/Viewer/Options/AttributeSelector.vue
index 75af57f9..62e8a35d 100644
--- a/app/components/Viewer/Options/AttributeSelector.vue
+++ b/app/components/Viewer/Options/AttributeSelector.vue
@@ -6,13 +6,10 @@ const backStore = useBackStore();
 
 const name = defineModel("name", {
   type: String,
-  set(value) {
-    if (value === null || value === undefined) {
-      return name.value;
-    }
-    return value;
-  },
+  default: undefined,
+  set: (value) => value ?? name.value,
 });
+
 const range = defineModel("range", { type: Array });
 const colorMap = defineModel("colorMap", { type: String });
 

From 9195c2ffb46a6446ead83329962cb3d554c80b51 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Thu, 11 Jun 2026 16:54:40 +0200
Subject: [PATCH 21/23] default constants for components for active coloring

---
 app/utils/default_styles/constants.js |  8 ++++++++
 app/utils/default_styles/models.js    | 12 ++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/utils/default_styles/constants.js b/app/utils/default_styles/constants.js
index 09faab98..e4822b39 100644
--- a/app/utils/default_styles/constants.js
+++ b/app/utils/default_styles/constants.js
@@ -19,12 +19,16 @@ const MODEL_DEFAULT_ACTIVE_COLORING = "constant";
 
 const CORNERS_DEFAULT_VISIBILITY = true;
 const CORNERS_DEFAULT_COLOR = { red: 20, green: 20, blue: 20, alpha: 1 };
+const CORNERS_DEFAULT_ACTIVE_COLORING = "constant";
 const LINES_DEFAULT_VISIBILITY = true;
 const LINES_DEFAULT_COLOR = { red: 20, green: 20, blue: 20, alpha: 1 };
+const LINES_DEFAULT_ACTIVE_COLORING = "constant";
 const SURFACES_DEFAULT_VISIBILITY = true;
 const SURFACES_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
+const SURFACES_DEFAULT_ACTIVE_COLORING = "constant";
 const BLOCKS_DEFAULT_VISIBILITY = true;
 const BLOCKS_DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1 };
+const BLOCKS_DEFAULT_ACTIVE_COLORING = "constant";
 
 const MESH_COMPONENT_TYPES = ["Corner", "Line", "Surface", "Block"];
 
@@ -50,12 +54,16 @@ export {
   POLYHEDRA_DEFAULT_COLOR,
   CORNERS_DEFAULT_VISIBILITY,
   CORNERS_DEFAULT_COLOR,
+  CORNERS_DEFAULT_ACTIVE_COLORING,
   LINES_DEFAULT_VISIBILITY,
   LINES_DEFAULT_COLOR,
+  LINES_DEFAULT_ACTIVE_COLORING,
   SURFACES_DEFAULT_VISIBILITY,
   SURFACES_DEFAULT_COLOR,
+  SURFACES_DEFAULT_ACTIVE_COLORING,
   BLOCKS_DEFAULT_VISIBILITY,
   BLOCKS_DEFAULT_COLOR,
+  BLOCKS_DEFAULT_ACTIVE_COLORING,
   MESH_COMPONENT_TYPES,
   DEFAULT_MODEL_COMPONENT_TYPE_COLORS,
   MODEL_DEFAULT_COLOR,
diff --git a/app/utils/default_styles/models.js b/app/utils/default_styles/models.js
index a854fa1d..69ba74e5 100644
--- a/app/utils/default_styles/models.js
+++ b/app/utils/default_styles/models.js
@@ -1,16 +1,20 @@
 import {
+  BLOCKS_DEFAULT_ACTIVE_COLORING,
   BLOCKS_DEFAULT_COLOR,
   BLOCKS_DEFAULT_VISIBILITY,
+  CORNERS_DEFAULT_ACTIVE_COLORING,
   CORNERS_DEFAULT_COLOR,
   CORNERS_DEFAULT_VISIBILITY,
   EDGES_DEFAULT_VISIBILITY,
   EDGES_DEFAULT_WIDTH,
+  LINES_DEFAULT_ACTIVE_COLORING,
   LINES_DEFAULT_COLOR,
   LINES_DEFAULT_VISIBILITY,
   MODEL_DEFAULT_ACTIVE_COLORING,
   MODEL_DEFAULT_COLOR,
   POINTS_DEFAULT_SIZE,
   POINTS_DEFAULT_VISIBILITY,
+  SURFACES_DEFAULT_ACTIVE_COLORING,
   SURFACES_DEFAULT_COLOR,
   SURFACES_DEFAULT_VISIBILITY,
 } from "./constants";
@@ -22,7 +26,7 @@ function modelCornersDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      active: CORNERS_DEFAULT_ACTIVE_COLORING,
       constant,
       vertex: {
         name: undefined,
@@ -39,7 +43,7 @@ function modelLinesDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      active: LINES_DEFAULT_ACTIVE_COLORING,
       constant,
       vertex: {
         name: undefined,
@@ -60,7 +64,7 @@ function modelSurfacesDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      active: SURFACES_DEFAULT_ACTIVE_COLORING,
       constant,
       vertex: {
         name: undefined,
@@ -81,7 +85,7 @@ function modelBlocksDefaultStyle(
   return {
     visibility,
     coloring: {
-      active: MODEL_DEFAULT_ACTIVE_COLORING,
+      active: BLOCKS_DEFAULT_ACTIVE_COLORING,
       constant,
       vertex: {
         name: undefined,

From f075aca9db7ca4e45096f2728a28120997fb22d1 Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 12 Jun 2026 09:27:48 +0200
Subject: [PATCH 22/23] refacto

---
 internal/stores/data_style/model/blocks/index.js   | 4 ++--
 internal/stores/data_style/model/corners/index.js  | 4 ++--
 internal/stores/data_style/model/lines/index.js    | 4 ++--
 internal/stores/data_style/model/surfaces/index.js | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/internal/stores/data_style/model/blocks/index.js b/internal/stores/data_style/model/blocks/index.js
index b0644c83..e30c7bd8 100644
--- a/internal/stores/data_style/model/blocks/index.js
+++ b/internal/stores/data_style/model/blocks/index.js
@@ -37,9 +37,9 @@ export function useModelBlocksStyle() {
       visibilityGroups[visibility].push(block_id);
 
       const coloring = modelColorStyle.modelBlockColoring(modelId, block_id);
-      const activeColoring = coloring.active;
+      const activeColoring = modelColorStyle.modelBlockActiveColoring(modelId, block_id);
       if (activeColoring === "constant") {
-        const color = coloring.constant;
+        const color = modelColorStyle.modelBlockColor(modelId, block_id);
         const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
           colorGroups[color_key] = { activeColoring, color, blocks_ids: [] };
diff --git a/internal/stores/data_style/model/corners/index.js b/internal/stores/data_style/model/corners/index.js
index 8f002874..449d071e 100644
--- a/internal/stores/data_style/model/corners/index.js
+++ b/internal/stores/data_style/model/corners/index.js
@@ -35,9 +35,9 @@ export function useModelCornersStyle() {
       visibilityGroups[visibility].push(corner_id);
 
       const coloring = modelColorStyle.modelCornerColoring(modelId, corner_id);
-      const activeColoring = coloring.active;
+      const activeColoring = modelColorStyle.modelCornerActiveColoring(modelId, corner_id);
       if (activeColoring === "constant") {
-        const color = coloring.constant;
+        const color = modelColorStyle.modelCornerColor(modelId, corner_id);
         const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
           colorGroups[color_key] = { activeColoring, color, corners_ids: [] };
diff --git a/internal/stores/data_style/model/lines/index.js b/internal/stores/data_style/model/lines/index.js
index 0dcb5d1c..f7e89f5f 100644
--- a/internal/stores/data_style/model/lines/index.js
+++ b/internal/stores/data_style/model/lines/index.js
@@ -37,9 +37,9 @@ export function useModelLinesStyle() {
       visibilityGroups[visibility].push(line_id);
 
       const coloring = modelColorStyle.modelLineColoring(modelId, line_id);
-      const activeColoring = coloring.active;
+      const activeColoring = modelColorStyle.modelLineActiveColoring(modelId, line_id);
       if (activeColoring === "constant") {
-        const color = coloring.constant;
+        const color = modelColorStyle.modelLineColor(modelId, line_id);
         const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
           colorGroups[color_key] = { activeColoring, color, lines_ids: [] };
diff --git a/internal/stores/data_style/model/surfaces/index.js b/internal/stores/data_style/model/surfaces/index.js
index fab65317..83f7f0ff 100644
--- a/internal/stores/data_style/model/surfaces/index.js
+++ b/internal/stores/data_style/model/surfaces/index.js
@@ -37,9 +37,9 @@ export function useModelSurfacesStyle() {
       visibilityGroups[visibility].push(surfaces_id);
 
       const coloring = modelColorStyle.modelSurfaceColoring(modelId, surfaces_id);
-      const activeColoring = coloring.active;
+      const activeColoring = modelColorStyle.modelSurfaceActiveColoring(modelId, surfaces_id);
       if (activeColoring === "constant") {
-        const color = coloring.constant;
+        const color = modelColorStyle.modelSurfaceColor(modelId, surfaces_id);
         const color_key = JSON.stringify(color);
         if (!colorGroups[color_key]) {
           colorGroups[color_key] = { activeColoring, color, surfaces_ids: [] };

From ae47b97025e9a8435e3bda10cbd3e9d33674bffc Mon Sep 17 00:00:00 2001
From: MaxNumerique <maximilienlandois@gmail.com>
Date: Fri, 12 Jun 2026 11:34:35 +0200
Subject: [PATCH 23/23] refacto

---
 internal/stores/data_style/model/common.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/internal/stores/data_style/model/common.js b/internal/stores/data_style/model/common.js
index cbd15dc1..7eaeadc8 100644
--- a/internal/stores/data_style/model/common.js
+++ b/internal/stores/data_style/model/common.js
@@ -69,16 +69,13 @@ export function useModelCommonStyle() {
       return;
     }
 
+    const params = { id, block_ids: viewer_ids, color_mode: activeColoring };
     if (activeColoring === "constant") {
       await mutateComponentStyles(id, component_ids, {
         coloring: {
           constant: color,
         },
       });
-    }
-
-    const params = { id, block_ids: viewer_ids, color_mode: activeColoring };
-    if (activeColoring === "constant") {
       params.color = color;
     }