Merge pull request #135 from Geoportail-Luxembourg/GSLUX-704-draw-end

GSLUX-704: Save drawn features

.env

@@ -20,3 +20,7 @@ VITE_DEFAULT_MAX_EXTENT=[2.6, 47.7, 8.6, 51]
 
 # Mode lib in v3
 VITE_MODE_LIB=true
+
+# MyMaps / Draw
+VITE_MYMAPS_URL="/mymaps"
+VITE_ARROW_MODEL_URL="/static-ngeo/models/arrow5.glb"

.env.development

@@ -19,4 +19,8 @@ VITE_DEFAULT_VIEW_ZOOM=8
 VITE_DEFAULT_MAX_EXTENT=[2.6, 47.7, 8.6, 51]
 
 # Mode lib in v3
-VITE_MODE_LIB=false
+VITE_MODE_LIB=false
+
+# MyMaps / Draw
+VITE_MYMAPS_URL="https://migration.geoportail.lu/mymaps"
+VITE_ARROW_MODEL_URL="https://migration.geoportail.lu/static-ngeo/models/arrow5.glb"

.env.e2e

@@ -20,3 +20,7 @@ VITE_DEFAULT_MAX_EXTENT=[2.6, 47.7, 8.6, 51]
 
 # Mode lib in v3
 VITE_MODE_LIB=false
+
+# MyMaps / Draw
+VITE_MYMAPS_URL="https://migration.geoportail.lu/mymaps"
+VITE_ARROW_MODEL_URL="https://migration.geoportail.lu/static-ngeo/models/arrow5.glb"

.env.staging

@@ -19,4 +19,8 @@ VITE_DEFAULT_VIEW_ZOOM=8
 VITE_DEFAULT_MAX_EXTENT=[2.6, 47.7, 8.6, 51]
 
 # Mode lib in v3
-VITE_MODE_LIB=true
+VITE_MODE_LIB=true
+
+# MyMaps / Draw
+VITE_MYMAPS_URL="https://migration.geoportail.lu/mymaps"
+VITE_ARROW_MODEL_URL="https://migration.geoportail.lu/static-ngeo/models/arrow5.glb"

cypress/e2e/background-selection.cy.ts

