@geode/opengeodeweb-front 10.12.0 → 10.13.0

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

@@ -1,132 +0,0 @@
-<script setup>
-import ViewerBreadCrumb from "@ogw_front/components/Viewer/BreadCrumb";
-import ViewerTreeComponent from "@ogw_front/components/Viewer/TreeComponent";
-import ViewerTreeObject from "@ogw_front/components/Viewer/TreeObject";
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
-
-const WIDTH_MIN = 150;
-
-const treeviewStore = useTreeviewStore();
-const emit = defineEmits(["show-menu"]);
-
-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, Math.min(startWidth + deltaX, window.innerWidth));
-    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);
-}
-</script>
-
-<template>
-  <v-container
-    class="treeview-container"
-    :style="{ width: `${treeviewStore.panelWidth}px` }"
-    @contextmenu.prevent
-    @mousedown.stop
-  >
-    <v-row class="resizable-panel" :style="{ width: `${treeviewStore.panelWidth}px` }">
-      <div class="scrollable-wrapper">
-        <v-sheet style="max-height: calc(85vh)" class="transparent-treeview scrollbar-hover">
-          <v-row v-if="treeviewStore.items.length > 0">
-            <v-col>
-              <ViewerBreadCrumb />
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-col>
-              <ViewerTreeObject
-                v-if="!treeviewStore.isAdditionnalTreeDisplayed"
-                @show-menu="emit('show-menu', $event)"
-              />
-              <ViewerTreeComponent
-                v-else
-                @show-menu="emit('show-menu', $event)"
-                :id="treeviewStore.model_id"
-              />
-            </v-col>
-          </v-row>
-        </v-sheet>
-      </div>
-      <div class="resizer" @mousedown="onResizeStart"></div>
-    </v-row>
-  </v-container>
-</template>
-
-<style scoped>
-.treeview-container {
-  position: absolute;
-  z-index: 2;
-  left: 0;
-  top: 0;
-  background-color: transparent;
-  border-radius: 16px;
-  padding: 8px;
-  display: flex;
-  box-sizing: border-box;
-}
-
-.resizable-panel {
-  display: flex;
-  height: 100%;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.scrollable-wrapper {
-  overflow-y: auto;
-  padding-right: 6px;
-  flex: 1;
-}
-
-.resizer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 6px;
-  height: 100%;
-  cursor: ew-resize;
-  background-color: transparent;
-  z-index: 15;
-}
-
-.resizer:hover {
-  background-color: #999;
-}
-
-.resizer:active {
-  background-color: #666;
-}
-
-.transparent-treeview {
-  background-color: transparent;
-  margin: 4px 0;
-}
-
-.scrollbar-hover {
-  overflow-x: hidden;
-}
-
-.scrollbar-hover::-webkit-scrollbar {
-  width: 5px;
-}
-
-.scrollbar-hover::-webkit-scrollbar-thumb {
-  background-color: transparent;
-}
-
-.scrollbar-hover:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.3);
-  border-radius: 10px;
-}
-</style>

package/app/components/Viewer/TreeComponent.vue

