Skip to content

[Refactor] Extends Circle from CircleMarker (patch) #1309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 21, 2023
Merged

[Refactor] Extends Circle from CircleMarker (patch) #1309

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6c657ae
WIP
Falke-Design Feb 11, 2023
3d468b4
Extends Circle from CircleMarker
Falke-Design Feb 11, 2023
2eb276b
Marge upstream develop
Falke-Design Jun 24, 2023
6fc59ea
Rename to resizableCircle and resizeableCircleMarker
Falke-Design Jun 24, 2023
e9ca79d
Merge branch 'develop' into feat/extend_circle_from_circlemarker
Falke-Design Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 134 additions & 0 deletions cypress/integration/circle.spec.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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