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

package/internal/stores/data_style/model/surfaces/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 useModelSurfacesCommonStyle() {
   const dataStyleState = useDataStyleState();
+  const modelCommonStyle = useModelCommonStyle();
 
   function modelSurfacesStyle(id) {
     return dataStyleState.getStyle(id).surfaces;
@@ -14,12 +16,12 @@ export function useModelSurfacesCommonStyle() {
     return merge({}, groupStyle, individualStyle);
   }
 
-  function mutateModelSurfacesStyle(id, surface_ids, values) {
-    return dataStyleState.mutateComponentStyles(id, surface_ids, values);
+  function mutateModelSurfacesStyle(id, surfaces_ids, values) {
+    return modelCommonStyle.mutateComponentStyles(id, surfaces_ids, values);
   }
 
   function mutateModelSurfaceStyle(id, surface_id, values) {
-    return dataStyleState.mutateComponentStyle(id, surface_id, values);
+    return modelCommonStyle.mutateComponentStyle(id, surface_id, values);
   }
 
   return {

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

@@ -1,8 +1,7 @@
-// Local imports
 import { useDataStore } from "@ogw_front/stores/data";
-import { useModelSurfacesColorStyle } from "./color";
+import { useModelSurfacesColor } from "./color";
 import { useModelSurfacesCommonStyle } from "./common";
-import { useModelSurfacesVisibilityStyle } from "./visibility";
+import { useModelSurfacesVisibility } from "./visibility";
 
 async function setModelSurfacesDefaultStyle(_id) {
   // Placeholder
@@ -10,46 +9,44 @@ async function setModelSurfacesDefaultStyle(_id) {
 
 export function useModelSurfacesStyle() {
   const dataStore = useDataStore();
-  const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
-  const modelSurfacesVisibilityStyle = useModelSurfacesVisibilityStyle();
-  const modelSurfacesColorStyle = useModelSurfacesColorStyle();
+  const modelCommonStyle = useModelSurfacesCommonStyle();
+  const modelVisibilityStyle = useModelSurfacesVisibility();
+  const modelColorStyle = useModelSurfacesColor();
 
-  async function applyModelSurfacesStyle(id) {
-    const surface_ids = await dataStore.getSurfacesGeodeIds(id);
-    if (surface_ids.length === 0) {
+  async function applyModelSurfacesStyle(modelId) {
+    const surfaces_ids = await dataStore.getSurfacesGeodeIds(modelId);
+    if (!surfaces_ids?.length) {
       return;
     }
 
     const visibilityGroups = {};
     const colorGroups = {};
 
-    for (const surface_id of surface_ids) {
-      const style = modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id);
+    for (const surfaces_id of surfaces_ids) {
+      const style = modelCommonStyle.modelSurfaceStyle(modelId, surfaces_id);
 
-      const vKey = String(style.visibility);
-      if (!visibilityGroups[vKey]) {
-        visibilityGroups[vKey] = [];
+      const visibility = String(style.visibility);
+      if (!visibilityGroups[visibility]) {
+        visibilityGroups[visibility] = [];
       }
-      visibilityGroups[vKey].push(surface_id);
+      visibilityGroups[visibility].push(surfaces_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, surfaces_ids: [] };
       }
-      colorGroups[cKey].push(surface_id);
+      colorGroups[color_key].surfaces_ids.push(surfaces_id);
     }
 
-    const promises = [];
-
-    for (const [vValue, ids] of Object.entries(visibilityGroups)) {
-      promises.push(
-        modelSurfacesVisibilityStyle.setModelSurfacesVisibility(id, ids, vValue === "true"),
-      );
-    }
-
-    for (const [cValue, ids] of Object.entries(colorGroups)) {
-      promises.push(modelSurfacesColorStyle.setModelSurfacesColor(id, ids, JSON.parse(cValue)));
-    }
+    const promises = [
+      ...Object.entries(visibilityGroups).map(([visibility, ids]) =>
+        modelVisibilityStyle.setModelSurfacesVisibility(modelId, ids, visibility === "true"),
+      ),
+      ...Object.values(colorGroups).map(({ color_mode, color, surfaces_ids: ids }) =>
+        modelColorStyle.setModelSurfacesColor(modelId, ids, color, color_mode),
+      ),
+    ];
 
     return Promise.all(promises);
   }
@@ -57,8 +54,8 @@ export function useModelSurfacesStyle() {
   return {
     applyModelSurfacesStyle,
     setModelSurfacesDefaultStyle,
-    ...modelSurfacesCommonStyle,
-    ...modelSurfacesVisibilityStyle,
-    ...modelSurfacesColorStyle,
+    ...modelCommonStyle,
+    ...modelVisibilityStyle,
+    ...modelColorStyle,
   };
 }

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

@@ -1,45 +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.visibility;
 
-export function useModelSurfacesVisibilityStyle() {
-  const dataStore = useDataStore();
-  const viewerStore = useViewerStore();
+export function useModelSurfacesVisibility() {
+  const modelCommonStyle = useModelCommonStyle();
   const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
+
   function modelSurfaceVisibility(id, surface_id) {
     return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).visibility;
   }
-  function setModelSurfacesVisibility(id, surface_ids, visibility) {
-    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, { visibility });
-      }
-      return viewerStore.request(
-        model_surfaces_schemas.visibility,
-        { id, block_ids: surface_viewer_ids, visibility },
-        {
-          response_function: () =>
-            modelSurfacesCommonStyle.mutateModelSurfacesStyle(id, surface_ids, {
-              visibility,
-            }),
-        },
-      );
-    });
+  function setModelSurfacesVisibility(modelId, surfaces_ids, visibility) {
+    return modelCommonStyle.setModelTypeVisibility(modelId, surfaces_ids, visibility, schema);
   }
 
-  return {
-    modelSurfaceVisibility,
-    setModelSurfacesVisibility,
-  };
+  return { setModelSurfacesVisibility, modelSurfaceVisibility };
 }

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

@@ -0,0 +1,186 @@
+import { MESH_TYPES } from "@ogw_front/utils/default_styles";
+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 { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
+
+async function getModelComponentsMap(modelId) {
+  const dataStore = useDataStore();
+  const results = await Promise.all(
+    MESH_TYPES.map(async (type) => {
+      const geodeIds = await dataStore.getMeshComponentGeodeIds(modelId, type);
+      return geodeIds.map((geode_id) => ({ geode_id, type }));
+    }),
+  );
+  const allComponents = results.flat();
+  return {
+    allComponents,
+    componentsMap: Object.fromEntries(
+      allComponents.map((component) => [component.geode_id, component]),
+    ),
+  };
+}
+
+async function dispatchToComponentTypes(
+  modelId,
+  componentIds,
+  action,
+  { componentStyleFunctions },
+  ...args
+) {
+  const { componentsMap } = await getModelComponentsMap(modelId);
+
+  const idsByComponent = {
+    Block: [],
+    Surface: [],
+    Line: [],
+    Corner: [],
+  };
+
+  for (const id of componentIds) {
+    const type = componentsMap[id]?.type;
+    if (type && idsByComponent[type]) {
+      idsByComponent[type].push(id);
+    }
+  }
+
+  const promises = [];
+  if (action === "Visibility") {
+    if (idsByComponent.Block.length > 0) {
+      promises.push(
+        componentStyleFunctions.Block.setModelBlocksVisibility(
+          modelId,
+          idsByComponent.Block,
+          ...args,
+        ),
+      );
+    }
+    if (idsByComponent.Surface.length > 0) {
+      promises.push(
+        componentStyleFunctions.Surface.setModelSurfacesVisibility(
+          modelId,
+          idsByComponent.Surface,
+          ...args,
+        ),
+      );
+    }
+    if (idsByComponent.Line.length > 0) {
+      promises.push(
+        componentStyleFunctions.Line.setModelLinesVisibility(modelId, idsByComponent.Line, ...args),
+      );
+    }
+    if (idsByComponent.Corner.length > 0) {
+      promises.push(
+        componentStyleFunctions.Corner.setModelCornersVisibility(
+          modelId,
+          idsByComponent.Corner,
+          ...args,
+        ),
+      );
+    }
+  } else if (action === "Color") {
+    if (idsByComponent.Block.length > 0) {
+      promises.push(
+        componentStyleFunctions.Block.setModelBlocksColor(modelId, idsByComponent.Block, ...args),
+      );
+    }
+    if (idsByComponent.Surface.length > 0) {
+      promises.push(
+        componentStyleFunctions.Surface.setModelSurfacesColor(
+          modelId,
+          idsByComponent.Surface,
+          ...args,
+        ),
+      );
+    }
+    if (idsByComponent.Line.length > 0) {
+      promises.push(
+        componentStyleFunctions.Line.setModelLinesColor(modelId, idsByComponent.Line, ...args),
+      );
+    }
+    if (idsByComponent.Corner.length > 0) {
+      promises.push(
+        componentStyleFunctions.Corner.setModelCornersColor(
+          modelId,
+          idsByComponent.Corner,
+          ...args,
+        ),
+      );
+    }
+  }
+
+  return Promise.all(promises);
+}
+
+function useModelVisibilityStyle(componentStyleFunctions) {
+  const dataStore = useDataStore();
+  const dataStyleState = useDataStyleState();
+  const hybridViewerStore = useHybridViewerStore();
+  const viewerStore = useViewerStore();
+  const modelCommonStyle = useModelCommonStyle();
+
+  function modelVisibility(modelId) {
+    return dataStyleState.getStyle(modelId).visibility;
+  }
+
+  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 };
+        },
+      },
+    );
+  }
+
+  async function setModelComponentsVisibility(modelId, componentIds, visibility) {
+    const typeIds = componentIds.filter((id) => MESH_TYPES.includes(id));
+    const individualIds = componentIds.filter((id) => !MESH_TYPES.includes(id));
+
+    const promises = [];
+    for (const typeId of typeIds) {
+      promises.push(setModelComponentTypeVisibility(modelId, typeId, visibility));
+    }
+
+    if (individualIds.length > 0) {
+      promises.push(
+        dispatchToComponentTypes(
+          modelId,
+          individualIds,
+          "Visibility",
+          { componentStyleFunctions },
+          visibility,
+        ),
+      );
+    }
+    return await Promise.all(promises);
+  }
+
+  async function setModelComponentTypeVisibility(modelId, componentType, visibility) {
+    await modelCommonStyle.mutateModelComponentTypeStyle(modelId, componentType, {
+      visibility,
+    });
+    const idsForType = await dataStore.getMeshComponentGeodeIds(modelId, componentType);
+    if (idsForType.length === 0) {
+      return;
+    }
+    await setModelComponentsVisibility(modelId, idsForType, visibility);
+  }
+
+  return {
+    modelVisibility,
+    setModelVisibility,
+    setModelComponentsVisibility,
+    setModelComponentTypeVisibility,
+  };
+}
+
+export { getModelComponentsMap, dispatchToComponentTypes, useModelVisibilityStyle };

package/internal/stores/data_style/state.js

@@ -33,6 +33,19 @@ export function useDataStyleState() {
     return selection;
   });
 
+  const modelComponentTypeStyles = useObservable(
+    liveQuery(async () => {
+      const all = await database.model_component_type_datastyle.toArray();
+      const accumulator = {};
+      for (const style of all) {
+        const key = `${style.id_model}_${style.type}`;
+        accumulator[key] = style;
+      }
+      return accumulator;
+    }),
+    { initialValue: {} },
+  );
+
   const componentStyles = useObservable(
     liveQuery(async () => {
       const all = await database.model_component_datastyle.toArray();
@@ -61,47 +74,27 @@ export function useDataStyleState() {
     return componentStyles.value[key] || {};
   }
 
-  function mutateComponentStyle(id_model, id_component, values) {
-    return database.model_component_datastyle.get([id_model, id_component]).then((style) => {
-      const component_style = style || { id_model, id_component };
-      merge(component_style, values);
-      return database.model_component_datastyle.put(structuredClone(toRaw(component_style)));
-    });
-  }
-
-  function mutateComponentStyles(id_model, id_components, values) {
-    return database.model_component_datastyle
-      .where("id_model")
-      .equals(id_model)
-      .toArray()
-      .then((all_styles) => {
-        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 getModelComponentTypeStyle(id_model, type) {
+    const key = `${id_model}_${type}`;
+    return modelComponentTypeStyles.value[key] || {};
   }
 
   function clear() {
-    return Promise.all([database.data_style.clear(), database.model_component_datastyle.clear()]);
+    return Promise.all([
+      database.data_style.clear(),
+      database.model_component_datastyle.clear(),
+      database.model_component_type_datastyle.clear(),
+    ]);
   }
 
   return {
     getStyle,
-    mutateStyle,
     getComponentStyle,
-    mutateComponentStyle,
-    mutateComponentStyles,
+    getModelComponentTypeStyle,
+    mutateStyle,
     styles,
     componentStyles,
+    modelComponentTypeStyles,
     objectVisibility,
     selectedObjects,
     clear,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.13.2",
+  "version": "10.14.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",
     "@google-cloud/run": "3.2.0",
     "@kitware/vtk.js": "33.3.0",
     "@mdi/font": "7.4.47",

package/tests/integration/stores/data_style/model/blocks.nuxt.test.js

@@ -53,7 +53,11 @@ describe("Model blocks", () => {
       await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_blocks_schemas.visibility,
-        { id, block_ids: block_viewer_ids, visibility },
+        {
+          id,
+          block_ids: block_viewer_ids,
+          visibility,
+        },
         {
           response_function: expect.any(Function),
         },
@@ -78,7 +82,12 @@ describe("Model blocks", () => {
       await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_blocks_schemas.color,
-        { id, block_ids: block_viewer_ids, color },
+        {
+          id,
+          block_ids: block_viewer_ids,
+          color,
+          color_mode: "constant",
+        },
         {
           response_function: expect.any(Function),
         },

package/tests/integration/stores/data_style/model/corners.nuxt.test.js

@@ -53,7 +53,11 @@ describe("Model corners", () => {
       await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_corners_schemas.visibility,
-        { id, block_ids: corner_viewer_ids, visibility },
+        {
+          id,
+          block_ids: corner_viewer_ids,
+          visibility,
+        },
         {
           response_function: expect.any(Function),
         },
@@ -81,7 +85,12 @@ describe("Model corners", () => {
       await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_corners_schemas.color,
-        { id, block_ids: corner_viewer_ids, color },
+        {
+          id,
+          block_ids: corner_viewer_ids,
+          color,
+          color_mode: "constant",
+        },
         {
           response_function: expect.any(Function),
         },

package/tests/integration/stores/data_style/model/lines.nuxt.test.js

@@ -53,7 +53,11 @@ describe("Model lines", () => {
       await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_lines_schemas.visibility,
-        { id, block_ids: lines_viewer_ids, visibility },
+        {
+          id,
+          block_ids: lines_viewer_ids,
+          visibility,
+        },
         {
           response_function: expect.any(Function),
         },
@@ -81,7 +85,12 @@ describe("Model lines", () => {
       await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_lines_schemas.color,
-        { id, block_ids: lines_viewer_ids, color },
+        {
+          id,
+          block_ids: lines_viewer_ids,
+          color,
+          color_mode: "constant",
+        },
         {
           response_function: expect.any(Function),
         },

package/tests/integration/stores/data_style/model/surfaces.nuxt.test.js

@@ -52,7 +52,11 @@ describe("model surfaces", () => {
       await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_surfaces_schemas.visibility,
-        { id, block_ids: surface_viewer_ids, visibility },
+        {
+          id,
+          block_ids: surface_viewer_ids,
+          visibility,
+        },
         {
           response_function: expect.any(Function),
         },
@@ -80,7 +84,12 @@ describe("model surfaces", () => {
       await sleep(SLEEP_MS);
       expect(spy).toHaveBeenCalledWith(
         model_surfaces_schemas.color,
-        { id, block_ids: surface_viewer_ids, color },
+        {
+          id,
+          block_ids: surface_viewer_ids,
+          color,
+          color_mode: "constant",
+        },
         {
           response_function: expect.any(Function),
         },