@geode/opengeodeweb-front 10.12.0 → 10.13.0-rc.1

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

@@ -0,0 +1,58 @@
+<script setup>
+import ActionButton from "@ogw_front/components/ActionButton.vue";
+import SearchBar from "@ogw_front/components/SearchBar.vue";
+
+const { search, sortType, filterOptions, availableFilterOptions } = defineProps({
+  search: { type: String, required: true },
+  sortType: { type: String, required: true },
+  filterOptions: { type: Object, required: true },
+  availableFilterOptions: { type: Array, required: true },
+});
+
+const emit = defineEmits(["update:search", "toggle-sort"]);
+</script>
+
+<template>
+  <v-row dense align="center" class="pa-2">
+    <v-col>
+      <SearchBar
+        :model-value="search"
+        label="Search"
+        color="black"
+        base-color="black"
+        @update:model-value="emit('update:search', $event)"
+      />
+    </v-col>
+    <v-col cols="auto" class="d-flex align-center">
+      <ActionButton
+        :tooltip="'Sort by ' + (sortType === 'name' ? 'ID' : 'Name')"
+        :icon="
+          sortType === 'name' ? 'mdi-sort-alphabetical-ascending' : 'mdi-sort-numeric-ascending'
+        "
+        tooltipLocation="bottom"
+        @click="emit('toggle-sort')"
+      />
+      <v-menu :close-on-content-click="false">
+        <template #activator="{ props: menuProps }">
+          <ActionButton
+            tooltip="Filter options"
+            icon="mdi-filter-variant"
+            tooltipLocation="bottom"
+            class="ml-1"
+            v-bind="menuProps"
+          />
+        </template>
+        <v-list class="mt-1">
+          <v-list-item v-for="category_id in availableFilterOptions" :key="category_id">
+            <v-checkbox
+              v-model="filterOptions[category_id]"
+              :label="category_id"
+              hide-details
+              density="compact"
+            />
+          </v-list-item>
+        </v-list>
+      </v-menu>
+    </v-col>
+  </v-row>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup>
+const { item, showTooltip } = defineProps({
+  item: { type: Object, required: true },
+  showTooltip: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["contextmenu"]);
+
+const actualItem = computed(() => item.raw || item);
+</script>
+
+<template>
+  <span
+    class="tree-item-label"
+    :class="{ 'inactive-item': actualItem.is_active === false }"
+    @contextmenu.prevent.stop="emit('contextmenu', $event)"
+  >
+    {{ actualItem.title }}
+    <v-tooltip v-if="showTooltip && actualItem.category" activator="parent" location="right">
+      <div class="d-flex flex-column pa-1">
+        <span class="text-caption"><strong>ID:</strong> {{ actualItem.id }}</span>
+        <span v-if="actualItem.title" class="text-caption"
+          ><strong>Name:</strong> {{ actualItem.title }}</span
+        >
+        <span class="text-caption font-italic border-t-sm d-flex align-center">
+          <strong class="mr-1">Status:</strong>
+          {{ actualItem.is_active ? "Active" : "Inactive" }}
+        </span>
+      </div>
+    </v-tooltip>
+  </span>
+</template>
+
+<style scoped>
+.tree-item-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.inactive-item {
+  opacity: 0.4;
+  font-style: italic;
+}
+</style>

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

@@ -0,0 +1,132 @@
+<script setup>
+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 },
+});
+
+const emit = defineEmits(["close", "dragstart", "update:scrollTop"]);
+
+const scrollContainer = ref(undefined);
+let isApplyingScroll = false;
+let resizeObserver = undefined;
+
+function handleScroll(event) {
+  if (isApplyingScroll) {
+    return;
+  }
+  emit("update:scrollTop", event.target.scrollTop);
+}
+
+function applyScrollTop(val) {
+  if (scrollContainer.value) {
+    isApplyingScroll = true;
+    scrollContainer.value.scrollTop = val;
+    setTimeout(() => {
+      isApplyingScroll = false;
+    }, SCROLL_SYNC_DELAY);
+  }
+}
+
+onMounted(() => {
+  if (scrollContainer.value) {
+    applyScrollTop(scrollTop);
+
+    resizeObserver = new ResizeObserver(() => {
+      if (
+        scrollContainer.value &&
+        Math.abs(scrollContainer.value.scrollTop - scrollTop) > SCROLL_THRESHOLD
+      ) {
+        applyScrollTop(scrollTop);
+      }
+    });
+
+    resizeObserver.observe(scrollContainer.value);
+  }
+});
+
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+  }
+});
+
+watch(
+  () => scrollTop,
+  (newVal) => {
+    if (
+      scrollContainer.value &&
+      Math.abs(scrollContainer.value.scrollTop - newVal) > SCROLL_THRESHOLD
+    ) {
+      applyScrollTop(newVal);
+    }
+  },
+);
+</script>
+
+<template>
+  <v-card variant="outlined" class="tree-box d-flex flex-column">
+    <v-card-title
+      class="tree-box-header d-flex align-center"
+      :class="{ 'cursor-grab': closable }"
+      :draggable="closable"
+      @dragstart="emit('dragstart', $event)"
+    >
+      <v-img
+        v-if="icon"
+        :src="icon"
+        width="24"
+        height="24"
+        max-width="24"
+        class="mr-2"
+        style="filter: brightness(0); display: flex; align-items: center"
+      />
+      <v-icon v-else-if="mdiIcon" size="24" class="mr-2">{{ mdiIcon }}</v-icon>
+      <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"
+      >
+        {{ title }}
+      </span>
+      <v-spacer />
+      <v-btn
+        v-if="closable"
+        icon="mdi-close"
+        variant="text"
+        size="x-small"
+        @click="emit('close')"
+      />
+    </v-card-title>
+    <v-divider />
+    <v-card-text class="pa-0 flex-grow-1 overflow-hidden d-flex flex-column">
+      <div
+        ref="scrollContainer"
+        class="flex-grow-1 overflow-y-auto overflow-x-hidden"
+        @scroll="handleScroll"
+      >
+        <slot />
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.tree-box {
+  height: 100%;
+  border-radius: 16px;
+  background-color: transparent !important;
+  backdrop-filter: blur(2px);
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+
+.tree-box-header {
+  height: 40px !important;
+  padding: 0 8px !important;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+</style>

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

@@ -0,0 +1,320 @@
+<script setup>
+import GlobalObjects from "@ogw_front/components/Viewer/ObjectTree/Views/GlobalObjects.vue";
+import ModelComponents from "@ogw_front/components/Viewer/ObjectTree/Views/ModelComponents.vue";
+import ViewerObjectTreeBox from "@ogw_front/components/Viewer/ObjectTree/Box.vue";
+import { geode_objects } from "@ogw_front/assets/geode_objects";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
+const WIDTH_MIN = 200;
+const HEIGHT_MIN = 150;
+const GAP_WIDTH = 10;
+const PERCENT_100 = 100;
+
+const TOTAL_PERCENT = 100;
+
+const treeviewStore = useTreeviewStore();
+const emit = defineEmits(["show-menu"]);
+
+const mainView = computed(() => treeviewStore.opened_views[0]);
+const additionalViews = computed(() => treeviewStore.opened_views.slice(1));
+
+const totalWidth = computed(() => {
+  const hasAdditional = additionalViews.value.length > 0;
+  const gap = hasAdditional ? GAP_WIDTH : 0;
+  const secondColWidth = hasAdditional ? treeviewStore.additionalPanelWidth : 0;
+  return `${treeviewStore.panelWidth + secondColWidth + gap}px`;
+});
+
+const rowHeights = computed({
+  get: () => treeviewStore.rowHeights,
+  set: (val) => treeviewStore.setRowHeights(val),
+});
+const draggedIndex = ref(undefined);
+
+watch(
+  () => additionalViews.value.length,
+  (newLength) => {
+    if (newLength > 0 && rowHeights.value.length !== newLength) {
+      treeviewStore.setRowHeights(Array.from({ length: newLength }).fill(PERCENT_100 / newLength));
+    }
+  },
+  { immediate: true },
+);
+
+function onDragStart(index) {
+  draggedIndex.value = index;
+}
+
+function onDragOver(event) {
+  event.preventDefault();
+}
+
+function onDrop(targetIndex) {
+  if (draggedIndex.value !== undefined && draggedIndex.value !== targetIndex) {
+    treeviewStore.moveView(draggedIndex.value, targetIndex);
+  }
+  draggedIndex.value = undefined;
+}
+
+function onResizeStart(event) {
+  const startWidth = treeviewStore.panelWidth;
+  const startX = event.clientX;
+  function resize(move_event) {
+    const deltaX = move_event.clientX - startX;
+    const newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
+    treeviewStore.setPanelWidth(newWidth);
+    document.body.style.userSelect = "none";
+  }
+  function stopResize() {
+    document.removeEventListener("mousemove", resize);
+    document.removeEventListener("mouseup", stopResize);
+    document.body.style.userSelect = "";
+  }
+  document.addEventListener("mousemove", resize);
+  document.addEventListener("mouseup", stopResize);
+}
+
+function onAdditionalResizeStart(event) {
+  const startWidth = treeviewStore.additionalPanelWidth;
+  const startX = event.clientX;
+  function resize(move_event) {
+    const deltaX = move_event.clientX - startX;
+    const newWidth = Math.max(WIDTH_MIN, startWidth + deltaX);
+    treeviewStore.setAdditionalPanelWidth(newWidth);
+    document.body.style.userSelect = "none";
+  }
+  function stopResize() {
+    document.removeEventListener("mousemove", resize);
+    document.removeEventListener("mouseup", stopResize);
+    document.body.style.userSelect = "";
+  }
+  document.addEventListener("mousemove", resize);
+  document.addEventListener("mouseup", stopResize);
+}
+
+function onVerticalResizeStart(event, index) {
+  const startY = event.clientY;
+  const startHeight1 = rowHeights.value[index];
+  const startHeight2 = rowHeights.value[index + 1];
+  const containerHeight = event.currentTarget.parentElement.offsetHeight;
+
+  function resize(move_event) {
+    const deltaY = move_event.clientY - startY;
+    const deltaPercent = (deltaY / containerHeight) * PERCENT_100;
+    const minHeightPercent = (HEIGHT_MIN / containerHeight) * PERCENT_100;
+
+    let newH1 = startHeight1 + deltaPercent;
+    let newH2 = startHeight2 - deltaPercent;
+
+    if (newH1 < minHeightPercent) {
+      newH1 = minHeightPercent;
+      newH2 = startHeight1 + startHeight2 - minHeightPercent;
+    } else if (newH2 < minHeightPercent) {
+      newH2 = minHeightPercent;
+      newH1 = startHeight1 + startHeight2 - minHeightPercent;
+    }
+
+    const newHeights = [...rowHeights.value];
+    newHeights[index] = newH1;
+    newHeights[index + 1] = newH2;
+    treeviewStore.setRowHeights(newHeights);
+
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "ns-resize";
+  }
+
+  function stopResize() {
+    document.removeEventListener("mousemove", resize);
+    document.removeEventListener("mouseup", stopResize);
+    document.body.style.userSelect = "";
+    document.body.style.cursor = "";
+  }
+  document.addEventListener("mousemove", resize);
+  document.addEventListener("mouseup", stopResize);
+}
+</script>
+
+<template>
+  <div
+    v-if="treeviewStore.items.length > 0"
+    class="treeview-container d-flex"
+    :style="{ width: totalWidth }"
+    @contextmenu.prevent
+    @mousedown.stop
+  >
+    <div
+      class="column main-column"
+      :style="{
+        width: `${treeviewStore.panelWidth}px`,
+      }"
+    >
+      <ViewerObjectTreeBox
+        :title="mainView.title"
+        mdi-icon="mdi-file-tree-outline"
+        :scroll-top="mainView.scrollTop"
+        @update:scroll-top="treeviewStore.setScrollTop(mainView.id, $event)"
+      >
+        <GlobalObjects @show-menu="emit('show-menu', $event)" />
+      </ViewerObjectTreeBox>
+    </div>
+
+    <div v-if="additionalViews.length > 0" class="column-separator" @mousedown="onResizeStart" />
+
+    <div
+      v-if="additionalViews.length > 0"
+      class="column additional-column"
+      :style="{
+        width: `${treeviewStore.additionalPanelWidth}px`,
+      }"
+    >
+      <template v-for="(view, index) in additionalViews" :key="view.id">
+        <div
+          class="view-wrapper"
+          :class="{
+            'drag-over': draggedIndex !== undefined && draggedIndex !== index + 1,
+          }"
+          :style="{ flex: `0 0 ${rowHeights[index]}%` }"
+          @dragover="onDragOver"
+          @drop="onDrop(index + 1)"
+        >
+          <ViewerObjectTreeBox
+            :title="view.title"
+            :icon="geode_objects[view.geode_object_type]?.image"
+            :scroll-top="view.scrollTop"
+            closable
+            @close="treeviewStore.closeView(index + 1)"
+            @dragstart="onDragStart(index + 1)"
+            @update:scroll-top="treeviewStore.setScrollTop(view.id, $event)"
+          >
+            <ModelComponents :id="view.id" @show-menu="emit('show-menu', $event)" />
+          </ViewerObjectTreeBox>
+        </div>
+        <div
+          v-if="index < additionalViews.length - 1"
+          class="v-split-resizer"
+          @mousedown="onVerticalResizeStart($event, index)"
+        />
+      </template>
+    </div>
+    <div
+      class="total-resizer"
+      @mousedown="
+        additionalViews.length > 0 ? onAdditionalResizeStart($event) : onResizeStart($event)
+      "
+    />
+  </div>
+</template>
+
+<style scoped>
+.treeview-container {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  top: 0;
+  height: calc(100vh - 100px);
+  margin-top: 10px;
+  margin-left: 10px;
+  pointer-events: auto;
+  width: max-content;
+  min-width: min-content;
+}
+
+.layout-root {
+  display: flex;
+  height: 100%;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-shrink: 0;
+}
+
+.main-column {
+  flex-shrink: 0;
+}
+
+.additional-column {
+  flex-shrink: 0;
+}
+
+.view-wrapper {
+  overflow: hidden;
+  padding: 2px;
+  transition: transform 0.2s;
+  min-height: 150px;
+}
+
+.view-wrapper.drag-over {
+  border: 2px dashed rgba(0, 0, 0, 0.2);
+  border-radius: 16px;
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.column-separator {
+  width: 6px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+  margin: 0 2px;
+  cursor: ew-resize;
+  position: relative;
+}
+
+.column-separator:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.column-separator::after {
+  content: "";
+  position: absolute;
+  top: 10%;
+  bottom: 10%;
+  left: 2px;
+  width: 2px;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 1px;
+}
+
+.v-split-resizer {
+  height: 6px;
+  position: relative;
+  cursor: ns-resize;
+  background-color: transparent;
+  z-index: 5;
+}
+
+.v-split-resizer::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 10%;
+  right: 10%;
+  height: 2px;
+  background-color: rgba(0, 0, 0, 0.1);
+  border-radius: 1px;
+  transition: background-color 0.2s;
+}
+
+.v-split-resizer:hover::after {
+  background-color: rgba(0, 0, 0, 0.4);
+  height: 3px;
+  top: 1.5px;
+}
+
+.total-resizer {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 8px;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 10;
+}
+
+.total-resizer:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+</style>

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

