@geode/opengeodeweb-front 10.9.0 → 10.10.0-rc.1

package/app/assets/viewer_svgs/model_component_color.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="17.400564mm"
+   height="14.617167mm"
+   viewBox="0 0 61.655541 51.793112"
+   version="1.1"
+   xmlns="http://www.w3.org/2000/svg">
+
+  <!-- Face du dessus : décalée vers le haut -->
+  <path
+     style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.7;stroke-linecap:butt;stroke-linejoin:miter;"
+     d="m 13.063,4.470 h 22.582 l 13.122,6.576 h -22.582 z" />
+
+  <!-- Face droite : décalée vers la droite -->
+  <rect
+     style="fill:#000000;fill-opacity:1;stroke:none;"
+     width="22.5"
+     height="22.4"
+     x="30.0"
+     y="13.5" />
+
+  <!-- Face gauche : semi-transparente, décalée vers la gauche -->
+  <path
+     style="fill:#000000;fill-opacity:0.45;stroke:none;"
+     d="m 6.755,12.474 14.814,7.424 v 21.143 l -14.814,-7.424 z" />
+
+  <!-- Arêtes de la face du dessus -->
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.7;stroke-linecap:butt;stroke-linejoin:miter;"
+     d="m 13.063,4.470 h 22.582 l 13.122,6.576 h -22.582 z" />
+
+  <!-- Arêtes face droite -->
+  <rect
+     style="fill:none;stroke:#000000;stroke-width:0.7;"
+     width="22.5"
+     height="22.4"
+     x="30.0"
+     y="13.5" />
+
+  <!-- Arêtes face gauche -->
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.7;stroke-linecap:butt;stroke-linejoin:miter;"
+     d="m 6.755,12.474 14.814,7.424 v 21.143 l -14.814,-7.424 z" />
+
+</svg>

package/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,

package/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>

package/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">

package/app/stores/data_style.js

@@ -1,12 +1,12 @@
 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();
@@ -79,18 +79,14 @@ export const useDataStyleStore = defineStore("dataStyle", () => {
   }
 
   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,
   };
 });

package/app/stores/menu.js

@@ -36,6 +36,7 @@ import TetrahedralSolidTetrahedraOptions from "@ogw_front/components/Viewer/Tetr
 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 Section_menu = [ModelEdgesOptions, ModelPointsOptions];
 
 const StructuralModel_menu = [ModelEdgesOptions, ModelPointsOptions];
 
