Skip to content

Commit 5138c33

Browse files
tkohrtkohr
authored
Merge pull request #151 from Geoportail-Luxembourg/GSLUX-705-modify-feature
GSLUX-705: Modify feature geometry
2 parents f4c2e1d + 1307a59 commit 5138c33

17 files changed

+328
-147
lines changed

‎cypress/e2e/background-selection.cy.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ describe('Background selector', () => {
2222
const layers = (<AUTWindowOlMap>window).olMap
2323
.getLayers()
2424
.getArray()
25-
.filter((l: any) => l.get('featureID') != 'featureLayer')
25+
.filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
2626
expect(layers[0].get('id')).to.eq(556)
2727
})
2828

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

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

Lines changed: 49 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
import {
2+
checkDrawInteractionActive,
3+
checkModifyInteractionActive,
4+
testFeatItem,
5+
} from './draw-feat.utils'
6+
17
describe('Map controls', () => {
28
beforeEach(() => {
39
cy.visit('/')
@@ -10,20 +16,27 @@ describe('Map controls', () => {
1016
})
1117
})
1218

13-
describe('when clicking button to draw point', () => {
14-
beforeEach(() => {
19+
describe('When clicking button to close draw tools', () => {
20+
it('should deactivate active ol draw interaction', () => {
1521
cy.get('button[data-cy="drawPointButton"]').click()
16-
})
17-
18-
it('activates ol Draw interaction in mode Point', () => {
22+
checkDrawInteractionActive('Point')
23+
cy.get('button[data-cy="drawButton"]').click()
1924
cy.getDrawInteractions().then(drawInteractions => {
2025
const activeInteractions = drawInteractions.filter(interaction => {
2126
return interaction.getActive() === true
2227
})
23-
expect(activeInteractions).to.have.length(1)
24-
expect(activeInteractions[0].mode_).to.be.equal('Point')
28+
expect(activeInteractions).to.have.length(0)
2529
})
2630
})
31+
})
32+
33+
describe('when clicking button to draw point', () => {
34+
beforeEach(() => {
35+
cy.get('button[data-cy="drawPointButton"]').click()
36+
})
37+
it('activates ol Draw interaction in mode Point', () => {
38+
checkDrawInteractionActive('Point')
39+
})
2740

2841
describe('When drawing the point on the map', () => {
2942
beforeEach(() => {
@@ -34,6 +47,11 @@ describe('Map controls', () => {
3447
cy.get('div[data-cy="drawPanel"]').should('exist')
3548
})
3649

50+
it('activates edition in panel and on map (ol modify interaction)', () => {
51+
checkModifyInteractionActive(true)
52+
testFeatItem()
53+
})
54+
3755
it('does not display a tooltip overlay when clicking on the map', () => {
3856
cy.get('div.lux-tooltip').should('not.exist')
3957
})
@@ -46,13 +64,7 @@ describe('Map controls', () => {
4664
})
4765

4866
it('activates ol Draw interaction in mode Point', () => {
49-
cy.getDrawInteractions().then(drawInteractions => {
50-
const activeInteractions = drawInteractions.filter(interaction => {
51-
return interaction.getActive() === true
52-
})
53-
expect(activeInteractions).to.have.length(1)
54-
expect(activeInteractions[0].mode_).to.be.equal('Point')
55-
})
67+
checkDrawInteractionActive('Point')
5668
})
5769

5870
describe('When drawing the label on the map', () => {
@@ -64,6 +76,11 @@ describe('Map controls', () => {
6476
cy.get('div[data-cy="drawPanel"]').should('exist')
6577
})
6678

79+
it('activates edition in panel and on map (ol modify interaction)', () => {
80+
checkModifyInteractionActive(true)
81+
testFeatItem()
82+
})
83+
6784
it('does not display a tooltip overlay when clicking on the map', () => {
6885
cy.get('div.lux-tooltip').should('not.exist')
6986
})
@@ -76,13 +93,7 @@ describe('Map controls', () => {
7693
})
7794

7895
it('activates ol Draw interaction in mode LineString', () => {
79-
cy.getDrawInteractions().then(drawInteractions => {
80-
const activeInteractions = drawInteractions.filter(interaction => {
81-
return interaction.getActive() === true
82-
})
83-
expect(activeInteractions).to.have.length(1)
84-
expect(activeInteractions[0].mode_).to.be.equal('LineString')
85-
})
96+
checkDrawInteractionActive('LineString')
8697
})
8798

8899
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', () => {
101112
it('displays the draw Panel', () => {
102113
cy.get('div[data-cy="drawPanel"]').should('exist')
103114
})
115+
116+
it('activates edition in panel and on map (ol modify interaction)', () => {
117+
checkModifyInteractionActive(true)
118+
testFeatItem()
119+
})
104120
})
105121
})
106122

@@ -110,13 +126,7 @@ describe('Map controls', () => {
110126
})
111127

112128
it('activates ol Draw interaction in mode Polygon', () => {
113-
cy.getDrawInteractions().then(drawInteractions => {
114-
const activeInteractions = drawInteractions.filter(interaction => {
115-
return interaction.getActive() === true
116-
})
117-
expect(activeInteractions).to.have.length(1)
118-
expect(activeInteractions[0].mode_).to.be.equal('Polygon')
119-
})
129+
checkDrawInteractionActive('Polygon')
120130
})
121131

122132
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', () => {
137147
it('displays the draw Panel', () => {
138148
cy.get('div[data-cy="drawPanel"]').should('exist')
139149
})
150+
151+
it('activates edition in panel and on map (ol modify interaction)', () => {
152+
checkModifyInteractionActive(true)
153+
testFeatItem()
154+
})
140155
})
141156
})
142157

@@ -146,13 +161,7 @@ describe('Map controls', () => {
146161
})
147162

148163
it('activates ol Draw interaction in mode Circle', () => {
149-
cy.getDrawInteractions().then(drawInteractions => {
150-
const activeInteractions = drawInteractions.filter(interaction => {
151-
return interaction.getActive() === true
152-
})
153-
expect(activeInteractions).to.have.length(1)
154-
expect(activeInteractions[0].mode_).to.be.equal('Circle')
155-
})
164+
checkDrawInteractionActive('Circle')
156165
})
157166

158167
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', () => {
171180
it('displays the draw Panel', () => {
172181
cy.get('div[data-cy="drawPanel"]').should('exist')
173182
})
183+
184+
it('activates edition in panel and on map (ol modify interaction)', () => {
185+
checkModifyInteractionActive(true)
186+
testFeatItem()
187+
})
174188
})
175189
})
176190
})

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,25 @@ export function testFeatItemDocking() {
1616
cy.get('*[data-cy="featItemDock"]').click()
1717
cy.get('*[data-cy="mapPopup"]').should('exist')
1818
}
19+
20+
export function checkDrawInteractionActive(
21+
type: 'Point' | 'LineString' | 'Polygon' | 'Circle'
22+
) {
23+
cy.getDrawInteractions().then(drawInteractions => {
24+
const activeInteractions = drawInteractions.filter(interaction => {
25+
return interaction.getActive() === true
26+
})
27+
expect(activeInteractions).to.have.length(1)
28+
expect(activeInteractions[0].mode_).to.be.equal(type)
29+
})
30+
}
31+
32+
export function checkModifyInteractionActive(exists: boolean) {
33+
cy.getModifyInteraction().then(modifyInteraction => {
34+
if (exists) {
35+
expect(modifyInteraction).to.exist
36+
} else {
37+
expect(modifyInteraction).to.equal(undefined)
38+
}
39+
})
40+
}

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { checkModifyInteractionActive, testFeatItem } from './draw-feat.utils'
2+
13
describe('Draw panel', () => {
24
beforeEach(() => {
35
cy.visit('/')
@@ -33,4 +35,16 @@ describe('Draw panel', () => {
3335
cy.get('@menuItem').eq(4).should('contain.text', 'Couper une ligne')
3436
})
3537
})
38+
39+
describe('When clicking toggle edit button', () => {
40+
it('should toggle edit in panel and on map (ol modify interaction)', () => {
41+
checkModifyInteractionActive(true)
42+
testFeatItem()
43+
cy.get('*[data-cy="featItemToggleEdit"]').click()
44+
checkModifyInteractionActive(false)
45+
cy.get('*[data-cy="featItemToggleEdit"]').click()
46+
checkModifyInteractionActive(true)
47+
testFeatItem()
48+
})
49+
})
3650
})

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ describe('Catalogue', () => {
6666
const layers = (<AUTWindowOlMap>window).olMap
6767
.getLayers()
6868
.getArray()
69-
.filter((l: any) => l.get('featureID') != 'featureLayer')
69+
.filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
7070
expect(layers[0].get('id')).to.eq(556)
7171
})
7272
cy.get('[data-cy="catalog"]').find('[data-cy="layerLabel-359"]').click()
@@ -76,7 +76,7 @@ describe('Catalogue', () => {
7676
const layers = (<AUTWindowOlMap>window).olMap
7777
.getLayers()
7878
.getArray()
79-
.filter((l: any) => l.get('featureID') != 'featureLayer')
79+
.filter((l: any) => l.get('cyLayerType') !== 'featureLayer')
8080
expect(layers[0].get('id')).to.eq(359)
8181
expect(layers[1].get('id')).to.eq(353)
8282
})

