@geode/opengeodeweb-front 10.34.0-rc.16 → 10.34.0-rc.18

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

@@ -31,6 +31,7 @@ interface LabeledItem {
   id: string;
   title?: string;
   is_active?: boolean;
+  category?: string;
   children?: unknown[];
 }
 
@@ -52,6 +53,9 @@ const tooltipTitle = computed<string>(() =>
 );
 
 const tooltipDisabled = computed<boolean>(() => {
+  if (actualItem.value.category !== undefined) {
+    return false;
+  }
   if (isLeaf !== undefined) {
     return !isLeaf;
   }

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import GlobalObjects from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjects.vue";
-import ModelCollections from "@ogw_front/components/Viewer/ObjectTree/Views/ModelCollections.vue";
-import ModelComponents from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponents.vue";
+import ModelTree from "@ogw_front/components/Viewer/ObjectTree/Views/ModelTree.vue";
 import ViewerObjectTreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
 import { geode_objects } from "@ogw_front/assets/geode_objects";
 import { useAdaptiveStyles } from "@ogw_front/composables/use_adaptive_styles";
@@ -35,10 +34,8 @@ const { adaptiveStyles: activityBarAdaptiveStyles } = useAdaptiveStyles(activity
 
 const maxWidth = computed<number>(() => containerWidth * MAX_PANEL_WIDTH_RATIO);
 
-const mainView = computed<TreeViewItem | undefined>(() =>
-  treeviewStore.opened_views.find((view) => view.id === "main"),
-);
-const additionalViews = computed<TreeViewItem[]>(() =>
+const mainView = computed(() => treeviewStore.opened_views.find((view) => view.id === "main"));
+const additionalViews = computed(() =>
   treeviewStore.opened_views.filter((view) => view.id !== "main"),
 );
 
@@ -284,11 +281,11 @@ function onVerticalResizeStart(event: MouseEvent, index: number): void {
               @dragstart="onDragStart(index + 1)"
               @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
             >
-              <component
-                :is="view.viewType === 'model_collections' ? ModelCollections : ModelComponents"
+              <ModelTree
                 data-testid="modelComponentsObjectTree"
                 :id="view.modelId || view.id"
                 :view-id="view.id"
+                :view-type="view.viewType"
                 @show-menu="emit('show-menu', $event)"
               />
             </ViewerObjectTreeBox>

package/app/components/Viewer/ObjectTree/Views/{ModelCollections.vue → ModelTree.vue}

@@ -8,14 +8,16 @@ import ObjectTreeItemLabel from "@ogw_front/components/Viewer/ObjectTree/Base/It
 import { useHoverhighlight } from "@ogw_front/composables/hover_highlight";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 import { useModelCollections } from "@ogw_front/composables/model_collections";
+import { useModelComponents } from "@ogw_front/composables/model_components";
 import { useTreeviewStore } from "@ogw_front/stores/treeview";
 
 interface Props {
   id: string;
   viewId?: string;
+  viewType?: string;
 }
 
-const { id, viewId = undefined } = defineProps<Props>();
+const { id, viewId = undefined, viewType = "model_components" } = defineProps<Props>();
 const actualViewId = viewId || id;
 
 interface CollectionTreeItem {
@@ -29,7 +31,6 @@ interface CollectionTreeItem {
 
 const { onHoverEnter, onHoverLeave } = useHoverhighlight();
 const hybridViewerStore = useHybridViewerStore();
-
 interface Emits {
   "show-menu": [
     payload: {
@@ -37,7 +38,8 @@ interface Emits {
       itemId: string;
       context_type: "model_component" | "model_component_type";
       modelId: string;
-      modelComponentType: string | undefined;
+      modelComponentType?: string;
+      targetComponentIds?: string[];
     },
   ];
 }
@@ -45,15 +47,24 @@ interface Emits {
 const emit = defineEmits<Emits>();
 
 const treeviewStore = useTreeviewStore();
+
+const isCollections = computed(() => viewType === "model_collections");
+
+const composable = isCollections.value ? useModelCollections(id) : useModelComponents(id);
 const {
   items: rawItems,
-  collectionsCache: componentsCache,
   localCategories,
   selection: visibleComponents,
   updateVisibility,
-} = useModelCollections(id);
+} = composable;
 
-const currentView = computed<TreeViewItem | undefined>(() =>
+const cache = computed(
+  () =>
+    ("componentsCache" in composable ? composable.componentsCache.value : undefined) ??
+    ("collectionsCache" in composable ? composable.collectionsCache.value : undefined),
+);
+
+const currentView = computed(() =>
   treeviewStore.opened_views.find((view) => view.id === actualViewId),
 );
 
@@ -78,14 +89,16 @@ function onUpdateSelection(newSelection: string[]): void {
   updateVisibility(finalSelection as string[]);
 }
 
-const visibleSelection = computed<string[]>(() => applySearchFilter(visibleComponents.value, []));
+const visibleSelection = computed<string[]>(
+  () => applySearchFilter(visibleComponents.value, []) as string[],
+);
 
 const itemsForTreeView = computed<CollectionTreeItem[]>(() => {
-  if (search.value && componentsCache.value) {
+  if (search.value && cache.value) {
     const query = search.value.toLowerCase();
     const result: CollectionTreeItem[] = [];
-    for (const type of Object.keys(componentsCache.value)) {
-      const matches = (componentsCache.value[type] ?? []).filter(
+    for (const type of Object.keys(cache.value)) {
+      const matches = (cache.value[type] ?? []).filter(
         (component: { title: string; id: string }) =>
           component.title.toLowerCase().includes(query) ||
           component.id.toLowerCase().includes(query),
@@ -108,7 +121,7 @@ const itemsForTreeView = computed<CollectionTreeItem[]>(() => {
       ...category,
       id: categoryId,
       children: sortAndFormatItems(
-        componentsCache.value?.[categoryId],
+        cache.value?.[categoryId],
         sortType.value,
       ) as unknown as CollectionTreeItem[],
     });
@@ -118,12 +131,16 @@ const itemsForTreeView = computed<CollectionTreeItem[]>(() => {
 
 function showContextMenu(event: unknown, item: CollectionTreeItem): void {
   const actualItem = item.raw || item;
+  const typeId = actualItem.category || actualItem.id;
+  const typeItem = itemsForTreeView.value.find((type) => type.id === typeId);
+  const targetComponentIds = typeItem?.children?.map((child) => child.id);
   emit("show-menu", {
     event,
     itemId: actualItem.category ? actualItem.id : id,
     context_type: actualItem.category ? "model_component" : "model_component_type",
     modelId: id,
     modelComponentType: actualItem.category ? undefined : actualItem.id,
+    targetComponentIds,
   });
 }
 
@@ -151,7 +168,6 @@ function handleHoverEnter({
   }
 
   const viewerIdsToHover = extractIds(actualItem);
-
   onHoverEnter(id, () => viewerIdsToHover, "model", immediate);
 }
 

package/package.json

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

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

@@ -1,277 +0,0 @@
-<script setup lang="ts">
-import { sortAndFormatItems, useTreeFilter } from "@ogw_front/composables/tree_filter";
-import CommonTreeView from "@ogw_front/components/Viewer/ObjectTree/Base/CommonTreeView.vue";
-import type { DisplayItem } from "@ogw_front/composables/virtual_tree";
-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 { useHoverhighlight } from "@ogw_front/composables/hover_highlight";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useModelComponents } from "@ogw_front/composables/model_components";
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
-
-interface Props {
-  id: string;
-  viewId?: string;
-}
-
-const { id, viewId = undefined } = defineProps<Props>();
-const actualViewId = viewId || id;
-
-interface TreeViewItem {
-  raw?: TreeViewItem;
-  id: string;
-  category?: string;
-  children?: TreeViewItem[];
-  viewer_id?: string;
-  title?: string;
-}
-
-const { onHoverEnter, onHoverLeave } = useHoverhighlight();
-const hybridViewerStore = useHybridViewerStore();
-
-interface Emits {
-  "show-menu": [
-    payload: {
-      event: unknown;
-      itemId: string;
-      context_type: "model_component" | "model_component_type";
-      modelId: string;
-      modelComponentType?: string;
-      targetComponentIds?: string[];
-    },
-  ];
-}
-
-const emit = defineEmits<Emits>();
-
-const treeviewStore = useTreeviewStore();
-const {
-  items: rawItems,
-  componentsCache,
-  localCategories,
-  selection: visibleComponents,
-  updateVisibility,
-} = useModelComponents(id);
-
-const currentView = computed<TreeViewItem | undefined>(() =>
-  treeviewStore.opened_views.find((view) => view.id === actualViewId),
-);
-
-const opened = computed<string[]>({
-  get: () => currentView.value?.opened || [],
-  set: (val) => treeviewStore.setOpened(actualViewId, val),
-});
-
-const {
-  search,
-  sortType,
-  filterOptions,
-  processedItems: filteredCategories,
-  availableFilterOptions,
-  toggleSort,
-  customFilter,
-  applySearchFilter,
-} = useTreeFilter(localCategories);
-
-function onUpdateSelection(newSelection: string[]): void {
-  const finalSelection = applySearchFilter(newSelection, visibleComponents.value);
-  updateVisibility(finalSelection as string[]);
-}
-
-const visibleSelection = computed<string[]>(() => applySearchFilter(visibleComponents.value, []));
-
-const itemsForTreeView = computed<TreeViewItem[]>(() => {
-  if (search.value && componentsCache.value) {
-    const query = search.value.toLowerCase();
-    const result: TreeViewItem[] = [];
-    for (const type of Object.keys(componentsCache.value)) {
-      const matches = (componentsCache.value[type] ?? []).filter(
-        (component: { title: string; id: string }) =>
-          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) as unknown as TreeViewItem[],
-        });
-      }
-    }
-    return result;
-  }
-
-  const result: TreeViewItem[] = [];
-  for (const category of filteredCategories.value) {
-    const categoryId = category.id as string;
-    result.push({
-      ...category,
-      id: categoryId,
-      children: sortAndFormatItems(
-        componentsCache.value?.[categoryId],
-        sortType.value,
-      ) as unknown as TreeViewItem[],
-    });
-  }
-  return result;
-});
-
-function showContextMenu(event: unknown, item: TreeViewItem): void {
-  const actualItem = item.raw || item;
-  const typeId = actualItem.category || actualItem.id;
-  const typeItem = itemsForTreeView.value.find((type) => type.id === typeId);
-  const targetComponentIds = typeItem
-    ? (typeItem.children ?? []).map((child) => child.id)
-    : undefined;
-  emit("show-menu", {
-    event,
-    itemId: actualItem.category ? actualItem.id : id,
-    context_type: actualItem.category ? "model_component" : "model_component_type",
-    modelId: id,
-    modelComponentType: actualItem.category ? undefined : actualItem.id,
-    targetComponentIds,
-  });
-}
-
-function handleHoverEnter({
-  item,
-  immediate = false,
-}: {
-  item: TreeViewItem;
-  immediate?: boolean;
-}): void {
-  const actualItem = item.raw || item;
-
-  if (!actualItem.category && (!actualItem.children || actualItem.children.length === 0)) {
-    return;
-  }
-
-  onHoverEnter(
-    id,
-    () =>
-      actualItem.category
-        ? [Number(actualItem.viewer_id)]
-        : (actualItem.children ?? []).map((child) => Number(child.viewer_id)),
-    "model",
-    immediate,
-  );
-}
-
-function handleHoverLeave(): void {
-  onHoverLeave(id);
-}
-
-// CommonTreeView's #title/#append slots hand back the generic tree item it renders internally (a TreeItem); this view's tree is always built from TreeViewItem nodes (see itemsForTreeView above), so it's safe to view the slot item through that lens here.
-function asTreeViewItem(item: unknown): TreeViewItem {
-  return item as unknown as TreeViewItem;
-}
-
-// The focusCameraOnObject composable's block_ids parameter is declared as string[], but this view (like the sibling ModelCollections view) has always focused the camera using the raw viewer_id values collected here; that pre-dates this typing pass, so the ids are passed through as-is rather than changed here.
-function getFocusBlockIds(item: TreeViewItem): string[] {
-  const ids = item.category
-    ? [item.viewer_id]
-    : (item.children ?? []).map((child) => child.viewer_id);
-  return ids as unknown as string[];
-}
-
-function expandAll(): void {
-  const allIds: string[] = [];
-  function traverse(itemsList: TreeViewItem[]): void {
-    for (const item of itemsList) {
-      if (item.children && item.children.length > 0) {
-        allIds.push(item.id);
-        traverse(item.children);
-      }
-    }
-  }
-  traverse(itemsForTreeView.value);
-  opened.value = allIds;
-}
-</script>
-
-<template>
-  <div class="tree-view-container">
-    <ObjectTreeControls
-      v-model:search="search"
-      :sort-type="sortType"
-      :filter-options="filterOptions"
-      :available-filter-options="availableFilterOptions"
-      :is-collapsed="opened.length === 0"
-      @toggle-sort="toggleSort"
-      @collapse-all="opened = []"
-      @expand-all="expandAll"
-    />
-
-    <FetchingData v-if="rawItems === undefined" :size="48" :width="4" text="" />
-
-    <CommonTreeView
-      :selected="visibleSelection"
-      v-model:opened="opened"
-      v-model:active="treeviewStore.activeItems"
-      :items="itemsForTreeView"
-      :options="{
-        selection: { selectable: true, strategy: 'classic' },
-        search,
-        customFilter,
-      }"
-      :scroll-top="currentView?.scrollTop || 0"
-      class="transparent-treeview virtual-tree-height"
-      @update:selected="(val) => onUpdateSelection(val as string[])"
-      @click:item="onUpdateSelection([$event.id as string, ...visibleComponents])"
-      @update:scroll-top="treeviewStore.setScrollTop(actualViewId, $event)"
-      @hover:enter="({ item }) => handleHoverEnter({ item: item as unknown as TreeViewItem })"
-      @hover:leave="handleHoverLeave"
-      @contextmenu="showContextMenu($event.event, $event.item as unknown as TreeViewItem)"
-    >
-      <template #title="{ item, isLeaf }">
-        <ObjectTreeItemLabel
-          :item="item as unknown as DisplayItem"
-          :is-leaf="isLeaf"
-          show-tooltip
-          class="text-body-1"
-          @contextmenu="showContextMenu($event, item as unknown as TreeViewItem)"
-        />
-      </template>
-
-      <template #append="{ item: rawItem }">
-        <v-btn
-          v-if="
-            asTreeViewItem(rawItem).category ||
-            (asTreeViewItem(rawItem).children && asTreeViewItem(rawItem).children!.length > 0)
-          "
-          icon="mdi-target"
-          size="medium"
-          variant="text"
-          v-tooltip="'Focus camera on object'"
-          @click.stop="
-            hybridViewerStore.focusCameraOnObject(id, getFocusBlockIds(asTreeViewItem(rawItem)))
-          "
-        />
-      </template>
-    </CommonTreeView>
-  </div>
-</template>
-
-<style scoped>
-.tree-view-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  min-height: 0;
-}
-
-.virtual-tree-height {
-  flex-grow: 1;
-  min-height: 0;
-}
-
-.transparent-treeview {
-  background-color: transparent;
-}
-
-:deep(.v-list-item__overlay) {
-  display: none !important;
-}
-</style>