@geode/opengeodeweb-front 10.34.0-rc.2 → 10.34.0-rc.21

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

@@ -1,7 +1,6 @@
-<script setup>
+<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";
@@ -16,24 +15,31 @@ const TOTAL_PERCENT = 100;
 const MAX_PANEL_WIDTH_RATIO = 0.8;
 const AUTO_CLOSE_THRESHOLD = 80;
 
-const { containerWidth } = defineProps({
-  containerWidth: { type: Number, required: true },
-});
+interface Props {
+  containerWidth: number;
+}
+
+const { containerWidth } = defineProps<Props>();
 
 const treeviewStore = useTreeviewStore();
-const emit = defineEmits(["show-menu"]);
+
+interface Emits {
+  "show-menu": [payload: Record<string, unknown>];
+}
+
+const emit = defineEmits<Emits>();
 
 const activityBar = useTemplateRef("activity-bar");
 const { adaptiveStyles: activityBarAdaptiveStyles } = useAdaptiveStyles(activityBar);
 
-const maxWidth = computed(() => containerWidth * MAX_PANEL_WIDTH_RATIO);
+const maxWidth = computed<number>(() => containerWidth * MAX_PANEL_WIDTH_RATIO);
 
 const mainView = computed(() => treeviewStore.opened_views.find((view) => view.id === "main"));
 const additionalViews = computed(() =>
   treeviewStore.opened_views.filter((view) => view.id !== "main"),
 );
 
