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

package/components/ContextMenuItem.vue

@@ -0,0 +1,90 @@
+<template>
+  <template class="menu-item" :style="itemStyle">
+    <v-tooltip
+      :location="props.itemProps.tooltip_location"
+      :origin="props.itemProps.tooltip_origin"
+    >
+      <template v-slot:activator="{ props }">
+        <v-btn
+          icon
+          :active="display_options"
+          @click.stop="toggleOptions"
+          v-bind="props"
+        >
+          <v-img :src="btn_image" height="35" width="35" />
+        </v-btn>
+      </template>
+      <span>{{ props.tooltip }}</span>
+    </v-tooltip>
+    <div v-if="display_options" class="menu-options pa-0" @click.stop>
+      <v-card
+        @click.stop
+        :title="props.tooltip"
+        class="bg-primary"
+        width="320"
+        max-height="500"
+        :ripple="false"
+      >
+        <v-card-text class="bg-primary">
+          <slot name="options" />
+        </v-card-text>
+      </v-card>
+    </div>
+  </template>
+</template>
+
+<script setup>
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+    tooltip: { type: String, required: true },
+    btn_image: { type: String, required: true },
+  })
+
+  const display_options = ref(false)
+
+  function toggleOptions() {
+    display_options.value = !display_options.value
+  }
+</script>
+
+<style scoped>
+  .menu-item {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition:
+      transform 0.3s ease,
+      opacity 0.3s ease;
+  }
+
+  .menu-options {
+    position: absolute;
+    top: 50%;
+    left: 430%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    z-index: 10;
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+    min-width: 150px;
+    max-width: 320px;
+    padding: 8px 0;
+    overflow: hidden;
+  }
+
+  .menu-options ::v-deep(v-list-item) {
+    padding: 10px 16px;
+    white-space: nowrap; /* Empêche les retours à la ligne */
+  }
+
+  .menu-options ::v-deep(v-list-item:hover) {
+    background-color: #f5f5f5;
+    cursor: pointer;
+  }
+</style>

package/components/EdgedCurve/EdgesOptions.vue

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

package/components/EdgedCurve/PointsOptions.vue

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

package/components/Generic/Mesh/EdgesOptions.vue

@@ -0,0 +1,48 @@
+<template>
+  <ContextMenuItem
+    :itemProps="props.itemProps"
+    tooltip="Edges options"
+    :btn_image="props.btn_image"
+  >
+    <template #options>
+      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <template v-if="visibility">
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+        />
+      </template>
+    </template>
+  </ContextMenuItem>
+</template>
+
+<script setup>
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+    btn_image: { type: String, required: true },
+  })
+
+  const id = toRef(() => props.itemProps.id)
+
+  const dataStyleStore = useDataStyleStore()
+
+  const visibility = computed({
+    get: () => dataStyleStore.edgesVisibility(id.value),
+    set: (newValue) => dataStyleStore.setEdgesVisibility(id.value, newValue),
+  })
+  const size = computed({
+    get: () => dataStyleStore.edgesSize(id.value),
+    set: (newValue) => dataStyleStore.setEdgesSize(id.value, newValue),
+  })
+  const coloring_style_key = computed({
+    get: () => dataStyleStore.edgesActiveColoring(id.value),
+    set: (newValue) => {
+      dataStyleStore.setEdgesActiveColoring(id.value, newValue)
+    },
+  })
+  const color = computed({
+    get: () => dataStyleStore.edgesColor(id.value),
+    set: (newValue) => dataStyleStore.setEdgesColor(id.value, newValue),
+  })
+</script>

package/components/Generic/Mesh/PointsOptions.vue

@@ -0,0 +1,73 @@
+<template>
+  <ViewerContextMenuItem
+    :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-col>
+        </v-row>
+      </template>
+    </template>
+  </ViewerContextMenuItem>
+</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/Generic/Mesh/PolygonsOptions.vue

