@geode/opengeodeweb-front 10.34.0-rc.2 → 10.34.0-rc.4

package/internal/stores/data_style/model/surfaces/{vertex.js → vertex.ts}

@@ -11,7 +11,36 @@ import { useViewerStore } from "@ogw_front/stores/viewer";
 // Local constants
 const attributeSchema =
   viewer_schemas.opengeodeweb_viewer.model.surfaces.attribute.vertex.attribute;
-function isModelSurfacesVertexAttributeValid({ name, item, minimum, maximum, colorMap }) {
+
+interface AttributeStoredConfig {
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color: unknown;
+}
+
+interface AttributeState {
+  name?: string;
+  item?: number;
+  storedConfigs?: Record<string, { lastItem: number } & Record<string, AttributeStoredConfig>>;
+}
+
+interface AttributeInput {
+  name: string | undefined;
+  item: number | undefined;
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  no_data_color?: unknown;
+}
+
+function isModelSurfacesVertexAttributeValid({
+  name,
+  item,
+  minimum,
+  maximum,
+  colorMap,
+}: AttributeInput): boolean {
   return (
     name !== undefined &&
     item !== undefined &&
@@ -26,13 +55,25 @@ function useModelSurfacesVertexAttribute() {
   const dataStore = useDataStore();
   const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
   const viewerStore = useViewerStore();
-  function modelSurfacesVertexAttribute(modelId, surfaceId) {
-    return modelSurfacesCommonStyle.modelSurfaceColoring(modelId, surfaceId).vertex;
+  function modelSurfacesVertexAttribute(modelId: string, surfaceId?: string): AttributeState {
+    return modelSurfacesCommonStyle.modelSurfaceColoring(modelId, surfaceId)
+      .vertex as AttributeState;
   }
-  function modelSurfacesVertexAttributeStoredConfig(modelId, surfaceId, name, item) {
+  function modelSurfacesVertexAttributeStoredConfig(
+    modelId: string,
+    surfaceId: string | undefined,
+    name: string | undefined,
+    item: number | undefined,
+  ): AttributeStoredConfig {
     const { storedConfigs } = modelSurfacesVertexAttribute(modelId, surfaceId);
-    if (storedConfigs && name in storedConfigs && item in storedConfigs[name]) {
-      return storedConfigs[name][item];
+    if (
+      storedConfigs &&
+      name !== undefined &&
+      name in storedConfigs &&
+      item !== undefined &&
+      item in storedConfigs[name]!
+    ) {
+      return storedConfigs[name]![item]!;
     }
     return {
       minimum: undefined,
@@ -41,7 +82,11 @@ function useModelSurfacesVertexAttribute() {
       no_data_color: DEFAULT_NO_DATA_COLOR,
     };
   }
-  function mutateModelSurfacesVertexStyle(modelId, surfaceIds, values) {
+  function mutateModelSurfacesVertexStyle(
+    modelId: string,
+    surfaceIds: string[],
+    values: Record<string, unknown>,
+  ) {
     if (surfaceIds.length > 1) {
       modelSurfacesCommonStyle.mutateModelSurfacesTypeColoring(modelId, {
         vertex: values,
@@ -51,50 +96,76 @@ function useModelSurfacesVertexAttribute() {
       vertex: values,
     });
   }
-  function setModelSurfacesVertexAttributeStoredConfig(modelId, surfaceIds, name, item, config) {
+  function setModelSurfacesVertexAttributeStoredConfig(
+    modelId: string,
+    surfaceIds: string[],
+    name: string | undefined,
+    item: number | undefined,
+    config: Partial<AttributeStoredConfig>,
+  ) {
     return mutateModelSurfacesVertexStyle(modelId, surfaceIds, {
       storedConfigs: {
-        [name]: {
+        [name as string]: {
           lastItem: item,
-          [item]: config,
+          [item as number]: config,
         },
       },
     });
   }
-  function modelSurfacesVertexAttributeName(modelId, surfaceId) {
+  function modelSurfacesVertexAttributeName(
+    modelId: string,
+    surfaceId?: string,
+  ): string | undefined {
     return modelSurfacesVertexAttribute(modelId, surfaceId).name;
   }
-  function modelSurfacesVertexAttributeLastItem(modelId, surfaceId, name) {
+  function modelSurfacesVertexAttributeLastItem(
+    modelId: string,
+    surfaceId: string | undefined,
+    name: string | undefined,
+  ): number {
     const { storedConfigs } = modelSurfacesVertexAttribute(modelId, surfaceId);
-    if (!(name in storedConfigs)) {
-      return 0;
+    if (storedConfigs && name !== undefined && name in storedConfigs) {
+      return storedConfigs[name]!.lastItem;
     }
-    return storedConfigs[name].lastItem;
+    return 0;
   }
-  function modelSurfacesVertexAttributeItem(modelId, surfaceId) {
+  function modelSurfacesVertexAttributeItem(modelId: string, surfaceId?: string): number {
     const vertexAttribute = modelSurfacesVertexAttribute(modelId, surfaceId);
     return (
       vertexAttribute.item ??
       modelSurfacesVertexAttributeLastItem(modelId, surfaceId, vertexAttribute.name)
     );
   }
-  function modelSurfacesVertexAttributeRange(modelId, surfaceId) {
+  function modelSurfacesVertexAttributeRange(
+    modelId: string,
+    surfaceId?: string,
+  ): [number | undefined, number | undefined] {
     const name = modelSurfacesVertexAttributeName(modelId, surfaceId);
     const item = modelSurfacesVertexAttributeItem(modelId, surfaceId);
     const storedConfig = modelSurfacesVertexAttributeStoredConfig(modelId, surfaceId, name, item);
     const { minimum, maximum } = storedConfig;
     return [minimum, maximum];
   }
-  function modelSurfacesVertexAttributeColorMap(modelId, surfaceId) {
+  function modelSurfacesVertexAttributeColorMap(
+    modelId: string,
+    surfaceId?: string,
+  ): string | undefined {
     const name = modelSurfacesVertexAttributeName(modelId, surfaceId);
     const item = modelSurfacesVertexAttributeItem(modelId, surfaceId);
     const storedConfig = modelSurfacesVertexAttributeStoredConfig(modelId, surfaceId, name, item);
     return storedConfig.colorMap;
   }
   async function setModelSurfacesVertexAttribute(
-    modelId,
-    surfaceIds,
-    { name, item, minimum, maximum, colorMap, no_data_color = DEFAULT_NO_DATA_COLOR },
+    modelId: string,
+    surfaceIds: string[],
+    {
+      name,
+      item,
+      minimum,
+      maximum,
+      colorMap,
+      no_data_color = DEFAULT_NO_DATA_COLOR,
+    }: AttributeInput,
   ) {
     mutateModelSurfacesVertexStyle(modelId, surfaceIds, {
       name,
@@ -106,7 +177,7 @@ function useModelSurfacesVertexAttribute() {
       colorMap,
       no_data_color,
     });
-    const points = getRGBPointsFromPreset(colorMap);
+    const points = getRGBPointsFromPreset(colorMap as string);
     const surface_viewer_ids = await dataStore.getMeshComponentsViewerIds(modelId, surfaceIds);
     const params = {
       id: modelId,
@@ -123,7 +194,7 @@ function useModelSurfacesVertexAttribute() {
       params,
     });
   }
-  function applyVertexAttribute(modelId, surfaceIds) {
+  function applyVertexAttribute(modelId: string, surfaceIds: string[]) {
     const name = modelSurfacesVertexAttributeName(modelId, surfaceIds[0]);
     const item = modelSurfacesVertexAttributeItem(modelId, surfaceIds[0]);
     const storedConfig = modelSurfacesVertexAttributeStoredConfig(
@@ -132,7 +203,7 @@ function useModelSurfacesVertexAttribute() {
       name,
       item,
     );
-    const attribute = {
+    const attribute: AttributeInput = {
       name,
       item,
       minimum: storedConfig.minimum,
@@ -145,7 +216,11 @@ function useModelSurfacesVertexAttribute() {
     }
     return Promise.resolve();
   }
-  function setModelSurfacesVertexAttributeName(modelId, surfaceIds, name) {
+  function setModelSurfacesVertexAttributeName(
+    modelId: string,
+    surfaceIds: string[],
+    name: string,
+  ) {
     const item = modelSurfacesVertexAttributeLastItem(modelId, surfaceIds[0], name);
     mutateModelSurfacesVertexStyle(modelId, surfaceIds, {
       name,
@@ -153,13 +228,22 @@ function useModelSurfacesVertexAttribute() {
     });
     return applyVertexAttribute(modelId, surfaceIds);
   }
-  function setModelSurfacesVertexAttributeItem(modelId, surfaceIds, item) {
+  function setModelSurfacesVertexAttributeItem(
+    modelId: string,
+    surfaceIds: string[],
+    item: number,
+  ) {
     mutateModelSurfacesVertexStyle(modelId, surfaceIds, {
       item,
     });
     return applyVertexAttribute(modelId, surfaceIds);
   }
-  function setModelSurfacesVertexAttributeRange(modelId, surfaceIds, minimum, maximum) {
+  function setModelSurfacesVertexAttributeRange(
+    modelId: string,
+    surfaceIds: string[],
+    minimum: number,
+    maximum: number,
+  ) {
     const name = modelSurfacesVertexAttributeName(modelId, surfaceIds[0]);
     const item = modelSurfacesVertexAttributeItem(modelId, surfaceIds[0]);
     setModelSurfacesVertexAttributeStoredConfig(modelId, surfaceIds, name, item, {
@@ -168,7 +252,11 @@ function useModelSurfacesVertexAttribute() {
     });
     return applyVertexAttribute(modelId, surfaceIds);
   }
-  function setModelSurfacesVertexAttributeColorMap(modelId, surfaceIds, colorMap) {
+  function setModelSurfacesVertexAttributeColorMap(
+    modelId: string,
+    surfaceIds: string[],
+    colorMap: string | undefined,
+  ) {
     const name = modelSurfacesVertexAttributeName(modelId, surfaceIds[0]);
     const item = modelSurfacesVertexAttributeItem(modelId, surfaceIds[0]);
     setModelSurfacesVertexAttributeStoredConfig(modelId, surfaceIds, name, item, {
@@ -176,13 +264,17 @@ function useModelSurfacesVertexAttribute() {
     });
     return applyVertexAttribute(modelId, surfaceIds);
   }
-  function modelSurfacesVertexAttributeNoDataColor(modelId, surfaceId) {
+  function modelSurfacesVertexAttributeNoDataColor(modelId: string, surfaceId?: string): unknown {
     const name = modelSurfacesVertexAttributeName(modelId, surfaceId);
     const item = modelSurfacesVertexAttributeItem(modelId, surfaceId);
     const storedConfig = modelSurfacesVertexAttributeStoredConfig(modelId, surfaceId, name, item);
     return storedConfig.no_data_color;
   }
-  async function setModelSurfacesVertexAttributeNoDataColor(modelId, surfaceIds, no_data_color) {
+  async function setModelSurfacesVertexAttributeNoDataColor(
+    modelId: string,
+    surfaceIds: string[],
+    no_data_color: unknown,
+  ) {
     const name = modelSurfacesVertexAttributeName(modelId, surfaceIds[0]);
     const item = modelSurfacesVertexAttributeItem(modelId, surfaceIds[0]);
     const storedConfig = modelSurfacesVertexAttributeStoredConfig(

package/internal/stores/data_style/model/surfaces/{visibility.js → visibility.ts}

@@ -8,11 +8,15 @@ export function useModelSurfacesVisibility() {
   const modelCommonStyle = useModelCommonStyle();
   const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
 
-  function modelSurfaceVisibility(id, surface_id) {
+  function modelSurfaceVisibility(id: string, surface_id?: string): unknown {
     return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).visibility;
   }
 
-  function setModelSurfacesVisibility(modelId, surfaces_ids, visibility) {
+  function setModelSurfacesVisibility(
+    modelId: string,
+    surfaces_ids: string[],
+    visibility: boolean | undefined,
+  ) {
     return modelCommonStyle.setModelTypeVisibility(modelId, surfaces_ids, visibility, schema);
   }
 

package/internal/stores/data_style/model/{visibility.js → visibility.ts}

@@ -7,13 +7,22 @@ import { useModelSelection } from "./selection";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
+// The four per-component-type style composables (Surface/Line/Block/Corner) each expose a different, large set of methods (color, visibility, per-attribute-kind getters/setters...). This module only cares about looking a handful of them up dynamically by name, so a precise structural type for componentStyleFunctions isn't worth modelling here; `any` keeps the dynamic dispatch table honest about that.
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ComponentStyleFunctions = Record<"Surface" | "Line" | "Block" | "Corner", any>;
+
+interface ModelComponent {
+  geode_id: string;
+  type: string;
+}
+
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
-async function getModelComponentsMap(modelId) {
+async function getModelComponentsMap(modelId: string) {
   const dataStore = useDataStore();
   const results = await Promise.all(
     MESH_COMPONENT_TYPES.map(async (type) => {
       const geodeIds = await dataStore.getMeshComponentGeodeIds(modelId, type);
-      return geodeIds.map((geode_id) => ({
+      return geodeIds.map((geode_id): ModelComponent => ({
         geode_id,
         type,
       }));
@@ -23,19 +32,19 @@ async function getModelComponentsMap(modelId) {
   return {
     allComponents,
     componentsMap: Object.fromEntries(
-      allComponents.map((component) => [component.geode_id, component]),
+      allComponents.map((component): [string, ModelComponent] => [component.geode_id, component]),
     ),
   };
 }
 async function dispatchToComponentTypes(
-  modelId,
-  componentIds,
-  action,
-  { componentStyleFunctions },
-  ...args
+  modelId: string,
+  componentIds: string[],
+  action: string,
+  { componentStyleFunctions }: { componentStyleFunctions: ComponentStyleFunctions },
+  ...args: unknown[]
 ) {
   const { componentsMap } = await getModelComponentsMap(modelId);
-  const idsByComponent = {
+  const idsByComponent: { Block: string[]; Surface: string[]; Line: string[]; Corner: string[] } = {
     Block: [],
     Surface: [],
     Line: [],
@@ -43,11 +52,11 @@ async function dispatchToComponentTypes(
   };
   for (const id of componentIds) {
     const type = componentsMap[id]?.type;
-    if (type && idsByComponent[type]) {
-      idsByComponent[type].push(id);
+    if (type && type in idsByComponent) {
+      (idsByComponent as Record<string, string[]>)[type]!.push(id);
     }
   }
-  const promises = [];
+  const promises: Promise<unknown>[] = [];
   if (action === "Visibility") {
     if (idsByComponent.Block.length > 0) {
       promises.push(
@@ -113,16 +122,17 @@ async function dispatchToComponentTypes(
   }
   return Promise.all(promises);
 }
-function useModelVisibilityStyle(componentStyleFunctions) {
+// oxlint-disable-next-line max-lines-per-function
+function useModelVisibilityStyle(componentStyleFunctions: ComponentStyleFunctions) {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
   const hybridViewerStore = useHybridViewerStore();
   const viewerStore = useViewerStore();
   const modelCommonStyle = useModelCommonStyle();
-  function modelVisibility(modelId) {
+  function modelVisibility(modelId: string): boolean | undefined {
     return dataStyleState.getStyle(modelId).visibility;
   }
-  function setModelVisibility(modelId, visibility) {
+  function setModelVisibility(modelId: string, visibility: boolean) {
     const schema = model_schemas.visibility;
     const params = {
       id: modelId,
@@ -147,7 +157,11 @@ function useModelVisibilityStyle(componentStyleFunctions) {
       },
     );
   }
-  async function setModelComponentTypeVisibility(modelId, componentType, visibility) {
+  async function setModelComponentTypeVisibility(
+    modelId: string,
+    componentType: string,
+    visibility: boolean,
+  ) {
     await modelCommonStyle.mutateModelComponentTypeStyle(modelId, componentType, {
       visibility,
     });
@@ -165,10 +179,14 @@ function useModelVisibilityStyle(componentStyleFunctions) {
       visibility,
     );
   }
-  async function setModelComponentsVisibility(modelId, componentIds, visibility) {
+  async function setModelComponentsVisibility(
+    modelId: string,
+    componentIds: string[],
+    visibility: boolean,
+  ) {
     const typeIds = componentIds.filter((id) => MESH_COMPONENT_TYPES.includes(id));
     const individualIds = componentIds.filter((id) => !MESH_COMPONENT_TYPES.includes(id));
-    const promises = [];
+    const promises: Promise<unknown>[] = [];
     for (const typeId of typeIds) {
       promises.push(setModelComponentTypeVisibility(modelId, typeId, visibility));
     }
@@ -187,11 +205,11 @@ function useModelVisibilityStyle(componentStyleFunctions) {
     }
     return await Promise.all(promises);
   }
-  function modelComponentVisibility(modelId, componentId) {
+  function modelComponentVisibility(modelId: string, componentId: string): boolean {
     const selection = useModelSelection(modelId, dataStyleState);
     return selection.value.includes(componentId);
   }
-  function modelComponentTypeVisibility(modelId, componentType) {
+  function modelComponentTypeVisibility(modelId: string, componentType: string): boolean {
     const selection = useModelSelection(modelId, dataStyleState);
     return selection.value.includes(componentType);
   }

package/internal/stores/data_style/state.ts

@@ -0,0 +1,269 @@
+// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
+// oxlint-disable eslint/sort-imports
+import type {
+  ModelComponentStyle,
+  ModelComponentTypeStyle,
+  ObjectStyle,
+  StyleValues,
+} from "./types";
+import { database } from "@ogw_internal/database/database";
+import { liveQuery } from "dexie";
+import merge from "lodash/merge";
+import { useObservable } from "@vueuse/rxjs";
+import type { Ref } from "vue";
+import type { Observable as RxObservable } from "rxjs";
+
+interface SharedState {
+  styles: Ref<Record<string, ObjectStyle>>;
+  modelComponentTypeStyles: Ref<Record<string, ModelComponentTypeStyle>>;
+  componentStyles: Ref<Record<string, ModelComponentStyle>>;
+  loadFromDatabase: () => Promise<void>;
+  updateComponentStyleCache: (
+    modelId: string,
+    componentId: string,
+    styleValues: StyleValues,
+  ) => void;
+  bulkUpdateComponentStyleCache: (
+    modelId: string,
+    componentStyleUpdates: { id_component: string; values: StyleValues }[],
+  ) => void;
+  bulkUpdateComponentStylesCache: (
+    modelId: string,
+    componentIds: string[],
+    styleValues: StyleValues,
+  ) => void;
+  updateModelComponentTypeStyleCache: (
+    modelId: string,
+    componentType: string,
+    styleValues: StyleValues,
+  ) => void;
+  updateStyleCache: (objectId: string, styleValues: StyleValues) => void;
+}
+
+let sharedState: SharedState | undefined = undefined;
+
+// oxlint-disable-next-line max-lines-per-function
+function getSharedState(): SharedState {
+  if (sharedState) {
+    return sharedState;
+  }
+
+  const dataStyleTable = database.data_style!;
+  const modelComponentDataStyleTable = database.model_component_datastyle!;
+  const modelComponentTypeDataStyleTable = database.model_component_type_datastyle!;
+
+  // Dexie's `liveQuery` returns Dexie's own `Observable` type, structurally distinct
+  // From rxjs's `Observable` that `useObservable` (from @vueuse/rxjs) expects, even
+  // Though they're interoperable at runtime (both are plain subscribe-based streams).
+  const styles = useObservable<Record<string, ObjectStyle>, Record<string, ObjectStyle>>(
+    liveQuery(async () => {
+      const objectStyles = (await dataStyleTable.toArray()) as ObjectStyle[];
+      const stylesByObjectId: Record<string, ObjectStyle> = {};
+      for (const objectStyle of objectStyles) {
+        stylesByObjectId[objectStyle.id] = objectStyle;
+      }
+      return stylesByObjectId;
+    }) as unknown as RxObservable<Record<string, ObjectStyle>>,
+    { initialValue: {} },
+  ) as Ref<Record<string, ObjectStyle>>;
+
+  const modelComponentTypeStyles = ref<Record<string, ModelComponentTypeStyle>>({});
+  const componentStyles = ref<Record<string, ModelComponentStyle>>({});
+
+  async function loadFromDatabase() {
+    const [fetchedTypeStyles, fetchedComponentStyles] = await Promise.all([
+      modelComponentTypeDataStyleTable.toArray() as unknown as Promise<ModelComponentTypeStyle[]>,
+      modelComponentDataStyleTable.toArray() as unknown as Promise<ModelComponentStyle[]>,
+    ]);
+    const typeStylesMap: Record<string, ModelComponentTypeStyle> = {};
+    for (const typeStyle of fetchedTypeStyles) {
+      const cacheKey = `${typeStyle.id_model}_${typeStyle.type}`;
+      typeStylesMap[cacheKey] = typeStyle;
+    }
+    modelComponentTypeStyles.value = typeStylesMap;
+
+    const componentStylesMap: Record<string, ModelComponentStyle> = {};
+    for (const componentStyle of fetchedComponentStyles) {
+      const cacheKey = `${componentStyle.id_model}_${componentStyle.id_component}`;
+      componentStylesMap[cacheKey] = componentStyle;
+    }
+    componentStyles.value = componentStylesMap;
+  }
+
+  loadFromDatabase();
+
+  function updateComponentStyleCache(
+    modelId: string,
+    componentId: string,
+    styleValues: StyleValues,
+  ) {
+    const cacheKey = `${modelId}_${componentId}`;
+    const existingStyle = componentStyles.value[cacheKey];
+    if (existingStyle) {
+      merge(existingStyle, styleValues);
+    } else {
+      componentStyles.value[cacheKey] = merge(
+        { id_model: modelId, id_component: componentId },
+        styleValues,
+      );
+    }
+  }
+
+  function bulkUpdateComponentStyleCache(
+    modelId: string,
+    componentStyleUpdates: { id_component: string; values: StyleValues }[],
+  ) {
+    const updatedComponentStyles = { ...componentStyles.value };
+    for (const { id_component: componentId, values: styleValues } of componentStyleUpdates) {
+      const cacheKey = `${modelId}_${componentId}`;
+      const existingStyle = updatedComponentStyles[cacheKey];
+      if (existingStyle) {
+        updatedComponentStyles[cacheKey] = merge(
+          {},
+          existingStyle,
+          styleValues,
+        ) as ModelComponentStyle;
+      } else {
+        updatedComponentStyles[cacheKey] = merge(
+          { id_model: modelId, id_component: componentId },
+          styleValues,
+        );
+      }
+    }
+    componentStyles.value = updatedComponentStyles;
+  }
+
+  function bulkUpdateComponentStylesCache(
+    modelId: string,
+    componentIds: string[],
+    styleValues: StyleValues,
+  ) {
+    const updatedComponentStyles = { ...componentStyles.value };
+    for (const componentId of componentIds) {
+      const cacheKey = `${modelId}_${componentId}`;
+      const existingStyle = updatedComponentStyles[cacheKey];
+      if (existingStyle) {
+        updatedComponentStyles[cacheKey] = merge(
+          {},
+          existingStyle,
+          styleValues,
+        ) as ModelComponentStyle;
+      } else {
+        updatedComponentStyles[cacheKey] = merge(
+          { id_model: modelId, id_component: componentId },
+          styleValues,
+        );
+      }
+    }
+    componentStyles.value = updatedComponentStyles;
+  }
+
+  function updateModelComponentTypeStyleCache(
+    modelId: string,
+    componentType: string,
+    styleValues: StyleValues,
+  ) {
+    const cacheKey = `${modelId}_${componentType}`;
+    if (!modelComponentTypeStyles.value[cacheKey]) {
+      modelComponentTypeStyles.value[cacheKey] = { id_model: modelId, type: componentType };
+    }
+    merge(modelComponentTypeStyles.value[cacheKey], styleValues);
+  }
+
+  function updateStyleCache(objectId: string, styleValues: StyleValues) {
+    if (!styles.value[objectId]) {
+      styles.value[objectId] = { id: objectId };
+    }
+    merge(styles.value[objectId], styleValues);
+  }
+
+  sharedState = {
+    styles,
+    modelComponentTypeStyles,
+    componentStyles,
+    loadFromDatabase,
+    updateComponentStyleCache,
+    bulkUpdateComponentStyleCache,
+    bulkUpdateComponentStylesCache,
+    updateModelComponentTypeStyleCache,
+    updateStyleCache,
+  };
+
+  return sharedState;
+}
+
+// oxlint-disable-next-line max-lines-per-function
+export function useDataStyleState() {
+  const dataStyleTable = database.data_style!;
+  const modelComponentDataStyleTable = database.model_component_datastyle!;
+  const modelComponentTypeDataStyleTable = database.model_component_type_datastyle!;
+
+  const state = getSharedState();
+  const { styles, modelComponentTypeStyles, componentStyles } = state;
+
+  const objectVisibility = computed(() => (objectId: string): boolean | undefined => {
+    const style = styles.value[objectId];
+    if (style) {
+      return style.visibility;
+    }
+    return false;
+  });
+
+  const selectedObjects = computed((): string[] => {
+    const visibleObjectIds: string[] = [];
+    for (const [objectId, objectStyle] of Object.entries(styles.value)) {
+      if (objectStyle.visibility === true) {
+        visibleObjectIds.push(objectId);
+      }
+    }
+    return visibleObjectIds;
+  });
+
+  function getStyle(objectId: string): ObjectStyle {
+    return { ...toRaw(styles.value[objectId]) } as ObjectStyle;
+  }
+
+  function mutateStyle(objectId: string, styleValues: StyleValues) {
+    state.updateStyleCache(objectId, styleValues);
+    const currentStyle = getStyle(objectId);
+    merge(currentStyle, styleValues);
+    return dataStyleTable.put(structuredClone({ ...toRaw(currentStyle), id: objectId }));
+  }
+
+  function getComponentStyle(modelId: string, componentId: string): ModelComponentStyle {
+    const cacheKey = `${modelId}_${componentId}`;
+    return merge({ coloring: {} }, componentStyles.value[cacheKey]) as ModelComponentStyle;
+  }
+
+  function getModelComponentTypeStyle(
+    modelId: string,
+    componentType: string,
+  ): ModelComponentTypeStyle {
+    const cacheKey = `${modelId}_${componentType}`;
+    return merge(
+      { coloring: {} },
+      modelComponentTypeStyles.value[cacheKey],
+    ) as ModelComponentTypeStyle;
+  }
+
+  async function clear(): Promise<void> {
+    await Promise.all([
+      dataStyleTable.clear(),
+      modelComponentDataStyleTable.clear(),
+      modelComponentTypeDataStyleTable.clear(),
+    ]);
+    modelComponentTypeStyles.value = {};
+    componentStyles.value = {};
+  }
+
+  return {
+    ...state,
+    getStyle,
+    getComponentStyle,
+    getModelComponentTypeStyle,
+    mutateStyle,
+    objectVisibility,
+    selectedObjects,
+    clear,
+  };
+}