GSLUX-767: Support for profile routing in v3

src/bundle/components/profile_v3/profile-infos_v3.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import FeatureElevationProfile from '@/components/feature-elevation-profile/feature-elevation-profile.vue'
+import { useProfileInfosv3Store } from '@/bundle/stores/profile-infos_v3.store'
+
+defineProps<{
+  featureId: number
+}>()
+
+const profilev3Store = useProfileInfosv3Store()
+const { feature_v3, activePositioning_v3 } = storeToRefs(profilev3Store)
+const activateProfile = computed(
+  () =>
+    feature_v3.value &&
+    feature_v3.value.getGeometry()?.getType() === 'LineString'
+)
+
+/**
+ * This component is a wrapper to use original <feature-elevation-profile> in v3
+ *
+ * @deprecated this component is meant to be removed when v4 is fully operational
+ */
+</script>
+
+<template>
+  <feature-elevation-profile
+    v-if="activateProfile"
+    :feature="feature_v3"
+    :enableExportCSV="true"
+    :activatePositioning="activePositioning_v3"
+  />
+</template>

src/bundle/components/profile_v3/profile-routing_v3.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import FeatureElevationProfile from '@/components/feature-elevation-profile/feature-elevation-profile.vue'
+import { useProfileRoutingv3Store } from '../../stores/profile-routing_v3.store'
+
+const profilev3Store = useProfileRoutingv3Store()
+const { feature_v3, activePositioning_v3 } = storeToRefs(profilev3Store)
+const activateProfile = computed(
+  () =>
+    feature_v3.value &&
+    feature_v3.value.getGeometry()?.getType() === 'LineString'
+)
+
+/**
+ * This component is a wrapper to use original <feature-elevation-profile> in v3
+ *
+ * @deprecated this component is meant to be removed when v4 is fully operational
+ */
+</script>
+
+<template>
+  <feature-elevation-profile
+    v-if="activateProfile"
+    :feature="feature_v3"
+    :enableExportCSV="false"
+    :activatePositioning="activePositioning_v3"
+  />
+</template>

src/bundle/lib.ts

@@ -1,4 +1,10 @@
-import { h, getCurrentInstance, createApp, watch } from 'vue'
+import {
+  h,
+  getCurrentInstance,
+  createApp,
+  watch,
+  // defineCustomElement, // TODO: Update vue package and use this defineCustomElement
+} from 'vue'
 import VueDOMPurifyHTML from 'vue-dompurify-html'
 import { createPinia, storeToRefs } from 'pinia'
 
@@ -20,6 +26,8 @@ import LayerMetadata from '@/components/layer-metadata/layer-metadata.vue'
 import HeaderBar from '@/components/header-bar/header-bar.vue'
 import ProfileDraw from './components/profile_v3/profile-draw_v3.vue'
 import ProfileMeasures from './components/profile_v3/profile-measures_v3.vue'
+import ProfileRouting from './components/profile_v3/profile-routing_v3.vue'
+import ProfileInfos from './components/profile_v3/profile-infos_v3.vue'
 import FooterBar from '@/components/footer/footer-bar.vue'
 import ToolbarDraw from '@/components/footer/toolbar-draw.vue'
 import LayerPanel from '@/components/layer-panel/layer-panel.vue'
@@ -37,6 +45,8 @@ import { useAppStore } from '@/stores/app.store'
 import { useMapStore } from '@/stores/map.store'
 import { useProfileDrawv3Store } from './stores/profile-draw_v3.store'
 import { useProfileMeasuresv3Store } from './stores/profile-measures_v3.store'
+import { useProfileRoutingv3Store } from './stores/profile-routing_v3.store'
+import { useProfileInfosv3Store } from './stores/profile-infos_v3.store'
 import { useDrawStore } from '@/stores/draw.store'
 import { useStyleStore } from '@/stores/style.store'
 import { useThemeStore } from '@/stores/config.store'
