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

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

@@ -3,37 +3,73 @@ import {
   useModelBlocksPolyhedronAttribute,
 } from "./polyhedron";
 import { isModelBlocksVertexAttributeValid, useModelBlocksVertexAttribute } from "./vertex";
+import type { StyleValues } from "@ogw_internal/stores/data_style/types.js";
+import { useDataStore } from "@ogw_front/stores/data";
 import { useModelBlocksCommonStyle } from "./common";
 import { useModelCommonStyle } from "@ogw_internal/stores/data_style/model/common";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
 const schema = viewer_schemas.opengeodeweb_viewer.model.blocks.color;
 
-export function useModelBlocksColor() {
+export function useModelBlocksColor(): {
+  modelBlockColoring: (id: string, block_id?: string) => StyleValues;
+  modelBlockColor: (id: string, block_id?: string) => unknown;
+  setModelBlocksColor: (
+    modelId: string,
+    blocks_ids: string[],
+    color: unknown,
+    activeColoring?: string,
+  ) => Promise<unknown>;
+  modelBlockActiveColoring: (id: string, block_id?: string) => unknown;
+  setModelBlocksActiveColoring: (
+    modelId: string,
+    blocks_ids: string[],
+    activeColoring: string,
+  ) => Promise<void>;
+} {
+  const dataStore = useDataStore();
   const modelCommonStyle = useModelCommonStyle();
   const modelBlocksCommonStyle = useModelBlocksCommonStyle();
   const modelBlocksVertexAttribute = useModelBlocksVertexAttribute();
   const modelBlocksPolyhedronAttribute = useModelBlocksPolyhedronAttribute();
 
-  function modelBlockColoring(id, block_id) {
-    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).coloring;
+  function modelBlockColoring(id: string, block_id?: string): StyleValues {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring shape is defined by the data style schema.
+    return modelBlocksCommonStyle.modelBlockStyle(id, block_id).coloring as StyleValues;
   }
 
-  function modelBlockColor(id, block_id) {
+  function modelBlockColor(id: string, block_id?: string): unknown {
     return modelBlockColoring(id, block_id).constant;
   }
 
-  function setModelBlocksColor(modelId, blocks_ids, color, activeColoring = "constant") {
-    return modelCommonStyle.setModelTypeColor(modelId, blocks_ids, color, schema, activeColoring);
+  async function setModelBlocksColor(
+    modelId: string,
+    blocks_ids: string[],
+    color: unknown,
+    activeColoring = "constant",
+  ): Promise<unknown> {
+    const result = await modelCommonStyle.setModelTypeColor(
+      modelId,
+      blocks_ids,
+      color,
+      schema,
+      activeColoring,
+    );
+    return result;
   }
 
-  function modelBlockActiveColoring(id, block_id) {
+  function modelBlockActiveColoring(id: string, block_id?: string): unknown {
     return modelBlockColoring(id, block_id).active;
   }
 
-  async function setModelBlocksActiveColoring(modelId, blocks_ids, activeColoring) {
-    if (blocks_ids.length > 1) {
-      modelBlocksCommonStyle.mutateModelBlocksTypeColoring(modelId, {
+  async function setModelBlocksActiveColoring(
+    modelId: string,
+    blocks_ids: string[],
+    activeColoring: string,
+  ): Promise<void> {
+    const totalBlockIds = await dataStore.getBlocksGeodeIds(modelId);
+    if (blocks_ids.length === totalBlockIds.length) {
+      await modelBlocksCommonStyle.mutateModelBlocksTypeColoring(modelId, {
         active: activeColoring,
       });
     }
@@ -42,7 +78,8 @@ export function useModelBlocksColor() {
     });
     if (activeColoring === "constant" || activeColoring === "random") {
       const color = modelBlockColor(modelId, blocks_ids[0]);
-      return setModelBlocksColor(modelId, blocks_ids, color, activeColoring);
+      await setModelBlocksColor(modelId, blocks_ids, color, activeColoring);
+      return;
     }
 
     if (activeColoring === "vertex") {
@@ -64,7 +101,7 @@ export function useModelBlocksColor() {
       );
       const attribute = { name, item, minimum, maximum, colorMap };
       if (isModelBlocksVertexAttributeValid(attribute)) {
-        return modelBlocksVertexAttribute.setModelBlocksVertexAttribute(
+        await modelBlocksVertexAttribute.setModelBlocksVertexAttribute(
           modelId,
           blocks_ids,
           attribute,
@@ -89,7 +126,7 @@ export function useModelBlocksColor() {
       );
       const attribute = { name, item, minimum, maximum, colorMap };
       if (isModelBlocksPolyhedronAttributeValid(attribute)) {
-        return modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttribute(
+        await modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttribute(
           modelId,
           blocks_ids,
           attribute,

package/internal/stores/data_style/model/blocks/common.ts

@@ -0,0 +1,67 @@
+import type { StyleValues } from "@ogw_internal/stores/data_style/types.js";
+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 useModelBlocksCommonStyle(): {
+  modelBlocksStyle: (id: string) => StyleValues;
+  modelBlockStyle: (id: string, block_id?: string) => StyleValues;
+  modelBlockColoring: (id: string, block_id?: string) => StyleValues;
+  mutateModelBlocksColoring: (
+    id: string,
+    blocks_ids: string[],
+    values: StyleValues,
+  ) => Promise<void>;
+  mutateModelBlocksTypeColoring: (id: string, values: StyleValues) => Promise<void>;
+} {
+  const dataStyleState = useDataStyleState();
+  const modelCommonStyle = useModelCommonStyle();
+
+  function modelBlocksStyle(id: string): StyleValues {
+    return dataStyleState.getStyle(id).blocks ?? {};
+  }
+
+  function modelComponentTypeBlocksStyle(id: string): StyleValues {
+    const defaultStyle = modelBlocksStyle(id);
+    const typeStyle = dataStyleState.getModelComponentTypeStyle(id, "Block");
+    return merge({}, defaultStyle, typeStyle);
+  }
+
+  function modelBlockStyle(id: string, block_id?: string): StyleValues {
+    if (block_id === undefined) {
+      return modelComponentTypeBlocksStyle(id);
+    }
+    const typeStyle = modelComponentTypeBlocksStyle(id);
+    const individualStyle = dataStyleState.getComponentStyle(id, block_id);
+    return merge({}, typeStyle, individualStyle);
+  }
+
+  function modelBlockColoring(id: string, block_id?: string): StyleValues {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- coloring shape is defined by the data style schema.
+    return modelBlockStyle(id, block_id).coloring as StyleValues;
+  }
+
+  async function mutateModelBlocksColoring(
+    id: string,
+    blocks_ids: string[],
+    values: StyleValues,
+  ): Promise<void> {
+    await modelCommonStyle.mutateComponentStyles(id, blocks_ids, {
+      coloring: values,
+    });
+  }
+
+  async function mutateModelBlocksTypeColoring(id: string, values: StyleValues): Promise<void> {
+    await modelCommonStyle.mutateModelComponentTypeStyle(id, "Block", {
+      coloring: values,
+    });
+  }
+
+  return {
+    modelBlocksStyle,
+    modelBlockStyle,
+    modelBlockColoring,
+    mutateModelBlocksColoring,
+    mutateModelBlocksTypeColoring,
+  };
+}

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

@@ -8,11 +8,35 @@ import { useModelBlocksColor } from "./color";
 import { useModelBlocksCommonStyle } from "./common";
 import { useModelBlocksVisibility } from "./visibility";
 
-async function setModelBlocksDefaultStyle(_id) {
+interface ColorGroup {
+  color: unknown;
+  blocks_ids: string[];
+}
+
+interface AttributeGroup {
+  name: string | undefined;
+  item: number | undefined;
+  minimum: number | undefined;
+  maximum: number | undefined;
+  colorMap: string | undefined;
+  blocks_ids: string[];
+}
+
+async function setModelBlocksDefaultStyle(_id: string): Promise<void> {
   // Placeholder
 }
 
-export function useModelBlocksStyle() {
+type UseModelBlocksStyleReturn = {
+  applyModelBlocksStyle: (modelId: string) => Promise<void>;
+  setModelBlocksDefaultStyle: (id: string) => Promise<void>;
+} & ReturnType<typeof useModelBlocksCommonStyle> &
+  ReturnType<typeof useModelBlocksVisibility> &
+  ReturnType<typeof useModelBlocksColor> &
+  ReturnType<typeof useModelBlocksVertexAttribute> &
+  ReturnType<typeof useModelBlocksPolyhedronAttribute>;
+
+// oxlint-disable-next-line max-lines-per-function
+export function useModelBlocksStyle(): UseModelBlocksStyleReturn {
   const dataStore = useDataStore();
   const modelCommonStyle = useModelBlocksCommonStyle();
   const modelVisibilityStyle = useModelBlocksVisibility();
@@ -20,57 +44,69 @@ export function useModelBlocksStyle() {
   const modelBlocksVertexAttribute = useModelBlocksVertexAttribute();
   const modelBlocksPolyhedronAttribute = useModelBlocksPolyhedronAttribute();
 
-  function applyModelBlocksVisibilityStyle(modelId, blocks_ids) {
-    const visibilityGroups = {};
+  async function applyModelBlocksVisibilityStyle(
+    modelId: string,
+    blocks_ids: string[],
+  ): Promise<unknown[]> {
+    const visibilityGroups: Record<string, string[]> = {};
     for (const block_id of blocks_ids) {
       const style = modelCommonStyle.modelBlockStyle(modelId, block_id);
       const visibility = String(style.visibility);
-      if (!visibilityGroups[visibility]) {
-        visibilityGroups[visibility] = [];
-      }
+      visibilityGroups[visibility] ??= [];
       visibilityGroups[visibility].push(block_id);
     }
-    return Promise.all(
-      Object.entries(visibilityGroups).map(([visibility, ids]) =>
-        modelVisibilityStyle.setModelBlocksVisibility(modelId, ids, visibility === "true"),
-      ),
+    const result = await Promise.all(
+      Object.entries(visibilityGroups).map(async ([visibility, ids]) => {
+        const visibilityResult = await modelVisibilityStyle.setModelBlocksVisibility(
+          modelId,
+          ids,
+          visibility === "true",
+        );
+        return visibilityResult;
+      }),
     );
+    return result;
   }
 
-  function applyModelBlocksColoringStyle(modelId, blocks_ids) {
-    const activeColoringGroups = {};
+  async function applyModelBlocksColoringStyle(
+    modelId: string,
+    blocks_ids: string[],
+  ): Promise<unknown[]> {
+    const activeColoringGroups: Record<string, string[]> = {};
     for (const block_id of blocks_ids) {
-      const activeColoring = modelColorStyle.modelBlockActiveColoring(modelId, block_id);
-      if (!activeColoringGroups[activeColoring]) {
-        activeColoringGroups[activeColoring] = [];
-      }
+      const activeColoring = String(modelColorStyle.modelBlockActiveColoring(modelId, block_id));
+      activeColoringGroups[activeColoring] ??= [];
       activeColoringGroups[activeColoring].push(block_id);
     }
 
-    const coloringPromises = [];
+    const coloringPromises: Promise<unknown>[] = [];
 
     for (const [type, type_blocks_ids] of Object.entries(activeColoringGroups)) {
       if (type === "constant") {
-        const colorGroups = {};
+        const colorGroups: Record<string, ColorGroup> = {};
         for (const block_id of type_blocks_ids) {
           const color = modelColorStyle.modelBlockColor(modelId, block_id);
           const color_key = JSON.stringify(color);
-          if (!colorGroups[color_key]) {
-            colorGroups[color_key] = { color, blocks_ids: [] };
-          }
+          colorGroups[color_key] ??= { color, blocks_ids: [] };
           colorGroups[color_key].blocks_ids.push(block_id);
         }
         coloringPromises.push(
-          ...Object.values(colorGroups).map(({ color, blocks_ids: ids }) =>
-            modelColorStyle.setModelBlocksColor(modelId, ids, color, "constant"),
-          ),
+          ...Object.values(colorGroups).map(async ({ color, blocks_ids: ids }) => {
+            const result = await modelColorStyle.setModelBlocksColor(
+              modelId,
+              ids,
+              color,
+              "constant",
+            );
+            return result;
+          }),
         );
       } else if (type === "random") {
         coloringPromises.push(
           modelColorStyle.setModelBlocksColor(modelId, type_blocks_ids, undefined, "random"),
         );
       } else if (type === "vertex") {
-        const vertexGroups = {};
+        const vertexGroups: Record<string, AttributeGroup> = {};
         for (const block_id of type_blocks_ids) {
           const name = modelBlocksVertexAttribute.modelBlocksVertexAttributeName(modelId, block_id);
           const item = modelBlocksVertexAttribute.modelBlocksVertexAttributeItem(modelId, block_id);
@@ -87,32 +123,36 @@ export function useModelBlocksStyle() {
             continue;
           }
           const key = `${name}_${item}_${colorMap}_${minimum}_${maximum}`;
-          if (!vertexGroups[key]) {
-            vertexGroups[key] = {
-              name,
-              item,
-              minimum,
-              maximum,
-              colorMap,
-              blocks_ids: [],
-            };
-          }
+          vertexGroups[key] ??= {
+            name,
+            item,
+            minimum,
+            maximum,
+            colorMap,
+            blocks_ids: [],
+          };
           vertexGroups[key].blocks_ids.push(block_id);
         }
         coloringPromises.push(
           ...Object.values(vertexGroups).map(
-            ({ name, item, minimum, maximum, colorMap, blocks_ids: ids }) =>
-              modelBlocksVertexAttribute.setModelBlocksVertexAttribute(modelId, ids, {
-                name,
-                item,
-                minimum,
-                maximum,
-                colorMap,
-              }),
+            async ({ name, item, minimum, maximum, colorMap, blocks_ids: ids }) => {
+              const result = await modelBlocksVertexAttribute.setModelBlocksVertexAttribute(
+                modelId,
+                ids,
+                {
+                  name,
+                  item,
+                  minimum,
+                  maximum,
+                  colorMap,
+                },
+              );
+              return result;
+            },
           ),
         );
       } else if (type === "polyhedron") {
-        const polyhedronGroups = {};
+        const polyhedronGroups: Record<string, AttributeGroup> = {};
         for (const block_id of type_blocks_ids) {
           const name = modelBlocksPolyhedronAttribute.modelBlocksPolyhedronAttributeName(
             modelId,
@@ -133,43 +173,48 @@ export function useModelBlocksStyle() {
             continue;
           }
           const key = `${name}_${item}_${colorMap}_${minimum}_${maximum}`;
-          if (!polyhedronGroups[key]) {
-            polyhedronGroups[key] = {
-              name,
-              item,
-              minimum,
-              maximum,
-              colorMap,
-              blocks_ids: [],
-            };
-          }
+          polyhedronGroups[key] ??= {
+            name,
+            item,
+            minimum,
+            maximum,
+            colorMap,
+            blocks_ids: [],
+          };
           polyhedronGroups[key].blocks_ids.push(block_id);
         }
         coloringPromises.push(
           ...Object.values(polyhedronGroups).map(
-            ({ name, item, minimum, maximum, colorMap, blocks_ids: ids }) =>
-              modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttribute(modelId, ids, {
-                name,
-                item,
-                minimum,
-                maximum,
-                colorMap,
-              }),
+            async ({ name, item, minimum, maximum, colorMap, blocks_ids: ids }) => {
+              const result = await modelBlocksPolyhedronAttribute.setModelBlocksPolyhedronAttribute(
+                modelId,
+                ids,
+                {
+                  name,
+                  item,
+                  minimum,
+                  maximum,
+                  colorMap,
+                },
+              );
+              return result;
+            },
           ),
         );
       }
     }
 
-    return Promise.all(coloringPromises);
+    const result = await Promise.all(coloringPromises);
+    return result;
   }
 
-  async function applyModelBlocksStyle(modelId) {
+  async function applyModelBlocksStyle(modelId: string): Promise<void> {
     const blocks_ids = await dataStore.getBlocksGeodeIds(modelId);
     if (blocks_ids.length === 0) {
       return;
     }
 
-    return Promise.all([
+    await Promise.all([
       applyModelBlocksVisibilityStyle(modelId, blocks_ids),
       applyModelBlocksColoringStyle(modelId, blocks_ids),
     ]);