Merge pull request #177 from Geoportail-Luxembourg/GSLUX-769-fix-prof…

…ile-measures GSLUX-769: FIX for profile measures in v3
Geoportail-Luxembourg · Dec 4, 2024 · 20f3c10 · 20f3c10
2 parents 4cf9e8b + 549f5ac
commit 20f3c10
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 23 deletions.
diff --git a/src/bundle/components/profile_v3/profile-measures_v3.vue b/src/bundle/components/profile_v3/profile-measures_v3.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 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)
-const activateProfile = computed(
-  () =>
-    feature_v3.value &&
-    feature_v3.value.getGeometry()?.getType() === 'LineString'
-)
+
+function onClose() {
+  closeEvent_v3.value = Date.now()
+  feature_v3.value = undefined // Reset profile data and graph when closing profile measures
+}
 
 /**
  * This component is a wrapper to use original <feature-elevation-profile> in v3
@@ -21,9 +20,5 @@ const activateProfile = computed(
 </script>
 
 <template>
-  <feature-elevation-profile
-    v-if="activateProfile"
-    :feature="feature_v3"
-    @close="() => (closeEvent_v3 = Date.now())"
-  />
+  <feature-elevation-profile :feature="feature_v3" @close="onClose" />
 </template>
diff --git a/src/bundle/stores/profile-draw_v3.store.ts b/src/bundle/stores/profile-draw_v3.store.ts
@@ -1,6 +1,6 @@
 import { Ref, ref } from 'vue'
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { Feature, Map } from 'ol'
+import { Map } from 'ol'
 
 import { DrawnFeature } from '@/services/draw/drawn-feature'
 import { ProfileData } from '@/components/common/graph/elevation-profile'
@@ -22,7 +22,7 @@ export const useProfileDrawv3Store = defineStore(
 
     function setProfileData(
       map: Map,
-      feature: Feature & DrawnFeature,
+      feature: DrawnFeature,
       profileData: ProfileData
     ) {
       feature_v3.value = undefined

diff --git a/src/bundle/stores/profile-measures_v3.store.ts b/src/bundle/stores/profile-measures_v3.store.ts
@@ -1,6 +1,6 @@
 import { Ref, ref } from 'vue'
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { Feature, Map } from 'ol'
+import { Map } from 'ol'
 
 import { DrawnFeature } from '@/services/draw/drawn-feature'
 import { ProfileData } from '@/components/common/graph/elevation-profile'
@@ -28,7 +28,7 @@ export const useProfileMeasuresv3Store = defineStore(
 
     function setProfileData(
       map: Map,
-      feature: Feature & DrawnFeature,
+      feature: DrawnFeature,
       profileData: ProfileData
     ) {
       feature_v3.value = undefined

diff --git a/src/components/feature-elevation-profile/feature-elevation-profile.vue b/src/components/feature-elevation-profile/feature-elevation-profile.vue
@@ -84,6 +84,8 @@ watchEffect(() => {
   if (props.feature && !props.feature.profileData) {
     profileData.value = undefined // Force refresh the graph
     props.feature?.getProfile().then(data => (profileData.value = data))
+  } else {
+    profileData.value = undefined
   }
 })
 

diff --git a/src/composables/map/profile-position.composable.ts b/src/composables/map/profile-position.composable.ts
@@ -10,7 +10,7 @@ import {
 } from 'vue'
 import { storeToRefs } from 'pinia'
 import { Map, MapBrowserEvent } from 'ol'
-import { EventsKey, listen, ListenerFunction, unlistenByKey } from 'ol/events'
+import { EventsKey, listen, unlistenByKey } from 'ol/events'
 import { LineString, Point } from 'ol/geom'
 import GeometryLayout from 'ol/geom/GeometryLayout'
 import { transform } from 'ol/proj'
@@ -51,14 +51,17 @@ export default function useProfilePosition(
   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)
+  const throttledPointerMove = throttle(evt => onPointerMove(evt), 15) // Keep fn def as const for unlisten
 
   let map: Map
   let listenerIdPointerMove: EventsKey | undefined
 
   onMounted(() => {
     map = useMap().getOlMap()
     createLayerFeaturePosition()
+    attachPointerMove()
   })
+
   onUnmounted(() => detachPointerMove())
 
   watch(
@@ -75,7 +78,6 @@ export default function useProfilePosition(
   watch(profileData, profileData => {
     if (profileData) {
       constructProfileLine(profileData)
-      attachPointerMove()
     }
   })
 
@@ -130,20 +132,18 @@ export default function useProfilePosition(
    */
   function attachPointerMove() {
     if (listenerIdPointerMove === undefined) {
-      listenerIdPointerMove = listen(
-        map,
-        'pointermove',
-        <ListenerFunction>throttle(evt => onPointerMove(evt), 20)
-      )
+      listenerIdPointerMove = listen(map, 'pointermove', throttledPointerMove)
     }
   }
 
   /**
-   * Unlisten 'pointermove' event on map
+   * Unlisten 'pointermove' event on map and remove geomarker
    */
   function detachPointerMove() {
     if (listenerIdPointerMove) {
       unlistenByKey(listenerIdPointerMove)
+      listenerIdPointerMove = undefined
+
       overlay?.removeGeoMarker()
     }
   }