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

package/.oxlintrc.json

@@ -92,6 +92,12 @@
         "ignore": [-1, 0, 1, 2, 3, 4],
         "ignoreArrayIndexes": true
       }
+    ],
+    "eslint/no-underscore-dangle": [
+      "error",
+      {
+        "allow": ["_data", "__dirname", "__VEASE_UTILS__", "__VEASE_STORES__", "__VEASE_SCHEMAS__"]
+      }
     ]
   },
   "overrides": [
@@ -117,6 +123,7 @@
       "rules": {
         "vitest/require-hook": "off",
         "vitest/no-hooks": "off",
+        "jest/no-hooks": "off",
         "vitest/no-importing-vitest-globals": "off",
         "max-lines-per-function": "off",
         "max-statements": "off",
@@ -124,8 +131,11 @@
         "vitest/prefer-to-be-falsy": "off",
         "vitest/require-test-timeout": "warn",
         "vitest/prefer-importing-vitest-globals": "off",
-        "jest/consistent-test-it": ["error", { "fn": "test", "withinDescribe": "test" }],
-        "vitest/prefer-spy-on": "off"
+        "jest/consistent-test-it": "off",
+        "vitest/consistent-test-it": ["error", { "fn": "test", "withinDescribe": "test" }],
+        "vitest/prefer-spy-on": "off",
+        "vitest/prefer-expect-assertions": "off",
+        "jest/prefer-expect-assertions": "off"
       }
     },
     {

package/app/components/Basic/Slider.vue

@@ -0,0 +1,7 @@
+<script setup>
+const model = defineModel();
+</script>
+
+<template>
+  <v-slider v-model="model" hide-details min="0" max="20" step="2" />
+</template>

package/app/components/Basic/Switch.vue

@@ -0,0 +1,7 @@
+<script setup>
+const model = defineModel();
+</script>
+
+<template>
+  <v-switch v-model="model" inset hide-details />
+</template>

package/app/components/HybridRenderingView.vue

@@ -46,7 +46,7 @@ function debounce(func, wait) {
 
 <template>
   <ClientOnly>
-    <div class="fill-height" style="position: relative; height: 100%">
+    <div data-testid="hybridViewer" class="fill-height" style="position: relative; height: 100%">
       <VeaseViewToolbar />
       <slot name="ui"></slot>
       <v-col

package/app/components/SearchBar.vue

@@ -1,7 +1,7 @@
 <script setup>
 const { modelValue, label } = defineProps({
   modelValue: { type: String, default: "" },
-  label: { type: String, default: "Search..." },
+  label: { type: String, default: "" },
 });
 
 const emit = defineEmits(["update:modelValue"]);

package/app/components/Viewer/ContextMenu.vue

@@ -4,7 +4,6 @@ import { useMenuStore } from "@ogw_front/stores/menu";
 
 const RADIUS = 80;
 const MARGIN_OFFSET = 40;
-const Z_INDEX_MENU = 1000;
 const Z_INDEX_ACTIVE_ITEM = 10;
 const Z_INDEX_BASE_ITEM = 1;
 const FULL_ANGLE = 360;
@@ -34,7 +33,7 @@ const menuX = ref(x);
 const menuY = ref(y);
 
 watch(
-  () => [x, y],
+  () => [x, y, containerWidth, containerHeight],
   ([newX, newY]) => {
     const { x: clampedX, y: clampedY } = clampPosition(newX, newY);
     menuX.value = clampedX;
@@ -110,7 +109,6 @@ function getMenuStyle() {
     position: "fixed",
     left: `${menuStore.containerLeft + menuX.value - RADIUS}px`,
     top: `${menuStore.containerTop + menuY.value - RADIUS}px`,
-    zIndex: Z_INDEX_MENU,
   };
 }
 

package/app/components/Viewer/ContextMenuItem.vue

@@ -29,7 +29,7 @@ const optionsStyle = computed(() => {
   if (!is_active.value || !optionsHeight.value) {
     return {};
   }
-  const angle = (itemProps.index / itemProps.totalItems) * 2 * Math.PI;
+  const angle = (index / itemProps.totalItems) * 2 * Math.PI;
   const radius = RADIUS;
   const absoluteButtonY = menuStore.menuY + Math.sin(angle) * radius;
   const height = optionsHeight.value;
@@ -89,7 +89,6 @@ function toggleOptions() {
     >
       <GlassCard
         @click.stop
-        :title="tooltip"
         width="320"
         :max-height="maxCardHeight"
         :ripple="false"
@@ -98,6 +97,7 @@ function toggleOptions() {
         class="elevation-24"
         style="overflow: hidden; display: flex; flex-direction: column"
       >
+        <v-card-title>{{ tooltip }}</v-card-title>
         <v-card-text class="pa-5" style="overflow-y: auto; flex: 1; min-height: 0">
           <slot name="options" />
         </v-card-text>

package/app/components/Viewer/EdgedCurve/SpecificEdgesOptions.vue

@@ -3,6 +3,7 @@ import EdgedCurveEdges from "@ogw_front/assets/viewer_svgs/edged_curve_edges.svg
 import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
+import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width";
 
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -23,7 +24,7 @@ const visibility = computed({
     hybridViewerStore.remoteRender();
   },
 });
-const size = computed({
+const width = computed({
   get: () => dataStyleStore.meshEdgesWidth(id.value),
   set: async (newValue) => {
     await dataStyleStore.setMeshEdgesWidth(id.value, newValue);
@@ -90,20 +91,15 @@ const edge_attribute_color_map = computed({
 <template>
   <ViewerContextMenuItem
     :itemProps="itemProps"
-    tooltip="Edges options"
     :btn_image="EdgedCurveEdges"
+    tooltip="Edges options"
   >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch data-testid="meshEdgesVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
         <v-row class="pa-0" align="center">
           <v-divider />
-          <v-col cols="auto" justify="center">
-            <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Width'" />
-          </v-col>
-          <v-col justify="center">
-            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
-          </v-col>
+          <ViewerOptionsWidthSlider v-model="width" />
         </v-row>
         <v-row>
           <v-col>

package/app/components/Viewer/Generic/Mesh/CellsOptions.vue

@@ -90,9 +90,14 @@ const cell_attribute_color_map = computed({
 </script>
 
 <template>
-  <ViewerContextMenuItem :itemProps="itemProps" :tooltip="tooltip" :btn_image="btn_image">
+  <ViewerContextMenuItem
+    data-testid="meshCellsMenu"
+    :itemProps="itemProps"
+    :tooltip="tooltip"
+    :btn_image="btn_image"
+  >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch data-testid="meshCellsVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
         <ViewerOptionsColoringTypeSelector
           :id="id"

package/app/components/Viewer/Generic/Mesh/EdgesOptions.vue

@@ -2,6 +2,7 @@
 import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
+import ViewerOptionsWidthSlider from "@ogw_front/components/Viewer/Options/Sliders/Width";
 
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
@@ -9,9 +10,10 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
-const { itemProps, btn_image } = defineProps({
+const { itemProps, btn_image, tooltip } = defineProps({
   itemProps: { type: Object, required: true },
   btn_image: { type: String, required: true },
+  tooltip: { type: String, required: false, default: "Edges options" },
 });
 
 const id = toRef(() => itemProps.id);
@@ -89,18 +91,18 @@ const edge_attribute_color_map = computed({
 </script>
 
 <template>
-  <ViewerContextMenuItem :itemProps="itemProps" tooltip="Edges options" :btn_image="btn_image">
+  <ViewerContextMenuItem
+    data-testid="meshEdgesMenu"
+    :itemProps="itemProps"
+    :tooltip="tooltip"
+    :btn_image="btn_image"
+  >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch data-testid="meshEdgesVisibilitySwitch" v-model="visibility" />
       <template v-if="visibility">
         <v-row class="pa-0" align="center">
           <v-divider />
-          <v-col cols="auto" justify="center">
-            <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Width'" />
-          </v-col>
-          <v-col justify="center">
-            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
-          </v-col>
+          <ViewerOptionsWidthSlider data-testid="meshEdgesWidthSlider" v-model="size" />
         </v-row>
         <v-row>
           <v-col>

package/app/components/Viewer/Generic/Mesh/PointsOptions.vue

@@ -1,6 +1,7 @@
 <script setup>
 import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
 import ViewerOptionsColoringTypeSelector from "@ogw_front/components/Viewer/Options/ColoringTypeSelector";
+import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
@@ -9,9 +10,10 @@ import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
 const dataStyleStore = useDataStyleStore();
 const hybridViewerStore = useHybridViewerStore();
 
-const { itemProps, btn_image } = defineProps({
+const { itemProps, btn_image, tooltip } = defineProps({
   itemProps: { type: Object, required: true },
   btn_image: { type: String, required: true },
+  tooltip: { type: String, required: false, default: "Points options" },
 });
 
 const id = toRef(() => itemProps.id);
@@ -68,18 +70,21 @@ const vertex_attribute_color_map = computed({
 </script>
 
 <template>
-  <ViewerContextMenuItem :itemProps="itemProps" tooltip="Points options" :btn_image="btn_image">
+  <ViewerContextMenuItem
+    data-testid="meshPointsMenu"
+    :itemProps="itemProps"
+    :tooltip="tooltip"
+    :btn_image="btn_image"
+  >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch
+        data-testid="meshPointsVisibilitySwitch"
+        v-model="visibility"
+      />
       <template v-if="visibility">
         <v-row class="pa-0" align="center">
           <v-divider />
-          <v-col cols="auto" justify="center">
-            <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Size'" />
-          </v-col>
-          <v-col justify="center">
-            <v-slider v-model="size" hide-details min="0" max="20" step="2" />
-          </v-col>
+          <ViewerOptionsSizeSlider data-testid="meshPointsSizeSlider" v-model="size" />
         </v-row>
         <v-row>
           <v-col>

package/app/components/Viewer/Generic/Mesh/PolygonsOptions.vue

@@ -90,9 +90,17 @@ const polygon_attribute_color_map = computed({
 </script>
 
 <template>
-  <ViewerContextMenuItem :itemProps="itemProps" :tooltip="tooltip" :btn_image="btn_image">
+  <ViewerContextMenuItem
+    data-testid="meshPolygonsMenu"
+    :itemProps="itemProps"
+    :tooltip="tooltip"
+    :btn_image="btn_image"
+  >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch
+        data-testid="meshPolygonsVisibilitySwitch"
+        v-model="visibility"
+      />
       <template v-if="visibility">
         <ViewerOptionsColoringTypeSelector
           :id="id"

package/app/components/Viewer/Generic/Mesh/PolyhedraOptions.vue

@@ -87,9 +87,17 @@ const polyhedron_attribute_color_map = computed({
 </script>
 
 <template>
-  <ViewerContextMenuItem :itemProps="itemProps" :tooltip="tooltip" :btn_image="btn_image">
+  <ViewerContextMenuItem
+    data-testid="meshPolyhedraMenu"
+    :itemProps="itemProps"
+    :tooltip="tooltip"
+    :btn_image="btn_image"
+  >
     <template #options>
-      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <ViewerOptionsVisibilitySwitch
+        data-testid="meshPolyhedraVisibilitySwitch"
+        v-model="visibility"
+      />
       <template v-if="visibility">
         <ViewerOptionsColoringTypeSelector
           :id="id"

package/app/components/Viewer/Generic/Model/PointsOptions.vue

@@ -1,6 +1,7 @@
 <script setup>
 import SurfacePoints from "@ogw_front/assets/viewer_svgs/surface_points.svg";
 import ViewerContextMenuItem from "@ogw_front/components/Viewer/ContextMenuItem";
+import ViewerOptionsSizeSlider from "@ogw_front/components/Viewer/Options/Sliders/Size";
 import ViewerOptionsVisibilitySwitch from "@ogw_front/components/Viewer/Options/VisibilitySwitch";
 
 import { useDataStyleStore } from "@ogw_front/stores/data_style";
@@ -46,20 +47,7 @@ const size = computed({
       <template v-if="visibility">
         <v-row class="pa-0" align="center">
           <v-divider />
-          <v-col cols="auto" justify="center">
-            <v-icon size="30" icon="mdi-ruler" v-tooltip:left="'Size'" />
-          </v-col>
-          <v-col justify="center">
-            <v-slider
-              v-model="size"
-              hide-details
-              min="0"
-              max="20"
-              step="2"
-              thumb-color="black"
-              ticks
-            />
-          </v-col>
+          <ViewerOptionsSizeSlider data-testid="modelPointsSizeSlider" v-model="size" />
         </v-row>
       </template>
     </template>

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

@@ -0,0 +1,189 @@
+<script setup>
+import StickyHeader from "@ogw_front/components/Viewer/ObjectTree/Base/StickyHeader.vue";
+import TreeRow from "@ogw_front/components/Viewer/ObjectTree/Base/TreeRow.vue";
+import { useTreeKeyboardNav } from "@ogw_front/composables/tree_keyboard_nav";
+import { useTreeScroll } from "@ogw_front/composables/tree_scroll";
+import { useVirtualTree } from "@ogw_front/composables/virtual_tree";
+
+const { items, opened, selected, scrollTop, options } = defineProps({
+  items: { type: Array, required: true },
+  opened: { type: Array, required: false, default: () => [] },
+  selected: { type: Array, required: false, default: () => [] },
+  scrollTop: { type: Number, required: false, default: 0 },
+  options: { type: Object, required: false, default: () => ({}) },
+});
+
+const treeWrapper = ref(undefined);
+
+const emit = defineEmits([
+  "update:opened",
+  "update:selected",
+  "click:item",
+  "update:scrollTop",
+  "hover:enter",
+  "hover:leave",
+]);
+
+const {
+  actualItemProps,
+  actualSelection,
+  displayItems,
+  toggleOpen,
+  toggleSelect,
+  isSelected,
+  getIndeterminate,
+} = useVirtualTree(
+  computed(() => ({
+    items,
+    opened,
+    selected,
+    ...options,
+  })),
+  emit,
+);
+
+const { virtualScrollRef, stickyHeader, handleScroll, scrollToIndex } = useTreeScroll(
+  computed(() => ({ scrollTop })),
+  emit,
+  displayItems,
+  actualItemProps,
+);
+
+function handleItemClick(item, index) {
+  if (index !== undefined) {
+    focusedIndex.value = index;
+  }
+  if (item.isLeaf) {
+    toggleSelect(item.raw);
+    emit("click:item", item.raw);
+  } else {
+    toggleOpen(item.raw);
+  }
+}
+
+const { focusedIndex, handleKeyDown } = useTreeKeyboardNav(
+  displayItems,
+  emit,
+  scrollToIndex,
+  toggleOpen,
+  handleItemClick,
+);
+</script>
+
+<template>
+  <div
+    ref="treeWrapper"
+    class="common-tree-view-wrapper"
+    tabindex="0"
+    @keydown="handleKeyDown"
+    @mousedown="treeWrapper.focus()"
+  >
+    <StickyHeader
+      v-if="stickyHeader"
+      :item="stickyHeader"
+      :item-props="actualItemProps"
+      :selection="actualSelection"
+      :is-selected="isSelected"
+      :get-indeterminate="getIndeterminate"
+      @toggle-open="toggleOpen"
+      @toggle-select="toggleSelect"
+    >
+      <template #title="slotProps">
+        <slot name="title" v-bind="slotProps" />
+      </template>
+    </StickyHeader>
+
+    <v-virtual-scroll
+      ref="virtualScrollRef"
+      :items="displayItems"
+      :item-height="actualItemProps.height"
+      class="common-tree-view"
+      @scroll="handleScroll"
+    >
+      <template #default="{ item, index }">
+        <v-list-item
+          :class="[
+            'tree-row-wrapper',
+            { 'leaf-row': item.isLeaf, 'is-focused': focusedIndex === index },
+          ]"
+          class="pa-0"
+          tabindex="-1"
+          @mousedown.prevent
+          @click="
+            handleItemClick(item, index);
+            treeWrapper.focus();
+          "
+          @mouseenter="emit('hover:enter', { item })"
+          @mouseleave="emit('hover:leave', { item })"
+        >
+          <TreeRow
+            :item="item"
+            :item-props="actualItemProps"
+            :selection="actualSelection"
+            :is-selected="isSelected"
+            :get-indeterminate="getIndeterminate"
+            @toggle-open="toggleOpen"
+            @toggle-select="toggleSelect"
+          >
+            <template #title="slotProps">
+              <slot name="title" v-bind="slotProps" />
+            </template>
+            <template #append="slotProps">
+              <slot name="append" v-bind="slotProps" />
+            </template>
+          </TreeRow>
+        </v-list-item>
+      </template>
+    </v-virtual-scroll>
+  </div>
+</template>
+
+<style scoped>
+.common-tree-view-wrapper {
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.common-tree-view-wrapper:focus {
+  outline: none;
+}
+
+.common-tree-view {
+  flex-grow: 1;
+  min-height: 0;
+  overflow-y: auto !important;
+}
+
+.v-list-item {
+  background-color: transparent !important;
+  transition: none !important;
+}
+
+.tree-row-wrapper {
+  min-height: 44px !important;
+  cursor: pointer;
+  border-radius: 8px;
+  margin: 1px 4px;
+}
+
+.tree-row-wrapper.is-focused {
+  background-color: rgba(0, 0, 0, 0.08) !important;
+  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15);
+}
+
+.tree-row-wrapper:hover:not(.is-focused) {
+  background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
+:deep(.v-list-item__content) {
+  padding: 0 !important;
+  display: block !important;
+}
+
+:deep(.v-list-item__overlay) {
+  display: none !important;
+}
+</style>