Skip to content

Commit

Permalink
[Refactor] Extends Circle from CircleMarker (patch) (#1309)
Browse files Browse the repository at this point in the history 
* WIP

* Extends Circle from CircleMarker

* Rename to resizableCircle and resizeableCircleMarker
  • Loading branch information
@Falke-Design
Falke-Design authored Nov 21, 2023
1 parent 4edf39b commit a615e6a
Show file tree
Hide file tree
Showing 12 changed files with 526 additions and 842 deletions.
134 changes: 134 additions & 0 deletions cypress/integration/circle.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
describe('Draw Circle', () => {
const mapSelector = '#map';

Cypress.Commands.add('hasCircleLayers', (count) => {
cy.window().then(({ map, L }) => {
const layerCount = Object.values(map._layers).reduce((total, layer) => {
if (layer instanceof L.Circle) {
return total + 1;
}
return total;
}, 0);
cy.wrap(layerCount).should('eq', count);
});
});

it('draws a circle', () => {
cy.toolbarButton('circle')
.click()
Expand Down Expand Up @@ -310,4 +322,126 @@ describe('Draw Circle', () => {
expect(hintLine.options.color).to.eql('red');
});
});

it('fires disable event only if it was enabled', () => {
cy.toolbarButton('circle')
.click()
.closest('.button-container')
.should('have.class', 'active');

cy.get(mapSelector).click(200, 200);
cy.get(mapSelector).click(300, 300);

cy.window().then(({ map }) => {
const layer = map.pm.getGeomanDrawLayers()[0];

let disableFired = false;
layer.on('pm:disable',()=>{
disableFired = true;
});
layer.pm.disable();
expect(disableFired).to.eql(false);

layer.pm.enable();
layer.pm.disable();
expect(disableFired).to.eql(true);
});
});


it('creates circles (non-resizableCircle)', () => {
cy.window().then(({ map }) => {
map.pm.setGlobalOptions({ resizableCircle: false, continueDrawing: true });
});

cy.toolbarButton('circle')
.click()
.closest('.button-container')
.should('have.class', 'active');

cy.get(mapSelector).click(200, 200);
cy.get(mapSelector).click(300, 300);
cy.get(mapSelector).click(350, 350);

cy.toolbarButton('edit')
.click()
.closest('.button-container')
.should('have.class', 'active');

cy.hasCircleLayers(3);
});

it('disable dragging correctly (non-resizableCircle)', () => {
cy.window().then(({ map }) => {
map.pm.setGlobalOptions({ resizableCircle: false });
});

cy.toolbarButton('circle')
.click()
.closest('.button-container')
.should('have.class', 'active');

cy.get(mapSelector).click(200, 200);
cy.get(mapSelector).click(300, 300);

cy.window().then(({ map }) => {
const layer = map.pm.getGeomanDrawLayers()[0];

expect(layer.pm.layerDragEnabled()).to.eql(false);
layer.pm.enable();
expect(layer.pm.layerDragEnabled()).to.eql(true);
layer.pm.disable();
expect(layer.pm.layerDragEnabled()).to.eql(false);
});
});

it('deletes no circles by right-click (non-resizableCircle)', () => {
cy.window().then(({ map }) => {
map.pm.setGlobalOptions({ resizableCircle: false });
});

cy.toolbarButton('circle')
.click()
.closest('.button-container')
.should('have.class', 'active');

cy.get(mapSelector).click(200, 200);

cy.toolbarButton('edit')
.click()
.closest('.button-container')
.should('have.class', 'active');

cy.hasCircleLayers(1);


cy.get(mapSelector)
.rightclick(200, 200);


cy.hasCircleLayers(1);
});

it('change color of circleMarker while drawing (non-resizableCircle)', () => {
cy.window().then(({ map }) => {
map.pm.setGlobalOptions({ resizableCircle: false });
});

cy.toolbarButton('circle')
.click()
.closest('.button-container')
.should('have.class', 'active');

cy.get(mapSelector).trigger('mousemove', 300, 300);

cy.window().then(({ map }) => {
const style = {
color: 'red',
};
map.pm.setGlobalOptions({ templineStyle: style, hintlineStyle: style });

const layer = map.pm.Draw.Circle._layer;
expect(layer.options.color).to.eql('red');
});
});
});
99 changes: 86 additions & 13 deletions cypress/integration/circlemarker.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ describe('Draw Circle Marker', () => {

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

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

it('enable continueDrawing #2', () => {
cy.window().then(({ map }) => {
map.pm.setGlobalOptions({ continueDrawing: true, editable: true });
map.pm.setGlobalOptions({ continueDrawing: true, resizeableCircleMarker: true });
});

cy.toolbarButton('circle-marker')
Expand Down Expand Up @@ -249,7 +249,7 @@ describe('Draw Circle Marker', () => {
map.pm.setGlobalOptions({
minRadiusCircleMarker: 50,
maxRadiusCircleMarker: 150,
editable: true,
resizeableCircleMarker: true,
});
cy.get(mapSelector)
.click(250, 200)
Expand All @@ -275,7 +275,7 @@ describe('Draw Circle Marker', () => {
map.pm.setGlobalOptions({
minRadiusCircleMarker: 150,
maxRadiusCircleMarker: 300,
editable: true,
resizeableCircleMarker: true,
});
cy.get(mapSelector)
.click(250, 200)
Expand Down Expand Up @@ -318,11 +318,11 @@ describe('Draw Circle Marker', () => {
expect(2).to.eq(map.pm.getGeomanDrawLayers().length);
});
});
it('requireSnapToFinish editable', () => {
it('requireSnapToFinish resizeableCircleMarker', () => {
cy.window().then(({ map }) => {
map.pm.setGlobalOptions({
requireSnapToFinish: true,
editable: true,
resizeableCircleMarker: true,
snapSegment: false,
});
});
Expand Down Expand Up @@ -370,7 +370,7 @@ describe('Draw Circle Marker', () => {
});
});

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

mapSimple.pm.enableDraw('CircleMarker', { editable: true });
mapSimple.pm.enableDraw('CircleMarker', { resizeableCircleMarker: true });
});

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

it('removes circleMarker if enabled', () => {
cy.window().then(({ map }) => {
map.pm.setGlobalOptions({ editable: true });
map.pm.setGlobalOptions({ resizeableCircleMarker: true });
});

cy.toolbarButton('circle-marker')
Expand Down Expand Up @@ -436,7 +436,7 @@ describe('Draw Circle Marker', () => {
it('check if snapping works with max radius of circle', () => {
cy.window().then(({ map }) => {
map.pm.setGlobalOptions({
editable: true,
resizeableCircleMarker: true,
});
});
cy.toolbarButton('circle-marker')
Expand Down Expand Up @@ -480,9 +480,9 @@ describe('Draw Circle Marker', () => {
});
});

it('change color of circleMarker (editable) while drawing', () => {
it('change color of circleMarker (resizeableCircleMarker) while drawing', () => {
cy.window().then(({ map }) => {
map.pm.setGlobalOptions({ editable: true });
map.pm.setGlobalOptions({ resizeableCircleMarker: true });
});

cy.toolbarButton('circle-marker')
Expand All @@ -505,4 +505,77 @@ describe('Draw Circle Marker', () => {
expect(hintLine.options.color).to.eql('red');
});
});

it('fires disable event only if it was enabled', () => {
cy.window().then(({ map }) => {
map.pm.setGlobalOptions({ resizeableCircleMarker: true });
});

cy.toolbarButton('circle-marker')
.click()
.closest('.button-container')
.should('have.class', 'active');

cy.get(mapSelector).click(200, 200);
cy.get(mapSelector).click(300, 300);

cy.window().then(({ map }) => {
const layer = map.pm.getGeomanDrawLayers()[0];

let disableFired = false;
layer.on('pm:disable',()=>{
disableFired = true;
});
layer.pm.disable();
expect(disableFired).to.eql(false);

layer.pm.enable();
layer.pm.disable();
expect(disableFired).to.eql(true);
});
});

it('disable dragging correctly', () => {
cy.toolbarButton('circle-marker')
.click()
.closest('.button-container')
.should('have.class', 'active');

cy.get(mapSelector).click(200, 200);

cy.toolbarButton('circle-marker')
.click();

cy.window().then(({ map }) => {
const layer = map.pm.getGeomanDrawLayers()[0];

expect(layer.pm.layerDragEnabled()).to.eql(false);
layer.pm.enable();
expect(layer.pm.layerDragEnabled()).to.eql(true);
layer.pm.disable();
expect(layer.pm.layerDragEnabled()).to.eql(false);
});
});

it('draw a CircleMarker like a Circle with deprecated option `editable`', () => {
cy.window().then(({ map }) => {
map.pm.setGlobalOptions({ editable: true, continueDrawing: false });
});

cy.toolbarButton('circle-marker')
.click()
.closest('.button-container')
.should('have.class', 'active');

cy.get(mapSelector).click(200, 200).click(250, 250);

cy.hasCircleLayers(1);

cy.toolbarButton('edit')
.click()
.closest('.button-container')
.should('have.class', 'active');

cy.hasVertexMarkers(2);
});
});
14 changes: 11 additions & 3 deletions leaflet-geoman.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1101,15 +1101,23 @@ declare module 'leaflet' {
/** Set the max radius of a Circle. (default:null). */
maxRadiusCircle?: number;

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

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

/** Makes a CircleMarker editable like a Circle (default:false). */
/**
* @deprecated Use resizeableCircleMarker instead
*/
editable?: boolean;

/** Enables radius editing while drawing a Circle (default:true). */
resizableCircle?: boolean;

/** Enables radius editing while drawing a CircleMarker (default:false). */
resizeableCircleMarker?: boolean;

/** Markers and CircleMarkers are editable during the draw-session (you can drag them around immediately after drawing them) (default:true). */
markerEditable?: boolean;

Expand Down
Loading

0 comments on commit a615e6a

Please sign in to comment.