@geode/opengeodeweb-front 9.9.0 → 9.10.0-rc.2

package/components/Viewer/PointSet/SpecificPointsOptions.vue

@@ -0,0 +1,74 @@
+<template>
+  <ContextMenuItem
+    :itemProps="props.itemProps"
+    tooltip="Points options"
+    :btn_image="props.btn_image"
+  >
+    <template #options>
+      <ViewerOptionsVisibilitySwitch 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"
+              thumb-color="black"
+              ticks
+            />
+          </v-col>
+        </v-row>
+        <v-row>
+          <v-col>
+            <ViewerOptionsColoringTypeSelector
+              :id="id"
+              v-model:coloring_style_key="coloring_style_key"
+              v-model:color="color"
+              v-model:vertex_attribute="vertex_attribute"
+            />
+          </v-col>
+        </v-row>
+      </template>
+    </template>
+  </ContextMenuItem>
+</template>
+
+<script setup>
+  const dataStyleStore = useDataStyleStore()
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+    btn_image: { type: String, required: true },
+  })
+
+  const id = toRef(() => props.itemProps.id)
+
+  const visibility = computed({
+    get: () => dataStyleStore.pointsVisibility(id.value),
+    set: (newValue) => dataStyleStore.setPointsVisibility(id.value, newValue),
+  })
+  const size = computed({
+    get: () => dataStyleStore.pointsSize(id.value),
+    set: (newValue) => dataStyleStore.setPointsSize(id.value, newValue),
+  })
+  const coloring_style_key = computed({
+    get: () => dataStyleStore.pointsActiveColoring(id.value),
+    set: (newValue) =>
+      dataStyleStore.setPointsActiveColoring(id.value, newValue),
+  })
+  const color = computed({
+    get: () => dataStyleStore.pointsColor(id.value),
+    set: (newValue) => dataStyleStore.setPointsColor(id.value, newValue),
+  })
+  const vertex_attribute = computed({
+    get: () => dataStyleStore.pointsVertexAttribute(id.value),
+    set: (newValue) =>
+      dataStyleStore.setPointsVertexAttribute(id.value, newValue),
+  })
+</script>

package/components/Viewer/PolygonalSurface/EdgesOptions.vue

@@ -0,0 +1,14 @@
+<template>
+  <ViewerGenericMeshEdgesOptions
+    :itemProps="props.itemProps"
+    :btn_image="PolygonalSurfaceEdges"
+  />
+</template>
+
+<script setup>
+  import PolygonalSurfaceEdges from "@ogw_f/assets/viewer_svgs/surface_edges.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/Viewer/PolygonalSurface/PointsOptions.vue

@@ -0,0 +1,14 @@
+<template>
+  <ViewerGenericMeshPointsOptions
+    :itemProps="props.itemProps"
+    :btn_image="PolygonalSurfacePoints"
+  />
+</template>
+
+<script setup>
+  import PolygonalSurfacePoints from "@ogw_f/assets/viewer_svgs/surface_points.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/Viewer/PolygonalSurface/PolygonsOptions.vue

@@ -0,0 +1,14 @@
+<template>
+  <ViewerGenericMeshPolygonsOptions
+    :itemProps="props.itemProps"
+    :btn_image="PolygonalSurfacePolygons"
+  />
+</template>
+
+<script setup>
+  import PolygonalSurfacePolygons from "@ogw_f/assets/viewer_svgs/surface_triangles.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/Viewer/Solid/EdgesOptions.vue

@@ -0,0 +1,14 @@
+<template>
+  <ViewerGenericMeshEdgesOptions
+    :itemProps="props.itemProps"
+    :btn_image="SolidEdges"
+  />
+</template>
+
+<script setup>
+  import SolidEdges from "@ogw_f/assets/viewer_svgs/solid_edges.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/Viewer/Solid/PointsOptions.vue