@@ -0,0 +1,65 @@
+<template>
+  <ContextMenuItem
+    :itemProps="props.itemProps"
+    :tooltip="props.tooltip"
+    :btn_image="props.btn_image"
+  >
+    <template #options>
+      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+      <template v-if="visibility">
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+          v-model:textures="textures"
+          v-model:vertex_attribute="vertex_attribute"
+          v-model:polygon_attribute="polygon_attribute"
+        />
+      </template>
+    </template>
+  </ContextMenuItem>
+</template>
+
+<script setup>
+  const dataStyleStore = useDataStyleStore()
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+    btn_image: { type: String, required: true },
+    tooltip: { type: String, required: false, default: "Polygons options" },
+  })
+
+  const id = toRef(() => props.itemProps.id)
+
+  const visibility = computed({
+    get: () => dataStyleStore.polygonsVisibility(id.value),
+    set: (newValue) => dataStyleStore.setPolygonsVisibility(id.value, newValue),
+  })
+  const coloring_style_key = computed({
+    get: () => dataStyleStore.polygonsActiveColoring(id.value),
+    set: (newValue) =>
+      dataStyleStore.setPolygonsActiveColoring(id.value, newValue),
+  })
+  const color = computed({
+    get: () => dataStyleStore.polygonsColor(id.value),
+    set: (newValue) => dataStyleStore.setPolygonsColor(id.value, newValue),
+  })
+  const textures = computed({
+    get: () => dataStyleStore.polygonsTextures(id.value),
+    set: (newValue) => dataStyleStore.setPolygonsTextures(id.value, newValue),
+  })
+  const vertex_attribute = computed({
+    get: () => dataStyleStore.polygonsVertexAttribute(id.value),
+    set: (newValue) => {
+      console.log("setPolygonsVertexAttribute", id.value, newValue)
+      dataStyleStore.setPolygonsVertexAttribute(id.value, newValue)
+    },
+  })
+  const polygon_attribute = computed({
+    get: () => dataStyleStore.polygonsPolygonAttribute(id.value),
+    set: (newValue) => {
+      console.log("setPolygonsPolygonAttribute", id.value, newValue)
+      dataStyleStore.setPolygonsPolygonAttribute(id.value, newValue)
+    },
+  })
+</script>

package/components/Generic/Mesh/PolyhedraOptions.vue

@@ -0,0 +1,58 @@
+<template>
+  <ContextMenuItem
+    :itemProps="props.itemProps"
+    :tooltip="props.tooltip"
+    :btn_image="props.btn_image"
+  >
+    <template #options>
+      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+
+      <template v-if="visibility">
+        <ViewerOptionsColoringTypeSelector
+          :id="id"
+          v-model:coloring_style_key="coloring_style_key"
+          v-model:color="color"
+          v-model:vertex_attribute="vertex_attribute"
+          v-model:polyhedron_attribute="polyhedron_attribute"
+        />
+      </template>
+    </template>
+  </ContextMenuItem>
+</template>
+
+<script setup>
+  const dataStyleStore = useDataStyleStore()
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+    btn_image: { type: String, required: true },
+    tooltip: { type: String, required: false, default: "Polyhedra options" },
+  })
+
+  const id = toRef(() => props.itemProps.id)
+
+  const visibility = computed({
+    get: () => dataStyleStore.polyhedraVisibility(id.value),
+    set: (newValue) =>
+      dataStyleStore.setPolyhedraVisibility(id.value, newValue),
+  })
+  const coloring_style_key = computed({
+    get: () => dataStyleStore.polyhedraActiveColoring(id.value),
+    set: (newValue) =>
+      dataStyleStore.setPolyhedraActiveColoring(id.value, newValue),
+  })
+  const color = computed({
+    get: () => dataStyleStore.polyhedraColor(id.value),
+    set: (newValue) => dataStyleStore.setPolyhedraColor(id.value, newValue),
+  })
+  const vertex_attribute = computed({
+    get: () => dataStyleStore.polyhedraVertexAttribute(id.value),
+    set: (newValue) =>
+      dataStyleStore.setPolyhedraVertexAttribute(id.value, newValue),
+  })
+  const polyhedron_attribute = computed({
+    get: () => dataStyleStore.polyhedraPolyhedronAttribute(id.value),
+    set: (newValue) =>
+      dataStyleStore.setPolyhedraPolyhedronAttribute(id.value, newValue),
+  })
+</script>