@@ -1,170 +0,0 @@
-<script setup>
-import ActionButton from "@ogw_front/components/ActionButton.vue";
-import SearchBar from "@ogw_front/components/SearchBar.vue";
-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";
-
-const dataStyleStore = useDataStyleStore();
-const dataStore = useDataStore();
-const hybridViewerStore = useHybridViewerStore();
-
-const { id } = defineProps({ id: { type: String, required: true } });
-const emit = defineEmits(["show-menu"]);
-
-const items = dataStore.refFormatedMeshComponents(toRef(() => id));
-const mesh_components_selection = dataStyleStore.visibleMeshComponents(toRef(() => id));
-
-const search = ref("");
-const sortType = ref("name");
-const filterOptions = ref({
-  Corner: true,
-  Line: true,
-  Surface: true,
-  Block: true,
-});
-
-const processedItems = computed(() =>
-  items.value
-    .filter((category) => filterOptions.value[category.id])
-    .map((category) => {
-      const field = sortType.value === "name" ? "title" : "id";
-      const children = (category.children || []).toSorted((first, second) =>
-        first[field].localeCompare(second[field]),
-      );
-      return { id: category.id, title: category.title, children };
-    }),
-);
-
-const availableFilterOptions = computed(() => items.value.map((category) => category.id));
-
-function toggleSort() {
-  sortType.value = sortType.value === "name" ? "id" : "name";
-}
-
-function customFilter(value, searchQuery, item) {
-  if (!searchQuery) {
-    return true;
-  }
-  const query = searchQuery.toLowerCase();
-  return (
-    item.raw.title.toLowerCase().includes(query) ||
-    (item.raw.id && item.raw.id.toLowerCase().includes(query))
-  );
-}
-
-async function onSelectionChange(current) {
-  const previous = mesh_components_selection.value;
-  const { added, removed } = compareSelections(current, previous);
-
-  if (added.length === 0 && removed.length === 0) {
-    return;
-  }
-
-  if (added.length > 0) {
-    await dataStyleStore.setModelComponentsVisibility(id, added, true);
-  }
-  if (removed.length > 0) {
-    await dataStyleStore.setModelComponentsVisibility(id, removed, false);
-  }
-  hybridViewerStore.remoteRender();
-}
-</script>
-
-<template>
-  <v-row dense align="center" class="mr-1 ml-3 mt-2 pa-1">
-    <v-col>
-      <SearchBar v-model="search" label="Search" color="black" base-color="black" />
-    </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="toggleSort"
-      />
-      <v-menu :close-on-content-click="false">
-        <template #activator="{ props }">
-          <ActionButton
-            tooltip="Filter options"
-            icon="mdi-filter-variant"
-            tooltipLocation="bottom"
-            class="ml-1"
-            v-bind="props"
-          />
-        </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>
-  <v-treeview
-    :selected="mesh_components_selection"
-    :items="processedItems"
-    :search="search"
-    :custom-filter="customFilter"
-    class="transparent-treeview"
-    item-value="id"
-    select-strategy="independent"
-    selectable
-    @update:selected="onSelectionChange"
-  >
-    <template #title="{ item }">
-      <span
-        class="treeview-item"
-        :class="{ 'inactive-item': item.is_active === false }"
-        @contextmenu.prevent.stop="
-          emit('show-menu', {
-            event: $event,
-            itemId: item.id,
-            context_type: 'model_component',
-            modelId: id,
-          })
-        "
-      >
-        {{ item.title }}
-        <v-tooltip v-if="item.category" activator="parent" location="right">
-          <div class="d-flex flex-column pa-1">
-            <span class="text-caption"><strong>ID:</strong> {{ item.id }}</span>
-            <span v-if="item.title" class="text-caption"
-              ><strong>Name:</strong> {{ item.title }}</span
-            >
-            <span class="text-caption font-italic border-t-sm d-flex align-center">
-              <strong class="mr-1">Status:</strong> {{ item.is_active ? "Active" : "Inactive" }}
-            </span>
-          </div>
-        </v-tooltip>
-      </span>
-    </template>
-  </v-treeview>
-</template>
-
-<style scoped>
-.treeview-item {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  display: inline-block;
-}
-.inactive-item {
-  opacity: 0.4;
-  font-style: italic;
-}
-
-.transparent-treeview {
-  background-color: transparent;
-  margin: 4px 0;
-}
-</style>

package/app/components/Viewer/TreeObject.vue