-const totalWidth = computed(() => {
+const totalWidth = computed<string>(() => {
   const hasAdditional = additionalViews.value.length > 0;
   const hasMain = Boolean(mainView.value);
   const gap = hasAdditional && hasMain ? GAP_WIDTH : 0;
@@ -42,23 +48,23 @@ const totalWidth = computed(() => {
   return `${firstColWidth + secondColWidth + gap}px`;
 });
 
-const rowHeights = computed({
+const rowHeights = computed<number[]>({
   get: () => treeviewStore.rowHeights,
   set: (val) => treeviewStore.setRowHeights(val),
 });
-const draggedIndex = ref(undefined);
+const draggedIndex = ref<number | undefined>(undefined);
 
 watch(
   () => additionalViews.value.length,
   (newLength) => {
     if (newLength > 0 && rowHeights.value.length !== newLength) {
-      treeviewStore.setRowHeights(Array.from({ length: newLength }).fill(PERCENT_100 / newLength));
+      treeviewStore.setRowHeights(Array.from({ length: newLength }, () => PERCENT_100 / newLength));
     }
   },
   { immediate: true },
 );
 
-watch([maxWidth, () => additionalViews.value.length], ([newMax]) => {
+watch([maxWidth, (): number => additionalViews.value.length], ([newMax]): void => {
   const hasAdditional = additionalViews.value.length > 0;
   const gap = hasAdditional ? GAP_WIDTH : 0;
   const total =
@@ -80,25 +86,25 @@ watch([maxWidth, () => additionalViews.value.length], ([newMax]) => {
   }
 });
 
-function onDragStart(index) {
+function onDragStart(index: number): void {
   draggedIndex.value = index;
 }
 
-function onDragOver(event) {
+function onDragOver(event: DragEvent): void {
   event.preventDefault();
 }
 
-function onDrop(targetIndex) {
+function onDrop(targetIndex: number): void {
   if (draggedIndex.value !== undefined && draggedIndex.value !== targetIndex) {
     treeviewStore.moveView(draggedIndex.value, targetIndex);
   }
   draggedIndex.value = undefined;
 }
 
-function onResizeStart(event) {
+function onResizeStart(event: MouseEvent): void {
   const startWidth = treeviewStore.panelWidth;
   const startX = event.clientX;
-  function resize(move_event) {
+  function resize(move_event: MouseEvent): void {
     const deltaX = move_event.clientX - startX;
     let newWidth = startWidth + deltaX;
     const hasAdditional = additionalViews.value.length > 0;
@@ -117,7 +123,7 @@ function onResizeStart(event) {
     treeviewStore.setPanelWidth(Math.max(WIDTH_MIN, newWidth));
     document.body.style.userSelect = "none";
   }
-  function stopResize() {
+  function stopResize(): void {
     document.removeEventListener("mousemove", resize);
     document.removeEventListener("mouseup", stopResize);
     document.body.style.userSelect = "";
@@ -126,22 +132,25 @@ function onResizeStart(event) {
   document.addEventListener("mouseup", stopResize);
 }
 
-function onAdditionalResizeStart(event) {
+function onAdditionalResizeStart(event: MouseEvent): void {
   const startWidth = treeviewStore.additionalPanelWidth;
   const startX = event.clientX;
-  function resize(move_event) {
+  function resize(move_event: MouseEvent): void {
     const deltaX = move_event.clientX - startX;
     const newWidth = startWidth + deltaX;
     const currentTotalWidth = treeviewStore.panelWidth + newWidth + GAP_WIDTH;
     if (newWidth < AUTO_CLOSE_THRESHOLD) {
-      treeviewStore.closeView(additionalViews.value.at(-1).id);
+      const lastAdditionalView = additionalViews.value.at(-1);
+      if (lastAdditionalView) {
+        treeviewStore.closeView(lastAdditionalView.id);
+      }
       return;
     }
 
     treeviewStore.setAdditionalPanelWidth(Math.max(WIDTH_MIN, newWidth));
     document.body.style.userSelect = "none";
   }
-  function stopResize() {
+  function stopResize(): void {
     document.removeEventListener("mousemove", resize);
     document.removeEventListener("mouseup", stopResize);
     document.body.style.userSelect = "";
@@ -150,13 +159,13 @@ function onAdditionalResizeStart(event) {
   document.addEventListener("mouseup", stopResize);
 }
 
-function onVerticalResizeStart(event, index) {
+function onVerticalResizeStart(event: MouseEvent, index: number): void {
   const startY = event.clientY;
-  const startHeight1 = rowHeights.value[index];
-  const startHeight2 = rowHeights.value[index + 1];
-  const containerHeight = event.currentTarget.parentElement.offsetHeight;
+  const startHeight1 = rowHeights.value[index] ?? 0;
+  const startHeight2 = rowHeights.value[index + 1] ?? 0;
+  const containerHeight = (event.currentTarget as HTMLElement).parentElement?.offsetHeight ?? 0;
 
-  function resize(move_event) {
+  function resize(move_event: MouseEvent): void {
     const deltaY = move_event.clientY - startY;
     const deltaPercent = (deltaY / containerHeight) * PERCENT_100;
     const minHeightPercent = (HEIGHT_MIN / containerHeight) * PERCENT_100;
@@ -181,7 +190,7 @@ function onVerticalResizeStart(event, index) {
     document.body.style.cursor = "ns-resize";
   }
 
-  function stopResize() {
+  function stopResize(): void {
     document.removeEventListener("mousemove", resize);
     document.removeEventListener("mouseup", stopResize);
     document.body.style.userSelect = "";
@@ -202,6 +211,7 @@ function onVerticalResizeStart(event, index) {
     <div
       ref="activity-bar"
       class="activity-bar d-flex flex-column align-center py-2"
+      :class="{ 'is-closed': treeviewStore.opened_views.length === 0 }"
       :style="activityBarAdaptiveStyles"
     >
       <v-btn
@@ -262,7 +272,7 @@ function onVerticalResizeStart(event, index) {
           >
             <ViewerObjectTreeBox
               :title="view.title"
-              :icon="geode_objects[view.geode_object_type]?.image"
+              :icon="geode_objects[view.geode_object_type ?? '']?.image"
               :scroll-top="view.scrollTop"
               closable
               :border-radius="`0 ${index === 0 ? '16px' : '0'} ${index === additionalViews.length - 1 ? '16px' : '0'} 0`"
@@ -271,11 +281,11 @@ function onVerticalResizeStart(event, index) {
               @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>
@@ -307,9 +317,8 @@ function onVerticalResizeStart(event, index) {
   position: absolute;
   z-index: 1;
   left: 0;
-  top: 0;
-  height: calc(100vh - 100px);
-  margin-top: 8px;
+  top: 8px;
+  height: calc(100% - 16px);
   pointer-events: auto;
 }
 
@@ -318,9 +327,20 @@ function onVerticalResizeStart(event, index) {
   height: 100%;
   border-radius: 16px 0 0 16px;
   margin-left: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-right: none;
   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,
+    border-radius 0.2s ease;
+}
+
+.activity-bar.is-closed {
+  border-radius: 16px;
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .activity-bar::before {

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

@@ -1,5 +1,6 @@
-<script setup>
+<script setup lang="ts">
 import CommonTreeView from "@ogw_front/components/Viewer/ObjectTree/Base/CommonTreeView.vue";
+import type { DisplayItem } from "@ogw_front/composables/virtual_tree";
 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";
@@ -16,12 +17,25 @@ const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 const { onHoverEnter, onHoverLeave } = useHoverhighlight();
 
-const emit = defineEmits(["show-menu"]);
+interface Emits {
+  "show-menu": [payload: { event: MouseEvent; itemId: string }];
+}
+
+const emit = defineEmits<Emits>();
 
-const mainView = computed(() => treeviewStore.opened_views[0]);
-const opened = computed({
+interface TreeGroupItem {
+  raw?: TreeGroupItem;
+  id: string;
+  title?: string;
+  viewer_type?: string;
+  geode_object_type?: string;
+  children?: TreeGroupItem[];
+}
+
+const mainView = computed<TreeGroupItem>(() => treeviewStore.opened_views[0]);
+const opened = computed<string[]>({
   get: () => mainView.value?.opened || [],
-  set: (val) => treeviewStore.setOpened(mainView.value.id, val),
+  set: (val) => treeviewStore.setOpened(mainView.value?.id ?? "", val),
 });
 
 const {
@@ -35,11 +49,11 @@ const {
   applySearchFilter,
 } = useTreeFilter(() => treeviewStore.items, { recursiveSort: true });
 
-function onUpdateSelection(val) {
-  treeviewStore.selection = applySearchFilter(val, treeviewStore.selection);
+function onUpdateSelection(val: string[]): void {
+  treeviewStore.selection = applySearchFilter(val, treeviewStore.selection) as string[];
 }
 
-const visibleSelection = computed(() => applySearchFilter(treeviewStore.selection, []));
+const visibleSelection = computed<string[]>(() => applySearchFilter(treeviewStore.selection, []));
 
 watch(
   () => treeviewStore.selection,
@@ -68,14 +82,15 @@ watch(
   },
 );
 
-function isModel(item) {
+function isModel(item: TreeGroupItem): boolean {
   const actualItem = item.raw || item;
   return (
-    actualItem.viewer_type === "model" || ["BRep", "Section"].includes(actualItem.geode_object_type)
+    actualItem.viewer_type === "model" ||
+    ["BRep", "Section"].includes(actualItem.geode_object_type ?? "")
   );
 }
 
-const hasCollectionsMap = reactive({});
+const hasCollectionsMap = reactive<Record<string, boolean>>({});
 
 watch(
   () => treeviewStore.items,
@@ -100,7 +115,13 @@ watch(
   { immediate: true, deep: true },
 );
 
-function handleHoverEnter({ item, immediate = false }) {
+function handleHoverEnter({
+  item,
+  immediate = false,
+}: {
+  item: TreeGroupItem;
+  immediate?: boolean;
+}): void {
   const actualItem = item.raw || item;
 
   if (!actualItem.viewer_type) {
@@ -117,7 +138,7 @@ function handleHoverEnter({ item, immediate = false }) {
   );
 }
 
-function handleHoverLeave({ item }) {
+function handleHoverLeave({ item }: { item: TreeGroupItem }): void {
   const actualItem = item.raw || item;
   if (!actualItem.viewer_type) {
     return;
@@ -125,9 +146,9 @@ function handleHoverLeave({ item }) {
   onHoverLeave(actualItem.id);
 }
 
-function expandAll() {
-  const allIds = [];
-  function traverse(itemsList) {
+function expandAll(): void {
+  const allIds: string[] = [];
+  function traverse(itemsList: TreeGroupItem[]): void {
     for (const item of itemsList) {
       if (item.children && item.children.length > 0) {
         allIds.push(item.id);
@@ -165,17 +186,22 @@ function expandAll() {
       }"
       :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"
-      @contextmenu="emit('show-menu', { event: $event.event, itemId: $event.item.id })"
+      @update:selected="(val) => onUpdateSelection(val as string[])"
+      @update:scroll-top="treeviewStore.setScrollTop(mainView?.id ?? '', $event)"
+      @hover:enter="({ item }) => handleHoverEnter({ item: item as unknown as TreeGroupItem })"
+      @hover:leave="({ item }) => handleHoverLeave({ item: item as unknown as TreeGroupItem })"
+      @contextmenu="
+        emit('show-menu', {
+          event: $event.event,
+          itemId: $event.item.id as string,
+        })
+      "
     >
       <template #title="{ item, isLeaf }">
         <ObjectTreeItemLabel
-          :item="item"
+          :item="item as unknown as DisplayItem"
           :is-leaf="isLeaf"
-          @contextmenu="emit('show-menu', { event: $event, itemId: item.id })"
+          @contextmenu="emit('show-menu', { event: $event, itemId: item.id as string })"
         />
       </template>
 
@@ -188,27 +214,30 @@ function expandAll() {
             size="medium"
             variant="text"
             v-tooltip="'Focus camera on object'"
-            @click.stop="hybridViewerStore.focusCameraOnObject(item.id)"
+            @click.stop="hybridViewerStore.focusCameraOnObject(item.id as string)"
           />
           <v-btn
-            v-if="isModel(item)"
+            v-if="isModel(item as unknown as TreeGroupItem)"
             data-testid="expandModelComponentsButton"
-            icon="mdi-magnify-expand"
+            icon
             size="medium"
+            style="height: 23px; width: 23px"
             class="ml-2"
             variant="text"
             v-tooltip="'Model\'s mesh components'"
             @click.stop="
               treeviewStore.displayAdditionalTree(
-                item.id,
-                item.title,
-                item.geode_object_type,
+                item.id as string,
+                item.title as string | undefined,
+                item.geode_object_type as string,
                 'model_components',
               )
             "
-          />
+          >
+            <v-icon size="18">mdi-magnify-expand</v-icon>
+          </v-btn>
           <v-btn
-            v-if="isModel(item) && hasCollectionsMap[item.id]"
+            v-if="isModel(item as unknown as TreeGroupItem) && hasCollectionsMap[item.id as string]"
             data-testid="expandModelCollectionsButton"
             icon="mdi-format-list-group"
             size="medium"
@@ -217,9 +246,9 @@ function expandAll() {
             v-tooltip="'Model\'s collections'"
             @click.stop="
               treeviewStore.displayAdditionalTree(
-                item.id,
-                item.title,
-                item.geode_object_type,
+                item.id as string,
+                item.title as string | undefined,
+                item.geode_object_type as string,
                 'model_collections',
               )
             "