Skip to content

Commit a615e6a

Browse files
Falke-DesignFalke-Design
authored
[Refactor] Extends Circle from CircleMarker (patch) (#1309)
* WIP * Extends Circle from CircleMarker * Rename to resizableCircle and resizeableCircleMarker
1 parent 4edf39b commit a615e6a

File tree

12 files changed

+526
-842
lines changed

12 files changed

+526
-842
lines changed

‎cypress/integration/circle.spec.js

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
11
describe('Draw Circle', () => {
22
const mapSelector = '#map';
33

4+
Cypress.Commands.add('hasCircleLayers', (count) => {
5+
cy.window().then(({ map, L }) => {
6+
const layerCount = Object.values(map._layers).reduce((total, layer) => {
7+
if (layer instanceof L.Circle) {
8+
return total + 1;
9+
}
10+
return total;
11+
}, 0);
12+
cy.wrap(layerCount).should('eq', count);
13+
});
14+
});
15+
416
it('draws a circle', () => {
517
cy.toolbarButton('circle')
618
.click()
@@ -310,4 +322,126 @@ describe('Draw Circle', () => {
310322
expect(hintLine.options.color).to.eql('red');
311323
});
312324
});
325+
326+
it('fires disable event only if it was enabled', () => {
327+
cy.toolbarButton('circle')
328+
.click()
329+
.closest('.button-container')
330+
.should('have.class', 'active');
331+
332+
cy.get(mapSelector).click(200, 200);
333+
cy.get(mapSelector).click(300, 300);
334+
335+
cy.window().then(({ map }) => {
336+
const layer = map.pm.getGeomanDrawLayers()[0];
337+
338+
let disableFired = false;
339+
layer.on('pm:disable',()=>{
340+
disableFired = true;
341+
});
342+
layer.pm.disable();
343+
expect(disableFired).to.eql(false);
344+
345+
layer.pm.enable();
346+
layer.pm.disable();
347+
expect(disableFired).to.eql(true);
348+
});
349+
});
350+
351+
352+
it('creates circles (non-resizableCircle)', () => {
353+
cy.window().then(({ map }) => {
354+
map.pm.setGlobalOptions({ resizableCircle: false, continueDrawing: true });
355+
});
356+
357+
cy.toolbarButton('circle')
358+
.click()
359+
.closest('.button-container')
360+
.should('have.class', 'active');
361+
362+
cy.get(mapSelector).click(200, 200);
363+
cy.get(mapSelector).click(300, 300);
364+
cy.get(mapSelector).click(350, 350);
365+
366+
cy.toolbarButton('edit')
367+
.click()
368+
.closest('.button-container')
369+
.should('have.class', 'active');
370+
371+
cy.hasCircleLayers(3);
372+
});
373+
374+
it('disable dragging correctly (non-resizableCircle)', () => {
375+
cy.window().then(({ map }) => {
376+
map.pm.setGlobalOptions({ resizableCircle: false });
377+
});
378+
379+
cy.toolbarButton('circle')
380+
.click()
381+
.closest('.button-container')
382+
.should('have.class', 'active');
383+
384+
cy.get(mapSelector).click(200, 200);
385+
cy.get(mapSelector).click(300, 300);
386+
387+
cy.window().then(({ map }) => {
388+
const layer = map.pm.getGeomanDrawLayers()[0];
389+
390+
expect(layer.pm.layerDragEnabled()).to.eql(false);
391+
layer.pm.enable();
392+
expect(layer.pm.layerDragEnabled()).to.eql(true);
393+
layer.pm.disable();
394+
expect(layer.pm.layerDragEnabled()).to.eql(false);
395+
});
396+
});
397+
398+
it('deletes no circles by right-click (non-resizableCircle)', () => {
399+
cy.window().then(({ map }) => {
400+
map.pm.setGlobalOptions({ resizableCircle: false });
401+
});
402+
403+
cy.toolbarButton('circle')
404+
.click()
405+
.closest('.button-container')
406+
.should('have.class', 'active');
407+
408+
cy.get(mapSelector).click(200, 200);
409+
410+
cy.toolbarButton('edit')
411+
.click()
412+
.closest('.button-container')
413+
.should('have.class', 'active');
414+
415+
cy.hasCircleLayers(1);
416+
417+
418+
cy.get(mapSelector)
419+
.rightclick(200, 200);
420+
421+
422+
cy.hasCircleLayers(1);
423+
});
424+
425+
it('change color of circleMarker while drawing (non-resizableCircle)', () => {
426+
cy.window().then(({ map }) => {
427+
map.pm.setGlobalOptions({ resizableCircle: false });
428+
});
429+
430+
cy.toolbarButton('circle')
431+
.click()
432+
.closest('.button-container')
433+
.should('have.class', 'active');
434+
435+
cy.get(mapSelector).trigger('mousemove', 300, 300);
436+
437+
cy.window().then(({ map }) => {
438+
const style = {
439+
color: 'red',
440+
};
441+
map.pm.setGlobalOptions({ templineStyle: style, hintlineStyle: style });
442+
443+
const layer = map.pm.Draw.Circle._layer;
444+
expect(layer.options.color).to.eql('red');
445+
});
446+
});
313447
});

‎cypress/integration/circlemarker.spec.js

Lines changed: 86 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ describe('Draw Circle Marker', () => {
116116

117117
it('draw a CircleMarker like a Circle', () => {
118118
cy.window().then(({ map }) => {
119-
map.pm.setGlobalOptions({ editable: true, continueDrawing: false });
119+
map.pm.setGlobalOptions({ resizeableCircleMarker: true, continueDrawing: false });
120120
});
121121

122122
cy.toolbarButton('circle-marker')
@@ -142,7 +142,7 @@ describe('Draw Circle Marker', () => {
142142

143143
it('enable continueDrawing #2', () => {
144144
cy.window().then(({ map }) => {
145-
map.pm.setGlobalOptions({ continueDrawing: true, editable: true });
145+
map.pm.setGlobalOptions({ continueDrawing: true, resizeableCircleMarker: true });
146146
});
147147

148148
cy.toolbarButton('circle-marker')
@@ -249,7 +249,7 @@ describe('Draw Circle Marker', () => {
249249
map.pm.setGlobalOptions({
250250
minRadiusCircleMarker: 50,
251251
maxRadiusCircleMarker: 150,
252-
editable: true,
252+
resizeableCircleMarker: true,
253253
});
254254
cy.get(mapSelector)
255255
.click(250, 200)
@@ -275,7 +275,7 @@ describe('Draw Circle Marker', () => {
275275
map.pm.setGlobalOptions({
276276
minRadiusCircleMarker: 150,
277277
maxRadiusCircleMarker: 300,
278-
editable: true,
278+
resizeableCircleMarker: true,
279279
});
280280
cy.get(mapSelector)
281281
.click(250, 200)
@@ -318,11 +318,11 @@ describe('Draw Circle Marker', () => {
318318
expect(2).to.eq(map.pm.getGeomanDrawLayers().length);
319319
});
320320
});
321-
it('requireSnapToFinish editable', () => {
321+
it('requireSnapToFinish resizeableCircleMarker', () => {
322322
cy.window().then(({ map }) => {
323323
map.pm.setGlobalOptions({
324324
requireSnapToFinish: true,
325-
editable: true,
325+
resizeableCircleMarker: true,
326326
snapSegment: false,
327327
});
328328
});
@@ -370,7 +370,7 @@ describe('Draw Circle Marker', () => {
370370
});
371371
});
372372

373-
it('Snapping to CircleMarker (editable) border on CRS Simple Map', () => {
373+
it('Snapping to CircleMarker (resizeableCircleMarker) border on CRS Simple Map', () => {
374374
let mapSimple;
375375
cy.window().then(({ map, L }) => {
376376
map.remove();
@@ -380,7 +380,7 @@ describe('Draw Circle Marker', () => {
380380
}).setView([0, 0], 0);
381381
mapSimple.pm.addControls();
382382

383-
mapSimple.pm.enableDraw('CircleMarker', { editable: true });
383+
mapSimple.pm.enableDraw('CircleMarker', { resizeableCircleMarker: true });
384384
});
385385

386386
cy.get(mapSelector).click(350, 250).click(450, 250);
@@ -395,7 +395,7 @@ describe('Draw Circle Marker', () => {
395395
});
396396
it('checks if circle is hidden before drawing', () => {
397397
cy.window().then(({ map }) => {
398-
map.pm.setGlobalOptions({ editable: true });
398+
map.pm.setGlobalOptions({ resizeableCircleMarker: true });
399399
});
400400
cy.toolbarButton('circle-marker').click();
401401
cy.window().then(({ map }) => {
@@ -406,7 +406,7 @@ describe('Draw Circle Marker', () => {
406406

407407
it('removes circleMarker if enabled', () => {
408408
cy.window().then(({ map }) => {
409-
map.pm.setGlobalOptions({ editable: true });
409+
map.pm.setGlobalOptions({ resizeableCircleMarker: true });
410410
});
411411

412412
cy.toolbarButton('circle-marker')
@@ -436,7 +436,7 @@ describe('Draw Circle Marker', () => {
436436
it('check if snapping works with max radius of circle', () => {
437437
cy.window().then(({ map }) => {
438438
map.pm.setGlobalOptions({
439-
editable: true,
439+
resizeableCircleMarker: true,
440440
});
441441
});
442442
cy.toolbarButton('circle-marker')
@@ -480,9 +480,9 @@ describe('Draw Circle Marker', () => {
480480
});
481481
});
482482

483-
it('change color of circleMarker (editable) while drawing', () => {
483+
it('change color of circleMarker (resizeableCircleMarker) while drawing', () => {
484484
cy.window().then(({ map }) => {
485-
map.pm.setGlobalOptions({ editable: true });
485+
map.pm.setGlobalOptions({ resizeableCircleMarker: true });
486486
});
487487

488488
cy.toolbarButton('circle-marker')
@@ -505,4 +505,77 @@ describe('Draw Circle Marker', () => {
505505
expect(hintLine.options.color).to.eql('red');
506506
});
507507
});
508+
509+
it('fires disable event only if it was enabled', () => {
510+
cy.window().then(({ map }) => {
511+
map.pm.setGlobalOptions({ resizeableCircleMarker: true });
512+
});
513+
514+
cy.toolbarButton('circle-marker')
515+
.click()
516+
.closest('.button-container')
517+
.should('have.class', 'active');
518+
519+
cy.get(mapSelector).click(200, 200);
520+
cy.get(mapSelector).click(300, 300);
521+
522+
cy.window().then(({ map }) => {
523+
const layer = map.pm.getGeomanDrawLayers()[0];
524+
525+
let disableFired = false;
526+
layer.on('pm:disable',()=>{
527+
disableFired = true;
528+
});
529+
layer.pm.disable();
530+
expect(disableFired).to.eql(false);
531+
532+
layer.pm.enable();
533+
layer.pm.disable();
534+
expect(disableFired).to.eql(true);
535+
});
536+
});
537+
538+
it('disable dragging correctly', () => {
539+
cy.toolbarButton('circle-marker')
540+
.click()
541+
.closest('.button-container')
542+
.should('have.class', 'active');
543+
544+
cy.get(mapSelector).click(200, 200);
545+
546+
cy.toolbarButton('circle-marker')
547+
.click();
548+
549+
cy.window().then(({ map }) => {
550+
const layer = map.pm.getGeomanDrawLayers()[0];
551+
552+
expect(layer.pm.layerDragEnabled()).to.eql(false);
553+
layer.pm.enable();
554+
expect(layer.pm.layerDragEnabled()).to.eql(true);
555+
layer.pm.disable();
556+
expect(layer.pm.layerDragEnabled()).to.eql(false);
557+
});
558+
});
559+
560+
it('draw a CircleMarker like a Circle with deprecated option `editable`', () => {
561+
cy.window().then(({ map }) => {
562+
map.pm.setGlobalOptions({ editable: true, continueDrawing: false });
563+
});
564+
565+
cy.toolbarButton('circle-marker')
566+
.click()
567+
.closest('.button-container')
568+
.should('have.class', 'active');
569+
570+
cy.get(mapSelector).click(200, 200).click(250, 250);
571+
572+
cy.hasCircleLayers(1);
573+
574+
cy.toolbarButton('edit')
575+
.click()
576+
.closest('.button-container')
577+
.should('have.class', 'active');
578+
579+
cy.hasVertexMarkers(2);
580+
});
508581
});

‎leaflet-geoman.d.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1101,15 +1101,23 @@ declare module 'leaflet' {
11011101
/** Set the max radius of a Circle. (default:null). */
11021102
maxRadiusCircle?: number;
11031103

1104-
/** Set the min radius of a CircleMarker when editable is active. (default:null). */
1104+
/** Set the min radius of a CircleMarker. (default:null). */
11051105
minRadiusCircleMarker?: number;
11061106

1107-
/** Set the max radius of a CircleMarker when editable is active. (default:null). */
1107+
/** Set the max radius of a CircleMarker. (default:null). */
11081108
maxRadiusCircleMarker?: number;
11091109

1110-
/** Makes a CircleMarker editable like a Circle (default:false). */
1110+
/**
1111+
* @deprecated Use resizeableCircleMarker instead
1112+
*/
11111113
editable?: boolean;
11121114

1115+
/** Enables radius editing while drawing a Circle (default:true). */
1116+
resizableCircle?: boolean;
1117+
1118+
/** Enables radius editing while drawing a CircleMarker (default:false). */
1119+
resizeableCircleMarker?: boolean;
1120+
11131121
/** Markers and CircleMarkers are editable during the draw-session (you can drag them around immediately after drawing them) (default:true). */
11141122
markerEditable?: boolean;
11151123

0 commit comments

Comments
 (0)