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

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/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/VeaseViewToolbar.vue

@@ -0,0 +1,107 @@
+<template>
+  <v-container :class="[$style.floatToolbar, 'pa-0']" width="auto">
+    <v-row
+      v-for="camera_option in camera_options"
+      :key="camera_option.icon"
+      dense
+    >
+      <v-col>
+        <v-btn
+          density="comfortable"
+          icon
+          @click.stop="camera_option.action"
+          v-tooltip:left="camera_option.tooltip"
+        >
+          <v-icon :icon="camera_option.icon" size="32" />
+        </v-btn>
+      </v-col>
+    </v-row>
+  </v-container>
+  <Screenshot :show_dialog="take_screenshot" @close="take_screenshot = false" />
+  <ZScaling
+    v-if="showZScaling"
+    v-model="zScale"
+    :width="400"
+    @close="handleZScalingClose"
+  />
+</template>
+
+<script setup>
+  import schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json"
+
+  const hybridViewerStore = useHybridViewerStore()
+  const take_screenshot = ref(false)
+  const showZScaling = ref(false)
+  const grid_scale = ref(false)
+  const zScale = ref(hybridViewerStore.zScale)
+
+  watch(
+    () => hybridViewerStore.zScale,
+    (newVal) => {
+      zScale.value = newVal
+    },
+  )
+
+  const handleZScalingClose = async () => {
+    await hybridViewerStore.setZScaling(zScale.value)
+    showZScaling.value = false
+  }
+
+  const camera_options = [
+    {
+      tooltip: "Reset camera",
+      icon: "mdi-cube-scan",
+      action: () => {
+        const { genericRenderWindow } = storeToRefs(hybridViewerStore)
+        const renderWindow = genericRenderWindow.value.value.getRenderWindow()
+        const renderer = renderWindow.getRenderers()[0]
+        renderer.resetCamera()
+        renderWindow.render()
+        hybridViewerStore.syncRemoteCamera()
+      },
+    },
+    {
+      tooltip: "Take a screenshot",
+      icon: "mdi-camera",
+      action: () => {
+        take_screenshot.value = !take_screenshot.value
+      },
+    },
+    {
+      tooltip: "Toggle grid scale",
+      icon: "mdi-ruler-square",
+      action: () => {
+        viewer_call(
+          {
+            schema: schemas.opengeodeweb_viewer.viewer.grid_scale,
+            params: {
+              visibility: !grid_scale.value,
+            },
+          },
+          {
+            response_function: () => {
+              grid_scale.value = !grid_scale.value
+            },
+          },
+        )
+      },
+    },
+    {
+      tooltip: "Z Scaling Control",
+      icon: "mdi-sort",
+      action: () => {
+        showZScaling.value = !showZScaling.value
+      },
+    },
+  ]
+</script>
+
+<style module>
+  .floatToolbar {
+    position: absolute;
+    z-index: 2;
+    right: 20px;
+    top: 20px;
+    background-color: rgba(0, 0, 0, 0);
+  }
+</style>

package/components/Viewer/BreadCrumb.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-breadcrumbs class="mb-n10 breadcrumb-container">
+    <div class="d-flex align-center gap-2 ml-2 mt-2 mb-1">
+      <v-menu v-if="treeviewStore.isAdditionnalTreeDisplayed" offset-y>
+        <template v-slot:activator="{ props }">
+          <v-btn
+            icon
+            variant="text"
+            size="medium"
+            v-bind="props"
+            @click="goBackToFileTree"
+          >
+            <v-icon size="large">mdi-file-tree</v-icon>
+          </v-btn>
+          <span class="text-h5 font-weight-bold">/</span>
+          <v-icon size="x-large">
+            {{
+              selectedTree && selectedTree.icon
+                ? selectedTree.icon
+                : "mdi-shape-outline"
+            }}
+          </v-icon>
+          <span class="text-subtitle-1 font-weight-regular align-center mt-1">
+            Model Explorer ({{ metaDatas.displayed_name }})
+          </span>
+        </template>
+      </v-menu>
+
+      <div v-else class="d-flex align-center gap-2">
+        <v-icon size="large">mdi-file-tree</v-icon>
+        <span class="text-subtitle-1 font-weight-regular align-center mt-1">
+          Objects
+        </span>
+      </div>
+    </div>
+  </v-breadcrumbs>
+</template>
+
+<script setup>
+  const treeviewStore = use_treeview_store()
+
+  const selectedTree = computed(() => treeviewStore.selectedTree)
+
+  const goBackToFileTree = () => {
+    treeviewStore.displayFileTree()
+  }
+
+  const model_id = computed(() => treeviewStore.model_id)
+
+  const metaDatas = computed(() =>
+    useDataBaseStore().itemMetaDatas(model_id.value),
+  )
+</script>
+
+<style scoped>
+  .breadcrumb-container {
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+</style>

package/components/Viewer/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/Viewer/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/Viewer/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/Viewer/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/Viewer/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/Viewer/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/Viewer/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/Viewer/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/Viewer/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/Viewer/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>