@geode/opengeodeweb-front 10.12.0 → 10.13.0

package/app/components/Viewer/ObjectTree/Views/ModelComponents.vue

@@ -0,0 +1,113 @@
+<script setup>
+import ObjectTreeControls from "@ogw_front/components/Viewer/ObjectTree/Base/Controls.vue";
+import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/ItemLabel.vue";
+import { compareSelections } from "@ogw_front/utils/treeview";
+import { useDataStore } from "@ogw_front/stores/data";
+import { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useTreeFilter } from "@ogw_front/composables/use_tree_filter";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
+const { id: viewId } = defineProps({ id: { type: String, required: true } });
+const emit = defineEmits(["show-menu"]);
+
+const dataStore = useDataStore();
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+const treeviewStore = useTreeviewStore();
+
+const currentView = computed(() => treeviewStore.opened_views.find((view) => view.id === viewId));
+const opened = computed({
+  get: () => currentView.value?.opened || [],
+  set: (val) => treeviewStore.setOpened(viewId, val),
+});
+
+const items = dataStore.refFormatedMeshComponents(toRef(() => viewId));
+const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => viewId));
+
+const {
+  search,
+  sortType,
+  filterOptions,
+  processedItems,
+  availableFilterOptions,
+  toggleSort,
+  customFilter,
+} = useTreeFilter(items);
+
+async function onSelectionChange(current) {
+  const previous = mesh_components_selection.value;
+  const { added, removed } = compareSelections(current, previous);
+
+  if (added.length === 0 && removed.length === 0) {
+    return;
+  }
+
+  if (added.length > 0) {
+    await dataStyleStore.setModelComponentsVisibility(viewId, added, true);
+  }
+  if (removed.length > 0) {
+    await dataStyleStore.setModelComponentsVisibility(viewId, removed, false);
+  }
+  hybridViewerStore.remoteRender();
+}
+</script>
+
+<template>
+  <div class="tree-view-container">
+    <ObjectTreeControls
+      v-model:search="search"
+      :sort-type="sortType"
+      :filter-options="filterOptions"
+      :available-filter-options="availableFilterOptions"
+      @toggle-sort="toggleSort"
+    />
+
+    <v-treeview
+      :selected="mesh_components_selection"
+      v-model:opened="opened"
+      :items="processedItems"
+      :search="search"
+      :custom-filter="customFilter"
+      class="transparent-treeview"
+      item-value="id"
+      select-strategy="independent"
+      selectable
+      @update:selected="onSelectionChange"
+    >
+      <template #title="{ item }">
+        <ObjectTreeItemLabel
+          :item="item"
+          show-tooltip
+          @contextmenu="
+            emit('show-menu', {
+              event: $event,
+              itemId: item.id,
+              context_type: 'model_component',
+              modelId: viewId,
+            })
+          "
+        />
+      </template>
+    </v-treeview>
+  </div>
+</template>
+
+<style scoped>
+.transparent-treeview {
+  background-color: transparent;
+  margin: 4px 0;
+}
+
+:deep(.v-list-item) {
+  transition: background-color 0.2s ease;
+}
+
+:deep(.v-list-item--active > .v-list-item__overlay) {
+  opacity: 0 !important;
+}
+
+:deep(.v-list-item:hover > .v-list-item__overlay) {
+  opacity: 0.1 !important;
+}
+</style>

package/app/components/Viewer/Ui.vue

@@ -1,6 +1,6 @@
 <script setup>
 import ViewerContextMenu from "@ogw_front/components/Viewer/ContextMenu";
-import ViewerTreeObjectTree from "@ogw_front/components/Viewer/Tree/ObjectTree";
+import ViewerObjectTreeLayout from "@ogw_front/components/Viewer/ObjectTree/Layout";
 import { useDataStore } from "@ogw_front/stores/data";
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useMenuStore } from "@ogw_front/stores/menu";
@@ -44,7 +44,7 @@ defineExpose({ get_viewer_id });
 </script>
 
 <template>
