@geode/opengeodeweb-front 10.13.2 → 10.14.0-rc.1

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

@@ -1,54 +1,52 @@
-// Local imports
 import { useDataStore } from "@ogw_front/stores/data";
-import { useModelBlocksColorStyle } from "./color";
+import { useModelBlocksColor } from "./color";
 import { useModelBlocksCommonStyle } from "./common";
-import { useModelBlocksVisibilityStyle } from "./visibility";
+import { useModelBlocksVisibility } from "./visibility";
+
 async function setModelBlocksDefaultStyle(_id) {
   // Placeholder
 }
 
 export function useModelBlocksStyle() {
   const dataStore = useDataStore();
-  const modelBlocksCommonStyle = useModelBlocksCommonStyle();
-  const modelBlocksVisibilityStyle = useModelBlocksVisibilityStyle();
-  const modelBlocksColorStyle = useModelBlocksColorStyle();
+  const modelCommonStyle = useModelBlocksCommonStyle();
+  const modelVisibilityStyle = useModelBlocksVisibility();
+  const modelColorStyle = useModelBlocksColor();
 
-  async function applyModelBlocksStyle(id) {
-    const block_ids = await dataStore.getBlocksGeodeIds(id);
-    if (block_ids.length === 0) {
+  async function applyModelBlocksStyle(modelId) {
+    const blocks_ids = await dataStore.getBlocksGeodeIds(modelId);
+    if (!blocks_ids?.length) {
       return;
     }
 
     const visibilityGroups = {};
     const colorGroups = {};
 
-    for (const block_id of block_ids) {
-      const style = modelBlocksCommonStyle.modelBlockStyle(id, block_id);
+    for (const block_id of blocks_ids) {
+      const style = modelCommonStyle.modelBlockStyle(modelId, block_id);
 
-      const vKey = String(style.visibility);
-      if (!visibilityGroups[vKey]) {
-        visibilityGroups[vKey] = [];
+      const visibility = String(style.visibility);
+      if (!visibilityGroups[visibility]) {
+        visibilityGroups[visibility] = [];
       }
-      visibilityGroups[vKey].push(block_id);
+      visibilityGroups[visibility].push(block_id);
 
-      const cKey = JSON.stringify(style.color);
-      if (!colorGroups[cKey]) {
-        colorGroups[cKey] = [];
+      const color_mode = style.color_mode || "constant";
+      const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      if (!colorGroups[color_key]) {
+        colorGroups[color_key] = { color_mode, color: style.color, blocks_ids: [] };
       }
-      colorGroups[cKey].push(block_id);
+      colorGroups[color_key].blocks_ids.push(block_id);
     }
 
-    const promises = [];
-
-    for (const [vValue, ids] of Object.entries(visibilityGroups)) {
-      promises.push(
-        modelBlocksVisibilityStyle.setModelBlocksVisibility(id, ids, vValue === "true"),
-      );
-    }
-
-    for (const [cValue, ids] of Object.entries(colorGroups)) {
-      promises.push(modelBlocksColorStyle.setModelBlocksColor(id, ids, JSON.parse(cValue)));
-    }
+    const promises = [
+      ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
+        modelVisibilityStyle.setModelBlocksVisibility(modelId, ids, visibility === "true"),
+      ),
+      ...Object.values(colorGroups).map(({ color_mode, color, blocks_ids: ids }) =>
+        modelColorStyle.setModelBlocksColor(modelId, ids, color, color_mode),
+      ),
+    ];
 
     return Promise.all(promises);
   }
@@ -56,8 +54,8 @@ export function useModelBlocksStyle() {
   return {
     applyModelBlocksStyle,
     setModelBlocksDefaultStyle,
-    ...modelBlocksCommonStyle,
-    ...modelBlocksVisibilityStyle,
-    ...modelBlocksColorStyle,
+    ...modelCommonStyle,
+    ...modelVisibilityStyle,
+    ...modelColorStyle,
   };
 }

package/internal/stores/data_style/model/blocks/visibility.js

@@ -1,47 +1,20 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-// Local imports
-import { useDataStore } from "@ogw_front/stores/data";
 import { useModelBlocksCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-// Local constants
-const model_blocks_schemas = viewer_schemas.opengeodeweb_viewer.model.blocks;
+const schema = viewer_schemas.opengeodeweb_viewer.model.blocks.visibility;
 
-export function useModelBlocksVisibilityStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
+export function useModelBlocksVisibility() {
+  const modelCommonStyle = useModelCommonStyle();
   const modelBlocksCommonStyle = useModelBlocksCommonStyle();
 
   function modelBlockVisibility(id, block_id) {
-    const style = modelBlocksCommonStyle.modelBlockStyle(id, block_id);
-    return style.visibility ?? true;
+    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).visibility;
   }
 
-  function setModelBlocksVisibility(id, block_ids, visibility) {
-    if (!block_ids || block_ids.length === 0) {
-      return Promise.resolve();
-    }
-    return dataStore.getMeshComponentsViewerIds(id, block_ids).then((block_viewer_ids) => {
-      if (!block_viewer_ids || block_viewer_ids.length === 0) {
-        return modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, {
-          visibility,
-        });
-      }
-      return viewerStore.request(
-        model_blocks_schemas.visibility,
-        { id, block_ids: block_viewer_ids, visibility },
-        {
-          response_function: () =>
-            modelBlocksCommonStyle.mutateModelBlocksStyle(id, block_ids, { visibility }),
-        },
-      );
-    });
+  function setModelBlocksVisibility(modelId, blocks_ids, visibility) {
+    return modelCommonStyle.setModelTypeVisibility(modelId, blocks_ids, visibility, schema);
   }
 
-  return {
-    modelBlockVisibility,
-    setModelBlocksVisibility,
-  };
+  return { setModelBlocksVisibility, modelBlockVisibility };
 }

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

@@ -0,0 +1,97 @@
+import { DEFAULT_MODEL_COMPONENT_TYPE_COLORS } from "@ogw_front/utils/default_styles";
+import { dispatchToComponentTypes } from "./visibility";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+
+function useModelColorStyle(componentStyleFunctions) {
+  const dataStore = useDataStore();
+  const dataStyleState = useDataStyleState();
+  const modelCommonStyle = useModelCommonStyle();
+
+  function getModelComponentColor(modelId, componentId) {
+    return dataStyleState.getComponentStyle(modelId, componentId).color;
+  }
+
+  function getModelComponentEffectiveColor(modelId, componentId, type) {
+    const individualColor = getModelComponentColor(modelId, componentId);
+    if (individualColor !== undefined) {
+      return individualColor;
+    }
+    return getModelComponentTypeColor(modelId, type);
+  }
+
+  function getModelComponentColorMode(modelId, componentId) {
+    return dataStyleState.getComponentStyle(modelId, componentId).color_mode || "constant";
+  }
+
+  function getModelComponentTypeColor(modelId, type) {
+    return (
+      dataStyleState.getModelComponentTypeStyle(modelId, type).color ||
+      DEFAULT_MODEL_COMPONENT_TYPE_COLORS[type]
+    );
+  }
+
+  function getModelComponentTypeColorMode(modelId, type) {
+    return dataStyleState.getModelComponentTypeStyle(modelId, type).color_mode || "constant";
+  }
+
+  async function setModelComponentTypeColor(modelId, type, color) {
+    await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, {
+      color,
+      color_mode: "constant",
+    });
+    const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
+    if (idsForType.length === 0) {
+      return;
+    }
+    await setModelComponentsColor(modelId, idsForType, color);
+  }
+
+  async function setModelComponentTypeColorMode(modelId, type, color_mode) {
+    await modelCommonStyle.mutateModelComponentTypeStyle(modelId, type, { color_mode });
+    const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, type);
+    if (idsForType.length === 0) {
+      return;
+    }
+
+    if (color_mode === "random") {
+      await setModelComponentsColor(modelId, idsForType, undefined, color_mode);
+      return;
+    }
+    await modelCommonStyle.mutateComponentStyles(modelId, idsForType, { color_mode });
+  }
+
+  async function setModelComponentColorMode(modelId, componentId, color_mode) {
+    await modelCommonStyle.mutateComponentStyle(modelId, componentId, { color_mode });
+    if (color_mode === "random") {
+      await setModelComponentsColor(modelId, [componentId], undefined, color_mode);
+    }
+  }
+
+  async function setModelComponentsColor(modelId, componentIds, color, color_mode = "constant") {
+    await modelCommonStyle.mutateComponentStyles(modelId, componentIds, { color, color_mode });
+    return await dispatchToComponentTypes(
+      modelId,
+      componentIds,
+      "Color",
+      { componentStyleFunctions },
+      color,
+      color_mode,
+    );
+  }
+
+  return {
+    getModelComponentColor,
+    getModelComponentEffectiveColor,
+    getModelComponentColorMode,
+    getModelComponentTypeColor,
+    getModelComponentTypeColorMode,
+    setModelComponentTypeColor,
+    setModelComponentTypeColorMode,
+    setModelComponentColorMode,
+    setModelComponentsColor,
+  };
+}
+
+export { useModelColorStyle };

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

@@ -0,0 +1,132 @@
+import { database } from "@ogw_internal/database/database";
+import merge from "lodash/merge";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+
+export function useModelCommonStyle() {
+  const dataStore = useDataStore();
+  const viewerStore = useViewerStore();
+
+  async function mutateComponentStyle(id_model, id_component, values) {
+    const table = database.model_component_datastyle;
+    const key = [id_model, id_component];
+    const entry = (await table.get(key)) || { id_model, id_component };
+    merge(entry, values);
+    return table.put(structuredClone(toRaw(entry)));
+  }
+
+  function mutateModelComponentTypeStyle(id_model, type, values) {
+    return database.transaction("rw", database.model_component_type_datastyle, async () => {
+      const table = database.model_component_type_datastyle;
+      const key = [id_model, type];
+      const entry = (await table.get(key)) || { id_model, type };
+      merge(entry, values);
+      return table.put(structuredClone(toRaw(entry)));
+    });
+  }
+
+  function mutateComponentStyles(id_model, id_components, values) {
+    return database.transaction("rw", database.model_component_datastyle, async () => {
+      const all_styles = await database.model_component_datastyle
+        .where("id_model")
+        .equals(id_model)
+        .toArray();
+
+      const style_map = {};
+      for (const style of all_styles) {
+        style_map[style.id_component] = style;
+      }
+
+      const updates = id_components.map((id_component) => {
+        const style = style_map[id_component] || { id_model, id_component };
+        merge(style, values);
+        return toRaw(style);
+      });
+
+      return database.model_component_datastyle.bulkPut(structuredClone(updates));
+    });
+  }
+
+  function bulkMutateComponentStylesPerComponent(id_model, component_updates) {
+    return database.transaction("rw", database.model_component_datastyle, async () => {
+      const component_ids = new Set(component_updates.map((update) => update.id_component));
+      const all_styles = await database.model_component_datastyle
+        .where("id_model")
+        .equals(id_model)
+        .and((style) => component_ids.has(style.id_component))
+        .toArray();
+      const style_map = Object.fromEntries(all_styles.map((style) => [style.id_component, style]));
+      const updates = component_updates.map(({ id_component, values }) => {
+        const style = style_map[id_component] || { id_model, id_component };
+        merge(style, values);
+        return toRaw(style);
+      });
+      return database.model_component_datastyle.bulkPut(structuredClone(updates));
+    });
+  }
+
+  async function setModelTypeColor(id, component_ids, color, schema, color_mode = "constant") {
+    if (!component_ids?.length) {
+      return;
+    }
+
+    const viewer_ids = await dataStore.getMeshComponentsViewerIds(id, component_ids);
+    if (!viewer_ids?.length) {
+      return;
+    }
+
+    const params = { id, block_ids: viewer_ids, color_mode };
+    if (color_mode === "constant" && color !== undefined) {
+      params.color = color;
+    }
+
+    return viewerStore.request(schema, params, {
+      response_function: async (colors) => {
+        if (color_mode === "constant" && color !== undefined) {
+          await mutateComponentStyles(id, component_ids, { color });
+          return;
+        }
+
+        if (!colors?.length) {
+          return;
+        }
+
+        await bulkMutateComponentStylesPerComponent(
+          id,
+          colors.map(({ geode_id, color: color_value }) => ({
+            id_component: geode_id,
+            values: { color: color_value },
+          })),
+        );
+      },
+    });
+  }
+
+  async function setModelTypeVisibility(id, component_ids, visibility, schema) {
+    if (!component_ids?.length) {
+      return;
+    }
+
+    const viewer_ids = await dataStore.getMeshComponentsViewerIds(id, component_ids);
+    if (!viewer_ids?.length) {
+      return;
+    }
+
+    return viewerStore.request(
+      schema,
+      { id, block_ids: viewer_ids, visibility },
+      {
+        response_function: () => mutateComponentStyles(id, component_ids, { visibility }),
+      },
+    );
+  }
+
+  return {
+    mutateComponentStyle,
+    mutateModelComponentTypeStyle,
+    mutateComponentStyles,
+    bulkMutateComponentStylesPerComponent,
+    setModelTypeColor,
+    setModelTypeVisibility,
+  };
+}

package/internal/stores/data_style/model/corners/color.js

@@ -1,44 +1,20 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-// Local imports
-import { useDataStore } from "@ogw_front/stores/data";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelCornersCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-// Local constants
-const model_corners_schemas = viewer_schemas.opengeodeweb_viewer.model.corners;
+const schema = viewer_schemas.opengeodeweb_viewer.model.corners.color;
 
-export function useModelCornersColorStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
+export function useModelCornersColor() {
+  const modelCommonStyle = useModelCommonStyle();
   const modelCornersCommonStyle = useModelCornersCommonStyle();
 
   function modelCornerColor(id, corner_id) {
     return modelCornersCommonStyle.modelCornerStyle(id, corner_id).color;
   }
 
-  function setModelCornersColor(id, corner_ids, color) {
-    if (!corner_ids || corner_ids.length === 0) {
-      return Promise.resolve();
-    }
-    return dataStore.getMeshComponentsViewerIds(id, corner_ids).then((corner_viewer_ids) => {
-      if (!corner_viewer_ids || corner_viewer_ids.length === 0) {
-        return modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, { color });
-      }
-      return viewerStore.request(
-        model_corners_schemas.color,
-        { id, block_ids: corner_viewer_ids, color },
-        {
-          response_function: () =>
-            modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, { color }),
-        },
-      );
-    });
+  function setModelCornersColor(modelId, corners_ids, color, color_mode = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, corners_ids, color, schema, color_mode);
   }
 
-  return {
-    modelCornerColor,
-    setModelCornersColor,
-  };
+  return { setModelCornersColor, modelCornerColor };
 }

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

@@ -1,8 +1,10 @@
 import merge from "lodash/merge";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 
 export function useModelCornersCommonStyle() {
   const dataStyleState = useDataStyleState();
+  const modelCommonStyle = useModelCommonStyle();
 
   function modelCornersStyle(id) {
     return dataStyleState.getStyle(id).corners;
@@ -14,12 +16,12 @@ export function useModelCornersCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelCornersStyle(id, corner_ids, values) {
-    return dataStyleState.mutateComponentStyles(id, corner_ids, values);
+  function mutateModelCornersStyle(id, corners_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, corners_ids, values);
   }
 
   function mutateModelCornerStyle(id, corner_id, values) {
-    return dataStyleState.mutateComponentStyle(id, corner_id, values);
+    return modelCommonStyle.mutateComponentStyle(id, corner_id, values);
   }
 
   return {

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

@@ -1,59 +1,52 @@
-// Local imports
 import { useDataStore } from "@ogw_front/stores/data";
-import { useModelCornersColorStyle } from "./color";
+import { useModelCornersColor } from "./color";
 import { useModelCornersCommonStyle } from "./common";
-import { useModelCornersVisibilityStyle } from "./visibility";
+import { useModelCornersVisibility } from "./visibility";
+
 async function setModelCornersDefaultStyle(_id) {
   // Placeholder
 }
 
 export function useModelCornersStyle() {
   const dataStore = useDataStore();
-  const modelCornersCommonStyle = useModelCornersCommonStyle();
-  const modelCornersVisibilityStyle = useModelCornersVisibilityStyle();
-  const modelCornersColorStyle = useModelCornersColorStyle();
+  const modelCommonStyle = useModelCornersCommonStyle();
+  const modelVisibilityStyle = useModelCornersVisibility();
+  const modelColorStyle = useModelCornersColor();
 
-  async function applyModelCornersStyle(id) {
-    const corner_ids = await dataStore.getCornersGeodeIds(id);
-    if (corner_ids.length === 0) {
+  async function applyModelCornersStyle(modelId) {
+    const corners_ids = await dataStore.getCornersGeodeIds(modelId);
+    if (!corners_ids?.length) {
       return;
     }
 
-    // Group corners by their effective style to minimize RPC calls
     const visibilityGroups = {};
     const colorGroups = {};
 
-    for (const corner_id of corner_ids) {
-      const style = modelCornersCommonStyle.modelCornerStyle(id, corner_id);
+    for (const corner_id of corners_ids) {
+      const style = modelCommonStyle.modelCornerStyle(modelId, corner_id);
 
-      // Group by visibility
-      const vKey = String(style.visibility);
-      if (!visibilityGroups[vKey]) {
-        visibilityGroups[vKey] = [];
+      const visibility = String(style.visibility);
+      if (!visibilityGroups[visibility]) {
+        visibilityGroups[visibility] = [];
       }
-      visibilityGroups[vKey].push(corner_id);
+      visibilityGroups[visibility].push(corner_id);
 
-      // Group by color
-      const cKey = JSON.stringify(style.color);
-      if (!colorGroups[cKey]) {
-        colorGroups[cKey] = [];
+      const color_mode = style.color_mode || "constant";
+      const color_key = color_mode === "random" ? "random" : JSON.stringify(style.color);
+      if (!colorGroups[color_key]) {
+        colorGroups[color_key] = { color_mode, color: style.color, corners_ids: [] };
       }
-      colorGroups[cKey].push(corner_id);
+      colorGroups[color_key].corners_ids.push(corner_id);
     }
 
-    const promises = [];
-
-    // Apply visibility groups
-    for (const [vValue, ids] of Object.entries(visibilityGroups)) {
-      promises.push(
-        modelCornersVisibilityStyle.setModelCornersVisibility(id, ids, vValue === "true"),
-      );
-    }
-
-    // Apply color groups
-    for (const [cValue, ids] of Object.entries(colorGroups)) {
-      promises.push(modelCornersColorStyle.setModelCornersColor(id, ids, JSON.parse(cValue)));
-    }
+    const promises = [
+      ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
+        modelVisibilityStyle.setModelCornersVisibility(modelId, ids, visibility === "true"),
+      ),
+      ...Object.values(colorGroups).map(({ color_mode, color, corners_ids: ids }) =>
+        modelColorStyle.setModelCornersColor(modelId, ids, color, color_mode),
+      ),
+    ];
 
     return Promise.all(promises);
   }
@@ -61,8 +54,8 @@ export function useModelCornersStyle() {
   return {
     applyModelCornersStyle,
     setModelCornersDefaultStyle,
-    ...modelCornersCommonStyle,
-    ...modelCornersVisibilityStyle,
-    ...modelCornersColorStyle,
+    ...modelCommonStyle,
+    ...modelVisibilityStyle,
+    ...modelColorStyle,
   };
 }

package/internal/stores/data_style/model/corners/visibility.js

@@ -1,44 +1,20 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-// Local imports
-import { useDataStore } from "@ogw_front/stores/data";
+import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelCornersCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-// Local constants
-const model_corners_schemas = viewer_schemas.opengeodeweb_viewer.model.corners;
+const schema = viewer_schemas.opengeodeweb_viewer.model.corners.visibility;
 
-export function useModelCornersVisibilityStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
+export function useModelCornersVisibility() {
+  const modelCommonStyle = useModelCommonStyle();
   const modelCornersCommonStyle = useModelCornersCommonStyle();
 
   function modelCornerVisibility(id, corner_id) {
     return modelCornersCommonStyle.modelCornerStyle(id, corner_id).visibility;
   }
 
-  function setModelCornersVisibility(id, corner_ids, visibility) {
-    if (!corner_ids || corner_ids.length === 0) {
-      return Promise.resolve();
-    }
-    return dataStore.getMeshComponentsViewerIds(id, corner_ids).then((corner_viewer_ids) => {
-      if (!corner_viewer_ids || corner_viewer_ids.length === 0) {
-        return modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, { visibility });
-      }
-      return viewerStore.request(
-        model_corners_schemas.visibility,
-        { id, block_ids: corner_viewer_ids, visibility },
-        {
-          response_function: () =>
-            modelCornersCommonStyle.mutateModelCornersStyle(id, corner_ids, { visibility }),
-        },
-      );
-    });
+  function setModelCornersVisibility(modelId, corners_ids, visibility) {
+    return modelCommonStyle.setModelTypeVisibility(modelId, corners_ids, visibility, schema);
   }
 
-  return {
-    modelCornerVisibility,
-    setModelCornersVisibility,
-  };
+  return { setModelCornersVisibility, modelCornerVisibility };
 }