‎cypress/support/commands.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ Cypress.Commands.add('getDrawInteractions', () => {
3636
.getInteractions()
3737
.getArray()
3838
.filter(interaction => {
39-
// workaround for 'instance of Draw' not working with Draw2 class
39+
// workaround for 'instance of Draw' not working (with Draw2 class?)
4040
return (
4141
'finishDrawing' in interaction &&
4242
typeof interaction.finishDrawing === 'function'
@@ -45,10 +45,27 @@ Cypress.Commands.add('getDrawInteractions', () => {
4545
})
4646
})
4747

48+
Cypress.Commands.add('getModifyInteraction', () => {
49+
cy.window().then(win => {
50+
const map = win.olMap
51+
const modifyInteraction = map
52+
.getInteractions()
53+
.getArray()
54+
.find(interaction => {
55+
return (
56+
'removePoint' in interaction &&
57+
typeof interaction.removePoint === 'function'
58+
)
59+
})
60+
cy.wrap(modifyInteraction)
61+
})
62+
})
63+
4864
declare global {
4965
namespace Cypress {
5066
interface Chainable {
5167
getDrawInteractions(): Chainable<Array<Interaction>>
68+
getModifyInteraction(): Chainable<Interaction>
5269
// login(email: string, password: string): Chainable<void>
5370
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
5471
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>

‎src/components/draw/feature-item.vue‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,6 @@ function onToggleFeatureSub() {
3636
3737
function onToggleEditFeature() {
3838
emit('toggleFeatureEdit', getUid(props.feature), !props.isEditing)
39-
40-
alert('TODO: Toggle edition mode')
4139
}
4240
4341
function onClickDelete() {

‎src/components/footer/toolbar-draw.vue‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,19 @@
22
import { useTranslation } from 'i18next-vue'
33
import { storeToRefs } from 'pinia'
44
5-
import useDraw from '@/composables/draw/draw.composable'
65
import { useDrawStore } from '@/stores/draw.store'
76
87
import ButtonText from './button-text.vue'
8+
import { onBeforeUnmount } from 'vue'
99
1010
const { t } = useTranslation()
1111
const drawStore = useDrawStore()
12-
const { toggleActiveState } = drawStore
13-
const { drawStateActive } = storeToRefs(drawStore)
14-
// keep logic in composable
15-
useDraw()
12+
const { toggleDrawActiveState, setDrawActiveState } = drawStore
13+
const { drawStateActive, editStateActive } = storeToRefs(drawStore)
14+
15+
onBeforeUnmount(() => {
16+
setDrawActiveState(undefined)
17+
})
1618
</script>
1719
<template>
1820
<div data-cy="toolbarDraw">
@@ -22,52 +24,63 @@ useDraw()
2224
<li>
2325
<button-text
2426
:label="t('Draw Point', { ns: 'client' })"
25-
:active="drawStateActive === 'drawPoint'"
26-
@click="() => toggleActiveState('drawPoint')"
27+
:active="
28+
drawStateActive === 'drawPoint' || editStateActive === 'editPoint'
29+
"
30+
@click="() => toggleDrawActiveState('drawPoint')"
2731
data-cy="drawPointButton"
2832
>
2933
</button-text>
3034
</li>
3135
<li>
3236
<button-text
3337
:label="t('Label', { ns: 'client' })"
34-
:active="drawStateActive === 'drawLabel'"
35-
@click="() => toggleActiveState('drawLabel')"
38+
:active="
39+
drawStateActive === 'drawLabel' || editStateActive === 'editLabel'
40+
"
41+
@click="() => toggleDrawActiveState('drawLabel')"
3642
data-cy="drawLabelButton"
3743
>
3844
</button-text>
3945
</li>
4046
<li>
4147
<button-text
4248
:label="t('Line', { ns: 'client' })"
43-
:active="drawStateActive === 'drawLine'"
44-
@click="() => toggleActiveState('drawLine')"
49+
:active="
50+
drawStateActive === 'drawLine' || editStateActive === 'editLine'
51+
"
52+
@click="() => toggleDrawActiveState('drawLine')"
4553
data-cy="drawLineButton"
4654
>
4755
</button-text>
4856
</li>
4957
<li>
5058
<button-text
5159
:label="t('Polygon', { ns: 'client' })"
52-
:active="drawStateActive === 'drawPolygon'"
53-
@click="() => toggleActiveState('drawPolygon')"
60+
:active="
61+
drawStateActive === 'drawPolygon' ||
62+
editStateActive === 'editPolygon'
63+
"
64+
@click="() => toggleDrawActiveState('drawPolygon')"
5465
data-cy="drawPolygonButton"
5566
>
5667
</button-text>
5768
</li>
5869
<li>
5970
<button-text
6071
:label="t('Circle', { ns: 'client' })"
61-
:active="drawStateActive === 'drawCircle'"
62-
@click="() => toggleActiveState('drawCircle')"
72+
:active="
73+
drawStateActive === 'drawCircle' || editStateActive === 'editCircle'
74+
"
75+
@click="() => toggleDrawActiveState('drawCircle')"
6376
data-cy="drawCircleButton"
6477
>
6578
</button-text>
6679
</li>
6780
</ul>
6881
<ul
6982
class="absolute bottom-full top-auto z-10 pl-[130px] pb-16 w-[326px]"
70-
v-if="drawStateActive === 'drawLine'"
83+
v-if="drawStateActive === 'drawLine' || editStateActive === 'editLine'"
7184
data-cy="followRoads"
7285
>
7386
<li

0 commit comments

Comments
 (0)