@@ -0,0 +1,14 @@
+<template>
+  <ViewerGenericMeshPointsOptions
+    :itemProps="props.itemProps"
+    :btn_image="SolidPoints"
+  />
+</template>
+
+<script setup>
+  import SolidPoints from "@ogw_f/assets/viewer_svgs/solid_points.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/Viewer/Solid/PolygonsOptions.vue

@@ -0,0 +1,14 @@
+<template>
+  <ViewerGenericMeshPolygonsOptions
+    :itemProps="props.itemProps"
+    :btn_image="SolidFacets"
+  />
+</template>
+
+<script setup>
+  import SolidFacets from "@ogw_f/assets/viewer_svgs/solid_facets.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/Viewer/Solid/PolyhedraOptions.vue

@@ -0,0 +1,14 @@
+<template>
+  <ViewerGenericMeshPolyhedraOptions
+    :itemProps="props.itemProps"
+    :btn_image="SolidPolyhedra"
+  />
+</template>
+
+<script setup>
+  import SolidPolyhedra from "@ogw_f/assets/viewer_svgs/solid_polyhedra.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/Viewer/TetrahedralSolid/TetrahedraOptions.vue

@@ -0,0 +1,15 @@
+<template>
+  <ViewerGenericMeshPolyhedraOptions
+    :itemProps="props.itemProps"
+    :btn_image="TetrahedralSolidTetrahedra"
+    tooltip="Tetrahedra options"
+  />
+</template>
+
+<script setup>
+  import TetrahedralSolidTetrahedra from "@ogw_f/assets/viewer_svgs/solid_polyhedra.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/Viewer/TetrahedralSolid/TrianglesOptions.vue

@@ -0,0 +1,15 @@
+<template>
+  <ViewerGenericMeshPolygonsOptions
+    :itemProps="props.itemProps"
+    :btn_image="TetrahedralSolidTriangles"
+    tooltip="Triangles options"
+  />
+</template>
+
+<script setup>
+  import TetrahedralSolidTriangles from "@ogw_f/assets/viewer_svgs/solid_facets.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/Viewer/Tree/ObjectTree.vue

@@ -0,0 +1,170 @@
+<template>
+  <v-container
+    class="treeview-container"
+    :style="{ width: `${treeviewStore.panelWidth}px` }"
+  >
+    <v-row
+      class="resizable-panel"
+      :style="{ width: `${treeviewStore.panelWidth}px` }"
+    >
+      <div class="scrollable-wrapper">
+        <v-sheet
+          style="max-height: calc(90vh)"
+          class="transparent-treeview scrollbar-hover"
+        >
+          <v-row v-if="treeviewStore.items.length > 0">
+            <v-col>
+              <ViewerBreadCrumb
+                :selectedTree="selectedTree"
+                :treeOptions="treeOptions"
+                @update:selectedTree="selectedTree = $event"
+              />
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <ViewerTreeObject
+                v-if="!treeviewStore.isAdditionnalTreeDisplayed"
+                @show-menu="handleTreeMenu"
+              />
+              <ViewerTreeComponent
+                v-else
+                @show-menu="handleTreeMenu"
+                :id="treeviewStore.model_id"
+              />
+            </v-col>
+          </v-row>
+        </v-sheet>
+      </div>
+      <div class="resizer" @mousedown="onResizeStart"></div>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+  const treeviewStore = use_treeview_store()
+  const menuStore = useMenuStore()
+  const cardContainer = useTemplateRef("cardContainer")
+  const containerWidth = ref(window.innerWidth)
+  const containerHeight = ref(window.innerHeight)
+
+  const menuX = ref(0)
+  const menuY = ref(0)
+  const id = ref(null)
+
+  const emit = defineEmits(["show-menu", "position-menu"])
+
+  function handleTreeMenu({ event, itemId }) {
+    menuX.value = event.clientX
+    menuY.value = event.clientY
+    id.value = itemId
+
+    menuStore.openMenu(itemId, event.clientX, event.clientY)
+  }
+
+  function onResizeStart(event) {
+    const startWidth = treeviewStore.panelWidth
+    const startX = event.clientX
+
+    const resize = (e) => {
+      const deltaX = e.clientX - startX
+      const newWidth = Math.max(
+        150,
+        Math.min(startWidth + deltaX, window.innerWidth),
+      )
+      treeviewStore.setPanelWidth(newWidth)
+      document.body.style.userSelect = "none"
+    }
+
+    const stopResize = () => {
+      document.removeEventListener("mousemove", resize)
+      document.removeEventListener("mouseup", stopResize)
+      document.body.style.userSelect = ""
+    }
+
+    document.addEventListener("mousemove", resize)
+    document.addEventListener("mouseup", stopResize)
+  }
+
+  onMounted(() => {
+    containerWidth.value = window.innerWidth
+    containerHeight.value = window.innerHeight
+
+    window.addEventListener("resize", () => {
+      containerWidth.value = window.innerWidth
+      containerHeight.value = window.innerHeight
+    })
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener("resize")
+  })
+</script>
+
+<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/components/Viewer/TreeComponent.vue