@@ -19,7 +19,10 @@ describe('Background selector', () => {
 
   it('has the default background layer on the map', () => {
     cy.window().then(window => {
-      const layers = (<AUTWindowOlMap>window).olMap.getLayers().getArray()
+      const layers = (<AUTWindowOlMap>window).olMap
+        .getLayers()
+        .getArray()
+        .filter((l: any) => l.get('featureID') != 'featureLayer')
       expect(layers[0].get('id')).to.eq(556)
     })
 
@@ -46,7 +49,10 @@ describe('Background selector', () => {
         .should('be.visible')
 
       cy.window().then(window => {
-        const layers = (<AUTWindowOlMap>window).olMap.getLayers().getArray()
+        const layers = (<AUTWindowOlMap>window).olMap
+          .getLayers()
+          .getArray()
+          .filter((l: any) => l.get('featureID') != 'featureLayer')
         expect(layers[0].get('id')).to.eq(502)
       })
     })

cypress/e2e/layers-selection.cy.ts

@@ -61,15 +61,22 @@ describe('Catalogue', () => {
       cy.get('[data-cy="catalog"]')
         .find('[data-cy="parentLayerLabel-248"]')
         .click()
+      // get layer stack and filter featureLayer
       cy.window().then(window => {
-        const layers = (<AUTWindowOlMap>window).olMap.getLayers().getArray()
+        const layers = (<AUTWindowOlMap>window).olMap
+          .getLayers()
+          .getArray()
+          .filter((l: any) => l.get('featureID') != 'featureLayer')
         expect(layers[0].get('id')).to.eq(556)
       })
       cy.get('[data-cy="catalog"]').find('[data-cy="layerLabel-359"]').click()
       cy.get('[data-cy="catalog"]').find('[data-cy="layerLabel-353"]').click()
       // BG deactivated due to layer exclusion
       cy.window().then(window => {
-        const layers = (<AUTWindowOlMap>window).olMap.getLayers().getArray()
+        const layers = (<AUTWindowOlMap>window).olMap
+          .getLayers()
+          .getArray()
+          .filter((l: any) => l.get('featureID') != 'featureLayer')
         expect(layers[0].get('id')).to.eq(359)
         expect(layers[1].get('id')).to.eq(353)
       })

src/App.vue

@@ -66,18 +66,18 @@ onUnmounted(() => window.removeEventListener('resize', map.resize))
         <!-- Layer panel -->
         <div
           v-if="layersOpen && !styleEditorOpen"
-          class="w-full sm:w-80 bg-secondary z-10"
+          class="w-full md:w-80 bg-secondary z-10"
         >
           <layer-panel />
         </div>
 
         <!-- Style editor -->
-        <div v-if="styleEditorOpen" class="w-full sm:w-80 bg-secondary z-10">
+        <div v-if="styleEditorOpen" class="w-full md:w-80 bg-secondary z-10">
           <style-panel />
         </div>
 
         <!-- MyMaps panel -->
-        <div v-if="myMapsOpen" class="w-full sm:w-80 bg-secondary z-10">
+        <div v-if="myMapsOpen" class="w-full md:w-80 bg-secondary z-10">
           <my-maps-panel />
         </div>
 

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

@@ -1,3 +1,6 @@
+// !!! 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'

src/components/draw/draw-panel-features.vue

@@ -4,12 +4,12 @@ import { storeToRefs } from 'pinia'
 
 import useSortable from '@/composables/sortable'
 import { useDrawStore } from '@/stores/draw.store'
-import { DrawFeature } from '@/stores/draw.store.model'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 import FeatureItem from './feature-item.vue'
 
 const drawStore = useDrawStore()
-const { drawFeatures: features, featureEditionDocked } = storeToRefs(drawStore)
+const { drawnFeatures: features, featureEditionDocked } = storeToRefs(drawStore)
 const currentOpenedFeature: Ref<number | undefined> = ref(undefined)
 const currentEditingFeature: Ref<number | undefined> = ref(undefined)
 
@@ -54,7 +54,7 @@ onMounted(() => {
         :isDocked="featureEditionDocked"
         :isEditing="currentEditingFeature === feature.id"
         :isOpen="currentOpenedFeature === feature.id"
-        :feature="<DrawFeature>feature"
+        :feature="<DrawnFeature>feature"
         @toggleFeatureSub="onToggleFeatureSub"
         @toggleFeatureEdit="onToggleFeatureEdit"
         @toggleDock="() => (featureEditionDocked = !featureEditionDocked)"

src/components/draw/draw-panel.vue

@@ -11,7 +11,7 @@ import DrawPanelFeatures from './draw-panel-features.vue'
 const { t } = useTranslation()
 
 const drawStore = useDrawStore()
-const { drawFeatures: features } = storeToRefs(drawStore)
+const { drawnFeatures: features } = storeToRefs(drawStore)
 const drawingMenuOptions = [
   {
     label: 'Copier dans ma carte',

src/components/draw/feature-edit-info.vue

@@ -2,11 +2,11 @@
 import { ref } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
-import { DrawFeature } from '@/stores/draw.store.model'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 const { t } = useTranslation()
 const props = defineProps<{
-  feature: DrawFeature
+  feature: DrawnFeature
 }>()
 const feat = ref(props.feature)
 </script>

src/components/draw/feature-edit-style.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
-import { DrawFeature } from '@/stores/draw.store.model'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 import FeatureEditStyleCircle from './feature-edit-style-circle.vue'
 import FeatureEditStylePoint from './feature-edit-style-point.vue'
@@ -11,7 +11,7 @@ import FeatureEditStylePolygon from './feature-edit-style-polygon.vue'
 
 const { t } = useTranslation()
 const props = defineProps<{
-  feature: DrawFeature
+  feature: DrawnFeature
 }>()
 
 const styleComponents = {
@@ -22,20 +22,20 @@ const styleComponents = {
 }
 
 const currentStyleComponent = computed(() => {
-  const geomType = props.feature.geom
-  if (geomType === 'Point') {
+  const featureType = props.feature.featureType
+  if (featureType === 'drawnPoint') {
     return 'FeatureEditStylePoint'
   }
 
-  if (geomType === 'Circle') {
+  if (featureType === 'drawnCircle') {
     return 'FeatureEditStyleCircle'
   }
 
-  if (geomType === 'LineString') {
+  if (featureType === 'drawnLine') {
     return 'FeatureEditStyleLine'
   }
 
-  if (geomType === 'Polygon') {
+  if (featureType === 'drawnPolygon') {
     return 'FeatureEditStylePolygon'
   }
 

src/components/draw/feature-item.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { DrawFeature } from '@/stores/draw.store.model'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 import FeatureSubContent from './feature-sub-content.vue'
 import FeatureSubWrapper from './feature-sub-wrapper.vue'
@@ -9,7 +9,7 @@ const props = withDefaults(
     isDocked?: boolean
     isEditing?: boolean
     isOpen?: boolean
-    feature: DrawFeature
+    feature: DrawnFeature
   }>(),
   {
     isDocked: false,
@@ -54,12 +54,17 @@ 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.label === 'Point',
-        line: feature.label === 'LineString',
-        polygon: feature.label === 'Polygon' || feature.label === 'Circle',
+        point:
+          feature.featureType === 'drawnPoint' ||
+          feature.featureType === 'drawnLabel',
+        line: feature.featureType === 'drawnLine',
+        polygon:
+          feature.featureType === 'drawnPolygon' ||
+          feature.featureType === 'drawnCircle',
       }"
     ></span>
     <!-- Feature label -->

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

@@ -2,13 +2,13 @@
 import { computed } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
-import { DrawFeature } from '@/stores/draw.store.model'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
 import ElevationProfile from '@/components/common/graph/elevation-profile.vue'
 
 const { t } = useTranslation()
 
 defineProps<{
-  feature: DrawFeature
+  feature: DrawnFeature
 }>()
 const isLoading = computed(() => false) // TODO:
 const isDrawing = computed(() => false) // TODO:

src/components/draw/feature-measurements.vue

@@ -2,16 +2,16 @@
 import { computed } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
-import { DrawFeature } from '@/stores/draw.store.model'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
 import FeatureMeasurementsProfile from './feature-measurements-profile.vue'
 
 const { t } = useTranslation()
 
 const props = defineProps<{
-  feature: DrawFeature
+  feature: DrawnFeature
   isEditingFeature?: boolean
 }>()
-const geomType = props.feature.geom
+const featureType = props.feature.featureType
 const featLength = computed(() => props.feature.id + ' [TODO featLenght]') // TODO update condition
 const featArea = computed(() => props.feature.id + ' [TODO featArea]') // TODO
 const featRadius = computed(() => props.feature.id + ' [TODO featRayon]') // TODO
@@ -27,20 +27,23 @@ function onClickValidateRadius() {
     <!-- Feature length, for LineString, Circle, Polygon -->
     <div
       data-cy="featItemLength"
-      v-if="['LineString', 'Polygon', 'Circle'].includes(geomType)"
+      v-if="['drawnLine', 'drawnCircle', 'drawnPolygon'].includes(featureType)"
     >
       <span>{{ t('Length:') }}</span> <span>{{ featLength }}</span>
     </div>
 
     <!-- Feature area, for Circle, Polygon -->
-    <div data-cy="featItemArea" v-if="['Polygon', 'Circle'].includes(geomType)">
+    <div
+      data-cy="featItemArea"
+      v-if="['drawnPolygon', 'drawnCircle'].includes(featureType)"
+    >
       <span>{{ t('Area:') }}</span> <span>{{ featArea }}</span>
     </div>
 
     <!-- Feature radius, for Circle -->
     <div
       data-cy="featItemRadius"
-      v-if="geomType === 'Circle'"
+      v-if="featureType === 'drawnCircle'"
       class="flex items-center"
     >
       <span>{{ t('Rayon:') }}</span>
@@ -55,7 +58,7 @@ function onClickValidateRadius() {
     </div>
 
     <!-- Feature elevation, for Point -->
-    <div data-cy="featItemElevation" v-if="geomType === 'Point'">
+    <div data-cy="featItemElevation" v-if="featureType === 'drawnPoint'">
       <span>{{
         t('Elevation: \{\{ ctrl.featureElevation \}\}', {
           'ctrl.featureElevation': featElevation,
@@ -65,7 +68,7 @@ function onClickValidateRadius() {
 
     <!-- Feature elevation profile LineString -->
     <FeatureMeasurementsProfile
-      v-if="geomType === 'LineString'"
+      v-if="featureType === 'drawnLine'"
       :feature="feature"
     />
   </div>

src/components/draw/feature-menu-popup.vue

@@ -4,10 +4,10 @@ import { useTranslation } from 'i18next-vue'
 import { type MenuPopupItem as MenuPopupItemType } from '@/components/common/menu-popup/menu-popup.d'
 import MenuPopup from '@/components/common/menu-popup/menu-popup.vue'
 import MenuPopupItem from '@/components/common/menu-popup/menu-popup-item.vue'
-import { DrawFeature } from '@/stores/draw.store.model'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 const props = defineProps<{
-  feature: DrawFeature
+  feature: DrawnFeature
 }>()
 const { t } = useTranslation()
 
@@ -26,7 +26,7 @@ let drawingMenuOptions = <MenuPopupItemType[]>[
   },
 ]
 
-if (props.feature.geom === 'LineString') {
+if (props.feature.featureType === 'drawnLine') {
   drawingMenuOptions = [
     ...drawingMenuOptions,
     ...[
@@ -42,7 +42,7 @@ if (props.feature.geom === 'LineString') {
   ]
 }
 
-if (props.feature.geom === 'Circle') {
+if (props.feature.featureType === 'drawnCircle') {
   drawingMenuOptions = [
     ...drawingMenuOptions,
     ...[

src/components/draw/feature-sub-content.vue

@@ -2,7 +2,7 @@
 import { Ref, ref } from 'vue'
 import { useTranslation } from 'i18next-vue'
 
-import { DrawFeature } from '@/stores/draw.store.model'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 import FeatureMenuPopup from './feature-menu-popup.vue'
 import FeatureConfirmDelete from './feature-confirm-delete.vue'
@@ -14,7 +14,7 @@ import FeatureMeasurements from './feature-measurements.vue'
 const props = defineProps<{
   isDocked: boolean
   isEditingFeature: boolean
-  feature: DrawFeature
+  feature: DrawnFeature
 }>()
 const emit = defineEmits(['toggleEditFeature', 'toggleDock', 'clickDelete'])
 const { t } = useTranslation()

src/components/draw/feature-sub-wrapper.vue

@@ -3,15 +3,15 @@ import { computed } from 'vue'
 
 import MapPopup from '@/components/map/map-popup.vue'
 import useDrawnFeatures from '@/composables/draw/drawn-features.composable'
-import { DrawFeature } from '@/stores/draw.store.model'
+import { DrawnFeature } from '@/services/draw/drawn-feature'
 
 const props = defineProps<{
   isDocked: boolean
-  feature: DrawFeature
+  feature: DrawnFeature
 }>()
 const { getFeatCoordinates } = useDrawnFeatures()
 const emit = defineEmits(['closePopup'])
-const popupAnchor = computed(() => getFeatCoordinates(props.feature.olFeature))
+const popupAnchor = computed(() => getFeatCoordinates(props.feature))
 
 function onClosePopup() {
   emit('closePopup')