Merge pull request #172 from Geoportail-Luxembourg/GSLUX-765-fix-drawing

GSLUX-765: FIX drawing

cypress/e2e/draw/draw-feat-line.cy.ts

@@ -61,4 +61,16 @@ describe('Draw "Line"', () => {
         .should('contain.text', 'Changer le sens de la ligne')
     })
   })
+
+  describe('When using Escape key when drawing a line', () => {
+    it('ends the drawing and adds a new line', () => {
+      cy.get('*[data-cy="featItemName"]').should('have.length', 1)
+      cy.get('button[data-cy="drawLineButton"]').click()
+      cy.get('button[data-cy="drawLineButton"]').click()
+      cy.get('div.ol-viewport').click(250, 250, { force: true })
+      cy.get('div.ol-viewport').click(300, 300, { force: true })
+      cy.get('body').type('{esc}')
+      cy.get('*[data-cy="featItemName"]').should('have.length', 2)
+    })
+  })
 })

cypress/e2e/layers-selection/layers-selection-catalog.cy.ts

@@ -67,11 +67,7 @@ describe('Catalogue', () => {
         const layers = (<AUTWindowOlMap>window).olMap
           .getLayers()
           .getArray()
-          .filter(
-            (l: any) =>
-              // regex match
-              !/feature(Edit)?Layer/.exec(l.get('cyLayerType'))
-          )
+          .filter((l: any) => !/feature(Edit)?Layer/.exec(l.get('cyLayerType')))
         expect(layers[0].get('id')).to.eq(556)
       })
       cy.get('[data-cy="catalog"]')
@@ -85,11 +81,7 @@ describe('Catalogue', () => {
         const layers = (<AUTWindowOlMap>window).olMap
           .getLayers()
           .getArray()
-          .filter(
-            (l: any) =>
-              // regex match
-              !/feature(Edit)?Layer/.exec(l.get('cyLayerType'))
-          )
+          .filter((l: any) => !/feature(Edit)?Layer/.exec(l.get('cyLayerType')))
         expect(layers[0].get('id')).to.eq(359)
         expect(layers[1].get('id')).to.eq(353)
       })

src/assets/main.css

@@ -118,21 +118,18 @@
   }
 
   .lux-btn-grey {
-    @apply lux-btn py-[3px] px-[8px];
+    @apply lux-btn py-[2px] px-[9px] border-[1px] border-gray-500 border-solid rounded-[2.5px] focus:text-gray-800 focus:border-gray-500;
     background-color: rgb(239, 239, 239);
-    border-style: outset;
-    border-color: rgb(51, 51, 51);
     color: rgb(51, 51, 51);
   }
 
   .lux-btn-grey:hover {
-    background-color: rgb(233, 233, 233);
+    @apply bg-gray-300;
     color: rgb(51, 51, 51);
   }
 
   .lux-btn-grey.pressed {
-    background-color: rgb(133, 168, 233);
-    color: rgb(51, 51, 181);
+    @apply bg-gray-400;
   }
 
   .lux-close-cross {

src/components/draw/feature-edit-linestyle-item.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useTranslation } from 'i18next-vue'
 import { DrawnFeature } from '@/services/draw/drawn-feature'
+import { capitalize } from '@/services/utils'
 
 const { t } = useTranslation()
 
@@ -17,11 +18,11 @@ function onClickChangeLineStyle(linestyle: string) {
 
 <template>
   <button
-    :class="`lux-btn-grey rounded${
+    :class="`lux-btn-grey${
       props.feature.featureStyle.linestyle === props.linestyle ? ' pressed' : ''
     }`"
     @click="onClickChangeLineStyle(props.linestyle)"
   >
-    {{ t(props.linestyle) }}
+    {{ t(capitalize(props.linestyle)) }}
   </button>
 </template>

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

@@ -1,21 +1,44 @@
 <script setup lang="ts">
-import { inject } from 'vue'
+import { inject, ref, watchEffect } from 'vue'
 
 import MapPopup from '@/components/map/map-popup.vue'
 import useDrawnFeatures from '@/composables/draw/drawn-features.composable'
 import { DrawnFeature } from '@/services/draw/drawn-feature'
+import { debounce } from '@/services/utils'
 
 defineProps<{
   isDocked: boolean
 }>()
 const { getFeatCoordinates } = useDrawnFeatures()
 const emit = defineEmits(['closePopup'])
 const feature: DrawnFeature | undefined = inject('feature')
-const popupAnchor = feature ? getFeatCoordinates(feature) : undefined
+const popupAnchor: any = ref(getUnreactiveCoords())
 
 function onClosePopup() {
   emit('closePopup')
 }
+
+/**
+ * Update the anchor coords when user modfies the geom,
+ * but with a debounce, preventing the modale to moves at each update of the geom
+ */
+const onChangeGeom = debounce(() => {
+  popupAnchor.value = getUnreactiveCoords()
+}, 1000)
+
+/**
+ * Get an unreactive value for coords, otherwise, anchor is updated
+ * each time the geom is modified by the user
+ */
+function getUnreactiveCoords() {
+  return JSON.parse(JSON.stringify(getFeatCoordinates(feature!)))
+}
+
+watchEffect(() => {
+  if (feature?.getGeometry() && getFeatCoordinates(feature!)) {
+    onChangeGeom()
+  }
+})
 </script>
 
 <template>

src/composables/draw/draw-interaction.composable.ts

@@ -5,6 +5,7 @@ import useDrawnFeatures from './drawn-features.composable'
 import drawTooltip from './draw-tooltip'
 
 export default function useDrawInteraction(options: Options) {
+  const { addFeature } = useDrawnFeatures()
   const drawInteraction = new Draw(options)
   drawInteraction.setActive(false)
   const map = useMap().getOlMap()
@@ -16,13 +17,28 @@ export default function useDrawInteraction(options: Options) {
   listen(drawInteraction, 'drawend', event => {
     onDrawEnd(event as DrawEvent)
   })
-  const { addFeature } = useDrawnFeatures()
+  listen(document, 'keyup', event => {
+    onKeyUp(event as KeyboardEvent)
+  })
+
   function onDrawEnd(event: DrawEvent) {
     drawTooltip.remove()
     addFeature(event.feature)
     event.stopPropagation()
   }
 
+  /**
+   * Deactivate this interaction if the ESC key is pressed.
+   * @param event
+   */
+  function onKeyUp(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      drawTooltip.remove()
+      drawInteraction.finishDrawing()
+      drawInteraction.setActive(false)
+    }
+  }
+
   return {
     drawInteraction,
   }

src/services/utils.ts

@@ -133,3 +133,12 @@ export function downloadFile(
   document.body.removeChild(a)
   URL.revokeObjectURL(url)
 }
+
+/**
+ * Capitalized (only) the first letter of the given string
+ * @param str The string to capitalize
+ * @returns The capitalized string
+ */
+export function capitalize(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}