@@ -1,184 +0,0 @@
-<script setup>
-import ActionButton from "@ogw_front/components/ActionButton.vue";
-import SearchBar from "@ogw_front/components/SearchBar.vue";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
-import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
-
-import { compareSelections } from "@ogw_front/utils/treeview";
-
-const treeviewStore = useTreeviewStore();
-const dataStyleStore = useDataStyleStore();
-const hybridViewerStore = useHybridViewerStore();
-
-const emit = defineEmits(["show-menu"]);
-
-const search = ref("");
-const sortType = ref("name");
-const filterOptions = ref({});
-
-const processedItems = computed(() =>
-  treeviewStore.items
-    .filter((category) => filterOptions.value[category.title] !== false)
-    .map((category) => {
-      const field = sortType.value === "name" ? "title" : "id";
-      const children = (category.children || []).toSorted((first, second) =>
-        first[field].localeCompare(second[field], undefined, {
-          numeric: true,
-          sensitivity: "base",
-        }),
-      );
-      return { id: category.title, title: category.title, children };
-    }),
-);
-
-const availableFilterOptions = computed(() =>
-  treeviewStore.items.map((category) => category.title),
-);
-
-watch(
-  availableFilterOptions,
-  (newOptions) => {
-    for (const option of newOptions) {
-      if (filterOptions.value[option] === undefined) {
-        filterOptions.value[option] = true;
-      }
-    }
-  },
-  { immediate: true },
-);
-
-function toggleSort() {
-  sortType.value = sortType.value === "name" ? "id" : "name";
-}
-
-function customFilter(value, searchQuery, item) {
-  if (!searchQuery) {
-    return true;
-  }
-  const query = searchQuery.toLowerCase();
-  return (
-    item.raw.title.toLowerCase().includes(query) ||
-    (item.raw.id && item.raw.id.toLowerCase().includes(query))
-  );
-}
-
-function isLeafNode(item) {
-  return !item.children || item.children.length === 0;
-}
-
-watch(
-  () => treeviewStore.selection,
-  async (current, previous) => {
-    const oldSelection = previous || [];
-    if (current === oldSelection) {
-      return;
-    }
-    const { added, removed } = compareSelections(current, previous);
-    const updates = [
-      ...added.map((id) => dataStyleStore.setVisibility(id, true)),
-      ...removed.map((id) => dataStyleStore.setVisibility(id, false)),
-    ];
-    await Promise.all(updates);
-    hybridViewerStore.remoteRender();
-  },
-);
-
-function isModel(item) {
-  return item.viewer_type === "model";
-}
-
-onMounted(() => {
-  const savedSelection = treeviewStore.selection;
-  if (savedSelection && savedSelection.length > 0) {
-    treeviewStore.selection = savedSelection;
-  }
-});
-</script>
-
-<template>
-  <v-row v-if="treeviewStore.items.length > 0" dense align="center" class="mr-1 ml-3 mt-2 pa-1">
-    <v-col>
-      <SearchBar v-model="search" label="Search" color="black" base-color="black" />
-    </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="toggleSort"
-      />
-      <v-menu :close-on-content-click="false">
-        <template #activator="{ props }">
-          <ActionButton
-            tooltip="Filter options"
-            icon="mdi-filter-variant"
-            tooltipLocation="bottom"
-            class="ml-1"
-            v-bind="props"
-          />
-        </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>
-  <v-treeview
-    v-model:selected="treeviewStore.selection"
-    :items="processedItems"
-    :search="search"
-    :custom-filter="customFilter"
-    class="transparent-treeview"
-    item-value="id"
-    select-strategy="classic"
-    selectable
-  >
-    <template #title="{ item }">
-      <span
-        class="treeview-item"
-        @contextmenu.prevent.stop="
-          isLeafNode(item) ? emit('show-menu', { event: $event, itemId: item.id }) : null
-        "
-      >
-        {{ item.title }}
-      </span>
-    </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)"
-      />
-    </template>
-  </v-treeview>
-</template>
-
-<style scoped>
-.transparent-treeview {
-  background-color: transparent;
-  margin: 4px 0;
-}
-
-.treeview-item {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  display: inline-block;
-}
-</style>