From 1ae46a760ad1a42710ea819c1b4810d47046c2bd Mon Sep 17 00:00:00 2001
From: Moritz Kirmse <moritz.kirmse@camptocamp.com>
Date: Mon, 2 Sep 2024 19:56:50 +0200
Subject: [PATCH] fixed remaining comments from code review

---
 src/components/draw/feature-item.vue          |  5 +-
 src/composables/draw/draw-utils.ts            | 18 +++---
 .../state-persistor-features.mapper.ts        | 17 +++---
 .../state-persistor-features.service.ts       |  2 +-
 .../state-persistor/utils/FeatureHash.ts      | 46 +++++++--------
 .../utils/FeatureStyleHelper.ts               | 56 +++++++------------
 6 files changed, 64 insertions(+), 80 deletions(-)

diff --git a/src/components/draw/feature-item.vue b/src/components/draw/feature-item.vue
index a808d26c..299d407b 100644
--- a/src/components/draw/feature-item.vue
+++ b/src/components/draw/feature-item.vue
@@ -54,10 +54,13 @@ function onClickDelete() {
       class="sortable-handle drag-handle fa fa-reorder ui-sortable-handle cursor-move"
     ></span>
     <!-- Type of feat. icon -->
+    <!-- TODO: create icons for label and circle -->
     <span
       class="lux-icon"
       :class="{
-        point: feature.featureType === 'drawnPoint',
+        point:
+          feature.featureType === 'drawnPoint' ||
+          feature.featureType === 'drawnLabel',
         line: feature.featureType === 'drawnLine',
         polygon:
           feature.featureType === 'drawnPolygon' ||
diff --git a/src/composables/draw/draw-utils.ts b/src/composables/draw/draw-utils.ts
index cdbac21d..74a1df5f 100644
--- a/src/composables/draw/draw-utils.ts
+++ b/src/composables/draw/draw-utils.ts
@@ -1,18 +1,18 @@
 import { t } from 'i18next'
 import OlMap from 'ol/Map'
 import { Point, Circle, Geometry, LineString } from 'ol/geom'
-import MultiPoint from 'ol/geom/MultiPoint.js'
-import Polygon from 'ol/geom/Polygon.js'
+import MultiPoint from 'ol/geom/MultiPoint'
+import Polygon from 'ol/geom/Polygon'
 import { fromCircle } from 'ol/geom/Polygon'
-import StyleCircle, { Options as CircleOptions } from 'ol/style/Circle.js'
-import StyleFill from 'ol/style/Fill.js'
-import StyleIcon from 'ol/style/Icon.js'
+import StyleCircle, { Options as CircleOptions } from 'ol/style/Circle'
+import StyleFill from 'ol/style/Fill'
+import StyleIcon from 'ol/style/Icon'
 import StyleRegularShape, {
   Options as RegularShapeOptions,
-} from 'ol/style/RegularShape.js'
-import StyleText from 'ol/style/Text.js'
-import StyleStroke from 'ol/style/Stroke.js'
-import StyleStyle, { StyleLike } from 'ol/style/Style.js'
+} from 'ol/style/RegularShape'
+import StyleText from 'ol/style/Text'
+import StyleStroke from 'ol/style/Stroke'
+import StyleStyle, { StyleLike } from 'ol/style/Style'
 import { Feature } from 'ol'
 
 import { useDrawStore } from '@/stores/draw.store'
diff --git a/src/services/state-persistor/state-persistor-features.mapper.ts b/src/services/state-persistor/state-persistor-features.mapper.ts
index ad8578e9..e0d49056 100644
--- a/src/services/state-persistor/state-persistor-features.mapper.ts
+++ b/src/services/state-persistor/state-persistor-features.mapper.ts
@@ -16,20 +16,19 @@ class StorageFeaturesMapper {
   featuresToUrl(features: DrawnFeature[] | null): string {
     if (!features) return ''
     const featureArray = features.map(f => drawnFeatureToFeature(f))
-    const featuresToEncode = featureArray.filter(function (feature) {
-      return !feature.get('__map_id__')
-    })
-    if (featuresToEncode.length > 0) {
-      return featureHash.writeFeatures(featuresToEncode)
-    } else {
-      return ''
-    }
+    const featuresToEncode = featureArray.filter(
+      feature => !feature.get('__map_id__')
+    )
+    return featuresToEncode.length > 0
+      ? featureHash.writeFeatures(featuresToEncode)
+      : ''
   }
 
   urlToFeatures(url: string | null): Feature<Geometry>[] {
     const features = url ? featureHash.readFeatures(url) : []
+    const olMap = useMap().getOlMap()
     features.forEach((f, i) => {
-      featureHash.decodeShortProperties(f, i, useMap().getOlMap())
+      featureHash.decodeShortProperties(f, i, olMap)
     })
     return features
   }
diff --git a/src/services/state-persistor/state-persistor-features.service.ts b/src/services/state-persistor/state-persistor-features.service.ts
index 9b4bbfdd..154f5dbb 100644
--- a/src/services/state-persistor/state-persistor-features.service.ts
+++ b/src/services/state-persistor/state-persistor-features.service.ts
@@ -30,7 +30,7 @@ class StatePersistorFeaturesService implements StatePersistorService {
           storageFeaturesMapper.featuresToUrl
         )
       },
-      { immediate: true, deep: true } // deep: true is necessary for Collection in Ref
+      { immediate: true }
     )
   }
 
diff --git a/src/services/state-persistor/utils/FeatureHash.ts b/src/services/state-persistor/utils/FeatureHash.ts
index 61015d75..52c4376d 100644
--- a/src/services/state-persistor/utils/FeatureHash.ts
+++ b/src/services/state-persistor/utils/FeatureHash.ts
@@ -3,24 +3,24 @@
 
 import luxFormatFeatureProperties from './LuxFeatureProperties'
 
-import olFeature from 'ol/Feature.js'
-import olMap from 'ol/Map.js'
-import { includes as arrayIncludes } from 'ol/array.js'
-import { asArray as colorAsArray } from 'ol/color.js'
-import { ReadOptions, transformGeometryWithOptions } from 'ol/format/Feature.js'
-import olGeomGeometryLayout from 'ol/geom/GeometryLayout.js'
-import olGeomLineString from 'ol/geom/LineString.js'
-import olGeomMultiLineString from 'ol/geom/MultiLineString.js'
-import olGeomMultiPoint from 'ol/geom/MultiPoint.js'
-import olGeomMultiPolygon from 'ol/geom/MultiPolygon.js'
-import olGeomPoint from 'ol/geom/Point.js'
-import olGeomPolygon from 'ol/geom/Polygon.js'
-import olStyleCircle from 'ol/style/Circle.js'
-import olStyleFill from 'ol/style/Fill.js'
-import olStyleStroke from 'ol/style/Stroke.js'
-import olStyleStyle from 'ol/style/Style.js'
-import olStyleText from 'ol/style/Text.js'
-import Feature from 'ol/Feature.js'
+import olFeature from 'ol/Feature'
+import olMap from 'ol/Map'
+import { includes as arrayIncludes } from 'ol/array'
+import { asArray as colorAsArray } from 'ol/color'
+import { ReadOptions, transformGeometryWithOptions } from 'ol/format/Feature'
+import olGeomGeometryLayout from 'ol/geom/GeometryLayout'
+import olGeomLineString from 'ol/geom/LineString'
+import olGeomMultiLineString from 'ol/geom/MultiLineString'
+import olGeomMultiPoint from 'ol/geom/MultiPoint'
+import olGeomMultiPolygon from 'ol/geom/MultiPolygon'
+import olGeomPoint from 'ol/geom/Point'
+import olGeomPolygon from 'ol/geom/Polygon'
+import olStyleCircle from 'ol/style/Circle'
+import olStyleFill from 'ol/style/Fill'
+import olStyleStroke from 'ol/style/Stroke'
+import olStyleStyle from 'ol/style/Style'
+import olStyleText from 'ol/style/Text'
+import Feature from 'ol/Feature'
 import {
   Geometry,
   LineString,
@@ -30,11 +30,11 @@ import {
   Point,
   Polygon,
 } from 'ol/geom'
-import TextFeature from 'ol/format/TextFeature.js'
-import Text from 'ol/style/Text.js'
-import Stroke from 'ol/style/Stroke.js'
-import Fill from 'ol/style/Fill.js'
-import Style from 'ol/style/Style.js'
+import TextFeature from 'ol/format/TextFeature'
+import Text from 'ol/style/Text'
+import Stroke from 'ol/style/Stroke'
+import Fill from 'ol/style/Fill'
+import Style from 'ol/style/Style'
 import { createStyleFunction } from '@/composables/draw/draw-utils'
 
 const GeometryTypeValues = {
diff --git a/src/services/state-persistor/utils/FeatureStyleHelper.ts b/src/services/state-persistor/utils/FeatureStyleHelper.ts
index 6d1d4b89..8cfc388d 100644
--- a/src/services/state-persistor/utils/FeatureStyleHelper.ts
+++ b/src/services/state-persistor/utils/FeatureStyleHelper.ts
@@ -1,26 +1,26 @@
 // !!! This is a file ported from v3 and not completely refactored, we accept some linter warnings //
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import Feature from 'ol/Feature.js'
-import Map from 'ol/Map.js'
-import { Coordinate } from 'ol/coordinate.js'
+import Feature from 'ol/Feature'
+import Map from 'ol/Map'
+import { Coordinate } from 'ol/coordinate'
 import luxFormatFeatureProperties from './FeatureProperties'
-import * as olArray from 'ol/array.js'
-import * as olColor from 'ol/color.js'
-import * as olExtent from 'ol/extent.js'
-import olGeomLineString from 'ol/geom/LineString.js'
-import olGeomMultiLineString from 'ol/geom/MultiLineString.js'
-import olGeomMultiPoint from 'ol/geom/MultiPoint.js'
-import olGeomPoint from 'ol/geom/Point.js'
-import olGeomPolygon from 'ol/geom/Polygon.js'
-import olGeomMultiPolygon from 'ol/geom/MultiPolygon.js'
-import olStyleCircle from 'ol/style/Circle.js'
-import olStyleFill from 'ol/style/Fill.js'
-import olStyleRegularShape from 'ol/style/RegularShape.js'
-import olStyleStroke from 'ol/style/Stroke.js'
-import olStyleStyle from 'ol/style/Style.js'
-import olStyleText from 'ol/style/Text.js'
-import * as olProj from 'ol/proj.js'
+import * as olArray from 'ol/array'
+import * as olColor from 'ol/color'
+import * as olExtent from 'ol/extent'
+import olGeomLineString from 'ol/geom/LineString'
+import olGeomMultiLineString from 'ol/geom/MultiLineString'
+import olGeomMultiPoint from 'ol/geom/MultiPoint'
+import olGeomPoint from 'ol/geom/Point'
+import olGeomPolygon from 'ol/geom/Polygon'
+import olGeomMultiPolygon from 'ol/geom/MultiPolygon'
+import olStyleCircle from 'ol/style/Circle'
+import olStyleFill from 'ol/style/Fill'
+import olStyleRegularShape from 'ol/style/RegularShape'
+import olStyleStroke from 'ol/style/Stroke'
+import olStyleStyle from 'ol/style/Style'
+import olStyleText from 'ol/style/Text'
+import * as olProj from 'ol/proj'
 import {
   getFormattedLength,
   getFormattedArea,
@@ -522,24 +522,6 @@ class FeatureStyleHelper {
     return style
   }
 
-  // === PROPERTY GETTERS ===
-
-  // /**
-  //  * Delete the unwanted ol3 properties from the current feature then return the
-  //  * properties.
-  //  * Also delete the 'ngeo_feature_type_' from the ngeo query system.
-  //  * @param {!ol.Feature} feature Feature.
-  //  * @return {!Object.<string, *>} Filtered properties of the current feature.
-  //  * @export
-  //  */
-  // exports.getFilteredFeatureValues(feature: Feature) {
-  //   const properties = feature.getProperties();
-  //   delete properties['boundedBy'];
-  //   delete properties[feature.getGeometryName()];
-  //   delete properties['ngeo_feature_type_'];
-  //   return properties;
-  // };
-
   public getAngleProperty(feature: Feature) {
     const angle = +feature.get(luxFormatFeatureProperties.ANGLE)
     console.assert(typeof angle === 'number')