-  <ViewerTreeObjectTree @show-menu="(args) => emit('show-menu', args)" />
+  <ViewerObjectTreeLayout @show-menu="(args) => emit('show-menu', args)" />
   <ViewerContextMenu
     v-if="displayMenu"
     :id="menuStore.current_id"

package/app/composables/use_tree_filter.js

@@ -0,0 +1,77 @@
+function customFilter(value, searchQuery, item) {
+  if (!searchQuery) {
+    return true;
+  }
+  const query = searchQuery.toLowerCase();
+  const title = (item.raw.title || "").toLowerCase();
+  const idValue = String(value || "").toLowerCase();
+  return title.includes(query) || idValue.includes(query);
+}
+
+function sortAndFormatItems(items, sortType) {
+  const field = sortType === "name" ? "title" : "id";
+  return items.map((category) => {
+    const children = (category.children || []).toSorted((itemA, itemB) => {
+      const valueA = itemA[field] || "";
+      const valueB = itemB[field] || "";
+      return valueA.localeCompare(valueB, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      });
+    });
+    return {
+      ...category,
+      id: category.id,
+      title: category.title || category.id,
+      children,
+    };
+  });
+}
+
+function useTreeFilter(rawItems, options = {}) {
+  const search = ref("");
+  const sortType = ref(options.defaultSort || "name");
+  const filterOptions = ref(options.defaultFilters || {});
+
+  const availableFilterOptions = computed(() =>
+    rawItems.value.map((category) => category.title || category.id),
+  );
+
+  watch(
+    availableFilterOptions,
+    (newOptions) => {
+      for (const option of newOptions) {
+        if (filterOptions.value[option] === undefined) {
+          filterOptions.value[option] = true;
+        }
+      }
+    },
+    { immediate: true },
+  );
+
+  const processedItems = computed(() =>
+    sortAndFormatItems(
+      rawItems.value.filter((category) => {
+        const key = category.title || category.id;
+        return filterOptions.value[key] !== false;
+      }),
+      sortType.value,
+    ),
+  );
+
+  function toggleSort() {
+    sortType.value = sortType.value === "name" ? "id" : "name";
+  }
+
+  return {
+    search,
+    sortType,
+    filterOptions,
+    processedItems,
+    availableFilterOptions,
+    toggleSort,
+    customFilter,
+  };
+}
+
+export { customFilter, useTreeFilter };

package/app/stores/treeview.js

