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

package/app/components/Viewer/ObjectTree/Box.vue

@@ -1,20 +1,68 @@
 <script setup>
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+
 const SCROLL_SYNC_DELAY = 50;
 const SCROLL_THRESHOLD = 1;
 const { title, closable, icon, mdiIcon, scrollTop } = defineProps({
   title: { type: String, required: true },
-  closable: { type: Boolean, default: false },
-  icon: { type: String, default: "" },
-  mdiIcon: { type: String, default: "" },
-  scrollTop: { type: Number, default: 0 },
+  closable: { type: Boolean, required: false, default: false },
+  icon: { type: String, required: false, default: "" },
+  mdiIcon: { type: String, required: false, default: "" },
+  scrollTop: { type: Number, required: false, default: 0 },
 });
-
 const emit = defineEmits(["close", "dragstart", "update:scrollTop"]);
 
-const scrollContainer = ref(undefined);
+const scrollContainer = useTemplateRef("scroll-container");
+const treeviewBox = useTemplateRef("treeview-box");
+const hybridViewerStore = useHybridViewerStore();
+
+const LUMINANCE_THRESHOLD = 0.65;
+const ADAPTIVE_EXPONENT = 0.3;
+
+const MIN_BLUR = 8;
+const MAX_BLUR = 25;
+
+const MIN_OPACITY = 0;
+const MAX_OPACITY = 0.5;
+
+const MIN_BOOST = 1;
+const MAX_BOOST = 1.2;
+const ADAPTIVE_REFRESH_RATE = 150;
+
+const { x, y, width, height } = useElementBounding(treeviewBox);
+const brightness = ref(LUMINANCE_THRESHOLD);
+
+const updateBrightness = useThrottleFn(() => {
+  brightness.value = hybridViewerStore.getAverageBrightness({
+    x: x.value,
+    y: y.value,
+    width: width.value,
+    height: height.value,
+  });
+}, ADAPTIVE_REFRESH_RATE);
+
 let isApplyingScroll = false;
 let resizeObserver = undefined;
 