package/components/Generic/Model/EdgesOptions.vue

@@ -0,0 +1,29 @@
+<template>
+  <ContextMenuItem
+    :itemProps="itemProps"
+    tooltip="Edges options"
+    :btn_image="SurfaceEdges"
+  >
+    <template #options>
+      <ViewerOptionsVisibilitySwitch v-model="visibility" />
+    </template>
+  </ContextMenuItem>
+</template>
+
+<script setup>
+  import SurfaceEdges from "@ogw_f/assets/viewer_svgs/surface_edges.svg"
+
+  const props = defineProps({
+    itemProps: { type: Object, required: true },
+    btn_image: { type: String, required: true },
+  })
+
+  const id = toRef(() => props.itemProps.id)
+  const dataStyleStore = useDataStyleStore()
+
+  const visibility = computed({
+    get: () => dataStyleStore.modelEdgesVisibility(id.value),
+    set: (newValue) =>
+      dataStyleStore.setModelEdgesVisibility(id.value, newValue),
+  })
+</script>

package/components/Generic/Model/PointsOptions.vue

@@ -0,0 +1,53 @@
+<template>
+  <ContextMenuItem
+    :itemProps="props.itemProps"
+    tooltip="Points options"
+    :btn_image="SurfacePoints"
+  >
+    <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>
+      </template>
+    </template>
+  </ContextMenuItem>
+</template>
+
+<script setup>
+  import SurfacePoints from "@ogw_f/assets/viewer_svgs/surface_points.svg"
+
+  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.modelPointsVisibility(id.value),
+    set: (newValue) =>
+      dataStyleStore.setModelPointsVisibility(id.value, newValue),
+  })
+  const size = computed({
+    get: () => dataStyleStore.modelPointsSize(id.value),
+    set: (newValue) => dataStyleStore.setModelPointsSize(id.value, newValue),
+  })
+</script>

package/components/Grid/2D/CellsOptions.vue

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

package/components/Grid/2D/EdgesOptions.vue

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

package/components/Grid/2D/PointsOptions.vue

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

package/components/Grid/3D/CellsOptions.vue

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

package/components/Grid/3D/EdgesOptions.vue

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

package/components/Grid/3D/FacetsOptions.vue

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

package/components/Grid/3D/PointsOptions.vue

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

package/components/HybridRenderingView.vue

@@ -0,0 +1,41 @@
+<template>
+  <ClientOnly>
+    <div style="position: relative; width: 100%; height: calc(100vh - 75px)">
+      <VeaseViewToolbar />
+      <slot name="ui"></slot>
+      <v-col
+        ref="viewer"
+        style="
+          overflow: hidden;
+          position: relative;
+          z-index: 0;
+          height: 100%;
+          width: 100%;
+        "
+        class="pa-0"
+        @click="get_x_y"
+        @keydown.esc="viewer_store.toggle_picking_mode(false)"
+      />
+    </div>
+  </ClientOnly>
+</template>
+
+<script setup>
+  const container = useTemplateRef("viewer")
+  const hybridViewerStore = useHybridViewerStore()
+
+  const { windowWidth, windowHeight } = useWindowSize()
+  const { width, height } = useElementSize(container)
+
+  watch([windowWidth, windowHeight, height, width], () => {
+    hybridViewerStore.resize(width.value, height.value)
+  })
+
+  onMounted(async () => {
+    if (import.meta.client) {
+      await hybridViewerStore.initHybridViewer()
+      await nextTick()
+      hybridViewerStore.setContainer(container)
+    }
+  })
+</script>

package/components/HybridSolid/EdgesOptions.vue

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

package/components/HybridSolid/PointsOptions.vue

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

package/components/HybridSolid/PolygonsOptions.vue

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

package/components/HybridSolid/PolyhedraOptions.vue

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