wip

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

@@ -1,6 +1,3 @@
-// !!! This is a file ported from v3 and not completely refactored, we accept some linter warnings //
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import 'd3-transition'
 import { bisector, extent } from 'd3-array'
 import { axisBottom, axisLeft } from 'd3-axis'
@@ -14,7 +11,6 @@ import {
   KeyType,
 } from 'd3-selection' // nb. pointer has replaced mouse in last version of d3
 import { area, line } from 'd3-shape'
-import * as olObj from 'ol/obj'
 
 import { Elevations, Poi, ProfileOptions } from './d3-graph-elevation.d'
 
@@ -151,9 +147,9 @@ export default function D3GraphElevation(options: ProfileOptions) {
     ytick: (elevation: number) => String(elevation),
   }
 
-  if (typeof options.formatter !== 'undefined') {
-    olObj.assign(formatter, options.formatter)
-  }
+  // if (typeof options.formatter !== 'undefined') {
+  //   olObj.assign(formatter, options.formatter)
+  // }
 
   const lightXAxis =
     options.lightXAxis !== undefined ? options.lightXAxis : false

src/components/common/graph/d3-graph-elevation.vue

@@ -1,102 +1,58 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { select, Selection } from 'd3-selection'
 import * as olEvents from 'ol/events'
-// import olFeature from 'ol/Feature'
-// import olGeomPoint from 'ol/geom/Point'
 
 import { debounce } from '@/services/utils'
 import D3GraphElevation from './d3-graph-elevation'
-import { Profile, ProfileOptions } from './d3-graph-elevation.d'
-// import { dataset } from './d3-graph-elevation.fixtures' // TODO: Remove dataset from fixtures and use api instead
+import { Elevations, Profile, ProfileOptions } from './d3-graph-elevation.d'
+import { ProfileData } from '@/services/draw/drawn-feature'
+// import { dataset } from './d3-graph-elevation.fixtures' // Use these fixtures instead of api if needed (for dev debug only)
+
+const emit = defineEmits<{
+  (
+    e: 'hover:profile',
+    point: any,
+    dist: number,
+    xUnits: string,
+    elevations: Elevations,
+    yUnits: string
+  ): void
+  (e: 'out:profile'): void
+}>()
 
 const d3 = { select }
 const graph = ref()
-
 const props = withDefaults(
   defineProps<{
     showTooltip?: boolean
-    dataset?: any
+    dataset?: ProfileData
+    highlightDistance?: number
   }>(),
   {
     showTooltip: true,
   }
 )
 
-function removeMeasureTooltip() {
-  // TODO:
-  // if (this.measureTooltipElement_  !== null) {
-  //   this.measureTooltipElement_.parentNode.removeChild(
-  //       this.measureTooltipElement_);
-  //   this.measureTooltipElement_ = null;
-  //   this.measureTooltip_ = null;
-  // }
-}
-
-// function createMeasureTooltip() {
-// TODO:
-// this.removeMeasureTooltip_();
-// this.measureTooltipElement_ = document.createElement('DIV');
-// this.measureTooltipElement_.classList.add('tooltip');
-// this.measureTooltipElement_.classList.add('ngeo-tooltip-measure');
-// this.measureTooltip_ = new olOverlay({
-//   element: this.measureTooltipElement_,
-//   offset: [0, -15],
-//   positioning: 'bottom-center'
-// });
-// this.map_.addOverlay(this.measureTooltip_);
-// }
-
 let profile: Profile, elevationData: any, poiData: any
 let selection: Selection<any, unknown, null, undefined>
