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

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,
+  };
+}

package/app/composables/{use_tree_filter.js → tree_filter.js}

@@ -2,30 +2,45 @@ function customFilter(value, searchQuery, item) {
   if (!searchQuery) {
     return true;
   }
+  if (!item || !item.raw) {
+    return false;
+  }
   const query = searchQuery.toLowerCase();
   const { title = "", id = value } = item.raw || {};
   return [title, id].some((field) => String(field).toLowerCase().includes(query));
 }
 
-function sortAndFormatItems(items, sortType) {
+function sortAndFormatItems(itemList, sortType, options = {}) {
+  if (!itemList || !Array.isArray(itemList)) {
+    return [];
+  }
   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",
-      });
+  const localeOptions = { numeric: true, sensitivity: "base" };
+
+  const sorted = itemList
+    .filter((item) => item !== null && item !== undefined)
+    .toSorted((itemA, itemB) => {
+      const fieldA = String(itemA[field] || itemA.id || "");
+      const fieldB = String(itemB[field] || itemB.id || "");
+      return fieldA.localeCompare(fieldB, undefined, localeOptions);
     });
-    return {
-      ...category,
-      children,
-    };
-  });
+
+  if (options.recursiveSort) {
+    return sorted.map((item) => {
+      if (item.children && item.children.length > 0) {
+        return {
+          ...item,
+          children: sortAndFormatItems(item.children, sortType, options),
+        };
+      }
+      return item;
+    });
+  }
+  return sorted;
 }
 
-function useTreeFilter(rawItems, options = {}) {
+function useTreeFilter(itemsIn, options = {}) {
+  const rawItems = typeof itemsIn === "function" ? computed(itemsIn) : toRef(itemsIn);
   const search = ref("");
   const sortType = ref(options.defaultSort || "name");
   const filterOptions = ref(options.defaultFilters || {});
@@ -53,24 +68,27 @@ function useTreeFilter(rawItems, options = {}) {
     if (!rawItems.value) {
       return [];
     }
-    const sorted = sortAndFormatItems(
-      rawItems.value.filter((category) => {
-        const key = category.title || category.id;
-        return filterOptions.value[key] !== false;
-      }),
-      sortType.value,
-    );
+    const filteredByCategory = rawItems.value.filter((category) => {
+      const key = category.title || category.id;
+      return filterOptions.value[key] !== false;
+    });
+
+    const sorted = sortAndFormatItems(filteredByCategory, sortType.value, options);
+
     if (!search.value) {
       return sorted;
     }
-    return sorted
-      .map((category) => {
-        category.children = (category.children || []).filter((child) =>
-          customFilter(child.id, search.value, { raw: child }),
-        );
-        return category;
-      })
-      .filter((category) => category.children.length > 0);
+
+    const result = [];
+    for (const category of sorted) {
+      const children = (category.children || []).filter((child) =>
+        customFilter(child.id, search.value, { raw: child }),
+      );
+      if (children.length > 0 || customFilter(category.id, search.value, { raw: category })) {
+        result.push({ ...category, children });
+      }
+    }
+    return result;
   });
 
   function toggleSort() {
@@ -117,4 +135,4 @@ function useTreeFilter(rawItems, options = {}) {
   };
 }
 
-export { customFilter, useTreeFilter };
+export { customFilter, useTreeFilter, sortAndFormatItems };

package/app/composables/tree_keyboard_nav.js

@@ -0,0 +1,81 @@
+export function useTreeKeyboardNav(displayItems, emit, scrollToIndex, toggleOpen, handleItemClick) {
+  const focusedIndex = ref(-1);
+
+  function findParentIndex(item, currentIndex) {
+    for (let index = currentIndex - 1; index >= 0; index -= 1) {
+      if (displayItems.value[index].depth < item.depth) {
+        return index;
+      }
+    }
+    return -1;
+  }
+
+  function getNextIndex(key, item) {
+    const lastIndex = displayItems.value.length - 1;
+    const currentIndex = focusedIndex.value;
+
+    if (key === "ArrowDown") {
+      return Math.min(currentIndex + 1, lastIndex);
+    }
+    if (key === "ArrowUp") {
+      return Math.max(currentIndex - 1, 0);
+    }
+    if (key === "Home") {
+      return 0;
+    }
+    if (key === "End") {
+      return lastIndex;
+    }
+
+    if (key === "ArrowRight") {
+      if (!item.isLeaf && !item.isOpen) {
+        toggleOpen(item.raw);
+        return currentIndex;
+      }
+      return Math.min(currentIndex + 1, 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 currentIndex;
+  }
+
+  function handleKeyDown(event) {
+    if (displayItems.value.length === 0) {
+      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);
+    } 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] });
+      }
+      emit("hover:enter", {
+        item: displayItems.value[focusedIndex.value],
+        immediate: true,
+      });
+      scrollToIndex(focusedIndex.value);
+    }
+  }
+
+  return { focusedIndex, handleKeyDown };
+}

package/app/composables/tree_scroll.js