+watch([x, y, width, height, () => hybridViewerStore.latestImage], updateBrightness, {
+  immediate: true,
+});
+
+const adaptiveStyles = computed(() => {
+  const normalized = Math.min(1, brightness.value / LUMINANCE_THRESHOLD);
+  const darkFactor = (1 - normalized) ** ADAPTIVE_EXPONENT;
+
+  const blur = MIN_BLUR + darkFactor * (MAX_BLUR - MIN_BLUR);
+  const opacity = MIN_OPACITY + darkFactor * (MAX_OPACITY - MIN_OPACITY);
+  const brightnessBoost = MIN_BOOST + darkFactor * (MAX_BOOST - MIN_BOOST);
+
+  return {
+    "--adaptive-blur": `${blur}px`,
+    "--adaptive-opacity": opacity,
+    "--adaptive-brightness": brightnessBoost,
+  };
+});
+
 function handleScroll(event) {
   if (isApplyingScroll) {
     return;
@@ -69,7 +117,12 @@ watch(
 </script>
 
 <template>
-  <v-card variant="outlined" class="tree-box d-flex flex-column">
+  <v-card
+    ref="treeview-box"
+    variant="outlined"
+    class="tree-box d-flex flex-column"
+    :style="adaptiveStyles"
+  >
     <v-card-title
       class="tree-box-header d-flex align-center"
       :class="{ 'cursor-grab': closable }"
@@ -89,7 +142,15 @@ watch(
       <v-icon v-else-if="closable" size="24" class="mr-2">mdi-drag-variant</v-icon>
       <span
         class="text-subtitle-2 font-weight-bold d-inline-flex align-center"
-        style="height: 24px; line-height: 1"
+        style="
+          height: 24px;
+          line-height: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex-shrink: 1;
+          min-width: 0;
+        "
       >
         {{ title }}
       </span>
@@ -103,10 +164,11 @@ watch(
       />
     </v-card-title>
     <v-divider />
-    <v-card-text class="pa-0 flex-grow-1 overflow-hidden d-flex flex-column">
+    <v-card-text class="pa-0 flex-grow-1 overflow-hidden d-flex flex-column" style="min-height: 0">
       <div
-        ref="scrollContainer"
-        class="flex-grow-1 overflow-y-auto overflow-x-hidden"
+        ref="scroll-container"
+        class="flex-grow-1 overflow-y-hidden overflow-x-hidden d-flex flex-column"
+        style="min-height: 0"
         @scroll="handleScroll"
       >
         <slot />
@@ -118,15 +180,44 @@ watch(
 <style scoped>
 .tree-box {
   height: 100%;
+  min-height: 0;
   border-radius: 16px;
   background-color: transparent !important;
-  backdrop-filter: blur(2px);
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  position: relative;
+  overflow: hidden;
+  transition:
+    background-color 0.3s ease,
+    backdrop-filter 0.3s ease;
+}
+
+.tree-box::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, var(--adaptive-opacity));
+  backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  -webkit-backdrop-filter: blur(var(--adaptive-blur)) brightness(var(--adaptive-brightness));
+  mix-blend-mode: lighten;
+  z-index: 0;
+  pointer-events: none;
+  border-radius: inherit;
+  transition:
+    background-color 0.3s ease,
+    backdrop-filter 0.3s ease;
+}
+
+.tree-box > * {
+  position: relative;
+  z-index: 1;
 }
 
 .tree-box-header {
   height: 40px !important;
-  padding: 0 8px !important;
-  background-color: rgba(255, 255, 255, 0.1);
+  padding: 0 12px !important;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  flex-shrink: 0;
 }
 </style>

package/app/components/Viewer/ObjectTree/Layout.vue

@@ -48,7 +48,7 @@ watch(
   { immediate: true },
 );
 
-watch(maxWidth, (newMax) => {
+watch([maxWidth, () => additionalViews.value.length], ([newMax]) => {
   const hasAdditional = additionalViews.value.length > 0;
   const gap = hasAdditional ? GAP_WIDTH : 0;
   const total =
@@ -143,20 +143,20 @@ function onVerticalResizeStart(event, index) {
     const deltaPercent = (deltaY / containerHeight) * PERCENT_100;
     const minHeightPercent = (HEIGHT_MIN / containerHeight) * PERCENT_100;
 
-    let newH1 = startHeight1 + deltaPercent;
-    let newH2 = startHeight2 - deltaPercent;
+    let newHeight1 = startHeight1 + deltaPercent;
+    let newHeight2 = startHeight2 - deltaPercent;
 
-    if (newH1 < minHeightPercent) {
-      newH1 = minHeightPercent;
-      newH2 = startHeight1 + startHeight2 - minHeightPercent;
-    } else if (newH2 < minHeightPercent) {
-      newH2 = minHeightPercent;
-      newH1 = startHeight1 + startHeight2 - minHeightPercent;
+    if (newHeight1 < minHeightPercent) {
+      newHeight1 = minHeightPercent;
+      newHeight2 = startHeight1 + startHeight2 - minHeightPercent;
+    } else if (newHeight2 < minHeightPercent) {
+      newHeight2 = minHeightPercent;
+      newHeight1 = startHeight1 + startHeight2 - minHeightPercent;
     }
 
     const newHeights = [...rowHeights.value];
-    newHeights[index] = newH1;
-    newHeights[index + 1] = newH2;
+    newHeights[index] = newHeight1;
+    newHeights[index + 1] = newHeight2;
     treeviewStore.setRowHeights(newHeights);
 
     document.body.style.userSelect = "none";
@@ -272,7 +272,7 @@ function onVerticalResizeStart(event, index) {
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow-y: auto;
+  overflow-y: hidden;
   overflow-x: hidden;
   flex-shrink: 0;
 }
@@ -286,6 +286,8 @@ function onVerticalResizeStart(event, index) {
 }
 
 .view-wrapper {
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
   padding: 2px;
   transition: transform 0.2s;

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>