@geode/opengeodeweb-front 10.14.1 → 10.14.2-rc.2

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

@@ -1,12 +1,13 @@
 <script setup>
+import CommonTreeView from "@ogw_front/components/Viewer/ObjectTree/Base/CommonTreeView.vue";
 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 { useHoverhighlight } from "@ogw_front/composables/use_hover_highlight";
+import { useHoverhighlight } from "@ogw_front/composables/hover_highlight";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useTreeFilter } from "@ogw_front/composables/use_tree_filter";
+import { useTreeFilter } from "@ogw_front/composables/tree_filter";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 const treeviewStore = useTreeviewStore();
@@ -32,7 +33,7 @@ const {
   toggleSort,
   customFilter,
   applySearchFilter,
-} = useTreeFilter(toRef(() => treeviewStore.items));
+} = useTreeFilter(() => treeviewStore.items, { recursiveSort: true });
 
 function onUpdateSelection(val) {
   treeviewStore.selection = applySearchFilter(val, treeviewStore.selection);
@@ -74,18 +75,28 @@ function isModel(item) {
   );
 }
 
-async function handleHoverEnter(item) {
+function handleHoverEnter({ item, immediate = false }) {
   const actualItem = item.raw || item;
-  const is_model = isModel(item);
-  let block_ids = [];
-  if (is_model) {
-    block_ids = await dataStore.getAllModelComponentsViewerIds(actualItem.id);
+
+  if (!actualItem.viewer_type) {
+    return;
   }
-  onHoverEnter(actualItem.id, block_ids, is_model ? "model" : "mesh");
+
+  const is_model = isModel(item);
+
+  onHoverEnter(
+    actualItem.id,
+    async () => (is_model ? await dataStore.getAllModelComponentsViewerIds(actualItem.id) : []),
+    is_model ? "model" : "mesh",
+    immediate,
+  );
 }
 
-function handleHoverLeave(item) {
+function handleHoverLeave({ item }) {
   const actualItem = item.raw || item;
+  if (!actualItem.viewer_type) {
+    return;
+  }
   onHoverLeave(actualItem.id);
 }
 </script>
@@ -98,26 +109,29 @@ function handleHoverLeave(item) {
       :filter-options="filterOptions"
       :available-filter-options="availableFilterOptions"
       @toggle-sort="toggleSort"
+      @collapse-all="opened = []"
     />
 
-    <v-treeview
+    <CommonTreeView
       :selected="visibleSelection"
       v-model:opened="opened"
       :items="processedItems"
-      :search="search"
-      :custom-filter="customFilter"
-      class="transparent-treeview"
-      item-value="id"
-      select-strategy="classic"
-      selectable
-      items-registration="props"
+      :options="{
+        selection: { selectable: true },
+        search,
+        customFilter,
+      }"
+      :scroll-top="mainView?.scrollTop || 0"
+      class="transparent-treeview virtual-tree-height"
       @update:selected="onUpdateSelection"
+      @update:scroll-top="treeviewStore.setScrollTop(mainView.id, $event)"
+      @hover:enter="handleHoverEnter"
+      @hover:leave="handleHoverLeave"
     >
-      <template #title="{ item }">
+      <template #title="{ item, isLeaf }">
         <ObjectTreeItemLabel
           :item="item"
-          @mouseenter="handleHoverEnter(item)"
-          @mouseleave="handleHoverLeave(item)"
+          :is-leaf="isLeaf"
           @contextmenu="emit('show-menu', { event: $event, itemId: item.id })"
         />
       </template>
@@ -135,25 +149,26 @@ function handleHoverLeave(item) {
           "
         />
       </template>
-    </v-treeview>
+    </CommonTreeView>
   </div>
 </template>
 
 <style scoped>
-.transparent-treeview {
-  background-color: transparent;
-  margin: 4px 0;
-}
-
-:deep(.v-list-item) {
-  transition: background-color 0.2s ease;
+.tree-view-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
 }
 
-:deep(.v-list-item--active > .v-list-item__overlay) {
-  opacity: 0 !important;
+.virtual-tree-height {
+  flex-grow: 1;
+  min-height: 0;
 }
 
-:deep(.v-list-item:hover > .v-list-item__overlay) {
-  opacity: 0.1 !important;
+.transparent-treeview {
+  background-color: transparent;
+  margin: 4px 0;
 }
 </style>

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

@@ -1,85 +1,113 @@
 <script setup>
+import { sortAndFormatItems, useTreeFilter } from "@ogw_front/composables/tree_filter";
+import CommonTreeView from "@ogw_front/components/Viewer/ObjectTree/Base/CommonTreeView.vue";
 import FetchingData from "@ogw_front/components/FetchingData.vue";
 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 { useHoverhighlight } from "@ogw_front/composables/use_hover_highlight";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useTreeFilter } from "@ogw_front/composables/use_tree_filter";
+import { useHoverhighlight } from "@ogw_front/composables/hover_highlight";
+import { useModelComponents } from "@ogw_front/composables/model_components";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
-const { id: viewId } = defineProps({ id: { type: String, required: true } });
+const { id } = defineProps({ id: { type: String, required: true } });
 const { onHoverEnter, onHoverLeave } = useHoverhighlight();
 const emit = defineEmits(["show-menu"]);
 
-const dataStore = useDataStore();
-const dataStyleStore = useDataStyleStore();
-const hybridViewerStore = useHybridViewerStore();
 const treeviewStore = useTreeviewStore();
+const {
+  items: rawItems,
+  componentsCache,
+  localCategories,
+  selection: visibleComponents,
+  updateVisibility,
+} = useModelComponents(id);
+
+const currentView = computed(() => treeviewStore.opened_views.find((view) => view.id === id));
 
-const currentView = computed(() => treeviewStore.opened_views.find((view) => view.id === viewId));
 const opened = computed({
   get: () => currentView.value?.opened || [],
-  set: (val) => treeviewStore.setOpened(viewId, val),
+  set: (val) => treeviewStore.setOpened(id, val),
 });
 
-const items = dataStore.refFormatedMeshComponents(viewId);
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(viewId);
-
 const {
   search,
   sortType,
   filterOptions,
-  processedItems,
+  processedItems: filteredCategories,
   availableFilterOptions,
   toggleSort,
   customFilter,
   applySearchFilter,
-} = useTreeFilter(items);
+} = useTreeFilter(localCategories);
 
-async function onSelectionChange(newSelection) {
-  const current = applySearchFilter(newSelection, mesh_components_selection.value);
-  const previous = mesh_components_selection.value;
-  const { added, removed } = compareSelections(current, previous);
+function onUpdateSelection(newSelection) {
+  const finalSelection = applySearchFilter(newSelection, visibleComponents.value);
+  updateVisibility(finalSelection);
+}
 
-  if (added.length === 0 && removed.length === 0) {
-    return;
+const visibleSelection = computed(() => applySearchFilter(visibleComponents.value, []));
+
+const itemsForTreeView = computed(() => {
+  if (search.value && componentsCache.value) {
+    const query = search.value.toLowerCase();
+    const result = [];
+    for (const type of Object.keys(componentsCache.value)) {
+      const matches = componentsCache.value[type].filter(
+        (component) =>
+          component.title.toLowerCase().includes(query) ||
+          component.id.toLowerCase().includes(query),
+      );
+      if (matches.length > 0) {
+        result.push({
+          id: type,
+          title: `${type}s (${matches.length})`,
+          children: sortAndFormatItems(matches, sortType.value),
+        });
+      }
+    }
+    return result;
   }
 
-  if (added.length > 0) {
-    await dataStyleStore.setModelComponentsVisibility(viewId, added, true);
+  const result = [];
+  for (const category of filteredCategories.value) {
+    result.push({
+      ...category,
+      children: sortAndFormatItems(componentsCache.value?.[category.id], sortType.value),
+    });
   }
-  if (removed.length > 0) {
-    await dataStyleStore.setModelComponentsVisibility(viewId, removed, false);
-  }
-  hybridViewerStore.remoteRender();
-}
-
-const visibleSelection = computed(() => applySearchFilter(mesh_components_selection.value, []));
+  return result;
+});
 
 function showContextMenu(event, item) {
   const actualItem = item.raw || item;
   emit("show-menu", {
     event,
-    itemId: actualItem.category ? actualItem.id : viewId,
+    itemId: actualItem.category ? actualItem.id : id,
     context_type: actualItem.category ? "model_component" : "model_component_type",
-    modelId: viewId,
+    modelId: id,
     modelComponentType: actualItem.category ? undefined : actualItem.id,
   });
 }
 
-function handleHoverEnter(item) {
+function handleHoverEnter({ item, immediate = false }) {
   const actualItem = item.raw || item;
-  const block_ids = actualItem.category
-    ? [actualItem.viewer_id]
-    : actualItem.children?.map((child) => child.viewer_id) || [];
-  onHoverEnter(viewId, block_ids);
+
+  if (!actualItem.category && (!actualItem.children || actualItem.children.length === 0)) {
+    return;
+  }
+
+  onHoverEnter(
+    id,
+    () =>
+      actualItem.category
+        ? [actualItem.viewer_id]
+        : actualItem.children?.map((child) => child.viewer_id) || [],
+    "model",
+    immediate,
+  );
 }
 
 function handleHoverLeave() {
-  onHoverLeave(viewId);
+  onHoverLeave(id);
 }
 </script>
 
@@ -91,52 +119,60 @@ function handleHoverLeave() {
       :filter-options="filterOptions"
       :available-filter-options="availableFilterOptions"
       @toggle-sort="toggleSort"
+      @collapse-all="opened = []"
     />
 
-    <FetchingData v-if="items === undefined" :size="48" :width="4" text="" />
+    <FetchingData v-if="rawItems === undefined" :size="48" :width="4" text="" />
 
-    <v-treeview
-      v-else
+    <CommonTreeView
       :selected="visibleSelection"
       v-model:opened="opened"
-      :items="processedItems"
-      :search="search"
-      :custom-filter="customFilter"
-      class="transparent-treeview"
-      item-value="id"
-      select-strategy="classic"
-      selectable
-      items-registration="props"
-      @update:selected="onSelectionChange"
+      :items="itemsForTreeView"
+      :options="{
+        selection: { selectable: true, strategy: 'classic' },
+        search,
+        customFilter,
+      }"
+      :scroll-top="currentView?.scrollTop || 0"
+      class="transparent-treeview virtual-tree-height"
+      @update:selected="onUpdateSelection"
+      @click:item="onUpdateSelection([$event.id, ...visibleComponents])"
+      @update:scroll-top="treeviewStore.setScrollTop(id, $event)"
+      @hover:enter="handleHoverEnter"
+      @hover:leave="handleHoverLeave"
     >
-      <template #title="{ item }">
+      <template #title="{ item, isLeaf }">
         <ObjectTreeItemLabel
           :item="item"
+          :is-leaf="isLeaf"
           show-tooltip
-          @mouseenter="handleHoverEnter(item)"
-          @mouseleave="handleHoverLeave(item)"
-          @contextmenu="showContextMenu($event, item)"
+          class="text-body-1"
+          @contextmenu.prevent.stop="showContextMenu($event, item)"
         />
       </template>
-    </v-treeview>
+    </CommonTreeView>
   </div>
 </template>
 
 <style scoped>
-.transparent-treeview {
-  background-color: transparent;
-  margin: 4px 0;
+.tree-view-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
 }
 
-:deep(.v-list-item) {
-  transition: background-color 0.2s ease;
+.virtual-tree-height {
+  flex-grow: 1;
+  min-height: 0;
 }
 
-:deep(.v-list-item--active > .v-list-item__overlay) {
-  opacity: 0 !important;
+.transparent-treeview {
+  background-color: transparent;
 }
 
-:deep(.v-list-item:hover > .v-list-item__overlay) {
-  opacity: 0.1 !important;
+:deep(.v-list-item__overlay) {
+  display: none !important;
 }
 </style>

package/app/components/Viewer/Options/Sliders/Size.vue

@@ -0,0 +1,8 @@
+<script setup>
+import Slider from "./Slider";
+const size = defineModel();
+</script>
+
+<template>
+  <Slider v-model="size" :tooltip="'Size'" />
+</template>

package/app/components/Viewer/Options/Sliders/Slider.vue

@@ -0,0 +1,17 @@
+<script setup>
+import BasicSlider from "@ogw_front/components/Basic/Slider";
+
+const model = defineModel();
+const { tooltip } = defineProps({
+  tooltip: { type: String, required: true },
+});
+</script>
+
+<template>
+  <v-col cols="auto" justify="center">
+    <v-icon size="30" icon="mdi-ruler" v-tooltip:left="tooltip" />
+  </v-col>
+  <v-col justify="center">
+    <BasicSlider v-model="model" />
+  </v-col>
+</template>

package/app/components/Viewer/Options/Sliders/Width.vue

@@ -0,0 +1,8 @@
+<script setup>
+import Slider from "./Slider";
+const width = defineModel();
+</script>
+
+<template>
+  <Slider v-model="width" :tooltip="'Width'" />
+</template>

package/app/components/Viewer/Options/VisibilitySwitch.vue

@@ -1,4 +1,6 @@
 <script setup>
+import BasicSwitch from "@ogw_front/components/Basic/Switch";
+
 const visibility = defineModel();
 </script>
 
@@ -8,7 +10,7 @@ const visibility = defineModel();
       <v-icon size="30" icon="mdi-eye" v-tooltip:left="'Visibility'" />
     </v-col>
     <v-col cols="auto" justify="center">
-      <v-switch v-model="visibility" inset hide-details />
+      <BasicSwitch v-model="visibility" />
     </v-col>
   </v-row>
 </template>

package/app/components/Viewer/PointSet/SpecificPointsOptions.vue

@@ -67,11 +67,7 @@ const vertex_attribute_color_map = computed({
 });
 </script>
 <template>
-  <ViewerContextMenuItem
-    :itemProps="itemProps"
-    tooltip="Points options"
-    :btn_image="PointSetPoints"
-  >
+  <ViewerContextMenuItem :itemProps="itemProps" :btn_image="PointSetPoints">
     <template #options>
       <ViewerOptionsVisibilitySwitch v-model="visibility" />
       <template v-if="visibility">

package/app/components/Viewer/Surface/Triangulated/TrianglesOptions.vue

@@ -0,0 +1,11 @@
+<script setup>
+import ViewerSpecificPolygonsOptions from "@ogw_front/components/Viewer/Surface/PolygonsOptions";
+
+const { itemProps } = defineProps({
+  itemProps: { type: Object, required: true },
+});
+</script>
+
+<template>
+  <ViewerSpecificPolygonsOptions :itemProps="itemProps" tooltip="Triangles options" />
+</template>

package/app/composables/hover_highlight.js

@@ -0,0 +1,85 @@
+import { useViewerStore } from "@ogw_front/stores/viewer";
+import vtk_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
+
+const HOVER_DELAY = 200;
+
+export function useHoverhighlight() {
+  const viewerStore = useViewerStore();
+  let timer = undefined;
+  let currentId = undefined;
+  let currentType = undefined;
+
+  function onHoverEnter(id, block_ids_provider = [], type = "model", immediate = false) {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    const schema = vtk_schemas.opengeodeweb_viewer[type].highlight;
+
+    async function highlightAction() {
+      currentId = id;
+      currentType = type;
+
+      let block_ids = [];
+      if (typeof block_ids_provider === "function") {
+        block_ids = await block_ids_provider();
+      } else {
+        block_ids = block_ids_provider;
+      }
+
+      block_ids = (Array.isArray(block_ids) ? block_ids : [])
+        .map((blockId) => Number.parseInt(blockId, 10))
+        .filter((blockId) => !Number.isNaN(blockId));
+
+      if (currentId !== id) {
+        return;
+      }
+
+      const params = {
+        id,
+        visibility: true,
+        ...(type === "model" && { block_ids }),
+      };
+      try {
+        await viewerStore.request(schema, params);
+      } catch (error) {
+        console.error(`Highlight failed for ${type} ${id}:`, error);
+      }
+    }
+
+    if (immediate) {
+      highlightAction();
+    } else {
+      timer = setTimeout(highlightAction, HOVER_DELAY);
+    }
+  }
+
+  function onHoverLeave(id) {
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    if (currentId === id) {
+      const schema = vtk_schemas.opengeodeweb_viewer[currentType].highlight;
+      const params = {
+        id,
+        visibility: false,
+        ...(currentType === "model" && { block_ids: [] }),
+      };
+      try {
+        viewerStore.request(schema, params);
+      } catch (error) {
+        console.error(`Unhighlight failed for ${currentType} ${id}:`, error);
+      }
+      currentId = undefined;
+      currentType = undefined;
+    }
+
+    if (!currentId) {
+      currentId = undefined;
+      currentType = undefined;
+    }
+  }
+
+  return { onHoverEnter, onHoverLeave };
+}

package/app/composables/model_components.js

@@ -0,0 +1,68 @@
+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";
+
+export function useModelComponents(viewId) {
+  const dataStore = useDataStore();
+  const dataStyleStore = useDataStyleStore();
+  const hybridViewerStore = useHybridViewerStore();
+
+  const items = dataStore.refFormatedMeshComponents(viewId);
+  const componentsCache = ref(undefined);
+  const localCategories = ref([]);
+
+  onMounted(async () => {
+    const data = await dataStore.fetchAllMeshComponents(viewId);
+    componentsCache.value = markRaw(data);
+  });
+
+  watch(
+    items,
+    (newItems) => {
+      if (!newItems) {
+        localCategories.value = [];
+        return;
+      }
+      localCategories.value = newItems.map((newCategory) => {
+        const existing = localCategories.value.find((category) => category.id === newCategory.id);
+        if (existing) {
+          existing.title = newCategory.title || newCategory.id;
+          return existing;
+        }
+        return reactive({
+          ...newCategory,
+          title: newCategory.title || newCategory.id,
+        });
+      });
+    },
+    { immediate: true },
+  );
+
+  const selection = dataStyleStore.visibleMeshComponents(viewId);
+
+  async function updateVisibility(current) {
+    const previous = 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();
+  }
+
+  return {
+    items,
+    componentsCache,
+    localCategories,
+    selection,
+    updateVisibility,
+  };
+}