Merge pull request #151 from Geoportail-Luxembourg/GSLUX-705-modify-f…

…eature

GSLUX-705: Modify feature geometry

cypress/e2e/background-selection.cy.ts

@@ -22,7 +22,7 @@ describe('Background selector', () => {
       const layers = (<AUTWindowOlMap>window).olMap
         .getLayers()
         .getArray()
-        .filter((l: any) => l.get('featureID') != 'featureLayer')
+        .filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
       expect(layers[0].get('id')).to.eq(556)
     })
 
@@ -52,7 +52,7 @@ describe('Background selector', () => {
         const layers = (<AUTWindowOlMap>window).olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('featureID') != 'featureLayer')
+          .filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
         expect(layers[0].get('id')).to.eq(502)
       })
     })

cypress/e2e/draw/draw-bar.cy.ts

@@ -1,3 +1,9 @@
+import {
+  checkDrawInteractionActive,
+  checkModifyInteractionActive,
+  testFeatItem,
+} from './draw-feat.utils'
+
 describe('Map controls', () => {
   beforeEach(() => {
     cy.visit('/')
@@ -10,20 +16,27 @@ describe('Map controls', () => {
     })
   })
 
-  describe('when clicking button to draw point', () => {
-    beforeEach(() => {
+  describe('When clicking button to close draw tools', () => {
+    it('should deactivate active ol draw interaction', () => {
       cy.get('button[data-cy="drawPointButton"]').click()
-    })
-
-    it('activates ol Draw interaction in mode Point', () => {
+      checkDrawInteractionActive('Point')
+      cy.get('button[data-cy="drawButton"]').click()
       cy.getDrawInteractions().then(drawInteractions => {
         const activeInteractions = drawInteractions.filter(interaction => {
           return interaction.getActive() === true
         })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('Point')
+        expect(activeInteractions).to.have.length(0)
       })
     })
+  })
+
+  describe('when clicking button to draw point', () => {
+    beforeEach(() => {
+      cy.get('button[data-cy="drawPointButton"]').click()
+    })
+    it('activates ol Draw interaction in mode Point', () => {
+      checkDrawInteractionActive('Point')
+    })
 
     describe('When drawing the point on the map', () => {
       beforeEach(() => {
@@ -34,6 +47,11 @@ describe('Map controls', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
 
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
+
       it('does not display a tooltip overlay when clicking on the map', () => {
         cy.get('div.lux-tooltip').should('not.exist')
       })
@@ -46,13 +64,7 @@ describe('Map controls', () => {
     })
 
     it('activates ol Draw interaction in mode Point', () => {
-      cy.getDrawInteractions().then(drawInteractions => {
-        const activeInteractions = drawInteractions.filter(interaction => {
-          return interaction.getActive() === true
-        })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('Point')
-      })
+      checkDrawInteractionActive('Point')
     })
 
     describe('When drawing the label on the map', () => {
@@ -64,6 +76,11 @@ describe('Map controls', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
 
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
+
       it('does not display a tooltip overlay when clicking on the map', () => {
         cy.get('div.lux-tooltip').should('not.exist')
       })
@@ -76,13 +93,7 @@ describe('Map controls', () => {
     })
 
     it('activates ol Draw interaction in mode LineString', () => {
-      cy.getDrawInteractions().then(drawInteractions => {
-        const activeInteractions = drawInteractions.filter(interaction => {
-          return interaction.getActive() === true
-        })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('LineString')
-      })
+      checkDrawInteractionActive('LineString')
     })
 
     it('displays a tooltip when clicking on the map and hides it on draw end (second point double click)', () => {
@@ -101,6 +112,11 @@ describe('Map controls', () => {
       it('displays the draw Panel', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
+
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
     })
   })
 
@@ -110,13 +126,7 @@ describe('Map controls', () => {
     })
 
     it('activates ol Draw interaction in mode Polygon', () => {
-      cy.getDrawInteractions().then(drawInteractions => {
-        const activeInteractions = drawInteractions.filter(interaction => {
-          return interaction.getActive() === true
-        })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('Polygon')
-      })
+      checkDrawInteractionActive('Polygon')
     })
 
     it('displays a tooltip when clicking on the map and hides it on draw end (third point double click)', () => {
@@ -137,6 +147,11 @@ describe('Map controls', () => {
       it('displays the draw Panel', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
+
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
     })
   })
 
@@ -146,13 +161,7 @@ describe('Map controls', () => {
     })
 
     it('activates ol Draw interaction in mode Circle', () => {
-      cy.getDrawInteractions().then(drawInteractions => {
-        const activeInteractions = drawInteractions.filter(interaction => {
-          return interaction.getActive() === true
-        })
-        expect(activeInteractions).to.have.length(1)
-        expect(activeInteractions[0].mode_).to.be.equal('Circle')
-      })
+      checkDrawInteractionActive('Circle')
     })
 
     it('displays a tooltip when clicking on the map and hides it on draw end (second point simple click)', () => {
@@ -171,6 +180,11 @@ describe('Map controls', () => {
       it('displays the draw Panel', () => {
         cy.get('div[data-cy="drawPanel"]').should('exist')
       })
+
+      it('activates edition in panel and on map (ol modify interaction)', () => {
+        checkModifyInteractionActive(true)
+        testFeatItem()
+      })
     })
   })
 })

cypress/e2e/draw/draw-feat.utils.ts

@@ -16,3 +16,25 @@ export function testFeatItemDocking() {
   cy.get('*[data-cy="featItemDock"]').click()
   cy.get('*[data-cy="mapPopup"]').should('exist')
 }
+
+export function checkDrawInteractionActive(
+  type: 'Point' | 'LineString' | 'Polygon' | 'Circle'
+) {
+  cy.getDrawInteractions().then(drawInteractions => {
+    const activeInteractions = drawInteractions.filter(interaction => {
+      return interaction.getActive() === true
+    })
+    expect(activeInteractions).to.have.length(1)
+    expect(activeInteractions[0].mode_).to.be.equal(type)
+  })
+}
+
+export function checkModifyInteractionActive(exists: boolean) {
+  cy.getModifyInteraction().then(modifyInteraction => {
+    if (exists) {
+      expect(modifyInteraction).to.exist
+    } else {
+      expect(modifyInteraction).to.equal(undefined)
+    }
+  })
+}

cypress/e2e/draw/draw-panel.cy.ts

@@ -1,3 +1,5 @@
+import { checkModifyInteractionActive, testFeatItem } from './draw-feat.utils'
+
 describe('Draw panel', () => {
   beforeEach(() => {
     cy.visit('/')
@@ -33,4 +35,16 @@ describe('Draw panel', () => {
       cy.get('@menuItem').eq(4).should('contain.text', 'Couper une ligne')
     })
   })
+
+  describe('When clicking toggle edit button', () => {
+    it('should toggle edit in panel and on map (ol modify interaction)', () => {
+      checkModifyInteractionActive(true)
+      testFeatItem()
+      cy.get('*[data-cy="featItemToggleEdit"]').click()
+      checkModifyInteractionActive(false)
+      cy.get('*[data-cy="featItemToggleEdit"]').click()
+      checkModifyInteractionActive(true)
+      testFeatItem()
+    })
+  })
 })

cypress/e2e/layers-selection.cy.ts

@@ -66,7 +66,7 @@ describe('Catalogue', () => {
         const layers = (<AUTWindowOlMap>window).olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('featureID') != 'featureLayer')
+          .filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
         expect(layers[0].get('id')).to.eq(556)
       })
       cy.get('[data-cy="catalog"]').find('[data-cy="layerLabel-359"]').click()
@@ -76,7 +76,7 @@ describe('Catalogue', () => {
         const layers = (<AUTWindowOlMap>window).olMap
           .getLayers()
           .getArray()
-          .filter((l: any) => l.get('featureID') != 'featureLayer')
+          .filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
         expect(layers[0].get('id')).to.eq(359)
         expect(layers[1].get('id')).to.eq(353)
       })

cypress/support/commands.ts

@@ -36,7 +36,7 @@ Cypress.Commands.add('getDrawInteractions', () => {
       .getInteractions()
       .getArray()
       .filter(interaction => {
-        // workaround for 'instance of Draw' not working with Draw2 class
+        // workaround for 'instance of Draw' not working (with Draw2 class?)
         return (
           'finishDrawing' in interaction &&
           typeof interaction.finishDrawing === 'function'
@@ -45,10 +45,27 @@ Cypress.Commands.add('getDrawInteractions', () => {
   })
 })
 
+Cypress.Commands.add('getModifyInteraction', () => {
+  cy.window().then(win => {
+    const map = win.olMap
+    const modifyInteraction = map
+      .getInteractions()
+      .getArray()
+      .find(interaction => {
+        return (
+          'removePoint' in interaction &&
+          typeof interaction.removePoint === 'function'
+        )
+      })
+    cy.wrap(modifyInteraction)
+  })
+})
+
 declare global {
   namespace Cypress {
     interface Chainable {
       getDrawInteractions(): Chainable<Array<Interaction>>
+      getModifyInteraction(): Chainable<Interaction>
       // login(email: string, password: string): Chainable<void>
       // drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
       // dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>

src/components/draw/feature-item.vue

@@ -36,8 +36,6 @@ function onToggleFeatureSub() {
 
 function onToggleEditFeature() {
   emit('toggleFeatureEdit', getUid(props.feature), !props.isEditing)
-
-  alert('TODO: Toggle edition mode')
 }
 
 function onClickDelete() {

src/components/footer/toolbar-draw.vue

@@ -2,17 +2,19 @@
 import { useTranslation } from 'i18next-vue'
 import { storeToRefs } from 'pinia'
 
-import useDraw from '@/composables/draw/draw.composable'
 import { useDrawStore } from '@/stores/draw.store'
 
 import ButtonText from './button-text.vue'
+import { onBeforeUnmount } from 'vue'
 
 const { t } = useTranslation()
 const drawStore = useDrawStore()
-const { toggleActiveState } = drawStore
-const { drawStateActive } = storeToRefs(drawStore)
-// keep logic in composable
-useDraw()
+const { toggleDrawActiveState, setDrawActiveState } = drawStore
+const { drawStateActive, editStateActive } = storeToRefs(drawStore)
+
+onBeforeUnmount(() => {
+  setDrawActiveState(undefined)
+})
 </script>
 <template>
   <div data-cy="toolbarDraw">
@@ -22,52 +24,63 @@ useDraw()
       <li>
         <button-text
           :label="t('Draw Point', { ns: 'client' })"
-          :active="drawStateActive === 'drawPoint'"
-          @click="() => toggleActiveState('drawPoint')"
+          :active="
+            drawStateActive === 'drawPoint' || editStateActive === 'editPoint'
+          "
+          @click="() => toggleDrawActiveState('drawPoint')"
           data-cy="drawPointButton"
         >
         </button-text>
       </li>
       <li>
         <button-text
           :label="t('Label', { ns: 'client' })"
-          :active="drawStateActive === 'drawLabel'"
-          @click="() => toggleActiveState('drawLabel')"
+          :active="
+            drawStateActive === 'drawLabel' || editStateActive === 'editLabel'
+          "
+          @click="() => toggleDrawActiveState('drawLabel')"
           data-cy="drawLabelButton"
         >
         </button-text>
       </li>
       <li>
         <button-text
           :label="t('Line', { ns: 'client' })"
-          :active="drawStateActive === 'drawLine'"
-          @click="() => toggleActiveState('drawLine')"
+          :active="
+            drawStateActive === 'drawLine' || editStateActive === 'editLine'
+          "
+          @click="() => toggleDrawActiveState('drawLine')"
           data-cy="drawLineButton"
         >
         </button-text>
       </li>
       <li>
         <button-text
           :label="t('Polygon', { ns: 'client' })"
-          :active="drawStateActive === 'drawPolygon'"
-          @click="() => toggleActiveState('drawPolygon')"
+          :active="
+            drawStateActive === 'drawPolygon' ||
+            editStateActive === 'editPolygon'
+          "
+          @click="() => toggleDrawActiveState('drawPolygon')"
           data-cy="drawPolygonButton"
         >
         </button-text>
       </li>
       <li>
         <button-text
           :label="t('Circle', { ns: 'client' })"
-          :active="drawStateActive === 'drawCircle'"
-          @click="() => toggleActiveState('drawCircle')"
+          :active="
+            drawStateActive === 'drawCircle' || editStateActive === 'editCircle'
+          "
+          @click="() => toggleDrawActiveState('drawCircle')"
           data-cy="drawCircleButton"
         >
         </button-text>
       </li>
     </ul>
     <ul
       class="absolute bottom-full top-auto z-10 pl-[130px] pb-16 w-[326px]"
-      v-if="drawStateActive === 'drawLine'"
+      v-if="drawStateActive === 'drawLine' || editStateActive === 'editLine'"
       data-cy="followRoads"
     >
       <li