@geode/opengeodeweb-front 10.14.0-rc.5 → 10.14.0-rc.7

package/app/components/Viewer/Generic/Model/ModelStyleCard.vue

@@ -16,7 +16,7 @@ const { itemProps } = defineProps({
 
 const modelId = computed(() => itemProps.meta_data.modelId || itemProps.id);
 const componentId = computed(() => itemProps.meta_data.pickedComponentId);
-const selection = dataStyleStore.visibleMeshComponents(modelId);
+const selection = dataStyleStore.visibleMeshComponents(modelId.value);
 const componentType = ref(undefined);
 
 watchEffect(async () => {

package/app/stores/treeview.js

@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";
 
 import { ref, toRaw, watch } from "vue";
+import { compareSelections } from "@ogw_front/utils/treeview";
 import { database } from "@ogw_internal/database/database";
 const PANEL_WIDTH = 300;
 
@@ -55,9 +56,21 @@ export const useTreeviewStore = defineStore("treeview", () => {
     { deep: true },
   );
 
+  watch(selection, (current, previous) => {
+    const { removed } = compareSelections(current, previous);
+    for (const id of removed) {
+      const index = opened_views.value.findIndex(
+        (view) => view.type === "component" && view.id === id,
+      );
+      if (index !== -1) {
+        closeView(index);
+      }
+    }
+  });
+
   function closeView(index) {
     if (index > 0) {
-      opened_views.value.splice(index, 1);
+      opened_views.value = opened_views.value.filter((view, view_index) => view_index !== index);
     }
   }
 
@@ -67,9 +80,9 @@ export const useTreeviewStore = defineStore("treeview", () => {
     for (const item of items.value) {
       if (item.title === geodeObjectType) {
         item.children.push(child);
-        const opt = { numeric: true, sensitivity: "base" };
+        const options = { numeric: true, sensitivity: "base" };
         item.children.sort((childA, childB) =>
-          childA.title.localeCompare(childB.title, undefined, opt),
+          childA.title.localeCompare(childB.title, undefined, options),
         );
         found = true;
         break;
@@ -77,12 +90,12 @@ export const useTreeviewStore = defineStore("treeview", () => {
     }
     if (!found) {
       items.value.push({ id: geodeObjectType, title: geodeObjectType, children: [child] });
-      const sortOpt = { numeric: true, sensitivity: "base" };
+      const sort_options = { numeric: true, sensitivity: "base" };
       items.value.sort((groupA, groupB) =>
-        groupA.title.localeCompare(groupB.title, undefined, sortOpt),
+        groupA.title.localeCompare(groupB.title, undefined, sort_options),
       );
     }
-    selection.value.push(id);
+    selection.value = [...selection.value, id];
   }
 
   function removeItem(id) {
@@ -94,10 +107,7 @@ export const useTreeviewStore = defineStore("treeview", () => {
         if (group.children.length === 0) {
           items.value.splice(index, 1);
         }
-        const selectionIndex = selection.value.indexOf(id);
-        if (selectionIndex !== -1) {
-          selection.value.splice(selectionIndex, 1);
-        }
+        selection.value = selection.value.filter((selection_id) => selection_id !== id);
         return;
       }
     }
@@ -119,10 +129,10 @@ export const useTreeviewStore = defineStore("treeview", () => {
     });
   }
 
-  function moveView(fromIdx, toIdx) {
-    if (fromIdx !== 0 && toIdx !== 0) {
-      const [element] = opened_views.value.splice(fromIdx, 1);
-      opened_views.value.splice(toIdx, 0, element);
+  function moveView(from_index, to_index) {
+    if (from_index !== 0 && to_index !== 0) {
+      const [element] = opened_views.value.splice(from_index, 1);
+      opened_views.value.splice(to_index, 0, element);
     }
   }
 

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

@@ -31,8 +31,8 @@ function useModelStyle() {
   const modelColorStyle = useModelColorStyle(componentStyleFunctions);
   const modelVisibilityStyle = useModelVisibilityStyle(componentStyleFunctions);
 
-  function visibleMeshComponents(id_ref) {
-    return useModelSelection(id_ref, dataStyleState);
+  function visibleMeshComponents(modelId) {
+    return useModelSelection(modelId, dataStyleState);
   }
 
   function applyModelStyle(modelId) {

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

@@ -44,6 +44,9 @@ function buildSelection(modelId, components, stylesMap, typeStylesMap, dataStyle
 function useModelSelection(modelId, dataStyleState) {
   return useObservable(
     liveQuery(async () => {
+      if (!modelId) {
+        return [];
+      }
       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(),
@@ -55,9 +58,10 @@ function useModelSelection(modelId, dataStyleState) {
       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 stylesByTypeMap = Object.fromEntries(typeStyles.map((style) => [style.type, style]));
+      return buildSelection(modelId, allComponents, stylesMap, stylesByTypeMap, dataStyleState);
     }),
+    { initialValue: [] },
   );
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.14.0-rc.5",
+  "version": "10.14.0-rc.7",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {