refactor(review): address comments

src/components/draw/feature-measurements.vue

@@ -37,8 +37,6 @@ const featLength = computed(() => {
       return getLength(featureGeometry.value as Geometry, mapProjection)
     } else if (featureType.value === 'drawnCircle') {
       return getCircleLength(featureGeometry.value as Circle, mapProjection)
-    } else {
-      return undefined
     }
   }
   return undefined
@@ -49,8 +47,6 @@ const featArea = computed(() => {
       return getArea(featureGeometry.value as Polygon)
     } else if (featureType.value === 'drawnCircle') {
       return getCircleArea(featureGeometry.value as Circle, mapProjection)
-    } else {
-      return undefined
     }
   }
   return undefined
@@ -60,7 +56,7 @@ const featRadius = computed(() =>
     ? getCircleRadius(featureGeometry.value as Circle, mapProjection)
     : undefined
 )
-const inputRadius = ref<string>(featRadius.value?.toString() || '')
+const inputRadius = ref<number>(featRadius.value || 0)
 
 const featElevation = ref<number | undefined>()
 
@@ -80,13 +76,16 @@ watchEffect(async () => {
 watchEffect(() => {
   inputRadius.value =
     featureType.value === 'drawnCircle'
-      ? getCircleRadius(featureGeometry.value as Circle, mapProjection).toFixed(
-          2
+      ? parseFloat(
+          getCircleRadius(
+            featureGeometry.value as Circle,
+            mapProjection
+          ).toFixed(2)
         )
-      : ''
+      : 0
 })
 
-function onClickValidateRadius(radius: string) {
+function onClickValidateRadius(radius: number) {
   if (feature.value) {
     useEdit().setRadius(feature.value as DrawnFeature, Number(radius))
   }
@@ -117,8 +116,8 @@ function onClickValidateRadius(radius: string) {
       <div v-else class="flex">
         <input
           data-cy="featItemInputRadius"
-          class="form-control block"
-          type="text"
+          class="form-control block bg-secondary text-white border !border-gray-300"
+          type="number"
           v-model="inputRadius"
           @keyup.enter="onClickValidateRadius(inputRadius)"
         />

src/composables/draw/draw-tooltip.ts

@@ -6,8 +6,7 @@ import { Circle, Geometry, LineString, Polygon } from 'ol/geom'
 import OlMap from 'ol/Map'
 import { DrawEvent } from 'ol/interaction/Draw'
 import { getLength, getArea } from '@/services/common/measurement.utils'
-import { formatLength } from '@/directives/format-length.directive'
-import { formatArea } from '@/directives/format-area.directive'
+import { formatLength, formatArea } from '@/services/common/formatting.utils'
 
 class DrawTooltip {
   private measureTooltipElement: HTMLElement | null = null

src/composables/draw/draw-utils.ts

@@ -14,14 +14,27 @@ import { Map } from 'ol'
 // TODO 3D
 // const ARROW_MODEL_URL = import.meta.env.VITE_ARROW_MODEL_URL
 
+/**
+ * Note that feature.featureType and geom?.getType() values mostly correspond to each other.
+ * One exception are 'drawnCircle' featureTypes that are managed as 'Polygon' geometries within the URL and during export.
+ * (Another exception are 'drawnLabel' featureTypes that are managed as 'Point' geometries throughout the application.)
+ * @param feature Feature with a circle geometry
+ * @returns The same feature with a polygon geometry
+ */
 function convertCircleFeatureToPolygon(feature: DrawnFeature): DrawnFeature {
   const geom = feature.getGeometry()
-  if (feature.featureType == 'drawnCircle' && geom?.getType() == 'Circle') {
+  if (feature.featureType === 'drawnCircle' && geom?.getType() === 'Circle') {
     feature.setGeometry(fromCircle(geom as Circle, 64))
   }
   return feature
 }
 
+/**
+ *
+ * @param feature Feature with a polygon geometry
+ * @returns The same feature with a circle geometry
+ */
+
 function convertPolygonFeatureToCircle(feature: DrawnFeature): DrawnFeature {
   const map: Map = useMap().getOlMap()
   const polygon = feature.getGeometry() as Polygon

src/directives/format-area.directive.ts

@@ -1,4 +1,4 @@
-import i18next from 'i18next'
+import { formatArea } from '@/services/common/formatting.utils'
 import { App } from 'vue'
 
 export default {
@@ -19,15 +19,3 @@ function format(el: HTMLElement, value: number): void {
   formattedText = formatArea(value)
   el.textContent = formattedText
 }
-
-export function formatArea(value: number): string {
-  if (value === null) {
-    return i18next.t('N/A', { ns: 'client' })
-  } else if (value < 1000000) {
-    return `${value.toFixed(2)} m²`
-  } else if (value >= 1000000) {
-    return `${(value / 1000000).toFixed(2)} km²`
-  } else {
-    return ''
-  }
-}

src/directives/format-length.directive.ts

@@ -1,4 +1,4 @@
-import i18next from 'i18next'
+import { formatLength } from '@/services/common/formatting.utils'
 import { App } from 'vue'
 
 export default {
@@ -19,16 +19,3 @@ function format(el: HTMLElement, value: number): void {
   formattedText = formatLength(value)
   el.textContent = formattedText
 }
-
-export function formatLength(value: number): string {
-  //null covers API errors or unaivalble data (eg. elevation)
-  if (value === null) {
-    return i18next.t('N/A', { ns: 'client' })
-  } else if (value < 1000) {
-    return `${value.toFixed(2)} m`
-  } else if (value >= 1000) {
-    return `${(value / 1000).toFixed(2)} km`
-  } else {
-    return ''
-  }
-}

src/services/common/formatting.utils.ts

@@ -1,4 +1,37 @@
+import i18next from 'i18next'
+
+/**
+ * Note: Formatting utils can be used via directives in HTML templates.
+ * v-format-length="value"
+ * v-format-area="value"
+ */
+
 export function formatDate(dateString: string, language: string = 'fr-FR') {
   const date = new Date(dateString)
   return new Intl.DateTimeFormat(language).format(date)
 }
+
+export function formatLength(value: number): string {
+  //null covers API errors or unavailable data (eg. elevation)
+  if (value === null) {
+    return i18next.t('N/A', { ns: 'client' })
+  } else if (value < 1000) {
+    return `${value.toFixed(2)} m`
+  } else if (value >= 1000) {
+    return `${(value / 1000).toFixed(2)} km`
+  } else {
+    return ''
+  }
+}
+
+export function formatArea(value: number): string {
+  if (value === null) {
+    return i18next.t('N/A', { ns: 'client' })
+  } else if (value < 1000000) {
+    return `${value.toFixed(2)} m²`
+  } else if (value >= 1000000) {
+    return `${(value / 1000000).toFixed(2)} km²`
+  } else {
+    return ''
+  }
+}

src/services/common/measurement.utils.ts

@@ -1,4 +1,4 @@
-import { formatLength } from '@/directives/format-length.directive'
+import { formatLength } from './formatting.utils'
 import { Coordinate } from 'ol/coordinate'
 import { LineString, Polygon, Point, Geometry, Circle } from 'ol/geom'
 import {
@@ -12,6 +12,7 @@ import {
   getArea as getOlArea,
 } from 'ol/sphere'
 import { Map } from 'ol'
+import { PROJECTION_WGS84 } from '@/composables/map/map.composable'
 
 const getLength = function (geom: Geometry, projection: Projection): number {
   let length = 0
@@ -22,8 +23,8 @@ const getLength = function (geom: Geometry, projection: Projection): number {
     coordinates = (geom as LineString).getCoordinates() as Coordinate[]
   }
   for (let i = 0, ii = coordinates.length - 1; i < ii; ++i) {
-    const c1 = transform(coordinates[i], projection, 'EPSG:4326')
-    const c2 = transform(coordinates[i + 1], projection, 'EPSG:4326')
+    const c1 = transform(coordinates[i], projection, PROJECTION_WGS84)
+    const c2 = transform(coordinates[i + 1], projection, PROJECTION_WGS84)
     length += haversineDistance(c1, c2)
   }
   return length

src/services/state-persistor/utils/FeatureStyleHelper.ts

@@ -27,8 +27,7 @@ import {
   getFormattedAzimutRadius,
   getFormattedPoint,
 } from '@/services/common/measurement.utils'
-import { formatLength } from '@/directives/format-length.directive'
-import { formatArea } from '@/directives/format-area.directive'
+import { formatLength, formatArea } from '@/services/common/formatting.utils'
 
 const styleGeometryType = {
   CIRCLE: 'Circle',
@@ -634,10 +633,10 @@ class FeatureStyleHelper {
           this.decimals_
         )
       } else {
-        measure = formatArea(getArea(geometry)) //, this.projection_, this.precision_, this.unitPrefixFormat_);
+        measure = formatArea(getArea(geometry))
       }
     } else if (geometry instanceof olGeomLineString) {
-      measure = formatLength(getLength(geometry, this.projection_!)) //, this.precision_, this.unitPrefixFormat_);
+      measure = formatLength(getLength(geometry, this.projection_!))
     } else if (geometry instanceof olGeomPoint) {
       if (this.pointFilterFn_ === null) {
         measure = getFormattedPoint(geometry, this.decimals_)