feat: adaptions for v3

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+
+import FeatureElevationProfile from '@/components/feature-elevation-profile/feature-elevation-profile.vue'
+import { useProfileDrawv3Store } from '../../stores/profile-draw_v3.store'
+
+const profilev3Store = useProfileDrawv3Store()
+const { feature_v3 } = storeToRefs(profilev3Store)
+
+/**
+ * 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 :feature="feature_v3" />
+</template>

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

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+
+import FeatureElevationProfile from '@/components/feature-elevation-profile/feature-elevation-profile.vue'
+import { useProfileMeasuresv3Store } from '../../stores/profile-measures_v3.store'
+
+const profilev3Store = useProfileMeasuresv3Store()
+const { closeEvent_v3, feature_v3 } = storeToRefs(profilev3Store)
+
+/**
+ * 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
+    :feature="feature_v3"
+    @close="() => (closeEvent_v3 = Date.now())"
+  />
+</template>

src/bundle/lib.ts

@@ -18,6 +18,8 @@ import BackgroundSelector from '@/components/background-selector/background-sele
 import RemoteLayers from '@/components/remote-layers/remote-layers.vue'
 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 FooterBar from '@/components/footer/footer-bar.vue'
 import ToolbarDraw from '@/components/footer/toolbar-draw.vue'
 import LayerPanel from '@/components/layer-panel/layer-panel.vue'
@@ -33,6 +35,9 @@ import useOffline from '@/composables/offline/offline.composable'
 import useOfflineLayers from '@/composables/offline/offline-layers.composable'
 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 { useDrawStore } from '@/stores/draw.store'
 import { useStyleStore } from '@/stores/style.store'
 import { useThemeStore } from '@/stores/config.store'
 import { useUserManagerStore } from '@/stores/user-manager.store'
@@ -55,6 +60,7 @@ import backend from 'i18next-http-backend'
 import I18NextVue from 'i18next-vue'
 import formatLengthDirective from '@/directives/format-length.directive'
 import formatAreaDirective from '@/directives/format-area.directive'
+import formatMeasureDirective from '@/directives/format-measure.directive'
 
 import App from '../App.vue'
 
@@ -87,6 +93,7 @@ export default function useLuxLib(options: LuxLibOptions) {
   app.use(VueDOMPurifyHTML)
   app.use(formatLengthDirective)
   app.use(formatAreaDirective)
+  app.use(formatMeasureDirective)
 
   const createElementInstance = (component = {}, app = null) => {
     return defineCustomElement(
@@ -130,6 +137,8 @@ export {
   RemoteLayers,
   LayerMetadata,
   HeaderBar,
+  ProfileDraw,
+  ProfileMeasures,
   FooterBar,
   ToolbarDraw,
   LayerPanel,
@@ -147,6 +156,9 @@ export {
   useAppStore,
   useBackgroundLayer,
   useMapStore,
+  useProfileDrawv3Store,
+  useProfileMeasuresv3Store,
+  useDrawStore,
   useStyleStore,
   useThemeStore,
   useUserManagerStore,

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

@@ -0,0 +1,47 @@
+import { Ref, ref } from 'vue'
+import { acceptHMRUpdate, defineStore } from 'pinia'
+import { Feature, 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 useProfileDrawv3Store = defineStore(
+  'profile-draw-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)
+
+    function setProfileData(
+      map: Map,
+      feature: 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 = <DrawnFeature>feature
+    }
+
+    return {
+      feature_v3,
+      setProfileData,
+    }
+  },
+  {}
+)
+
+if (import.meta.hot) {
+  import.meta.hot.accept(
+    acceptHMRUpdate(useProfileDrawv3Store, import.meta.hot)
+  )
+}

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

@@ -0,0 +1,54 @@
+import { Ref, ref } from 'vue'
+import { acceptHMRUpdate, defineStore } from 'pinia'
+import { Feature, 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 the v4 profile elevation component in v3 Measure tool.
+ *
+ * @deprecated this store is meant to be removed when v4 is fully operational
+ */
+export const useProfileMeasuresv3Store = defineStore(
+  'profile-measures-v3',
+  () => {
+    /**
+     * Emulate closing event as it is impossible to attach onClose event on generated Custom Element with Vuejs
+     * @deprecated this property is meant to be removed when Drawing and Measures in v4 are fully operational
+     */
+    const closeEvent_v3: Ref<number | undefined> = ref(undefined)
+
+    /**
+     * 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)
+
+    function setProfileData(
+      map: Map,
+      feature: 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 = <DrawnFeature>feature
+    }
+
+    return {
+      closeEvent_v3,
+      feature_v3,
+      setProfileData,
+    }
+  },
+  {}
+)
+
+if (import.meta.hot) {
+  import.meta.hot.accept(
+    acceptHMRUpdate(useProfileMeasuresv3Store, import.meta.hot)
+  )
+}

src/components/common/graph/d3-graph-elevation.d.ts

@@ -75,8 +75,8 @@ export interface ProfileFormatter {
   xtick?: (val: number) => string
   ytick?: (val: number) => string
 
-  xlabel: (factor = 1) => string
-  ylabel: (factor = 1) => string
+  xlabel: (factor?: number) => string
+  ylabel: (factor?: number) => string
 }
 
 export interface ProfileOptions {

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

@@ -11,20 +11,23 @@ import {
   ShallowRef,
   shallowRef,
   watch,
+  watchEffect,
 } from 'vue'
 import { useTranslation } from 'i18next-vue'
 import { Feature } from 'ol'
 import { Geometry } from 'ol/geom'
 
-import { useProfilePositionStore } from '@/stores/profile-position.store'
 import ElevationProfile from '@/components/common/graph/elevation-profile.vue'
 import { ProfileData } from '@/components/common/graph/elevation-profile'
+import useProfilePosition from '@/composables/map/profile-position.composable'
+import { useProfilePositionStore } from '@/stores/profile-position.store'
 import { DrawnFeature } from '@/services/draw/drawn-feature'
 import {
   exportFeatureService,
   TFeatExport,
 } from '@/services/export-feature/export-feature.service'
-import useProfilePosition from '@/composables/map/profile-position.composable'
+import { transform } from 'ol/proj'
+import { PROJECTION_LUX } from '@/composables/map/map.composable'
 
 defineEmits<{
   (e: 'close'): void
@@ -34,7 +37,7 @@ const props = defineProps<{
   feature: DrawnFeature | undefined
 }>()
 
-const profilePosition = useProfilePosition()
+const profilePosition = useProfilePosition(undefined)
 const profilePositionStore = useProfilePositionStore()
 const { t } = useTranslation()
 
@@ -59,6 +62,24 @@ onMounted(() => {
     props.feature.getProfile().then(data => (profileData.value = data))
 })
 
+watch(
+  () => props.feature,
+  (feature, featureOld) => {
+    profileData.value = undefined // Force refresh the graph
+
+    if (feature && feature !== featureOld) {
+      feature.getProfile().then(data => (profileData.value = data))
+    }
+  }
+)
+
+watchEffect(() => {
+  if (props.feature && !props.feature.profileData) {
+    profileData.value = undefined // Force refresh the graph
+    props.feature?.getProfile().then(data => (profileData.value = data))
+  }
+})
+
 watch(
   profileData,
   profileData => (profilePosition.profileData.value = profileData)
@@ -75,7 +96,13 @@ function exportCSV() {
 }
 
 function onHoverProfile<T extends { x: number; y: number }>(point: T) {
-  profilePositionStore.setPosition(point.x, point.y)
+  const coords = transform(
+    [point.x, point.y],
+    PROJECTION_LUX,
+    props.feature?.map.getView().getProjection()
+  )
+
+  profilePositionStore.setPosition(coords[0], coords[1])
 }
 
 function onOutProfile() {
@@ -90,14 +117,15 @@ function onOutProfile() {
       <div class="grow cursor-default">
         <template v-if="profileData">
           <span>
-            &Delta; +<span v-format-measure.elevation>{{ elevationGain }}</span>
+            &Delta;+<span v-format-measure.elevation>{{ elevationGain }}</span>
           </span>
           <span>
-            &Delta; <span v-format-measure.elevation>{{ elevationLoss }}</span>
+            &Delta;<span v-format-measure.elevation>{{ elevationLoss }}</span>
           </span>
           <span>
-            &Delta;
-            <span v-format-measure.elevation>{{ cumulativeElevation }}</span>
+            &Delta;<span v-format-measure.elevation>{{
+              cumulativeElevation
+            }}</span>
           </span>
         </template>
       </div>

src/composables/draw/edit.composable.ts

@@ -80,6 +80,7 @@ export default function useEdit() {
 
     listen(modifyInteraction, 'modifyend', event => {
       const feature = (event as ModifyEvent).features.getArray()[0]
+      ;(feature as DrawnFeature).profileData = undefined // Reset the graph
       updateDrawnFeature(feature as DrawnFeature)
     })
   }

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

@@ -14,6 +14,7 @@ import { useProfilePositionStore } from '@/stores/profile-position.store'
 import { LayerFeature } from '@/stores/map.store.model'
 import { useDrawStore } from '@/stores/draw.store'
 import { PositionVectorLayer } from '@/services/ol-layer/ol-layer-feature-position.helper'
+import { throttle } from '@/services/utils'
 
 let overlay: PositionVectorLayer | undefined // Shared overlay between all profile position markers
 
@@ -101,7 +102,7 @@ export default function useProfilePosition(dataset?: ProfileData) {
       listenerIdPointerMove = listen(
         map,
         'pointermove',
-        <ListenerFunction>onPointerMove
+        <ListenerFunction>throttle(evt => onPointerMove(evt), 25)
       )
     }
   }
@@ -144,18 +145,13 @@ export default function useProfilePosition(dataset?: ProfileData) {
 
     if (pixelDist < 64) {
       // Cursor is close enough: display marker (if not edition line mode)
-      const newCoords = transform(
-        <Coordinate>[closestPoint[0], closestPoint[1]],
-        map.getView().getProjection(),
-        PROJECTION_LUX
-      )
       highlightDistance.value = closestPoint[2]
       displayGeoMarker.value = editStateActive.value !== 'editLine'
-      newXGeomarker = newCoords[0]
-      newYGeomarker = newCoords[1]
+      newXGeomarker = closestPoint[0]
+      newYGeomarker = closestPoint[1]
     } else {
       highlightDistance.value = -1
-      displayGeoMarker.value = true // true => to restore default
+      displayGeoMarker.value = true // true => to restore default, this will display the marker if it is a hover on the chart
       newXGeomarker = undefined
       newYGeomarker = undefined
     }

src/services/draw/drawn-feature.ts

@@ -26,6 +26,7 @@ const MYMAPS_SYMBOL_URL = import.meta.env.VITE_SYMBOLS_URL
 const ARROW_URL = MYMAPS_URL + '/getarrow'
 
 export class DrawnFeature extends Feature {
+  // TODO: refactor create a generic type that can be used by Infos panel, Draw, and Measures
   id: number
   label: string
   description: string
@@ -37,7 +38,7 @@ export class DrawnFeature extends Feature {
   featureType: DrawnFeatureType
   featureStyle: DrawnFeatureStyle
   map = useMap().getOlMap()
-  profileData: ProfileData | undefined = undefined
+  profileData: ProfileData | undefined = undefined // Is used by linestring geom
 
   constructor(drawnFeature?: DrawnFeature) {
     if (drawnFeature) {
@@ -56,8 +57,6 @@ export class DrawnFeature extends Feature {
     } else {
       super()
     }
-
-    this.getGeometry()?.on('change', () => (this.profileData = undefined))
   }
 
   /**