@geode/opengeodeweb-front 10.25.0-rc.7 → 10.25.0

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

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

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

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

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

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

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

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

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

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

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

@@ -4,7 +4,12 @@ import { useBackStore } from "@ogw_front/stores/back";
 
 const backStore = useBackStore();
 
-const name = defineModel("name", { type: String });
+const name = defineModel("name", {
+  type: String,
+  default: undefined,
+  set: (value) => value ?? name.value,
+});
+
 const range = defineModel("range", { type: Array });
 const colorMap = defineModel("colorMap", { type: String });
 

package/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" };
@@ -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) => {
@@ -173,7 +195,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
       />
@@ -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"

package/app/utils/default_styles/constants.js

@@ -1,4 +1,5 @@
 // Mesh
+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 };
@@ -13,14 +14,21 @@ 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_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"];
 
@@ -46,12 +54,19 @@ 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,
+  MESH_DEFAULT_ACTIVE_COLORING,
+  MODEL_DEFAULT_ACTIVE_COLORING,
 };

package/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 } from "./constants";
+export {
+  MESH_COMPONENT_TYPES,
+  DEFAULT_MODEL_COMPONENT_TYPE_COLORS,
+  MODEL_DEFAULT_COLOR,
+  MODEL_DEFAULT_ACTIVE_COLORING,
+} from "./constants";
 export { getDefaultStyle };

package/app/utils/default_styles/meshes.js

@@ -4,6 +4,7 @@ import {
   EDGES_DEFAULT_COLOR,
   EDGES_DEFAULT_VISIBILITY,
   EDGES_DEFAULT_WIDTH,
+  MESH_DEFAULT_ACTIVE_COLORING,
   POINTS_DEFAULT_COLOR,
   POINTS_DEFAULT_SIZE,
   POINTS_DEFAULT_VISIBILITY,
@@ -16,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: "color",
-      color,
+      active: MESH_DEFAULT_ACTIVE_COLORING,
+      constant,
       vertex: {
         name: undefined,
         storedConfigs: {},
@@ -35,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: "color",
-      color,
+      active: MESH_DEFAULT_ACTIVE_COLORING,
+      constant,
       edge: {
         name: undefined,
         storedConfigs: {},
@@ -55,16 +56,19 @@ 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: {
-      active: "color",
+      active: MESH_DEFAULT_ACTIVE_COLORING,
       cell: {
         name: undefined,
         storedConfigs: {},
       },
-      color,
+      constant,
       textures: undefined,
       vertex: {
         name: undefined,
@@ -76,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: "color",
-      color,
+      active: MESH_DEFAULT_ACTIVE_COLORING,
+      constant,
       textures: undefined,
       polygon: {
         name: undefined,
@@ -98,13 +102,13 @@ function meshPolygonsDefaultStyle(
 
 function meshPolyhedraDefaultStyle(
   visibility = POLYHEDRA_DEFAULT_VISIBILITY,
-  color = POLYHEDRA_DEFAULT_COLOR,
+  constant = POLYHEDRA_DEFAULT_COLOR,
 ) {
   return {
     visibility,
     coloring: {
-      active: "color",
-      color,
+      active: MESH_DEFAULT_ACTIVE_COLORING,
+      constant,
       polyhedron: {
         name: undefined,
         storedConfigs: {},