@@ -0,0 +1,91 @@
+export function useTreeScroll(propsIn, emit, displayItems, actualItemProps) {
+  const SCROLL_STICKY_THRESHOLD = 10;
+  const DEFAULT_ITEM_HEIGHT = 44;
+
+  const props = toRef(propsIn);
+  const internalScrollTop = ref(props.value.scrollTop || 0);
+  const virtualScrollRef = ref(undefined);
+
+  function handleScroll(event) {
+    internalScrollTop.value = event.target.scrollTop;
+    emit("update:scrollTop", event.target.scrollTop);
+  }
+
+  watch(
+    () => props.value.scrollTop,
+    (newVal) => {
+      if (Math.abs(newVal - internalScrollTop.value) > 1) {
+        internalScrollTop.value = newVal;
+        if (virtualScrollRef.value && virtualScrollRef.value.$el) {
+          virtualScrollRef.value.$el.scrollTop = newVal;
+        }
+      }
+    },
+  );
+
+  const stickyHeader = computed(() => {
+    if (internalScrollTop.value <= SCROLL_STICKY_THRESHOLD) {
+      return undefined;
+    }
+
+    const itemHeight = actualItemProps.value.height || DEFAULT_ITEM_HEIGHT;
+    const firstVisibleIndex = Math.floor(internalScrollTop.value / itemHeight);
+
+    if (firstVisibleIndex < 0 || firstVisibleIndex >= displayItems.value.length) {
+      return undefined;
+    }
+
+    const firstVisibleItem = displayItems.value[firstVisibleIndex];
+    if (!firstVisibleItem) {
+      return undefined;
+    }
+
+    let current = firstVisibleIndex;
+    const firstVisibleDepth = firstVisibleItem.depth;
+
+    while (current >= 0) {
+      const item = displayItems.value[current];
+      if (item && !item.isLeaf && item.depth < firstVisibleDepth) {
+        return item;
+      }
+      if (item && item.depth === 0 && !item.isLeaf && current < firstVisibleIndex) {
+        return item;
+      }
+      current -= 1;
+    }
+    return undefined;
+  });
+
+  function scrollToIndex(index) {
+    if (index === -1 || !virtualScrollRef.value) {
+      return;
+    }
+
+    const container = virtualScrollRef.value.$el;
+    if (!container) {
+      return;
+    }
+
+    const itemHeight = actualItemProps.value.height;
+    const itemTop = index * itemHeight;
+    const itemBottom = itemTop + itemHeight;
+
+    const currentScrollTop = container.scrollTop;
+    const containerHeight = container.clientHeight;
+    const scrollBottom = currentScrollTop + containerHeight;
+
+    if (itemTop < currentScrollTop) {
+      container.scrollTop = itemTop;
+    } else if (itemBottom > scrollBottom) {
+      container.scrollTop = itemBottom - containerHeight;
+    }
+  }
+
+  return {
+    internalScrollTop,
+    virtualScrollRef,
+    stickyHeader,
+    handleScroll,
+    scrollToIndex,
+  };
+}

package/app/composables/virtual_tree.js