@@ -0,0 +1,129 @@
+<script setup>
+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 { useDataStyleStore } from "@ogw_front/stores/data_style";
+import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
+import { useTreeFilter } from "@ogw_front/composables/use_tree_filter";
+import { useTreeviewStore } from "@ogw_front/stores/treeview";
+
+const treeviewStore = useTreeviewStore();
+const dataStyleStore = useDataStyleStore();
+const hybridViewerStore = useHybridViewerStore();
+
+const emit = defineEmits(["show-menu"]);
+
+const mainView = computed(() => treeviewStore.opened_views[0]);
+const opened = computed({
+  get: () => mainView.value?.opened || [],
+  set: (val) => treeviewStore.setOpened(mainView.value.id, val),
+});
+
+const {
+  search,
+  sortType,
+  filterOptions,
+  processedItems,
+  availableFilterOptions,
+  toggleSort,
+  customFilter,
+} = useTreeFilter(toRef(() => treeviewStore.items));
+
+watch(
+  () => treeviewStore.selection,
+  async (current, previous) => {
+    const oldSelection = previous || [];
+    if (current === oldSelection) {
+      return;
+    }
+
+    const { added, removed } = compareSelections(current, previous);
+
+    const allObjectIds = new Set(
+      treeviewStore.items.flatMap((group) => group.children.map((child) => child.id)),
+    );
+
+    const updates = [
+      ...added
+        .filter((id) => allObjectIds.has(id))
+        .map((id) => dataStyleStore.setVisibility(id, true)),
+      ...removed
+        .filter((id) => allObjectIds.has(id))
+        .map((id) => dataStyleStore.setVisibility(id, false)),
+    ];
+    await Promise.all(updates);
+    hybridViewerStore.remoteRender();
+  },
+);
+
+function isModel(item) {
+  const actualItem = item.raw || item;
+  return (
+    actualItem.viewer_type === "model" || ["BRep", "Section"].includes(actualItem.geode_object_type)
+  );
+}
+</script>
+
+<template>
+  <div class="tree-view-container">
+    <ObjectTreeControls
+      v-model:search="search"
+      :sort-type="sortType"
+      :filter-options="filterOptions"
+      :available-filter-options="availableFilterOptions"
+      @toggle-sort="toggleSort"
+    />
+
+    <v-treeview
+      v-model:selected="treeviewStore.selection"
+      v-model:opened="opened"
+      :items="processedItems"
+      :search="search"
+      :custom-filter="customFilter"
+      class="transparent-treeview"
+      item-value="id"
+      select-strategy="classic"
+      selectable
+    >
+      <template #title="{ item }">
+        <ObjectTreeItemLabel
+          :item="item"
+          @contextmenu="emit('show-menu', { event: $event, itemId: item.id })"
+        />
+      </template>
+
+      <template #append="{ item }">
+        <v-btn
+          v-if="isModel(item)"
+          icon="mdi-magnify-expand"
+          size="medium"
+          class="ml-8"
+          variant="text"
+          v-tooltip="'Model\'s mesh components'"
+          @click.stop="
+            treeviewStore.displayAdditionalTree(item.id, item.title, item.geode_object_type)
+          "
+        />
+      </template>
+    </v-treeview>
+  </div>
+</template>
+
+<style scoped>
+.transparent-treeview {
+  background-color: transparent;
+  margin: 4px 0;
+}
+
+:deep(.v-list-item) {
+  transition: background-color 0.2s ease;
+}
+
+:deep(.v-list-item--active > .v-list-item__overlay) {
+  opacity: 0 !important;
+}
+
+:deep(.v-list-item:hover > .v-list-item__overlay) {
+  opacity: 0.1 !important;
+}
+</style>