-let hoverCallback = () =>
-  // point: any,
-  // dist: number,
-  // xUnits: string,
-  // elevation: Elevations,
-  // yUnits: string
-  {
-    // TODO:
-    if (props.showTooltip) {
-      // An item in the list of points given to the profile.
-      // this['point'] = point;
-      // this.featureOverlay_.clear();
-      // const curPoint = new olGeomPoint([point['x'], point['y']]);
-      // curPoint.transform('EPSG:2169', this.map_.getView().getProjection());
-      // var positionFeature = new olFeature({
-      //   geometry: curPoint
-      // });
-      // this.featureOverlay_.addFeature(positionFeature);
-      // createMeasureTooltip();
-      // this.measureTooltipElement_.innerHTML = this.distanceLabel_ +
-      //     this.formatDistance_(dist, xUnits) +
-      //     '<br>' +
-      //     this.elevationLabel_ +
-      //     this.formatElevation_(elevation['line1'], yUnits);
-      // this.measureTooltip_.setPosition(curPoint.getCoordinates());
-      // this.snappedPoint_.setGeometry(new olGeomPoint([point.x, point.y]));
-    }
-  }
-let profileOptions: ProfileOptions = {
+let hoverCallback = (
+  point: any,
+  dist: number,
+  xUnits: string,
+  elevations: Elevations,
+  yUnits: string
+) => emit('hover:profile', point, dist, xUnits, elevations, yUnits)
+
+const profileOptions = <ProfileOptions>{
   linesConfiguration: {
     line1: {
-      zExtractor: item =>
-        'values' in item && 'dhm' in item['values']
-          ? parseFloat(item['values']['dhm'].toPrecision(5))
-          : 0,
+      zExtractor: item => parseFloat(item?.values?.dhm?.toPrecision(5)) || 0,
     },
   },
-  distanceExtractor: item => ('dist' in item ? item['dist'] : 0),
+  distanceExtractor: item => item.dist ?? 0,
   hoverCallback,
-  outCallback: () => {
-    // TODO:
-    if (props.showTooltip) {
-      // this['point'] = null;
-      removeMeasureTooltip()
-      // this.featureOverlay_.clear();
-      // this.snappedPoint_.setGeometry(null);
-    }
-  },
+  outCallback: () => emit('out:profile'),
   formatter: {
     xhover: (dist, units) => parseFloat(dist.toPrecision(3)) + ' ' + units,
     yhover: (elevation, units) =>
@@ -111,6 +67,17 @@ onMounted(() => {
   refreshData()
 })
 
+watch(
+  () => props.highlightDistance,
+  dist => {
+    if (dist && dist > 0) {
+      profile.highlight(dist)
+    } else {
+      profile.clearHighlight()
+    }
+  }
+)
+
 olEvents.listen(window, 'resize', debounce(refreshData, 50))
 
 function refreshData() {

src/components/common/graph/elevation-profile.vue

@@ -3,11 +3,16 @@ import D3GraphElevation from './d3-graph-elevation.vue'
 
 defineProps<{
   profileData?: any
+  highlightDistance?: number
 }>()
 </script>
 
 <template>
-  <d3-graph-elevation v-if="profileData" :dataset="profileData" />
+  <d3-graph-elevation
+    v-if="profileData"
+    :dataset="profileData"
+    :highlightDistance="highlightDistance"
+  />
 
   <!-- If no data, display blured static image of a graph -->
   <div class="text-center" v-else>

src/components/draw/feature-measurements-helper.ts

@@ -1,20 +1,10 @@
-import { PointData } from '@/components/common/graph/d3-graph-elevation.d'
 import { Coordinate } from 'ol/coordinate'
 import { transform } from 'ol/proj'
 import { debounceAsync } from '@/services/utils'
 
 const ELEVATION_URL = import.meta.env.VITE_ELEVATION_URL
 const MAP_CRS = 'EPSG:3857'
 const ELEVATION_CRS = 'EPSG:2169'
-/**
- * Request the csv profile with the current profile data.
- * @param profileData The current profile data
- */
-export function downloadCsv(profileData: PointData[]) {
-  if (profileData.length === 0) {
-    return
-  }
-}
 
 export const getElevation = async (coordinate: Coordinate) => {
   const lonlat = transform(coordinate, MAP_CRS, ELEVATION_CRS)

src/components/draw/feature-measurements-profile.vue

@@ -6,27 +6,32 @@ import {
   onMounted,
   ShallowRef,
   shallowRef,
+  watch,
 } 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 { DrawnFeature, ProfileData } from '@/services/draw/drawn-feature'
 import {
   exportFeatureService,
   TFeatExport,
 } from '@/services/export-feature/export-feature.service'
+import useProfilePosition from '@/composables/map/profile-position.composable'
 
 defineEmits<{
   (e: 'close'): void
 }>()
 
+const profilePosition = useProfilePosition()
+const profilePositionStore = useProfilePositionStore()
 const { t } = useTranslation()
+
 const hasCloseListener = computed(
   () => getCurrentInstance()?.vnode?.props?.onClose
 ) // NB. useAttrs() not working as close event is defined with "emit"
-
 const feature: DrawnFeature | undefined = inject('feature')
 const profileData: ShallowRef<ProfileData | undefined> = shallowRef(undefined)
 const profileDataLength = computed(() => profileData.value?.length || 0)
@@ -41,6 +46,15 @@ const cumulativeElevation = computed(
 const isLoading = computed(() => feature && !profileData.value)
 const isDrawing = computed(() => !feature)
 
+onMounted(() => {
+  feature && feature.getProfile().then(data => (profileData.value = data))
+})
+
+watch(
+  profileData,
+  profileData => (profilePosition.profileData.value = profileData)
+)
+
 function exportCSV() {
   feature &&
     exportFeatureService.export(
@@ -51,9 +65,13 @@ function exportCSV() {
     )
 }
 
-onMounted(() => {
-  feature && feature.getProfile().then(data => (profileData.value = data))
-})
+function onHoverProfile<T extends { x: number; y: number }>(point: T) {
+  profilePositionStore.setPosition(point.x, point.y)
+}
+
+function onOutProfile() {
+  profilePositionStore.setPosition(undefined, undefined)
+}
 </script>
 
 <template>
@@ -103,6 +121,12 @@ onMounted(() => {
     </div>
 
     <!-- Graph -->
-    <elevation-profile :profileData="profileData" class="w-full" />
+    <elevation-profile
+      :profileData="profileData"
+      class="w-full"
+      :highlightDistance="profilePosition.highlightDistance.value"
+      @hover:profile="onHoverProfile"
+      @out:profile="onOutProfile"
+    />
   </div>
 </template>

src/composables/map/ol.composable.ts

@@ -2,7 +2,7 @@ import type BaseLayer from 'ol/layer/Base'
 import type OlMap from 'ol/Map'
 
 import { layersCache } from '@/stores/layers.cache'
-import type { Layer, LayerId } from '@/stores/map.store.model'
+import type { Layer, LayerFeature, LayerId } from '@/stores/map.store.model'
 import useLayers from '@/composables/layers/layers.composable'
 import { VectorSourceDict } from '@/composables/mvt-styles/mvt-styles.model'
 import { statePersistorStyleService } from '@/services/state-persistor/state-persistor-bgstyle.service'
@@ -19,6 +19,15 @@ export default function useOpenLayers() {
     olMap.addLayer(baseLayer)
   }
 
+  function addFeatureLayer(olMap: OlMap, layer: LayerFeature) {
+    if (!layer) return
+
+    const olLayer = olLayerFactoryService.createOlLayer(layer)
+    olMap.addLayer(olLayer)
+
+    return olLayer
+  }
+
   function findLayer(olMap: OlMap, layerId: LayerId) {
     return olMap
       .getLayers()
@@ -148,6 +157,7 @@ export default function useOpenLayers() {
 
   return {
     addLayer,
+    addFeatureLayer,
     findLayer,
     removeLayer,
     removeFromCache,