feat(component_color): add component color for model_components

app/components/Viewer/ContextMenu.vue

@@ -174,6 +174,7 @@ function getItemStyle(index) {
           :index="index"
           :itemProps="{
             id: id,
+            meta_data,
             tooltip_location: getTooltipLocation(index),
             tooltip_origin: getTooltipOrigin(index),
             totalItems: menuItemCount,

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

@@ -0,0 +1,38 @@
+<script setup>
+import ModelColor from "@ogw_front/assets/viewer_svgs/model_component_color.svg";
+import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerOptionsColorPicker from "@ogw_front/components/Viewer/Options/ColorPicker.vue";
+
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+const { itemProps } = defineProps({
+  itemProps: { type: Object, required: true },
+});
+
+const modelId = computed(() => itemProps.meta_data.modelId);
+const componentId = computed(() => itemProps.id);
+
+const color = computed({
+  get: () => dataStyleStore.getModelComponentColor(modelId.value, componentId.value),
+  set: async (newValue) => {
+    await dataStyleStore.setModelComponentsColor(modelId.value, [componentId.value], newValue);
+    hybridViewerStore.remoteRender();
+  },
+});
+</script>
+
+<template>
+  <ViewerContextMenuItem :itemProps="itemProps" tooltip="Components color" :btn_image="ModelColor">
+    <template #options>
+      <v-row class="pa-0" align="center">
+        <v-col>
+          <ViewerOptionsColorPicker v-model="color" />
+        </v-col>
+      </v-row>
+    </template>
+  </ViewerContextMenuItem>
+</template>

app/components/Viewer/TreeComponent.vue

@@ -63,10 +63,10 @@ async function onSelectionChange(current) {
   }
 
   if (added.length > 0) {
-    await dataStyleStore.setComponentsVisibility(id, added, true);
+    await dataStyleStore.setModelComponentsVisibility(id, added, true);
   }
   if (removed.length > 0) {
-    await dataStyleStore.setComponentsVisibility(id, removed, false);
+    await dataStyleStore.setModelComponentsVisibility(id, removed, false);
   }
   hybridViewerStore.remoteRender();
 }
@@ -124,7 +124,14 @@ async function onSelectionChange(current) {
       <span
         class="treeview-item"
         :class="{ 'inactive-item': item.is_active === false }"
-        @contextmenu.prevent.stop="emit('show-menu', { event: $event, itemId: item })"
+        @contextmenu.prevent.stop="
+          emit('show-menu', {
+            event: $event,
+            itemId: item.id,
+            context_type: 'model_component',
+            modelId: id,
+          })
+        "
       >
         {{ item.title }}
         <v-tooltip v-if="item.category" activator="parent" location="right">

app/stores/data_style.js

@@ -1,96 +1,92 @@
 import { database } from "@ogw_internal/database/database.js";
 import { getDefaultStyle } from "@ogw_front/utils/default_styles";
 import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useMeshStyle } from "@ogw_internal/stores/data_style/mesh/index";
 import { useModelStyle } from "@ogw_internal/stores/data_style/model/index";
 
 export const useDataStyleStore = defineStore("dataStyle", () => {
-  const dataStyleState = useDataStyleStateStore();
+  const dataStyleState = useDataStyleState();
   const meshStyleStore = useMeshStyle();
   const modelStyleStore = useModelStyle();
   const dataStore = useDataStore();
 
   async function addDataStyle(id, geode_object) {
     await database.data_style.put(structuredClone({ id, ...getDefaultStyle(geode_object) }));
   }
 
   async function setVisibility(id, visibility) {
     const item = await dataStore.item(id);
     const { viewer_type } = item;
 
     if (viewer_type === "mesh") {
       return meshStyleStore.setMeshVisibility(id, visibility);
     }
     if (viewer_type === "model") {
       return modelStyleStore.setModelVisibility(id, visibility);
     }
     throw new Error("Unknown viewer_type");
   }
 
   async function applyDefaultStyle(id) {
     const item = await dataStore.item(id);
     const { viewer_type } = item;
 
     if (viewer_type === "mesh") {
       return meshStyleStore.applyMeshStyle(id);
     }
     if (viewer_type === "model") {
       return modelStyleStore.applyModelStyle(id);
     }
     throw new Error(`Unknown viewer_type: ${viewer_type}`);
   }
 
   function exportStores() {
     return {
       styles: dataStyleState.styles,
       componentStyles: dataStyleState.componentStyles,
     };
   }
 
   async function importStores(snapshot) {
     const stylesSnapshot = snapshot.styles;
     const componentStylesSnapshot = snapshot.componentStyles;
 
     await dataStyleState.clear();
 
     const style_promises = Object.entries(stylesSnapshot).map(([id, style]) =>
       database.data_style.put(structuredClone({ id, ...style })),
     );
     const component_style_promises = Object.values(componentStylesSnapshot).map((style) =>
       database.model_component_datastyle.put(structuredClone(style)),
     );
 
     await Promise.all([...style_promises, ...component_style_promises]);
   }
 
   function applyAllStylesFromState() {
     const ids = Object.keys(dataStyleState.styles);
     const promises = ids.map(async (id) => {
       const meta = await dataStore.item(id);
       const viewerType = meta.viewer_type;
       if (viewerType === "mesh") {
         return meshStyleStore.applyMeshStyle(id);
       } else if (viewerType === "model") {
         return modelStyleStore.applyModelStyle(id);
       }
     });
     return Promise.all(promises);
   }
 
   return {
-    styles: dataStyleState.styles,
-    getStyle: dataStyleState.getStyle,
-    objectVisibility: dataStyleState.objectVisibility,
-    selectedObjects: dataStyleState.selectedObjects,
-    ...meshStyleStore,
-    ...modelStyleStore,
-    setComponentsVisibility: modelStyleStore.setModelComponentsVisibility,
     addDataStyle,
     applyDefaultStyle,
     setVisibility,
     exportStores,
     importStores,
     applyAllStylesFromState,
+    ...dataStyleState,
+    ...meshStyleStore,
+    ...modelStyleStore,
   };
 });