@@ -0,0 +1,93 @@
+<template>
+  <v-treeview
+    v-model:selected="mesh_components_selection"
+    :items="items"
+    class="transparent-treeview"
+    item-value="id"
+    select-strategy="classic"
+    selectable
+  >
+    <template #title="{ item }">
+      <span class="treeview-item">{{ item.title }}</span>
+    </template>
+  </v-treeview>
+</template>
+
+<script setup>
+  const dataStyleStore = useDataStyleStore()
+  const dataBaseStore = useDataBaseStore()
+
+  const props = defineProps({ id: { type: String, required: true } })
+
+  const items = dataBaseStore.formatedMeshComponents(props.id)
+  const mesh_components_selection = ref(
+    dataStyleStore.visibleMeshComponents(props.id),
+  )
+
+  watch(
+    mesh_components_selection,
+    (current, previous) => {
+      if (!previous) previous = []
+      else {
+        const { added, removed } = compareSelections(current, previous)
+
+        const [added_corners, added_lines, added_surfaces, added_blocks] =
+          sortMeshComponents(added)
+        const [
+          removed_corners,
+          removed_lines,
+          removed_surfaces,
+          removed_blocks,
+        ] = sortMeshComponents(removed)
+        if (added_corners.length > 0)
+          dataStyleStore.setCornerVisibility(props.id, added_corners, true)
+        if (added_lines.length > 0)
+          dataStyleStore.setLineVisibility(props.id, added_lines, true)
+        if (added_surfaces.length > 0)
+          dataStyleStore.setSurfaceVisibility(props.id, added_surfaces, true)
+        if (added_blocks.length > 0)
+          dataStyleStore.setBlockVisibility(props.id, added_blocks, true)
+
+        if (removed_corners.length > 0)
+          dataStyleStore.setCornerVisibility(props.id, removed_corners, false)
+        if (removed_lines.length > 0)
+          dataStyleStore.setLineVisibility(props.id, removed_lines, false)
+        if (removed_surfaces.length > 0)
+          dataStyleStore.setSurfaceVisibility(props.id, removed_surfaces, false)
+        if (removed_blocks.length > 0)
+          dataStyleStore.setBlockVisibility(props.id, removed_blocks, false)
+      }
+    },
+    { immediate: true, deep: true },
+  )
+
+  function sortMeshComponents(items) {
+    var corner_ids = [],
+      line_ids = [],
+      surface_ids = [],
+      block_ids = []
+    for (const item of items) {
+      const item_type = dataBaseStore.meshComponentType(props.id, item)
+      if (item_type === "corner") corner_ids.push(item)
+      else if (item_type === "line") line_ids.push(item)
+      else if (item_type === "surface") surface_ids.push(item)
+      else if (item_type === "block") block_ids.push(item)
+    }
+    return [corner_ids, line_ids, surface_ids, block_ids]
+  }
+</script>
+
+<style scoped>
+  .treeview-item {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    display: inline-block;
+  }
+
+  .transparent-treeview {
+    background-color: transparent;
+    margin: 4px 0;
+  }
+</style>