@@ -1,100 +1,153 @@
-export const useTreeviewStore = defineStore("treeview", () => {
-  const PANEL_WIDTH = 300;
+import { defineStore } from "pinia";
+
+import { ref, toRaw, watch } from "vue";
+import { database } from "@ogw_internal/database/database";
+const PANEL_WIDTH = 300;
 
+export const useTreeviewStore = defineStore("treeview", () => {
   const items = ref([]);
   const selection = ref([]);
-  const components_selection = ref([]);
-  const isAdditionnalTreeDisplayed = ref(false);
+  const opened_views = ref([
+    { type: "object", id: "main", title: "Objects", scrollTop: 0, opened: [] },
+  ]);
   const panelWidth = ref(PANEL_WIDTH);
-  const model_id = ref("");
-  const isTreeCollection = ref(false);
-  const selectedTree = ref(undefined);
+  const additionalPanelWidth = ref(PANEL_WIDTH);
   const isImporting = ref(false);
   const pendingSelectionIds = ref([]);
+  const rowHeights = ref([]);
 
-  // /** Functions **/
-  function addItem(geode_object_type, name, id, viewer_type) {
-    const child = { title: name, id, viewer_type };
-
-    for (let i = 0; i < items.value.length; i += 1) {
-      if (items.value[i].title === geode_object_type) {
-        items.value[i].children.push(child);
-        items.value[i].children.sort((element1, element2) =>
-          element1.title.localeCompare(element2.title, undefined, {
-            numeric: true,
-            sensitivity: "base",
-          }),
-        );
-        selection.value.push(id);
-        return;
+  async function loadConfig() {
+    try {
+      const config = await database.treeview_config.get("main");
+      if (config?.opened_views) {
+        opened_views.value = config.opened_views;
       }
+      if (config?.panelWidth) {
+        panelWidth.value = config.panelWidth;
+      }
+      if (config?.additionalPanelWidth) {
+        additionalPanelWidth.value = config.additionalPanelWidth;
+      }
+      if (config?.selectionIds) {
+        selection.value = config.selectionIds;
+      }
+      if (config?.rowHeights) {
+        rowHeights.value = config.rowHeights;
+      }
+    } catch (error) {
+      console.error("Failed to load treeview config:", error);
     }
-    items.value.push({ title: geode_object_type, children: [child] });
-    items.value.sort((element1, element2) =>
-      element1.title.localeCompare(element2.title, undefined, {
-        numeric: true,
-        sensitivity: "base",
-      }),
-    );
-    selection.value.push(id);
   }
-
-  function displayAdditionalTree(id) {
-    isAdditionnalTreeDisplayed.value = true;
-    model_id.value = id;
+  loadConfig();
+
+  watch(
+    [opened_views, panelWidth, additionalPanelWidth, selection, rowHeights],
+    () => {
+      database.treeview_config.put({
+        id: "main",
+        opened_views: toRaw(opened_views.value),
+        panelWidth: panelWidth.value,
+        additionalPanelWidth: additionalPanelWidth.value,
+        selectionIds: toRaw(selection.value),
+        rowHeights: toRaw(rowHeights.value),
+      });
+    },
+    { deep: true },
+  );
+
+  function closeView(index) {
+    if (index > 0) {
+      opened_views.value.splice(index, 1);
+    }
   }
 
-  function displayFileTree() {
-    isAdditionnalTreeDisplayed.value = false;
+  function addItem(geodeObjectType, name, id, viewer_type) {
+    const child = { title: name, id, viewer_type, geode_object_type: geodeObjectType };
+    let found = false;
+    for (const item of items.value) {
+      if (item.title === geodeObjectType) {
+        item.children.push(child);
+        const opt = { numeric: true, sensitivity: "base" };
+        item.children.sort((childA, childB) =>
+          childA.title.localeCompare(childB.title, undefined, opt),
+        );
+        found = true;
+        break;
+      }
+    }
+    if (!found) {
+      items.value.push({ id: geodeObjectType, title: geodeObjectType, children: [child] });
+      const sortOpt = { numeric: true, sensitivity: "base" };
+      items.value.sort((groupA, groupB) =>
+        groupA.title.localeCompare(groupB.title, undefined, sortOpt),
+      );
+    }
+    selection.value.push(id);
   }
 
-  function toggleTreeView() {
-    isTreeCollection.value = !isTreeCollection.value;
-    console.log("Switched to", isTreeCollection.value ? "TreeCollection" : "TreeComponent");
+  function removeItem(id) {
+    for (let index = 0; index < items.value.length; index += 1) {
+      const group = items.value[index];
+      const childIndex = group.children.findIndex((child) => child.id === id);
+      if (childIndex !== -1) {
+        group.children.splice(childIndex, 1);
+        if (group.children.length === 0) {
+          items.value.splice(index, 1);
+        }
+        const selectionIndex = selection.value.indexOf(id);
+        if (selectionIndex !== -1) {
+          selection.value.splice(selectionIndex, 1);
+        }
+        return;
+      }
+    }
   }
 
-  function setPanelWidth(width) {
-    panelWidth.value = width;
+  function displayAdditionalTree(id, title, geodeObjectType) {
+    const index = opened_views.value.findIndex((view) => view.id === id);
+    if (index !== -1) {
+      return closeView(index);
+    }
+    additionalPanelWidth.value = panelWidth.value;
+    opened_views.value.push({
+      type: "component",
+      id,
+      title: title || id,
+      geode_object_type: geodeObjectType,
+      scrollTop: 0,
+      opened: [],
+    });
   }
 
-  function exportStores() {
-    const selectionIds = selection.value.map((store) => store.id);
-    return {
-      isAdditionnalTreeDisplayed: isAdditionnalTreeDisplayed.value,
-      panelWidth: panelWidth.value,
-      model_id: model_id.value,
-      isTreeCollection: isTreeCollection.value,
-      selectedTree: selectedTree.value,
-      selectionIds,
-    };
+  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 importStores(snapshot) {
-    isAdditionnalTreeDisplayed.value = snapshot?.isAdditionnalTreeDisplayed || false;
+    opened_views.value = snapshot?.opened_views || [
+      { type: "object", id: "main", title: "Objects", scrollTop: 0, opened: [] },
+    ];
     panelWidth.value = snapshot?.panelWidth || PANEL_WIDTH;
-    model_id.value = snapshot?.model_id || "";
-    isTreeCollection.value = snapshot?.isTreeCollection || false;
-    selectedTree.value = snapshot?.selectedTree || undefined;
-
+    additionalPanelWidth.value = snapshot?.additionalPanelWidth || PANEL_WIDTH;
+    rowHeights.value = snapshot?.rowHeights || [];
     pendingSelectionIds.value =
-      snapshot?.selectionIds || (snapshot?.selection || []).map((store) => store.id) || [];
+      snapshot?.selectionIds ||
+      (snapshot?.selection || []).map((selectionItem) => selectionItem.id || selectionItem) ||
+      [];
   }
 
   function finalizeImportSelection() {
-    const ids = pendingSelectionIds.value || [];
     const rebuilt = [];
-    if (ids.length === 0) {
-      for (const group of items.value) {
-        for (const child of group.children) {
-          rebuilt.push(child);
-        }
-      }
-    } else {
-      for (const group of items.value) {
-        for (const child of group.children) {
-          if (ids.includes(child.id)) {
-            rebuilt.push(child);
-          }
+    for (const group of items.value) {
+      for (const child of group.children) {
+        if (
+          pendingSelectionIds.value.length === 0 ||
+          pendingSelectionIds.value.includes(child.id)
+        ) {
+          rebuilt.push(child.id || child);
         }
       }
     }
@@ -102,54 +155,78 @@ export const useTreeviewStore = defineStore("treeview", () => {
     pendingSelectionIds.value = [];
   }
 
-  function removeItem(id) {
-    for (let i = 0; i < items.value.length; i += 1) {
-      const group = items.value[i];
-      const childIndex = group.children.findIndex((child) => child.id === id);
+  function clear() {
+    items.value = [];
+    selection.value = [];
+    pendingSelectionIds.value = [];
+    opened_views.value = [
+      { type: "object", id: "main", title: "Objects", scrollTop: 0, opened: [] },
+    ];
+  }
 
-      if (childIndex !== -1) {
-        group.children.splice(childIndex, 1);
+  function displayFileTree() {
+    opened_views.value = [
+      { type: "object", id: "main", title: "Objects", scrollTop: 0, opened: [] },
+    ];
+  }
 
-        if (group.children.length === 0) {
-          items.value.splice(i, 1);
-        }
+  function setPanelWidth(width) {
+    panelWidth.value = width;
+  }
 
-        const selectionIndex = selection.value.findIndex((item) => item.id === id);
-        if (selectionIndex !== -1) {
-          selection.value.splice(selectionIndex, 1);
-        }
+  function setAdditionalPanelWidth(width) {
+    additionalPanelWidth.value = width;
+  }
 
-        return;
-      }
+  function setScrollTop(viewId, scrollTop) {
+    const view = opened_views.value.find((openedView) => openedView.id === viewId);
+    if (view) {
+      view.scrollTop = scrollTop;
     }
   }
 
-  function clear() {
-    items.value = [];
-    selection.value = [];
-    components_selection.value = [];
-    pendingSelectionIds.value = [];
-    model_id.value = "";
-    selectedTree.value = undefined;
+  function setOpened(viewId, opened) {
+    const view = opened_views.value.find((openedView) => openedView.id === viewId);
+    if (view) {
+      view.opened = opened;
+    }
+  }
+
+  function setRowHeights(heights) {
+    rowHeights.value = heights;
+  }
+
+  function exportStores() {
+    return {
+      opened_views: opened_views.value,
+      panelWidth: panelWidth.value,
+      additionalPanelWidth: additionalPanelWidth.value,
+      selectionIds: selection.value,
+      rowHeights: rowHeights.value,
+    };
   }
 
   return {
     items,
     selection,
-    components_selection,
-    isAdditionnalTreeDisplayed,
+    opened_views,
     panelWidth,
-    model_id,
-    selectedTree,
+    additionalPanelWidth,
     isImporting,
+    rowHeights,
     addItem,
     removeItem,
     displayAdditionalTree,
+    closeView,
+    moveView,
+    importStores,
     displayFileTree,
-    toggleTreeView,
     setPanelWidth,
+    setAdditionalPanelWidth,
+    setScrollTop,
+    setOpened,
+    setRowHeights,
     exportStores,
-    importStores,
     finalizeImportSelection,
     clear,
   };

package/internal/database/base_database.js

@@ -13,6 +13,7 @@ export class BaseDatabase extends Dexie {
       [dataStyleTable.name]: dataStyleTable.schema,
       [modelComponentDataStyleTable.name]: modelComponentDataStyleTable.schema,
       [modelComponentsRelationTable.name]: modelComponentsRelationTable.schema,
+      treeview_config: "id",
     };
   }
 

package/package.json

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

package/app/components/Viewer/BreadCrumb.vue

@@ -1,49 +0,0 @@
-<script setup>
-import { useDataStore } from "@ogw_front/stores/data";
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
-
-const dataStore = useDataStore();
-const treeviewStore = useTreeviewStore();
-
-const selectedTree = computed(() => treeviewStore.selectedTree);
-
-function goBackToFileTree() {
-  treeviewStore.displayFileTree();
-}
-
-const metaDatas = computed(() => dataStore.refItem(treeviewStore.model_id));
-</script>
-
-<template>
-  <v-breadcrumbs class="mb-n10 breadcrumb-container">
-    <div class="d-flex align-center gap-2 ml-2 mt-2 mb-1">
-      <template v-if="treeviewStore.isAdditionnalTreeDisplayed">
-        <v-btn icon variant="text" size="medium" @click.stop="goBackToFileTree">
-          <v-icon size="large">mdi-file-tree</v-icon>
-        </v-btn>
-        <span class="text-h5 font-weight-bold">/</span>
-        <v-icon size="large">
-          {{ selectedTree && selectedTree.icon ? selectedTree.icon : "mdi-shape-outline" }}
-        </v-icon>
-        <span class="text-subtitle-1 font-weight-regular align-center mt-1">
-          Model Explorer ({{ metaDatas.name }})
-        </span>
-      </template>
-
-      <div v-else class="d-flex align-center gap-2">
-        <v-icon size="large">mdi-file-tree</v-icon>
-        <span class="text-subtitle-1 font-weight-regular align-center mt-1"> Objects </span>
-      </div>
-    </div>
-  </v-breadcrumbs>
-</template>
-
-<style scoped>
-.breadcrumb-container {
-  position: relative;
-  z-index: 10;
-  max-width: 100%;
-  overflow: hidden;
-  white-space: nowrap;
-}
-</style>