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

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

@@ -1,231 +1,79 @@
-import { database } from "@ogw_internal/database/database";
-import { liveQuery } from "dexie";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleState } from "@ogw_internal/stores/data_style/state";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useModelBlocksStyle } from "./blocks";
+import { useModelColorStyle } from "./color";
 import { useModelCornersStyle } from "./corners";
 import { useModelEdgesStyle } from "./edges";
 import { useModelLinesStyle } from "./lines";
 import { useModelPointsStyle } from "./points";
+import { useModelSelection } from "./selection";
 import { useModelSurfacesStyle } from "./surfaces";
-import { useViewerStore } from "@ogw_front/stores/viewer";
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+import { useModelVisibilityStyle } from "./visibility";
 
-const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
-
-const MESH_CONFIG = [{ type: "Corner" }, { type: "Line" }, { type: "Surface" }, { type: "Block" }];
-
-const MESH_TYPES = MESH_CONFIG.map((config) => config.type);
-
-export function useModelStyle() {
+function useModelStyle() {
   const dataStore = useDataStore();
   const dataStyleState = useDataStyleState();
-  const modelCornersStyleStore = useModelCornersStyle();
-  const modelBlocksStyleStore = useModelBlocksStyle();
-  const modelEdgesStyleStore = useModelEdgesStyle();
-  const modelLinesStyleStore = useModelLinesStyle();
-  const modelPointsStyleStore = useModelPointsStyle();
-  const modelSurfacesStyleStore = useModelSurfacesStyle();
-  const hybridViewerStore = useHybridViewerStore();
-  const viewerStore = useViewerStore();
-
-  function buildSelection(modelId, components, stylesMap) {
-    const componentsByType = Object.fromEntries(MESH_TYPES.map((type) => [type, []]));
-    for (const component of components) {
-      if (componentsByType[component.type]) {
-        componentsByType[component.type].push(component);
-      }
-    }
-
-    const groupStyles = dataStyleState.getStyle(modelId);
-    const selection = [];
-    for (const type of MESH_TYPES) {
-      const typeComponents = componentsByType[type];
-      if (typeComponents.length === 0) {
-        continue;
-      }
-
-      const typeKey = `${type.toLowerCase()}s`;
-      const defaultVisibility = groupStyles[typeKey].visibility;
-
-      let allVisible = true;
-      for (const component of typeComponents) {
-        const isVisible = stylesMap[component.geode_id]?.visibility ?? defaultVisibility;
-        if (isVisible) {
-          selection.push(component.geode_id);
-        } else {
-          allVisible = false;
-        }
-      }
-      if (allVisible) {
-        selection.push(type);
-      }
-    }
-    return selection;
-  }
-
-  function modelVisibility(modelId) {
-    return dataStyleState.getStyle(modelId).visibility;
-  }
+  const modelCornersStyle = useModelCornersStyle();
+  const modelBlocksStyle = useModelBlocksStyle();
+  const modelEdgesStyle = useModelEdgesStyle();
+  const modelLinesStyle = useModelLinesStyle();
+  const modelPointsStyle = useModelPointsStyle();
+  const modelSurfacesStyle = useModelSurfacesStyle();
+
+  const componentStyleFunctions = {
+    Corner: modelCornersStyle,
+    Line: modelLinesStyle,
+    Surface: modelSurfacesStyle,
+    Block: modelBlocksStyle,
+  };
 
-  function setModelVisibility(modelId, visibility) {
-    return viewerStore.request(
-      model_schemas.visibility,
-      { id: modelId, visibility },
-      {
-        response_function: async () => {
-          await hybridViewerStore.setVisibility(modelId, visibility);
-          await dataStyleState.mutateStyle(modelId, { visibility });
-          return { id: modelId, visibility };
-        },
-      },
-    );
-  }
+  const modelColorStyle = useModelColorStyle(componentStyleFunctions);
+  const modelVisibilityStyle = useModelVisibilityStyle(componentStyleFunctions);
 
   function visibleMeshComponents(id_ref) {
-    const selection = ref([]);
-    watch(
-      () => unref(id_ref),
-      (modelId, _prev, onCleanup) => {
-        if (!modelId) {
-          selection.value = [];
-          return;
-        }
-        const observable = liveQuery(async () => {
-          const allComponents = await database.model_components
-            .where("id")
-            .equals(modelId)
-            .toArray();
-          if (allComponents.length === 0) {
-            return [];
-          }
-          const componentStyles = await database.model_component_datastyle
-            .where("id_model")
-            .equals(modelId)
-            .toArray();
-          const stylesMap = Object.fromEntries(
-            componentStyles.map((style) => [style.id_component, style]),
-          );
-          return buildSelection(modelId, allComponents, stylesMap);
-        });
-
-        const subscription = observable.subscribe({
-          next: (val) => {
-            selection.value = val;
-          },
-        });
-        onCleanup(() => subscription.unsubscribe());
-      },
-      { immediate: true },
-    );
-    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(
-      allComponents.map((component) => [component.geode_id, component]),
-    );
-
-    return Promise.all(
-      MESH_TYPES.map(async (type) => {
-        const typeComponents = allComponents.filter((component) => component.type === type);
-        const isSelectedType = componentIds.includes(type);
-        const idsToUpdate = isSelectedType
-          ? typeComponents.map((component) => component.geode_id)
-          : componentIds.filter((id) => componentsMap[id]?.type === type);
-
-        if (idsToUpdate.length === 0) {
-          return;
-        }
-
-        const viewerIds = await dataStore.getMeshComponentsViewerIds(modelId, idsToUpdate);
-        if (viewerIds.length > 0) {
-          const schema = model_schemas[`${type.toLowerCase()}s`].visibility;
-          await viewerStore.request(schema, { id: modelId, block_ids: viewerIds, 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);
-      }),
-    );
+    return useModelSelection(id_ref, dataStyleState);
   }
 
   function applyModelStyle(modelId) {
     const style = dataStyleState.getStyle(modelId);
-    const handlers = {
-      visibility: () => setModelVisibility(modelId, style.visibility),
-      corners: () => modelCornersStyleStore.applyModelCornersStyle(modelId),
-      lines: () => modelLinesStyleStore.applyModelLinesStyle(modelId),
-      surfaces: () => modelSurfacesStyleStore.applyModelSurfacesStyle(modelId),
-      blocks: () => modelBlocksStyleStore.applyModelBlocksStyle(modelId),
-      points: () => modelPointsStyleStore.applyModelPointsStyle(modelId),
-      edges: () => modelEdgesStyleStore.applyModelEdgesStyle(modelId),
-    };
 
-    return Promise.all(
-      Object.keys(style)
-        .filter((key) => handlers[key])
-        .map((key) => handlers[key]()),
-    );
+    return Promise.all([
+      modelVisibilityStyle.setModelVisibility(modelId, style.visibility),
+      modelBlocksStyle.applyModelBlocksStyle(modelId),
+      modelSurfacesStyle.applyModelSurfacesStyle(modelId),
+      modelLinesStyle.applyModelLinesStyle(modelId),
+      modelCornersStyle.applyModelCornersStyle(modelId),
+      modelPointsStyle.applyModelPointsStyle(modelId),
+      modelEdgesStyle.applyModelEdgesStyle(modelId),
+    ]);
   }
 
-  function setModelMeshComponentsDefaultStyle(modelId) {
-    return dataStore.item(modelId).then((item) => {
-      if (!item) {
-        return [];
-      }
-      const { mesh_components } = item;
-      const handlers = {
-        Corner: () => modelCornersStyleStore.setModelCornersDefaultStyle(modelId),
-        Line: () => modelLinesStyleStore.setModelLinesDefaultStyle(modelId),
-        Surface: () => modelSurfacesStyleStore.setModelSurfacesDefaultStyle(modelId),
-        Block: () => modelBlocksStyleStore.setModelBlocksDefaultStyle(modelId),
-      };
-      return Promise.all(
-        Object.keys(mesh_components)
-          .filter((key) => handlers[key])
-          .map((key) => handlers[key]()),
-      );
-    });
+  async function setModelMeshComponentsDefaultStyle(modelId) {
+    const item = await dataStore.item(modelId);
+    if (!item) {
+      return;
+    }
+    return await Promise.all([
+      modelBlocksStyle.setModelBlocksDefaultStyle(modelId),
+      modelSurfacesStyle.setModelSurfacesDefaultStyle(modelId),
+      modelLinesStyle.setModelLinesDefaultStyle(modelId),
+      modelCornersStyle.setModelCornersDefaultStyle(modelId),
+    ]);
   }
 
   return {
-    modelVisibility,
     visibleMeshComponents,
-    setModelVisibility,
-    setModelComponentsVisibility,
-    getModelComponentColor,
-    setModelComponentsColor,
     applyModelStyle,
     setModelMeshComponentsDefaultStyle,
-    ...modelBlocksStyleStore,
-    ...modelCornersStyleStore,
-    ...modelEdgesStyleStore,
-    ...modelLinesStyleStore,
-    ...modelPointsStyleStore,
-    ...modelSurfacesStyleStore,
+    ...modelColorStyle,
+    ...modelVisibilityStyle,
+    ...modelBlocksStyle,
+    ...modelCornersStyle,
+    ...modelEdgesStyle,
+    ...modelLinesStyle,
+    ...modelPointsStyle,
+    ...modelSurfacesStyle,
   };
 }
+
+export { useModelStyle };

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

@@ -1,48 +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 { useModelLinesCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-// Local constants
-const model_lines_schemas = viewer_schemas.opengeodeweb_viewer.model.lines;
+const schema = viewer_schemas.opengeodeweb_viewer.model.lines.color;
 
-export function useModelLinesColorStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
+export function useModelLinesColor() {
+  const modelCommonStyle = useModelCommonStyle();
   const modelLinesCommonStyle = useModelLinesCommonStyle();
 
   function modelLineColor(id, line_id) {
     return modelLinesCommonStyle.modelLineStyle(id, line_id).color;
   }
 
-  function setModelLinesColor(id, line_ids, color) {
-    if (!line_ids || line_ids.length === 0) {
-      return Promise.resolve();
-    }
-    return dataStore.getMeshComponentsViewerIds(id, line_ids).then((line_viewer_ids) => {
-      if (!line_viewer_ids || line_viewer_ids.length === 0) {
-        return modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, {
-          color,
-        });
-      }
-      return viewerStore.request(
-        model_lines_schemas.color,
-        { id, block_ids: line_viewer_ids, color },
-        {
-          response_function: () =>
-            modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, {
-              color,
-            }),
-        },
-      );
-    });
+  function setModelLinesColor(modelId, lines_ids, color, color_mode = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, lines_ids, color, schema, color_mode);
   }
 
-  return {
-    modelLineColor,
-    setModelLinesColor,
-  };
+  return { setModelLinesColor, modelLineColor };
 }

package/internal/stores/data_style/model/lines/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 useModelLinesCommonStyle() {
   const dataStyleState = useDataStyleState();
+  const modelCommonStyle = useModelCommonStyle();
 
   function modelLinesStyle(id) {
     return dataStyleState.getStyle(id).lines;
@@ -14,12 +16,12 @@ export function useModelLinesCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelLinesStyle(id, line_ids, values) {
-    return dataStyleState.mutateComponentStyles(id, line_ids, values);
+  function mutateModelLinesStyle(id, lines_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, lines_ids, values);
   }
 
   function mutateModelLineStyle(id, line_id, values) {
-    return dataStyleState.mutateComponentStyle(id, line_id, values);
+    return modelCommonStyle.mutateComponentStyle(id, line_id, values);
   }
 
   return {

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

@@ -1,8 +1,7 @@
-// Local imports
 import { useDataStore } from "@ogw_front/stores/data";
-import { useModelLinesColorStyle } from "./color";
+import { useModelLinesColor } from "./color";
 import { useModelLinesCommonStyle } from "./common";
-import { useModelLinesVisibilityStyle } from "./visibility";
+import { useModelLinesVisibility } from "./visibility";
 
 async function setModelLinesDefaultStyle(_id) {
   // Placeholder
@@ -10,44 +9,44 @@ async function setModelLinesDefaultStyle(_id) {
 
 export function useModelLinesStyle() {
   const dataStore = useDataStore();
-  const modelLinesCommonStyle = useModelLinesCommonStyle();
-  const modelLinesVisibilityStyle = useModelLinesVisibilityStyle();
-  const modelLinesColorStyle = useModelLinesColorStyle();
+  const modelCommonStyle = useModelLinesCommonStyle();
+  const modelVisibilityStyle = useModelLinesVisibility();
+  const modelColorStyle = useModelLinesColor();
 
-  async function applyModelLinesStyle(id) {
-    const line_ids = await dataStore.getLinesGeodeIds(id);
-    if (line_ids.length === 0) {
+  async function applyModelLinesStyle(modelId) {
+    const lines_ids = await dataStore.getLinesGeodeIds(modelId);
+    if (!lines_ids?.length) {
       return;
     }
 
     const visibilityGroups = {};
     const colorGroups = {};
 
-    for (const line_id of line_ids) {
-      const style = modelLinesCommonStyle.modelLineStyle(id, line_id);
+    for (const line_id of lines_ids) {
+      const style = modelCommonStyle.modelLineStyle(modelId, line_id);
 
-      const vKey = String(style.visibility);
-      if (!visibilityGroups[vKey]) {
-        visibilityGroups[vKey] = [];
+      const visibility = String(style.visibility);
+      if (!visibilityGroups[visibility]) {
+        visibilityGroups[visibility] = [];
       }
-      visibilityGroups[vKey].push(line_id);
+      visibilityGroups[visibility].push(line_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, lines_ids: [] };
       }
-      colorGroups[cKey].push(line_id);
+      colorGroups[color_key].lines_ids.push(line_id);
     }
 
-    const promises = [];
-
-    for (const [vValue, ids] of Object.entries(visibilityGroups)) {
-      promises.push(modelLinesVisibilityStyle.setModelLinesVisibility(id, ids, vValue === "true"));
-    }
-
-    for (const [cValue, ids] of Object.entries(colorGroups)) {
-      promises.push(modelLinesColorStyle.setModelLinesColor(id, ids, JSON.parse(cValue)));
-    }
+    const promises = [
+      ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
+        modelVisibilityStyle.setModelLinesVisibility(modelId, ids, visibility === "true"),
+      ),
+      ...Object.values(colorGroups).map(({ color_mode, color, lines_ids: ids }) =>
+        modelColorStyle.setModelLinesColor(modelId, ids, color, color_mode),
+      ),
+    ];
 
     return Promise.all(promises);
   }
@@ -55,8 +54,8 @@ export function useModelLinesStyle() {
   return {
     applyModelLinesStyle,
     setModelLinesDefaultStyle,
-    ...modelLinesCommonStyle,
-    ...modelLinesVisibilityStyle,
-    ...modelLinesColorStyle,
+    ...modelCommonStyle,
+    ...modelVisibilityStyle,
+    ...modelColorStyle,
   };
 }

package/internal/stores/data_style/model/lines/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 { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import { useModelLinesCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-// Local constants
-const model_lines_schemas = viewer_schemas.opengeodeweb_viewer.model.lines;
+const schema = viewer_schemas.opengeodeweb_viewer.model.lines.visibility;
 
-export function useModelLinesVisibilityStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
+export function useModelLinesVisibility() {
+  const modelCommonStyle = useModelCommonStyle();
   const modelLinesCommonStyle = useModelLinesCommonStyle();
+
   function modelLineVisibility(id, line_id) {
     return modelLinesCommonStyle.modelLineStyle(id, line_id).visibility;
   }
-  function setModelLinesVisibility(id, line_ids, visibility) {
-    if (!line_ids || line_ids.length === 0) {
-      return Promise.resolve();
-    }
 
-    return dataStore.getMeshComponentsViewerIds(id, line_ids).then((line_viewer_ids) => {
-      if (!line_viewer_ids || line_viewer_ids.length === 0) {
-        return modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, {
-          visibility,
-        });
-      }
-      return viewerStore.request(
-        model_lines_schemas.visibility,
-        { id, block_ids: line_viewer_ids, visibility },
-        {
-          response_function: () =>
-            modelLinesCommonStyle.mutateModelLinesStyle(id, line_ids, {
-              visibility,
-            }),
-        },
-      );
-    });
+  function setModelLinesVisibility(modelId, lines_ids, visibility) {
+    return modelCommonStyle.setModelTypeVisibility(modelId, lines_ids, visibility, schema);
   }
 
-  return {
-    modelLineVisibility,
-    setModelLinesVisibility,
-  };
+  return { setModelLinesVisibility, modelLineVisibility };
 }

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

@@ -0,0 +1,83 @@
+import { MESH_TYPES } from "@ogw_front/utils/default_styles";
+import { database } from "@ogw_internal/database/database";
+import { liveQuery } from "dexie";
+
+function buildSelection(modelId, components, stylesMap, typeStylesMap, dataStyleState) {
+  const componentsByType = Object.fromEntries(
+    MESH_TYPES.map((componentType) => [componentType, []]),
+  );
+  for (const component of components) {
+    if (componentsByType[component.type]) {
+      componentsByType[component.type].push(component);
+    }
+  }
+
+  const groupStyles = dataStyleState.getStyle(modelId);
+  const selection = [];
+  for (const componentType of MESH_TYPES) {
+    const typeComponents = componentsByType[componentType];
+    if (typeComponents.length === 0) {
+      continue;
+    }
+
+    const typeKey = `${componentType.toLowerCase()}s`;
+    const typeStyle = typeStylesMap[componentType];
+    const defaultVisibility = typeStyle?.visibility ?? groupStyles[typeKey]?.visibility ?? true;
+
+    let allVisible = true;
+    for (const component of typeComponents) {
+      const isVisible = stylesMap[component.geode_id]?.visibility ?? defaultVisibility;
+      if (isVisible) {
+        selection.push(component.geode_id);
+      } else {
+        allVisible = false;
+      }
+    }
+    if (allVisible) {
+      selection.push(componentType);
+    }
+  }
+  return selection;
+}
+
+function useModelSelection(id_ref, dataStyleState) {
+  const selection = ref([]);
+  watch(
+    () => unref(id_ref),
+    (modelId, _prev, onCleanup) => {
+      if (!modelId) {
+        selection.value = [];
+        return;
+      }
+      const observable = liveQuery(async () => {
+        const [allComponents, componentStyles, typeStyles] = await Promise.all([
+          database.model_components.where("id").equals(modelId).toArray(),
+          database.model_component_datastyle.where("id_model").equals(modelId).toArray(),
+          database.model_component_type_datastyle.where("id_model").equals(modelId).toArray(),
+        ]);
+
+        if (allComponents.length === 0) {
+          return [];
+        }
+
+        const stylesMap = Object.fromEntries(
+          componentStyles.map((style) => [style.id_component, style]),
+        );
+        const typeStylesMap = Object.fromEntries(typeStyles.map((style) => [style.type, style]));
+
+        return buildSelection(modelId, allComponents, stylesMap, typeStylesMap, dataStyleState);
+      });
+
+      const subscription = observable.subscribe({
+        next: (val) => {
+          selection.value = val;
+        },
+      });
+      onCleanup(() => subscription.unsubscribe());
+    },
+    { immediate: true },
+  );
+  return selection;
+}
+
+export { buildSelection, useModelSelection };

package/internal/stores/data_style/model/surfaces/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 { useModelSurfacesCommonStyle } from "./common";
-import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-// Local constants
-const model_surfaces_schemas = viewer_schemas.opengeodeweb_viewer.model.surfaces;
+const schema = viewer_schemas.opengeodeweb_viewer.model.surfaces.color;
 
-export function useModelSurfacesColorStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
+export function useModelSurfacesColor() {
+  const modelCommonStyle = useModelCommonStyle();
   const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
 
   function modelSurfaceColor(id, surface_id) {
     return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color;
   }
 
-  function setModelSurfacesColor(id, surface_ids, color) {
-    if (!surface_ids || surface_ids.length === 0) {
-      return Promise.resolve();
-    }
-    return dataStore.getMeshComponentsViewerIds(id, surface_ids).then((surface_viewer_ids) => {
-      if (!surface_viewer_ids || surface_viewer_ids.length === 0) {
-        return modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, { color });
-      }
-      return viewerStore.request(
-        model_surfaces_schemas.color,
-        { id, block_ids: surface_viewer_ids, color },
-        {
-          response_function: () =>
-            modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, { color }),
-        },
-      );
-    });
+  function setModelSurfacesColor(modelId, surfaces_ids, color, color_mode = "constant") {
+    return modelCommonStyle.setModelTypeColor(modelId, surfaces_ids, color, schema, color_mode);
   }
 
-  return {
-    modelSurfaceColor,
-    setModelSurfacesColor,
-  };
+  return { setModelSurfacesColor, modelSurfaceColor };
 }