@geode/opengeodeweb-front 10.33.0-rc.2 → 10.33.0

package/app/components/Viewer/ObjectTree/Base/CommonTreeView.vue

@@ -24,6 +24,7 @@ const emit = defineEmits([
   "update:scrollTop",
   "hover:enter",
   "hover:leave",
+  "contextmenu",
 ]);
 
 const {
@@ -45,12 +46,13 @@ const {
   emit,
 );
 
-const { virtualScrollRef, stickyHeader, handleScroll, scrollToIndex } = useTreeScroll(
-  computed(() => ({ scrollTop })),
-  emit,
-  displayItems,
-  actualItemProps,
-);
+const { virtualScrollRef, stickyHeader, handleScroll, scrollToIndex, getScrollInfo } =
+  useTreeScroll(
+    computed(() => ({ scrollTop })),
+    emit,
+    displayItems,
+    actualItemProps,
+  );
 
 const lastActiveIndex = ref(-1);
 const focusedIndex = ref(-1);
@@ -108,7 +110,6 @@ const { handleKeyDown } = useTreeKeyboardNav(
   scrollToIndex,
   toggleOpen,
   handleItemClick,
-  focusedIndex,
 );
 </script>
 
@@ -119,6 +120,7 @@ const { handleKeyDown } = useTreeKeyboardNav(
     tabindex="0"
     @keydown="handleKeyDown"
     @mousedown="treeWrapper.focus()"
+    @mouseenter="treeWrapper.focus()"
   >
     <StickyHeader
       v-if="stickyHeader"
@@ -160,6 +162,10 @@ const { handleKeyDown } = useTreeKeyboardNav(
             handleItemClick(item, index, $event);
             treeWrapper.focus();
           "
+          @contextmenu.prevent.stop="
+            emit('contextmenu', { event: $event, item: item.raw });
+            treeWrapper.focus();
+          "
           @mouseenter="emit('hover:enter', { item })"
           @mouseleave="emit('hover:leave', { item })"
         >

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

@@ -169,6 +169,7 @@ function expandAll() {
       @update:scroll-top="treeviewStore.setScrollTop(mainView.id, $event)"
       @hover:enter="handleHoverEnter"
       @hover:leave="handleHoverLeave"
+      @contextmenu="emit('show-menu', { event: $event.event, itemId: $event.item.id })"
     >
       <template #title="{ item, isLeaf }">
         <ObjectTreeItemLabel

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

@@ -174,6 +174,7 @@ function getLeafViewerIds(item) {
       @update:scroll-top="treeviewStore.setScrollTop(actualViewId, $event)"
       @hover:enter="handleHoverEnter"
       @hover:leave="handleHoverLeave"
+      @contextmenu="showContextMenu($event.event, $event.item)"
     >
       <template #title="{ item, isLeaf }">
         <ObjectTreeItemLabel
@@ -181,7 +182,7 @@ function getLeafViewerIds(item) {
           :is-leaf="isLeaf"
           show-tooltip
           class="text-body-1"
-          @contextmenu.prevent.stop="showContextMenu($event, item)"
+          @contextmenu="showContextMenu($event, item)"
         />
       </template>
 

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

@@ -169,6 +169,7 @@ function expandAll() {
       @update:scroll-top="treeviewStore.setScrollTop(actualViewId, $event)"
       @hover:enter="handleHoverEnter"
       @hover:leave="handleHoverLeave"
+      @contextmenu="showContextMenu($event.event, $event.item)"
     >
       <template #title="{ item, isLeaf }">
         <ObjectTreeItemLabel
@@ -176,7 +177,7 @@ function expandAll() {
           :is-leaf="isLeaf"
           show-tooltip
           class="text-body-1"
-          @contextmenu.prevent.stop="showContextMenu($event, item)"
+          @contextmenu="showContextMenu($event, item)"
         />
       </template>
 

package/app/composables/tree_keyboard_nav.js

@@ -1,23 +1,84 @@
+function getBaseIndex(currentIndex, lastIndex, bounds, key) {
+  if (currentIndex < 0 || currentIndex > lastIndex) {
+    if (bounds) {
+      return key === "End" ? lastIndex : bounds.firstVisible;
+    }
+    return key === "End" ? lastIndex : 0;
+  }
+  if (bounds) {
+    if (currentIndex < bounds.firstVisible - 2) {
+      return bounds.firstVisible;
+    }
+    if (currentIndex > bounds.lastVisible + 2) {
+      return bounds.lastVisible;
+    }
+  }
+  return currentIndex;
+}
+
 export function useTreeKeyboardNav(
   displayItems,
   emit,
   scrollToIndex,
   toggleOpen,
   handleItemClick,
-  focusedIndex = ref(-1),
+  getScrollInfo,
 ) {
+  const focusedIndex = ref(-1);
+
   function findParentIndex(item, currentIndex) {
     for (let index = currentIndex - 1; index >= 0; index -= 1) {
-      if (displayItems.value[index].depth < item.depth) {
+      if (displayItems.value[index] && displayItems.value[index].depth < item.depth) {
         return index;
       }
     }
     return -1;
   }
 
-  function getNextIndex(key, item) {
-    const lastIndex = displayItems.value.length - 1;
-    const currentIndex = focusedIndex.value;
+  function getVisibleBounds() {
+    if (!getScrollInfo) {
+      return undefined;
+    }
+    const info = getScrollInfo();
+    if (!info || !info.itemHeight || info.itemHeight <= 0) {
+      return undefined;
+    }
+    const firstVisible = Math.max(0, Math.floor(info.scrollTop / info.itemHeight));
+    const visibleCount =
+      info.containerHeight > 0 ? Math.floor(info.containerHeight / info.itemHeight) : 1;
+    const lastVisible = Math.max(firstVisible, firstVisible + visibleCount - 1);
+    return { firstVisible, lastVisible };
+  }
+
+  function handleExpandOrNext(item, currentIndex, lastIndex) {
+    if (item && !item.isLeaf && !item.isOpen) {
+      toggleOpen(item.raw);
+      return currentIndex;
+    }
+    return Math.min(currentIndex + 1, lastIndex);
+  }
+
+  function handleCollapseOrParent(item, currentIndex) {
+    if (item && !item.isLeaf && item.isOpen) {
+      toggleOpen(item.raw);
+      return currentIndex;
+    }
+    if (item) {
+      const parentIndex = findParentIndex(item, currentIndex);
+      return parentIndex === -1 ? currentIndex : parentIndex;
+    }
+    return currentIndex;
+  }
+
+  function getNextIndex(key) {
+    const total = displayItems.value.length;
+    if (total === 0) {
+      return -1;
+    }
+    const lastIndex = total - 1;
+    const rawIndex = getBaseIndex(focusedIndex.value, lastIndex, getVisibleBounds(), key);
+    const currentIndex = Math.max(0, Math.min(rawIndex, lastIndex));
+    const item = displayItems.value[currentIndex];
 
     if (key === "ArrowDown") {
       return Math.min(currentIndex + 1, lastIndex);
@@ -31,22 +92,11 @@ export function useTreeKeyboardNav(
     if (key === "End") {
       return lastIndex;
     }
-
     if (key === "ArrowRight") {
-      if (!item.isLeaf && !item.isOpen) {
-        toggleOpen(item.raw);
-        return currentIndex;
-      }
-      return Math.min(currentIndex + 1, lastIndex);
+      return handleExpandOrNext(item, currentIndex, lastIndex);
     }
-
     if (key === "ArrowLeft") {
-      if (!item.isLeaf && item.isOpen) {
-        toggleOpen(item.raw);
-        return currentIndex;
-      }
-      const parentIndex = findParentIndex(item, currentIndex);
-      return parentIndex === -1 ? currentIndex : parentIndex;
+      return handleCollapseOrParent(item, currentIndex);
     }
 
     return currentIndex;
@@ -57,28 +107,29 @@ export function useTreeKeyboardNav(
       return;
     }
 
-    const prevIndex = focusedIndex.value;
-    const item = displayItems.value[focusedIndex.value];
-
     if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) {
       event.preventDefault();
-      focusedIndex.value = getNextIndex(event.key, item);
+      const prevIndex = focusedIndex.value;
+      focusedIndex.value = getNextIndex(event.key);
+
+      if (focusedIndex.value !== prevIndex) {
+        if (prevIndex >= 0 && prevIndex < displayItems.value.length) {
+          emit("hover:leave", { item: displayItems.value[prevIndex] });
+        }
+        if (focusedIndex.value >= 0 && focusedIndex.value < displayItems.value.length) {
+          emit("hover:enter", {
+            immediate: true,
+            item: displayItems.value[focusedIndex.value],
+          });
+        }
+        scrollToIndex(focusedIndex.value);
+      }
     } else if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
-      if (focusedIndex.value !== -1) {
-        handleItemClick(item);
-      }
-    }
-
-    if (focusedIndex.value !== prevIndex) {
-      if (prevIndex !== -1) {
-        emit("hover:leave", { item: displayItems.value[prevIndex] });
+      if (focusedIndex.value >= 0 && focusedIndex.value < displayItems.value.length) {
+        const item = displayItems.value[focusedIndex.value];
+        handleItemClick(item, focusedIndex.value);
       }
-      emit("hover:enter", {
-        item: displayItems.value[focusedIndex.value],
-        immediate: true,
-      });
-      scrollToIndex(focusedIndex.value);
     }
   }
 

package/app/composables/tree_scroll.js

@@ -1,6 +1,6 @@
 export function useTreeScroll(propsIn, emit, displayItems, actualItemProps) {
   const SCROLL_STICKY_THRESHOLD = 10;
-  const DEFAULT_ITEM_HEIGHT = 44;
+  const DEFAULT_ITEM_HEIGHT = 28;
 
   const props = toRef(propsIn);
   const internalScrollTop = ref(props.value.scrollTop || 0);
@@ -81,11 +81,23 @@ export function useTreeScroll(propsIn, emit, displayItems, actualItemProps) {
     }
   }
 
+  function getScrollInfo() {
+    const container = virtualScrollRef.value?.$el;
+    const containerHeight = container ? container.clientHeight : 0;
+    const itemHeight = actualItemProps.value?.height || DEFAULT_ITEM_HEIGHT;
+    return {
+      scrollTop: internalScrollTop.value,
+      containerHeight,
+      itemHeight,
+    };
+  }
+
   return {
     internalScrollTop,
     virtualScrollRef,
     stickyHeader,
     handleScroll,
     scrollToIndex,
+    getScrollInfo,
   };
 }

package/app/composables/virtual_tree.js

@@ -5,7 +5,7 @@ export function useVirtualTree(propsIn, emit) {
     value: "id",
     title: "title",
     children: "children",
-    height: 44,
+    height: 28,
     ...props.value.itemProps,
   }));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geode/opengeodeweb-front",
-  "version": "10.33.0-rc.2",
+  "version": "10.33.0",
   "description": "OpenSource Vue/Nuxt/Pinia/Vuetify framework for web applications",
   "homepage": "https://github.com/Geode-solutions/OpenGeodeWeb-Front",
   "bugs": {
@@ -39,8 +39,8 @@
     "build": ""
   },
   "dependencies": {
-    "@geode/opengeodeweb-back": "next",
-    "@geode/opengeodeweb-viewer": "next",
+    "@geode/opengeodeweb-back": "latest",
+    "@geode/opengeodeweb-viewer": "latest",
     "@google-cloud/run": "3.2.0",
     "@kitware/vtk.js": "33.3.0",
     "@mdi/font": "7.4.47",