app/stores/menu.js

@@ -17,7 +17,7 @@
 
 // Grid 2D components
 import Grid2DCellsOptions from "@ogw_front/components/Viewer/Grid/2D/CellsOptions";
 import Grid2DEdgesOptions from "@ogw_front/components/Viewer/Grid/2D/EdgesOptions";
 import Grid2DPointsOptions from "@ogw_front/components/Viewer/Grid/2D/PointsOptions";
 
 // Grid 3D components
@@ -36,6 +36,7 @@
 import TetrahedralSolidTrianglesOptions from "@ogw_front/components/Viewer/TetrahedralSolid/TrianglesOptions";
 
 // Model components
+import ModelComponentsOptions from "@ogw_front/components/Viewer/Generic/Model/ModelComponentsOptions";
 import ModelEdgesOptions from "@ogw_front/components/Viewer/Generic/Model/EdgesOptions";
 import ModelPointsOptions from "@ogw_front/components/Viewer/Generic/Model/PointsOptions";
 
@@ -88,6 +89,8 @@
 
 const StructuralModel_menu = [ModelEdgesOptions, ModelPointsOptions];
 
+const ModelComponent_menu = [ModelComponentsOptions];
+
 const menusData = {
   mesh: {
     EdgedCurve2D: EdgedCurve_menu,
@@ -114,38 +117,41 @@
     Section: Section_menu,
     StructuralModel: StructuralModel_menu,
   },
+  model_component: {
+    component: ModelComponent_menu,
+  },
 };
 
 export const useMenuStore = defineStore("menu", () => {
   const menus = shallowRef(menusData);
   const display_menu = ref(false);
   const current_id = ref(undefined);
   const menuX = ref(0);
   const menuY = ref(0);
   const containerWidth = ref(window.innerWidth);
   const containerHeight = ref(window.innerHeight);
   const containerTop = ref(0);
   const containerLeft = ref(0);
   const active_item_index = ref(undefined);
   const current_meta_data = ref({});
 
   function getMenuItems(objectType, geodeObject) {
     if (!objectType || !geodeObject || !menus.value[objectType]) {
       return [];
     }
     return menus.value[objectType][geodeObject] || [];
   }
 
   function closeMenu() {
     active_item_index.value = undefined;
     current_id.value = undefined;
     current_meta_data.value = {};
     menuX.value = 0;
     menuY.value = 0;
     display_menu.value = false;
   }
 
   async function openMenu(id, x, y, width, height, top, left, meta_data) {
     await closeMenu();
 
     if (meta_data) {

internal/stores/data_style/mesh/cells/common.js

@@ -1,16 +1,16 @@
-import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 
 export function useMeshCellsCommonStyle() {
-  const dataStyleStateStore = useDataStyleStateStore();
+  const dataStyleState = useDataStyleState();
 
   function mutateMeshCellsStyle(id, values) {
-    return dataStyleStateStore.mutateStyle(id, {
+    return dataStyleState.mutateStyle(id, {
       cells: values,
     });
   }
 
   function meshCellsStyle(id) {
-    return dataStyleStateStore.getStyle(id).cells;
+    return dataStyleState.getStyle(id).cells;
   }
 
   function meshCellsColoring(id) {

internal/stores/data_style/mesh/edges/common.js

@@ -1,16 +1,16 @@
-import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 
 export function useMeshEdgesCommonStyle() {
-  const dataStyleStateStore = useDataStyleStateStore();
+  const dataStyleState = useDataStyleState();
 
   function mutateMeshEdgesStyle(id, values) {
-    return dataStyleStateStore.mutateStyle(id, {
+    return dataStyleState.mutateStyle(id, {
       edges: values,
     });
   }
 
   function meshEdgesStyle(id) {
-    return dataStyleStateStore.getStyle(id).edges;
+    return dataStyleState.getStyle(id).edges;
   }
 
   function meshEdgesColoring(id) {

internal/stores/data_style/mesh/index.js

@@ -5,7 +5,7 @@
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 import { useMeshCellsStyle } from "./cells";
 import { useMeshEdgesStyle } from "./edges";
 import { useMeshPointsStyle } from "./points";
@@ -15,91 +15,91 @@
 // Local constants
 const meshSchemas = viewer_schemas.opengeodeweb_viewer.mesh;
 
 export function useMeshStyle() {
   const hybridViewerStore = useHybridViewerStore();
   const viewerStore = useViewerStore();
-  const dataStyleState = useDataStyleStateStore();
+  const dataStyleState = useDataStyleState();
   const meshPointsStyle = useMeshPointsStyle();
   const meshEdgesStyle = useMeshEdgesStyle();
   const meshCellsStyle = useMeshCellsStyle();
   const meshPolygonsStyle = useMeshPolygonsStyle();
   const meshPolyhedraStyle = useMeshPolyhedraStyle();
 
   function meshVisibility(id) {
     return dataStyleState.getStyle(id).visibility;
   }
   function setMeshVisibility(id, visibility) {
     return viewerStore.request(
       meshSchemas.visibility,
       { id, visibility },
       {
         response_function: async () => {
           await hybridViewerStore.setVisibility(id, visibility);
           return dataStyleState.mutateStyle(id, { visibility });
         },
       },
     );
   }
 
   function meshColor(id) {
     return dataStyleState.getStyle(id).color;
   }
 
   function setMeshColor(id, color) {
     return viewerStore.request(
       meshSchemas.color,
       { id, color },
       {
         response_function: () => dataStyleState.mutateStyle(id, { color }),
       },
     );
   }
 
   function applyMeshStyle(id) {
     const style = dataStyleState.getStyle(id);
     const promise_array = [];
     for (const [key, value] of Object.entries(style)) {
       if (key === "visibility") {
         promise_array.push(setMeshVisibility(id, value));
       } else if (key === "color") {
         promise_array.push(setMeshColor(id, value));
       } else if (key === "points") {
         promise_array.push(meshPointsStyle.applyMeshPointsStyle(id));
       } else if (key === "edges") {
         promise_array.push(meshEdgesStyle.applyMeshEdgesStyle(id));
       } else if (key === "cells") {
         promise_array.push(meshCellsStyle.applyMeshCellsStyle(id));
       } else if (key === "polygons") {
         promise_array.push(meshPolygonsStyle.applyMeshPolygonsStyle(id));
       } else if (key === "polyhedra") {
         promise_array.push(meshPolyhedraStyle.applyMeshPolyhedraStyle(id));
       } else if (
         key === "corners" ||
         key === "lines" ||
         key === "surfaces" ||
         key === "blocks" ||
         key === "attributes" ||
         key === "id"
       ) {
         // These keys are either handled elsewhere or not applicable to mesh objects
         continue;
       } else {
         throw new Error(`Unknown mesh key: ${key}`);
       }
     }
     return Promise.all(promise_array);
   }
 
   return {
     meshVisibility,
     setMeshVisibility,
     meshColor,
     setMeshColor,
     applyMeshStyle,
     ...meshPointsStyle,
     ...meshEdgesStyle,
     ...meshCellsStyle,
     ...meshPolygonsStyle,
     ...meshPolyhedraStyle,
   };
 }

internal/stores/data_style/mesh/points/common.js

@@ -1,16 +1,16 @@
-import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 
 export function useMeshPointsCommonStyle() {
-  const dataStyleStateStore = useDataStyleStateStore();
+  const dataStyleState = useDataStyleState();
 
   function mutateMeshPointsStyle(id, values) {
-    return dataStyleStateStore.mutateStyle(id, {
+    return dataStyleState.mutateStyle(id, {
       points: values,
     });
   }
 
   function meshPointsStyle(id) {
-    return dataStyleStateStore.getStyle(id).points;
+    return dataStyleState.getStyle(id).points;
   }
 
   function meshPointsColoring(id) {

internal/stores/data_style/mesh/polygons/common.js

@@ -1,16 +1,16 @@
-import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 
 export function useMeshPolygonsCommonStyle() {
-  const dataStyleStateStore = useDataStyleStateStore();
+  const dataStyleState = useDataStyleState();
 
   function mutateMeshPolygonsStyle(id, values) {
-    return dataStyleStateStore.mutateStyle(id, {
+    return dataStyleState.mutateStyle(id, {
       polygons: values,
     });
   }
 
   function meshPolygonsStyle(id) {
-    return dataStyleStateStore.getStyle(id).polygons;
+    return dataStyleState.getStyle(id).polygons;
   }
 
   function meshPolygonsColoring(id) {

internal/stores/data_style/mesh/polyhedra/common.js

@@ -1,16 +1,16 @@
-import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 
 export function useMeshPolyhedraCommonStyle() {
-  const dataStyleStateStore = useDataStyleStateStore();
+  const dataStyleState = useDataStyleState();
 
   function mutateMeshPolyhedraStyle(id, values) {
-    return dataStyleStateStore.mutateStyle(id, {
+    return dataStyleState.mutateStyle(id, {
       polyhedra: values,
     });
   }
 
   function meshPolyhedraStyle(id) {
-    return dataStyleStateStore.getStyle(id).polyhedra;
+    return dataStyleState.getStyle(id).polyhedra;
   }
 
   function meshPolyhedraColoring(id) {

internal/stores/data_style/model/blocks/common.js

@@ -1,25 +1,25 @@
 import merge from "lodash/merge";
-import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 
 export function useModelBlocksCommonStyle() {
-  const dataStyleStateStore = useDataStyleStateStore();
+  const dataStyleState = useDataStyleState();
 
   function modelBlocksStyle(id) {
-    return dataStyleStateStore.getStyle(id).blocks;
+    return dataStyleState.getStyle(id).blocks;
   }
 
   function modelBlockStyle(id, block_id) {
     const groupStyle = modelBlocksStyle(id);
-    const individualStyle = dataStyleStateStore.getComponentStyle(id, block_id);
+    const individualStyle = dataStyleState.getComponentStyle(id, block_id);
     return merge({}, groupStyle, individualStyle);
   }
 
   function mutateModelBlocksStyle(id, block_ids, values) {
-    return dataStyleStateStore.mutateComponentStyles(id, block_ids, values);
+    return dataStyleState.mutateComponentStyles(id, block_ids, values);
   }
 
   function mutateModelBlockStyle(id, block_id, values) {
-    return dataStyleStateStore.mutateComponentStyle(id, block_id, values);
+    return dataStyleState.mutateComponentStyle(id, block_id, values);
   }
 
   return {

internal/stores/data_style/model/corners/common.js

@@ -1,25 +1,25 @@
 import merge from "lodash/merge";
-import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 
 export function useModelCornersCommonStyle() {
-  const dataStyleStateStore = useDataStyleStateStore();
+  const dataStyleState = useDataStyleState();
 
   function modelCornersStyle(id) {
-    return dataStyleStateStore.getStyle(id).corners;
+    return dataStyleState.getStyle(id).corners;
   }
 
   function modelCornerStyle(id, corner_id) {
     const groupStyle = modelCornersStyle(id);
-    const individualStyle = dataStyleStateStore.getComponentStyle(id, corner_id);
+    const individualStyle = dataStyleState.getComponentStyle(id, corner_id);
     return merge({}, groupStyle, individualStyle);
   }
 
   function mutateModelCornersStyle(id, corner_ids, values) {
-    return dataStyleStateStore.mutateComponentStyles(id, corner_ids, values);
+    return dataStyleState.mutateComponentStyles(id, corner_ids, values);
   }
 
   function mutateModelCornerStyle(id, corner_id, values) {
-    return dataStyleStateStore.mutateComponentStyle(id, corner_id, values);
+    return dataStyleState.mutateComponentStyle(id, corner_id, values);
   }
 
   return {

internal/stores/data_style/model/edges/common.js

@@ -1,16 +1,16 @@
-import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
 
 export function useModelEdgesCommonStyle() {
-  const dataStyleStateStore = useDataStyleStateStore();
+  const dataStyleState = useDataStyleState();
 
   function mutateModelEdgesStyle(id, values) {
-    return dataStyleStateStore.mutateStyle(id, {
+    return dataStyleState.mutateStyle(id, {
       edges: values,
     });
   }
 
   function modelEdgesStyle(id) {
-    return dataStyleStateStore.getStyle(id).edges;
+    return dataStyleState.getStyle(id).edges;
   }
 
   return {