@@ -135,6 +145,8 @@ export {
   HeaderBar,
   ProfileDraw,
   ProfileMeasures,
+  ProfileRouting,
+  ProfileInfos,
   FooterBar,
   ToolbarDraw,
   LayerPanel,
@@ -154,6 +166,8 @@ export {
   useMapStore,
   useProfileDrawv3Store,
   useProfileMeasuresv3Store,
+  useProfileRoutingv3Store,
+  useProfileInfosv3Store,
   useDrawStore,
   useStyleStore,
   useThemeStore,

src/bundle/stores/profile-infos_v3.store.ts

@@ -0,0 +1,55 @@
+import { Ref, ref } from 'vue'
+import { acceptHMRUpdate, defineStore } from 'pinia'
+import { Map } from 'ol'
+
+import { DrawnFeature } from '@/services/draw/drawn-feature'
+import { ProfileData } from '@/components/common/graph/elevation-profile'
+
+/**
+ * This store is a wrapper to use original <feature-elevation-profile> in v3.
+ * This store is used by any drawn feature graph v4 component in the v3 drawing panel.
+ *
+ * @deprecated this store is meant to be removed when v4 is fully operational
+ */
+export const useProfileInfosv3Store = defineStore(
+  'profile-infos-v3',
+  () => {
+    /**
+     * Emulate a DrawnFeature with feature coming from v3
+     * @deprecated this property is meant to be removed when Drawing and Measures in v4 are fully operational
+     */
+    const feature_v3: Ref<DrawnFeature | undefined> = ref(undefined)
+
+    /**
+     * Activate or deactivate positioning for infos, deactivation is need for eg.
+     * when infos panel is closed but the features are still on the map,
+     * in this case, we need to deactivate the geomarker (as we don't see the profile anymore)
+     */
+    const activePositioning_v3 = ref(true)
+
+    function setProfileData(
+      map: Map,
+      feature: DrawnFeature,
+      profileData: ProfileData
+    ) {
+      feature_v3.value = undefined
+      feature['map'] = map // Needed by CSV Exporter
+      feature['label'] = feature['label'] ?? 'mnt' // Needed by CSV Exporter (= fileName)
+      feature['getProfile'] = () => Promise.resolve(profileData)
+      feature_v3.value = feature
+    }
+
+    return {
+      feature_v3,
+      activePositioning_v3,
+      setProfileData,
+    }
+  },
+  {}
+)
+
+if (import.meta.hot) {
+  import.meta.hot.accept(
+    acceptHMRUpdate(useProfileInfosv3Store, import.meta.hot)
+  )
+}

src/bundle/stores/profile-routing_v3.store.ts

@@ -0,0 +1,55 @@
+import { Ref, ref } from 'vue'
+import { acceptHMRUpdate, defineStore } from 'pinia'
+import { Map } from 'ol'
+
+import { DrawnFeature } from '@/services/draw/drawn-feature'
+import { ProfileData } from '@/components/common/graph/elevation-profile'
+
+/**
+ * This store is a wrapper to use original <feature-elevation-profile> in v3.
+ * This store is used by any drawn feature graph v4 component in the v3 drawing panel.
+ *
+ * @deprecated this store is meant to be removed when v4 is fully operational
+ */
+export const useProfileRoutingv3Store = defineStore(
+  'profile-routing-v3',
+  () => {
+    /**
+     * Emulate a DrawnFeature with feature coming from v3
+     * @deprecated this property is meant to be removed when Drawing and Measures in v4 are fully operational
+     */
+    const feature_v3: Ref<DrawnFeature | undefined> = ref(undefined)
+
+    /**
+     * Activate or deactivate positioning for routing, deactivation is need for eg.
+     * when routing panel is closed but the routing features are still on the map,
+     * in this case, we need to deactivate the geomarker (as we don't see the profile anymore)
+     */
+    const activePositioning_v3 = ref(true)
+
+    function setProfileData(
+      map: Map,
+      feature: DrawnFeature,
+      profileData: ProfileData
+    ) {
+      feature_v3.value = undefined
+      feature['map'] = map // Needed by CSV Exporter
+      feature['label'] = feature['label'] ?? 'mnt' // Needed by CSV Exporter (= fileName)
+      feature['getProfile'] = () => Promise.resolve(profileData)
+      feature_v3.value = feature
+    }
+
+    return {
+      feature_v3,
+      activePositioning_v3,
+      setProfileData,
+    }
+  },
+  {}
+)
+
+if (import.meta.hot) {
+  import.meta.hot.accept(
+    acceptHMRUpdate(useProfileRoutingv3Store, import.meta.hot)
+  )
+}

src/components/feature-elevation-profile/feature-elevation-profile.vue

@@ -34,11 +34,22 @@ defineEmits<{
   (e: 'close'): void
 }>()
 
-const props = defineProps<{
-  feature: DrawnFeature | undefined
-}>()
+const props = withDefaults(
+  defineProps<{
+    feature: DrawnFeature | undefined
+    enableExportCSV?: boolean
+    activatePositioning?: boolean
+  }>(),
+  {
+    enableExportCSV: true,
+    activatePositioning: true,
+  }
+)
 
-const profilePosition = useProfilePosition(undefined)
+const profilePosition = useProfilePosition(
+  undefined,
+  () => props.activatePositioning
+)
 const profilePositionStore = useProfilePositionStore()
 const { t } = useTranslation()
 
@@ -125,14 +136,16 @@ function onOutProfile() {
           </span>
         </template>
       </div>
+
       <button
         data-cy="featItemProfileCSV"
         class="profile-export no-print text-secondary hover:underline"
-        v-if="profileData"
+        v-if="enableExportCSV && profileData"
         @click="() => exportCSV()"
       >
         {{ t('Export csv') }}
       </button>
+
       <!-- Display close button only if there is a listener "onClose" in the parent -->
       <button
         v-if="hasCloseListener"

src/composables/map/profile-position.composable.ts

@@ -1,4 +1,13 @@
-import { onMounted, onUnmounted, ref, ShallowRef, shallowRef, watch } from 'vue'
+import {
+  MaybeRefOrGetter,
+  onMounted,
+  onUnmounted,
+  ref,
+  ShallowRef,
+  shallowRef,
+  toValue,
+  watch,
+} from 'vue'
 import { storeToRefs } from 'pinia'
 import { Map, MapBrowserEvent } from 'ol'
 import { EventsKey, listen, ListenerFunction, unlistenByKey } from 'ol/events'
@@ -23,10 +32,14 @@ let overlay: PositionVectorLayer | undefined // Shared overlay between all profi
  *
  * NB.If edition mode is 'editLine', the marker is hidden because there is already a default blue marker
  * when modifying feature is active.
- * @param dataset
+ * @param dataset Profile data used to construct and handle the positioning (can be set afterwards by setting directly useProfilePosition().profileData)
+ * @param activatePositioning Activate or deactivate positioning (show or hide geomarker), in some case, we need to hide temporarily the geomarker (because the profile line is hidden, or because user is starting a new drawing, etc...)
  * @returns
  */
-export default function useProfilePosition(dataset?: ProfileData) {
+export default function useProfilePosition(
+  dataset?: ProfileData,
+  activatePositioning: MaybeRefOrGetter<boolean | undefined> = true
+) {
   const openLayers = useOpenLayers()
   const profilePositionStore = useProfilePositionStore()
   const drawStore = useDrawStore()
@@ -37,6 +50,7 @@ export default function useProfilePosition(dataset?: ProfileData) {
     shallowRef(undefined) // The value to higlight on the graph
   const displayGeoMarker = ref(true) // deactivate geomarker when mode edition
   const virtualLineProfile = new LineString([0, 0], GeometryLayout.XYM) // don't add to the map, it is used to compute the distance between the user cursor and the feature (represented by the virtual line)
+  const activePositioning = ref(true)
 
   let map: Map
   let listenerIdPointerMove: EventsKey | undefined
@@ -47,6 +61,17 @@ export default function useProfilePosition(dataset?: ProfileData) {
   })
   onUnmounted(() => detachPointerMove())
 
+  watch(
+    () => toValue(activatePositioning),
+    active => {
+      activePositioning.value = active ?? true
+
+      if (!active) {
+        overlay?.removeGeoMarker()
+      }
+    }
+  )
+
   watch(profileData, profileData => {
     if (profileData) {
       constructProfileLine(profileData)
@@ -55,7 +80,13 @@ export default function useProfilePosition(dataset?: ProfileData) {
   })
 
   watch([x, y], ([x, y]) => {
-    if (!drawStateActive.value && x && y && displayGeoMarker.value) {
+    if (
+      activePositioning.value &&
+      !drawStateActive.value &&
+      x &&
+      y &&
+      displayGeoMarker.value
+    ) {
       overlay?.moveGeoMarker(x, y)
     } else {
       overlay?.removeGeoMarker()
@@ -132,7 +163,7 @@ export default function useProfilePosition(dataset?: ProfileData) {
     }
 
     // Ignore pointerMove for profile if user is drawing a new geom
-    if (drawStateActive.value) {
+    if (drawStateActive.value || !activePositioning.value) {
       return
     }
 

src/services/ol-layer/ol-layer-feature-position.helper.ts

@@ -7,7 +7,7 @@ import Feature from 'ol/Feature'
 import { OlLayer } from './ol-layer.model'
 import { getStyleFeaturePosition } from './styles.helper'
 
-export const DEFAULT_LAYER_ZINDEX = 10000
+export const DEFAULT_LAYER_ZINDEX = 1002
 export const FEATURE_LAYER_TYPE = 'featurePositionLayer'
 
 export class PositionVectorLayer extends VectorLayer<VectorSource<Geometry>> {
@@ -16,6 +16,7 @@ export class PositionVectorLayer extends VectorLayer<VectorSource<Geometry>> {
   constructor(options: Options<VectorSource<Geometry>>) {
     const source = new VectorSource({
       features: [], // geoMarker to be added here (@see createGeoMarker())
+      useSpatialIndex: false,
     })
 
     super({ ...options, ...{ source } })
@@ -45,8 +46,11 @@ class OlLayerFeaturePositionHelper {
   createOlLayer(): OlLayer {
     const style = getStyleFeaturePosition()
     const olLayer = new PositionVectorLayer({
+      declutter: true, // always on top, overpass zindex (needed in v3 for profile/routing)
       zIndex: DEFAULT_LAYER_ZINDEX,
       style,
+      updateWhileAnimating: true,
+      updateWhileInteracting: true,
     })
 
     olLayer.set('cyLayerType', FEATURE_LAYER_TYPE)