package/components/Viewer/TreeObject.vue

@@ -0,0 +1,100 @@
+<template>
+  <v-treeview
+    v-model:selected="treeviewStore.selection"
+    :items="treeviewStore.items"
+    return-object
+    class="transparent-treeview"
+    item-value="id"
+    select-strategy="classic"
+    selectable
+  >
+    <template #title="{ item }">
+      <span
+        class="treeview-item"
+        @click.right.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>
+
+<script setup>
+  const treeviewStore = use_treeview_store()
+  const dataStyleStore = useDataStyleStore()
+  const dataBaseStore = useDataBaseStore()
+  const emit = defineEmits(["show-menu"])
+
+  function isLeafNode(item) {
+    return !item.children || item.children.length === 0
+  }
+
+  watch(
+    () => treeviewStore.selection,
+    (current, previous) => {
+      if (!previous) previous = []
+      const { added, removed } = compareSelections(current, previous)
+
+      added.forEach((item) => {
+        dataStyleStore.setVisibility(item.id, true)
+      })
+
+      removed.forEach((item) => {
+        dataStyleStore.setVisibility(item.id, false)
+
+        const objectMeta = dataBaseStore.itemMetaDatas(item.id)
+        if (objectMeta.object_type === "mesh") {
+          if (dataBaseStore.db[item.id]?.mesh_components_selection) {
+            dataBaseStore.db[item.id].mesh_components_selection = []
+          }
+          if (dataStyleStore.visibleMeshComponentIds?.[item.id]) {
+            dataStyleStore.updateVisibleMeshComponents(item.id, [])
+          }
+        }
+      })
+    },
+    { immediate: true },
+  )
+
+  function isModel(item) {
+    return item.object_type === "model"
+  }
+
+  onMounted(() => {
+    const savedSelection = treeviewStore.selection
+    if (savedSelection && savedSelection.length > 0) {
+      treeviewStore.selection = savedSelection
+    }
+  })
+</script>
+
+<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>

package/components/Viewer/TriangulatedSurface/EdgesOptions.vue

@@ -0,0 +1,14 @@
+<template>
+  <ViewerGenericMeshEdgesOptions
+    :itemProps="props.itemProps"
+    :btn_image="SurfaceEdges"
+  />
+</template>
+
+<script setup>
+  import SurfaceEdges from "@ogw_f/assets/viewer_svgs/surface_edges.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/Viewer/TriangulatedSurface/PointsOptions.vue

@@ -0,0 +1,14 @@
+<template>
+  <ViewerGenericMeshPointsOptions
+    :itemProps="props.itemProps"
+    :btn_image="TriangulatedSurfaceEdgesPoints"
+  />
+</template>
+
+<script setup>
+  import TriangulatedSurfaceEdgesPoints from "@ogw_f/assets/viewer_svgs/surface_points.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/components/Viewer/TriangulatedSurface/TrianglesOptions.vue

@@ -0,0 +1,15 @@
+<template>
+  <ViewerGenericMeshPolygonsOptions
+    :itemProps="props.itemProps"
+    :btn_image="TriangulatedSurfaceEdgesTriangles"
+    tooltip="Triangles options"
+  />
+</template>
+
+<script setup>
+  import TriangulatedSurfaceEdgesTriangles from "@ogw_f/assets/viewer_svgs/surface_triangles.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+  })
+</script>

package/internal_stores/data_style_state.js

@@ -0,0 +1,18 @@
+import { reactive, computed } from "vue"
+
+export default function useDataStyleState() {
+  const styles = reactive({})
+
+  const objectVisibility = computed(() => (id) => styles[id]?.visibility)
+  const selectedObjects = computed(() => {
+    const selection = []
+    for (const [id, value] of Object.entries(styles)) {
+      if (value.visibility === true) {
+        selection.push(id)
+      }
+    }
+    return selection
+  })
+
+  return { styles, objectVisibility, selectedObjects }
+}