@geode/opengeodeweb-front 10.7.0 → 10.8.0-rc.2

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

@@ -1,7 +1,5 @@
-// Third party imports
-import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
-
-// Local imports
+import { database } from "@ogw_internal/database/database";
+import { liveQuery } from "dexie";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -12,8 +10,8 @@ import { useModelLinesStyle } from "./lines";
 import { useModelPointsStyle } from "./points";
 import { useModelSurfacesStyle } from "./surfaces";
 import { useViewerStore } from "@ogw_front/stores/viewer";
+import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
-// Local constants
 const model_schemas = viewer_schemas.opengeodeweb_viewer.model;
 
 export function useModelStyle() {
@@ -31,158 +29,129 @@ export function useModelStyle() {
   function modelVisibility(id) {
     return dataStyleStateStore.getStyle(id).visibility;
   }
+
   function setModelVisibility(id, visibility) {
     return viewerStore.request(
       model_schemas.visibility,
       { id, visibility },
       {
-        response_function: () => {
-          dataStyleStateStore.getStyle(id).visibility = visibility;
-          hybridViewerStore.setVisibility(id, visibility);
-          console.log(setModelVisibility.name, { id }, modelVisibility(id));
+        response_function: async () => {
+          await hybridViewerStore.setVisibility(id, visibility);
+          await dataStyleStateStore.mutateStyle(id, { visibility });
+          return { id, visibility };
         },
       },
     );
   }
 
-  function visibleMeshComponents(id) {
-    const visible_mesh_components = ref([]);
-    const styles = dataStyleStateStore.styles[id];
-    if (!styles) {
-      return visible_mesh_components;
-    }
-
-    for (const [corner_id, style] of Object.entries(styles.corners || {})) {
-      if (style.visibility) {
-        visible_mesh_components.value.push(corner_id);
-      }
-    }
-
-    for (const [line_id, style] of Object.entries(styles.lines || {})) {
-      if (style.visibility) {
-        visible_mesh_components.value.push(line_id);
-      }
-    }
-
-    for (const [surface_id, style] of Object.entries(styles.surfaces || {})) {
-      if (style.visibility) {
-        visible_mesh_components.value.push(surface_id);
-      }
-    }
-
-    for (const [block_id, style] of Object.entries(styles.blocks || {})) {
-      if (style.visibility) {
-        visible_mesh_components.value.push(block_id);
-      }
-    }
-
-    return visible_mesh_components;
-  }
-
-  function modelMeshComponentVisibility(id, component_type, component_id) {
-    if (component_type === "Corner") {
-      return modelCornersStyleStore.modelCornerVisibility(id, component_id);
-    }
-    if (component_type === "Line") {
-      return modelLinesStyleStore.modelLineVisibility(id, component_id);
-    }
-    if (component_type === "Surface") {
-      return modelSurfacesStyleStore.modelSurfaceVisibility(id, component_id);
-    }
-    if (component_type === "Block") {
-      return modelBlocksStyleStore.modelBlockVisibility(id, component_id);
-    }
-    throw new Error(`Unknown model component_type: ${component_type}`);
-  }
-
-  function modelColor(id) {
-    return dataStyleStateStore.getStyle(id).color;
-  }
-  function setModelColor(id, color) {
-    return viewerStore.request(
-      model_schemas.color,
-      { id, color },
-      {
-        response_function: () => {
-          dataStyleStateStore.styles[id].color = color;
-          console.log(setModelColor.name, { id }, modelColor(id));
-        },
+  function visibleMeshComponents(id_ref) {
+    const selection = ref([]);
+    watch(
+      () => (isRef(id_ref) ? id_ref.value : id_ref),
+      (newId, oldId, onCleanup) => {
+        if (!newId) {
+          return;
+        }
+        const observable = liveQuery(async () => {
+          const components = await database.model_components.where("id").equals(newId).toArray();
+          if (components.length === 0) {
+            return [];
+          }
+
+          const all_styles = await database.model_component_datastyle
+            .where("id_model")
+            .equals(newId)
+            .toArray();
+          const styles = {};
+          for (const style of all_styles) {
+            styles[style.id_component] = style;
+          }
+
+          const current_selection = [];
+          const meshTypes = new Set(["Corner", "Line", "Surface", "Block"]);
+          const componentsByType = {};
+          for (const component of components) {
+            if (meshTypes.has(component.type)) {
+              if (!componentsByType[component.type]) {
+                componentsByType[component.type] = [];
+              }
+              componentsByType[component.type].push(component.geode_id);
+            }
+          }
+
+          for (const [type, geode_ids] of Object.entries(componentsByType)) {
+            let all_visible = true;
+            for (const gid of geode_ids) {
+              const is_visible = styles[gid] === undefined ? true : styles[gid].visibility;
+              if (is_visible) {
+                current_selection.push(gid);
+              } else {
+                all_visible = false;
+              }
+            }
+            if (all_visible) {
+              current_selection.push(type);
+            }
+          }
+          return current_selection;
+        });
+
+        const subscription = observable.subscribe({
+          next: (val) => {
+            selection.value = val;
+          },
+          error: (err) => console.error(err),
+        });
+        onCleanup(() => subscription.unsubscribe());
       },
+      { immediate: true },
     );
-  }
-
-  async function setModelMeshComponentsVisibility(id, component_geode_ids, visibility) {
-    const component_type = await dataStore.meshComponentType(id, component_geode_ids[0]);
-    if (component_type === "Corner") {
-      return modelCornersStyleStore.setModelCornersVisibility(id, component_geode_ids, visibility);
-    }
-    if (component_type === "Line") {
-      return modelLinesStyleStore.setModelLinesVisibility(id, component_geode_ids, visibility);
-    }
-    if (component_type === "Surface") {
-      return modelSurfacesStyleStore.setModelSurfacesVisibility(
-        id,
-        component_geode_ids,
-        visibility,
-      );
-    }
-    if (component_type === "Block") {
-      return modelBlocksStyleStore.setModelBlocksVisibility(id, component_geode_ids, visibility);
-    }
-    throw new Error(`Unknown model component_type: ${component_type}`);
+    return selection;
   }
 
   function applyModelStyle(id) {
     const style = dataStyleStateStore.getStyle(id);
-    const promise_array = [];
-    for (const [key, value] of Object.entries(style)) {
-      if (key === "visibility") {
-        promise_array.push(setModelVisibility(id, value));
-      } else if (key === "corners") {
-        promise_array.push(modelCornersStyleStore.applyModelCornersStyle(id));
-      } else if (key === "lines") {
-        promise_array.push(modelLinesStyleStore.applyModelLinesStyle(id));
-      } else if (key === "surfaces") {
-        promise_array.push(modelSurfacesStyleStore.applyModelSurfacesStyle(id));
-      } else if (key === "blocks") {
-        promise_array.push(modelBlocksStyleStore.applyModelBlocksStyle(id));
-      } else if (key === "points") {
-        promise_array.push(modelPointsStyleStore.applyModelPointsStyle(id));
-      } else if (key === "edges") {
-        promise_array.push(modelEdgesStyleStore.applyModelEdgesStyle(id));
-      } else {
-        throw new Error(`Unknown model key: ${key}`);
-      }
-    }
-    return Promise.all(promise_array);
+    const handlers = {
+      visibility: () => setModelVisibility(id, style.visibility),
+      corners: () => modelCornersStyleStore.applyModelCornersStyle(id),
+      lines: () => modelLinesStyleStore.applyModelLinesStyle(id),
+      surfaces: () => modelSurfacesStyleStore.applyModelSurfacesStyle(id),
+      blocks: () => modelBlocksStyleStore.applyModelBlocksStyle(id),
+      points: () => modelPointsStyleStore.applyModelPointsStyle(id),
+      edges: () => modelEdgesStyleStore.applyModelEdgesStyle(id),
+    };
+
+    const promises = Object.keys(style)
+      .filter((key) => handlers[key])
+      .map((key) => handlers[key]());
+
+    return Promise.all(promises);
   }
 
-  async function setModelMeshComponentsDefaultStyle(id) {
-    const item = await dataStore.item(id);
-    const { mesh_components } = item;
-    const promise_array = [];
-    if ("Corner" in mesh_components) {
-      promise_array.push(modelCornersStyleStore.setModelCornersDefaultStyle(id));
-    }
-    if ("Line" in mesh_components) {
-      promise_array.push(modelLinesStyleStore.setModelLinesDefaultStyle(id));
-    }
-    if ("Surface" in mesh_components) {
-      promise_array.push(modelSurfacesStyleStore.setModelSurfacesDefaultStyle(id));
-    }
-    if ("Block" in mesh_components) {
-      promise_array.push(modelBlocksStyleStore.setModelBlocksDefaultStyle(id));
-    }
-    return promise_array;
+  function setModelMeshComponentsDefaultStyle(id) {
+    return dataStore.item(id).then((item) => {
+      if (!item) {
+        return [];
+      }
+      const { mesh_components } = item;
+      const handlers = {
+        Corner: () => modelCornersStyleStore.setModelCornersDefaultStyle(id),
+        Line: () => modelLinesStyleStore.setModelLinesDefaultStyle(id),
+        Surface: () => modelSurfacesStyleStore.setModelSurfacesDefaultStyle(id),
+        Block: () => modelBlocksStyleStore.setModelBlocksDefaultStyle(id),
+      };
+      return Promise.all(
+        Object.keys(mesh_components)
+          .filter((k) => handlers[k])
+          .map((k) => handlers[k]()),
+      );
+    });
   }
 
   return {
     modelVisibility,
     visibleMeshComponents,
-    modelMeshComponentVisibility,
     setModelVisibility,
-    setModelColor,
-    setModelMeshComponentsVisibility,
     applyModelStyle,
     setModelMeshComponentsDefaultStyle,
     ...useModelBlocksStyle(),

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

@@ -13,41 +13,32 @@ export function useModelLinesColorStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelLinesCommonStyle = useModelLinesCommonStyle();
+
   function modelLineColor(id, line_id) {
     return modelLinesCommonStyle.modelLineStyle(id, line_id).color;
   }
-  function saveModelLineColor(id, line_id, color) {
-    modelLinesCommonStyle.modelLineStyle(id, line_id).color = color;
-  }
-  async function setModelLinesColor(id, line_ids, color) {
+
+  function setModelLinesColor(id, line_ids, color) {
     if (!line_ids || line_ids.length === 0) {
-      return;
-    }
-    const line_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, line_ids);
-    if (!line_viewer_ids || line_viewer_ids.length === 0) {
-      console.warn("[setModelLinesColor] No viewer IDs found, skipping color request", {
-        id,
-        line_ids,
-      });
-      return;
+      return Promise.resolve();
     }
-    return viewerStore.request(
-      model_lines_schemas.color,
-      { id, block_ids: line_viewer_ids, color },
-      {
-        response_function: () => {
-          for (const line_id of line_ids) {
-            saveModelLineColor(id, line_id, color);
-          }
-          console.log(
-            setModelLinesColor.name,
-            { id },
-            { line_ids },
-            JSON.stringify(modelLineColor(id, line_ids[0])),
-          );
+    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,
+            }),
         },
-      },
-    );
+      );
+    });
   }
 
   return {

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

@@ -1,3 +1,4 @@
+import merge from "lodash/merge";
 import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 
 export function useModelLinesCommonStyle() {
@@ -8,14 +9,23 @@ export function useModelLinesCommonStyle() {
   }
 
   function modelLineStyle(id, line_id) {
-    if (!modelLinesStyle(id)[line_id]) {
-      modelLinesStyle(id)[line_id] = {};
-    }
-    return modelLinesStyle(id)[line_id];
+    const groupStyle = modelLinesStyle(id);
+    const individualStyle = dataStyleStateStore.getComponentStyle(id, line_id);
+    return merge({}, groupStyle, individualStyle);
+  }
+
+  function mutateModelLinesStyle(id, line_ids, values) {
+    return dataStyleStateStore.mutateComponentStyles(id, line_ids, values);
+  }
+
+  function mutateModelLineStyle(id, line_id, values) {
+    return dataStyleStateStore.mutateComponentStyle(id, line_id, values);
   }
 
   return {
     modelLinesStyle,
     modelLineStyle,
+    mutateModelLinesStyle,
+    mutateModelLineStyle,
   };
 }

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

@@ -5,7 +5,7 @@ import { useModelLinesCommonStyle } from "./common";
 import { useModelLinesVisibilityStyle } from "./visibility";
 
 async function setModelLinesDefaultStyle(_id) {
-  // Placeholder for oxlint
+  // Placeholder
 }
 
 export function useModelLinesStyle() {
@@ -15,12 +15,41 @@ export function useModelLinesStyle() {
   const modelLinesColorStyle = useModelLinesColorStyle();
 
   async function applyModelLinesStyle(id) {
-    const style = modelLinesCommonStyle.modelLinesStyle(id);
     const line_ids = await dataStore.getLinesGeodeIds(id);
-    return Promise.all([
-      modelLinesVisibilityStyle.setModelLinesVisibility(id, line_ids, style.visibility),
-      modelLinesColorStyle.setModelLinesColor(id, line_ids, style.color),
-    ]);
+    if (line_ids.length === 0) {
+      return;
+    }
+
+    const visibilityGroups = {};
+    const colorGroups = {};
+
+    for (const line_id of line_ids) {
+      const style = modelLinesCommonStyle.modelLineStyle(id, line_id);
+
+      const vKey = String(style.visibility);
+      if (!visibilityGroups[vKey]) {
+        visibilityGroups[vKey] = [];
+      }
+      visibilityGroups[vKey].push(line_id);
+
+      const cKey = JSON.stringify(style.color);
+      if (!colorGroups[cKey]) {
+        colorGroups[cKey] = [];
+      }
+      colorGroups[cKey].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)));
+    }
+
+    return Promise.all(promises);
   }
 
   return {

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

@@ -16,38 +16,28 @@ export function useModelLinesVisibilityStyle() {
   function modelLineVisibility(id, line_id) {
     return modelLinesCommonStyle.modelLineStyle(id, line_id).visibility;
   }
-  function saveModelLineVisibility(id, line_id, visibility) {
-    modelLinesCommonStyle.modelLineStyle(id, line_id).visibility = visibility;
-  }
-  async function setModelLinesVisibility(id, line_ids, visibility) {
+  function setModelLinesVisibility(id, line_ids, visibility) {
     if (!line_ids || line_ids.length === 0) {
-      return;
-    }
-    const line_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, line_ids);
-    if (!line_viewer_ids || line_viewer_ids.length === 0) {
-      console.warn("[setModelLinesVisibility] No viewer IDs found, skipping visibility request", {
-        id,
-        line_ids,
-      });
-      return;
+      return Promise.resolve();
     }
-    return viewerStore.request(
-      model_lines_schemas.visibility,
-      { id, block_ids: line_viewer_ids, visibility },
-      {
-        response_function: () => {
-          for (const line_id of line_ids) {
-            saveModelLineVisibility(id, line_id, visibility);
-          }
-          console.log(
-            setModelLinesVisibility.name,
-            { id },
-            { line_ids },
-            modelLineVisibility(id, line_ids[0]),
-          );
+
+    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,
+            }),
         },
-      },
-    );
+      );
+    });
   }
 
   return {

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

@@ -3,11 +3,18 @@ import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 export function useModelPointsCommonStyle() {
   const dataStyleStateStore = useDataStyleStateStore();
 
+  function mutateModelPointsStyle(id, values) {
+    return dataStyleStateStore.mutateStyle(id, {
+      points: values,
+    });
+  }
+
   function modelPointsStyle(id) {
     return dataStyleStateStore.getStyle(id).points;
   }
 
   return {
     modelPointsStyle,
+    mutateModelPointsStyle,
   };
 }

package/internal/stores/data_style/model/points/size.js

@@ -21,10 +21,7 @@ export function useModelPointsSizeStyle() {
       model_points_schemas.size,
       { id, size },
       {
-        response_function: () => {
-          modelPointsCommonStyle.modelPointsStyle(id).size = size;
-          console.log(setModelPointsSize.name, { id }, modelPointsSize(id));
-        },
+        response_function: () => modelPointsCommonStyle.mutateModelPointsStyle(id, { size }),
       },
     );
   }

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