+const ModelComponent_menu = [ModelComponentsOptions];
+
 const menusData = {
   mesh: {
     EdgedCurve2D: EdgedCurve_menu,
@@ -114,6 +117,9 @@ const menusData = {
     Section: Section_menu,
     StructuralModel: StructuralModel_menu,
   },
+  model_component: {
+    component: ModelComponent_menu,
+  },
 };
 
 export const useMenuStore = defineStore("menu", () => {

package/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) {

package/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) {

package/internal/stores/data_style/mesh/index.js

@@ -5,7 +5,7 @@ import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schem
 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";
@@ -18,7 +18,7 @@ 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();

package/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) {

package/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) {

package/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) {

package/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 {

package/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 {

package/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 {

package/internal/stores/data_style/model/index.js

@@ -1,7 +1,7 @@
 import { database } from "@ogw_internal/database/database";
 import { liveQuery } from "dexie";
 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 { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useModelBlocksStyle } from "./blocks";
 import { useModelCornersStyle } from "./corners";
@@ -20,7 +20,7 @@ const MESH_TYPES = MESH_CONFIG.map((config) => config.type);
 
 export function useModelStyle() {
   const dataStore = useDataStore();
-  const dataStyleStateStore = useDataStyleStateStore();
+  const dataStyleState = useDataStyleState();
   const modelCornersStyleStore = useModelCornersStyle();
   const modelBlocksStyleStore = useModelBlocksStyle();
   const modelEdgesStyleStore = useModelEdgesStyle();
@@ -38,7 +38,7 @@ export function useModelStyle() {
       }
     }
 
-    const groupStyles = dataStyleStateStore.getStyle(modelId);
+    const groupStyles = dataStyleState.getStyle(modelId);
     const selection = [];
     for (const type of MESH_TYPES) {
       const typeComponents = componentsByType[type];
@@ -66,7 +66,7 @@ export function useModelStyle() {
   }
 
   function modelVisibility(modelId) {
-    return dataStyleStateStore.getStyle(modelId).visibility;
+    return dataStyleState.getStyle(modelId).visibility;
   }
 
   function setModelVisibility(modelId, visibility) {
@@ -76,7 +76,7 @@ export function useModelStyle() {
       {
         response_function: async () => {
           await hybridViewerStore.setVisibility(modelId, visibility);
-          await dataStyleStateStore.mutateStyle(modelId, { visibility });
+          await dataStyleState.mutateStyle(modelId, { visibility });
           return { id: modelId, visibility };
         },
       },
@@ -122,6 +122,10 @@ export function useModelStyle() {
     return selection;
   }
 
+  function getModelComponentColor(modelId, componentId) {
+    return dataStyleState.getComponentStyle(modelId, componentId).color;
+  }
+
   async function setModelComponentsVisibility(modelId, componentIds, visibility) {
     const allComponents = await database.model_components.where("id").equals(modelId).toArray();
     const componentsMap = Object.fromEntries(
@@ -145,13 +149,32 @@ export function useModelStyle() {
           const schema = model_schemas[`${type.toLowerCase()}s`].visibility;
           await viewerStore.request(schema, { id: modelId, block_ids: viewerIds, visibility });
         }
-        return dataStyleStateStore.mutateComponentStyles(modelId, idsToUpdate, { visibility });
+        return dataStyleState.mutateComponentStyles(modelId, idsToUpdate, { visibility });
+      }),
+    );
+  }
+
+  async function setModelComponentsColor(modelId, componentIds, color) {
+    const allComponents = await database.model_components.where("id").equals(modelId).toArray();
+    const componentsMap = Object.fromEntries(
+      allComponents.map((component) => [component.geode_id, component]),
+    );
+    const handlers = {
+      Corner: (ids) => modelCornersStyleStore.setModelCornersColor(modelId, ids, color),
+      Line: (ids) => modelLinesStyleStore.setModelLinesColor(modelId, ids, color),
+      Surface: (ids) => modelSurfacesStyleStore.setModelSurfacesColor(modelId, ids, color),
+      Block: (ids) => modelBlocksStyleStore.setModelBlocksColor(modelId, ids, color),
+    };
+    return Promise.all(
+      MESH_TYPES.map((type) => {
+        const idsForType = componentIds.filter((id) => componentsMap[id]?.type === type);
+        return handlers[type](idsForType);
       }),
     );
   }
 
   function applyModelStyle(modelId) {
-    const style = dataStyleStateStore.getStyle(modelId);
+    const style = dataStyleState.getStyle(modelId);
     const handlers = {
       visibility: () => setModelVisibility(modelId, style.visibility),
       corners: () => modelCornersStyleStore.applyModelCornersStyle(modelId),
@@ -194,13 +217,15 @@ export function useModelStyle() {
     visibleMeshComponents,
     setModelVisibility,
     setModelComponentsVisibility,
+    getModelComponentColor,
+    setModelComponentsColor,
     applyModelStyle,
     setModelMeshComponentsDefaultStyle,
-    ...useModelBlocksStyle(),
-    ...useModelCornersStyle(),
-    ...useModelEdgesStyle(),
-    ...useModelLinesStyle(),
-    ...useModelPointsStyle(),
-    ...useModelSurfacesStyle(),
+    ...modelBlocksStyleStore,
+    ...modelCornersStyleStore,
+    ...modelEdgesStyleStore,
+    ...modelLinesStyleStore,
+    ...modelPointsStyleStore,
+    ...modelSurfacesStyleStore,
   };
 }

package/internal/stores/data_style/model/lines/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 useModelLinesCommonStyle() {
-  const dataStyleStateStore = useDataStyleStateStore();
+  const dataStyleState = useDataStyleState();
 
   function modelLinesStyle(id) {
-    return dataStyleStateStore.getStyle(id).lines;
+    return dataStyleState.getStyle(id).lines;
   }
 
   function modelLineStyle(id, line_id) {
     const groupStyle = modelLinesStyle(id);
-    const individualStyle = dataStyleStateStore.getComponentStyle(id, line_id);
+    const individualStyle = dataStyleState.getComponentStyle(id, line_id);
     return merge({}, groupStyle, individualStyle);
   }
 
   function mutateModelLinesStyle(id, line_ids, values) {
-    return dataStyleStateStore.mutateComponentStyles(id, line_ids, values);
+    return dataStyleState.mutateComponentStyles(id, line_ids, values);
   }
 
   function mutateModelLineStyle(id, line_id, values) {
-    return dataStyleStateStore.mutateComponentStyle(id, line_id, values);
+    return dataStyleState.mutateComponentStyle(id, line_id, values);
   }
 
   return {

package/internal/stores/data_style/model/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 useModelPointsCommonStyle() {
-  const dataStyleStateStore = useDataStyleStateStore();
+  const dataStyleState = useDataStyleState();
 
   function mutateModelPointsStyle(id, values) {
-    return dataStyleStateStore.mutateStyle(id, {
+    return dataStyleState.mutateStyle(id, {
       points: values,
     });
   }
 
   function modelPointsStyle(id) {
-    return dataStyleStateStore.getStyle(id).points;
+    return dataStyleState.getStyle(id).points;
   }
 
   return {

package/internal/stores/data_style/model/surfaces/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 useModelSurfacesCommonStyle() {
-  const dataStyleStateStore = useDataStyleStateStore();
+  const dataStyleState = useDataStyleState();
 
   function modelSurfacesStyle(id) {
-    return dataStyleStateStore.getStyle(id).surfaces;
+    return dataStyleState.getStyle(id).surfaces;
   }
 
   function modelSurfaceStyle(id, surface_id) {
     const groupStyle = modelSurfacesStyle(id);
-    const individualStyle = dataStyleStateStore.getComponentStyle(id, surface_id);
+    const individualStyle = dataStyleState.getComponentStyle(id, surface_id);
     return merge({}, groupStyle, individualStyle);
   }
 
   function mutateModelSurfacesStyle(id, surface_ids, values) {
-    return dataStyleStateStore.mutateComponentStyles(id, surface_ids, values);
+    return dataStyleState.mutateComponentStyles(id, surface_ids, values);
   }
 
   function mutateModelSurfaceStyle(id, surface_id, values) {
-    return dataStyleStateStore.mutateComponentStyle(id, surface_id, values);
+    return dataStyleState.mutateComponentStyle(id, surface_id, values);
   }
 
   return {

package/internal/stores/data_style/state.js

@@ -3,7 +3,7 @@ import { liveQuery } from "dexie";
 import merge from "lodash/merge";
 import { useObservable } from "@vueuse/rxjs";
 
-export const useDataStyleStateStore = defineStore("dataStyleState", () => {
+export function useDataStyleState() {
   const styles = useObservable(
     liveQuery(async () => {
       const allStyles = await database.data_style.toArray();
@@ -137,15 +137,15 @@ export const useDataStyleStateStore = defineStore("dataStyleState", () => {
   }
 
   return {
+    styles,
+    componentStyles,
+    objectVisibility,
+    selectedObjects,
     getStyle,
     mutateStyle,
     getComponentStyle,
     mutateComponentStyle,
     mutateComponentStyles,
-    styles,
-    componentStyles,
-    objectVisibility,
-    selectedObjects,
     clear,
   };
-});
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.9.0",
+  "version": "10.10.0-rc.1",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -34,8 +34,8 @@
     "build": ""
   },
   "dependencies": {
-    "@geode/opengeodeweb-back": "latest",
-    "@geode/opengeodeweb-viewer": "latest",
+    "@geode/opengeodeweb-back": "next",
+    "@geode/opengeodeweb-viewer": "next",
     "@kitware/vtk.js": "33.3.0",
     "@mdi/font": "7.4.47",
     "@pinia/nuxt": "0.11.3",