@@ -0,0 +1,164 @@
+export function useVirtualTree(propsIn, emit) {
+  const props = toRef(propsIn);
+
+  const actualItemProps = computed(() => ({
+    value: "id",
+    title: "title",
+    children: "children",
+    height: 44,
+    ...props.value.itemProps,
+  }));
+
+  const actualSelection = computed(() => ({
+    selectable: false,
+    strategy: "classic",
+    ...props.value.selection,
+  }));
+
+  const openedSet = computed(() => new Set(props.value.opened));
+  const selectedSet = computed(() => new Set(props.value.selected));
+
+  function toggleOpen(item) {
+    const id = item[actualItemProps.value.value];
+    const { opened: openedArray = [] } = props.value;
+    const newOpened = new Set(openedArray);
+    if (newOpened.has(id)) {
+      newOpened.delete(id);
+    } else {
+      newOpened.add(id);
+    }
+    emit("update:opened", [...newOpened]);
+  }
+
+  function getAllChildrenIds(item, ids = []) {
+    const children = item[actualItemProps.value.children];
+    if (children) {
+      for (const child of children) {
+        ids.push(child[actualItemProps.value.value]);
+        getAllChildrenIds(child, ids);
+      }
+    }
+    return ids;
+  }
+
+  function isSelected(item) {
+    const id = item[actualItemProps.value.value];
+    if (selectedSet.value.has(id)) {
+      return true;
+    }
+    if (actualSelection.value.strategy === "classic") {
+      const childrenIds = getAllChildrenIds(item);
+      return (
+        childrenIds.length > 0 && childrenIds.every((childId) => selectedSet.value.has(childId))
+      );
+    }
+    return false;
+  }
+
+  function getIndeterminate(item) {
+    if (actualSelection.value.strategy !== "classic") {
+      return false;
+    }
+    const childrenIds = getAllChildrenIds(item);
+    if (childrenIds.length === 0) {
+      return false;
+    }
+
+    const selectedChildren = childrenIds.filter((childId) => selectedSet.value.has(childId));
+    return selectedChildren.length > 0 && selectedChildren.length < childrenIds.length;
+  }
+
+  function toggleSelect(item) {
+    const id = item[actualItemProps.value.value];
+    const { selected: selectedArray = [] } = props.value;
+    const newSelected = new Set(selectedArray);
+    const isCurrentlySelected = newSelected.has(id) || isSelected(item);
+
+    if (actualSelection.value.strategy === "classic") {
+      const childrenIds = getAllChildrenIds(item);
+      if (isCurrentlySelected) {
+        newSelected.delete(id);
+        for (const childId of childrenIds) {
+          newSelected.delete(childId);
+        }
+      } else {
+        newSelected.add(id);
+        for (const childId of childrenIds) {
+          newSelected.add(childId);
+        }
+      }
+    } else if (isCurrentlySelected) {
+      newSelected.delete(id);
+    } else {
+      newSelected.add(id);
+    }
+    emit("update:selected", [...newSelected]);
+  }
+
+  function flattenTree(itemsList, depth = 0, result = []) {
+    const { search, customFilter } = props.value;
+    const lowerSearch = search ? search.toLowerCase() : "";
+
+    for (const item of itemsList) {
+      const id = item[actualItemProps.value.value];
+      const children = item[actualItemProps.value.children];
+      const hasChildren = children && children.length > 0;
+
+      const isOpen = openedSet.value.has(id);
+
+      if (lowerSearch) {
+        const matches = customFilter
+          ? customFilter(id, search, { raw: item })
+          : (item[actualItemProps.value.title] || "").toLowerCase().includes(lowerSearch) ||
+            String(id).toLowerCase().includes(lowerSearch);
+
+        if (!hasChildren && !matches) {
+          continue;
+        }
+
+        if (hasChildren) {
+          const subtree = [];
+          flattenTree(children, depth + 1, subtree);
+          if (subtree.length === 0 && !matches) {
+            continue;
+          }
+
+          result.push({
+            raw: item,
+            id,
+            depth,
+            isOpen: true,
+            isLeaf: false,
+          });
+          result.push(...subtree);
+          continue;
+        }
+      }
+
+      result.push({
+        raw: item,
+        id,
+        depth,
+        isOpen,
+        isLeaf: !hasChildren,
+      });
+
+      if (isOpen && hasChildren) {
+        flattenTree(children, depth + 1, result);
+      }
+    }
+    return result;
+  }
+
+  const displayItems = computed(() => flattenTree(props.value.items || []));
+
+  return {
+    actualItemProps,
+    actualSelection,
+    displayItems,
+    toggleOpen,
+    toggleSelect,
+    isSelected,
+    getIndeterminate,
+  };
+}

package/app/stores/data.js

@@ -63,12 +63,49 @@ export const useDataStore = defineStore("data", () => {
           id: meshComponent.geode_id,
           title: meshComponent.name,
           category: meshComponent.type,
-          viewer_id: meshComponent.viewer_id,
+          viewer_id: Number(meshComponent.viewer_id),
           is_active: meshComponent.is_active,
         })),
       }));
   }
 
+  async function getMeshComponentsByType(modelId, type) {
+    const components = await database.model_components
+      .where("[id+type]")
+      .equals([modelId, type])
+      .toArray();
+    return components.map((meshComponent) => ({
+      id: meshComponent.geode_id,
+      title: meshComponent.name,
+      category: meshComponent.type,
+      viewer_id: Number(meshComponent.viewer_id),
+      is_active: meshComponent.is_active,
+    }));
+  }
+
+  async function getAllMeshComponents(modelId) {
+    const items = await database.model_components.where("id").equals(modelId).toArray();
+    return items.map((meshComponent) => ({
+      id: meshComponent.geode_id,
+      title: meshComponent.name,
+      category: meshComponent.type,
+      viewer_id: Number(meshComponent.viewer_id),
+      is_active: meshComponent.is_active,
+    }));
+  }
+
+  async function fetchAllMeshComponents(modelId) {
+    const components = await getAllMeshComponents(modelId);
+    const byType = {};
+    for (const component of components) {
+      if (!byType[component.category]) {
+        byType[component.category] = [];
+      }
+      byType[component.category].push(component);
+    }
+    return byType;
+  }
+
   function refFormatedMeshComponents(modelId) {
     return useObservable(
       liveQuery(() => formatedMeshComponents(modelId)),
@@ -240,6 +277,8 @@ export const useDataStore = defineStore("data", () => {
     meshComponentType,
     formatedMeshComponents,
     refFormatedMeshComponents,
+    getMeshComponentsByType,
+    getAllMeshComponents,
     registerObject,
     deregisterObject,
     addItem,
@@ -259,5 +298,6 @@ export const useDataStore = defineStore("data", () => {
     exportStores,
     importStores,
     clear,
+    fetchAllMeshComponents,
   };
 });