@@ -21,10 +21,10 @@ export function useModelPointsVisibilityStyle() {
       model_points_schemas.visibility,
       { id, visibility },
       {
-        response_function: () => {
-          modelPointsCommonStyle.modelPointsStyle(id).visibility = visibility;
-          console.log(setModelPointsVisibility.name, { id }, modelPointsVisibility(id));
-        },
+        response_function: () =>
+          modelPointsCommonStyle.mutateModelPointsStyle(id, {
+            visibility,
+          }),
       },
     );
   }

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

@@ -13,41 +13,28 @@ export function useModelSurfacesColorStyle() {
   const dataStore = useDataStore();
   const viewerStore = useViewerStore();
   const modelSurfacesCommonStyle = useModelSurfacesCommonStyle();
+
   function modelSurfaceColor(id, surface_id) {
     return modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color;
   }
-  function saveModelSurfaceColor(id, surface_id, color) {
-    modelSurfacesCommonStyle.modelSurfaceStyle(id, surface_id).color = color;
-  }
-  async function setModelSurfacesColor(id, surface_ids, color) {
+
+  function setModelSurfacesColor(id, surface_ids, color) {
     if (!surface_ids || surface_ids.length === 0) {
-      return;
-    }
-    const surface_viewer_ids = await dataStore.getMeshComponentsViewerIds(id, surface_ids);
-    if (!surface_viewer_ids || surface_viewer_ids.length === 0) {
-      console.warn("[setModelSurfacesColor] No viewer IDs found, skipping color request", {
-        id,
-        surface_ids,
-      });
-      return;
+      return Promise.resolve();
     }
-    return viewerStore.request(
-      model_surfaces_schemas.color,
-      { id, block_ids: surface_viewer_ids, color },
-      {
-        response_function: () => {
-          for (const surface_id of surface_ids) {
-            saveModelSurfaceColor(id, surface_id, color);
-          }
-          console.log(
-            setModelSurfacesColor.name,
-            { id },
-            { surface_ids },
-            JSON.stringify(modelSurfaceColor(id, surface_ids[0])),
-          );
+    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 }),
         },
-      },
-    );
+      );
+    });
   }
 
   return {

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

@@ -1,3 +1,4 @@
+import merge from "lodash/merge";
 import { useDataStyleStateStore } from "@ogw_internal/stores/data_style/state";
 
 export function useModelSurfacesCommonStyle() {
@@ -8,14 +9,23 @@ export function useModelSurfacesCommonStyle() {
   }
 
   function modelSurfaceStyle(id, surface_id) {
-    if (!modelSurfacesStyle(id)[surface_id]) {
-      modelSurfacesStyle(id)[surface_id] = {};
-    }
-    return modelSurfacesStyle(id)[surface_id];
+    const groupStyle = modelSurfacesStyle(id);
+    const individualStyle = dataStyleStateStore.getComponentStyle(id, surface_id);
+    return merge({}, groupStyle, individualStyle);
+  }
+
+  function mutateModelSurfacesStyle(id, surface_ids, values) {
+    return dataStyleStateStore.mutateComponentStyles(id, surface_ids, values);
+  }
+
+  function mutateModelSurfaceStyle(id, surface_id, values) {
+    return dataStyleStateStore.mutateComponentStyle(id, surface_id, values);
   }
 
   return {
     modelSurfacesStyle,
     modelSurfaceStyle,
+    mutateModelSurfacesStyle,
+    mutateModelSurfaceStyle,
   };
 }