Skip to content

Commit

Permalink
Separated Draw and Edit Tools (#389) (minor)
Browse files Browse the repository at this point in the history 
* seperated draw and edit tools
* fixed polygon whole test
  • Loading branch information
@codeofsumit
codeofsumit committed Jan 18, 2019
1 parent 6a18566 commit ba34497
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 76 deletions.
14 changes: 7 additions & 7 deletions cypress/integration/polygon.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,14 +293,14 @@ describe('Draw & Edit Poly', () => {
.closest('.button-container')
.should('have.class', 'active');

// draw a polygon
// draw a polygon to cut
cy.get(mapSelector)
.click(150, 150)
.click(270, 180)
.click(300, 180)
.click(280, 280)
.click(200, 285)
.click(150, 150);
.click(160, 100)
.click(270, 100)
.click(400, 130)
.click(350, 280)
.click(200, 150)
.click(160, 100);

// enable global edit mode
cy.toolbarButton('edit')
Expand Down
28 changes: 6 additions & 22 deletions src/js/Toolbar/L.Controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const PMButton = L.Control.extend({
onAdd(map) {
this._map = map;

this._container = this._map.pm.Toolbar.container;
this._container = this._button.tool === 'edit' ? this._map.pm.Toolbar.editContainer : this._map.pm.Toolbar.drawContainer;
this.buttonsDomNode = this._makeButton(this._button);
this._container.appendChild(this.buttonsDomNode);

Expand Down Expand Up @@ -53,25 +53,13 @@ const PMButton = L.Control.extend({
},
_makeButton(button) {
// button container
const buttonContainer = L.DomUtil.create(
'div',
'button-container',
this._container,
);
const buttonContainer = L.DomUtil.create('div', 'button-container', this._container);

// the button itself
const newButton = L.DomUtil.create(
'a',
'leaflet-buttons-control-button',
buttonContainer,
);
const newButton = L.DomUtil.create('a', 'leaflet-buttons-control-button', buttonContainer);

// the buttons actions
const actionContainer = L.DomUtil.create(
'div',
'leaflet-pm-actions-container',
buttonContainer,
);
const actionContainer = L.DomUtil.create('div', 'leaflet-pm-actions-container', buttonContainer);

const activeActions = button.actions;

Expand All @@ -98,11 +86,7 @@ const PMButton = L.Control.extend({

activeActions.forEach((name) => {
const action = actions[name];
const actionNode = L.DomUtil.create(
'a',
`leaflet-pm-action action-${name}`,
actionContainer,
);
const actionNode = L.DomUtil.create('a', `leaflet-pm-action action-${name}`, actionContainer);

actionNode.innerHTML = action.text;

Expand All @@ -119,7 +103,7 @@ const PMButton = L.Control.extend({
if (button.title) {
image.setAttribute('title', button.title);
}

if (button.iconUrl) {
image.setAttribute('src', button.iconUrl);
}
Expand Down
89 changes: 42 additions & 47 deletions src/js/Toolbar/L.PM.Toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,8 @@ const Toolbar = L.Class.extend({

this.buttons = {};
this.isVisible = false;
this.container = L.DomUtil.create(
'div',
'leaflet-pm-toolbar leaflet-bar leaflet-control',
);
this.drawContainer = L.DomUtil.create('div', 'leaflet-pm-toolbar leaflet-pm-draw leaflet-bar leaflet-control');
this.editContainer = L.DomUtil.create('div', 'leaflet-pm-toolbar leaflet-pm-edit leaflet-bar leaflet-control');

this._defineButtons();
},
Expand Down Expand Up @@ -106,10 +104,7 @@ const Toolbar = L.Class.extend({
// so, we trigger a click on all currently active (toggled) buttons

for (const name in this.buttons) {
if (
this.buttons[name] !== exceptThisButton &&
this.buttons[name].toggled()
) {
if (this.buttons[name] !== exceptThisButton && this.buttons[name].toggled()) {
this.buttons[name]._triggerClick();
}
}
Expand Down Expand Up @@ -152,20 +147,6 @@ const Toolbar = L.Class.extend({
actions: ['cancel'],
};

const deleteButton = {
title: 'Removal Mode',
className: 'control-icon leaflet-pm-icon-delete',
onClick: () => {},
afterClick: () => {
this.map.pm.toggleGlobalRemovalMode();
},
doToggle: true,
toggleStatus: false,
disableOtherButtons: true,
position: this.options.position,
actions: ['cancel'],
};

const drawPolyButton = {
title: 'Draw Polygon',
className: 'control-icon leaflet-pm-icon-polygon',
Expand All @@ -182,26 +163,6 @@ const Toolbar = L.Class.extend({
actions: ['finish', 'removeLastVertex', 'cancel'],
};

const cutButton = {
title: 'Cut Layers',
className: 'control-icon leaflet-pm-icon-cut',
jsClass: 'Cut',
onClick: () => {},
afterClick: () => {
// enable polygon drawing mode without snap
this.map.pm.Draw.Cut.toggle({
snappable: true,
cursorMarker: true,
allowSelfIntersection: false,
});
},
doToggle: true,
toggleStatus: false,
disableOtherButtons: true,
position: this.options.position,
actions: ['finish', 'removeLastVertex', 'cancel'],
};

const drawLineButton = {
className: 'control-icon leaflet-pm-icon-polyline',
title: 'Draw Polyline',
Expand Down Expand Up @@ -261,19 +222,53 @@ const Toolbar = L.Class.extend({
toggleStatus: false,
disableOtherButtons: true,
position: this.options.position,
tool: 'edit',
actions: ['cancel'],
};

const cutButton = {
title: 'Cut Layers',
className: 'control-icon leaflet-pm-icon-cut',
jsClass: 'Cut',
onClick: () => {},
afterClick: () => {
// enable polygon drawing mode without snap
this.map.pm.Draw.Cut.toggle({
snappable: true,
cursorMarker: true,
allowSelfIntersection: false,
});
},
doToggle: true,
toggleStatus: false,
disableOtherButtons: true,
position: this.options.position,
tool: 'edit',
actions: ['finish', 'removeLastVertex', 'cancel'],
};

const deleteButton = {
title: 'Removal Mode',
className: 'control-icon leaflet-pm-icon-delete',
onClick: () => {},
afterClick: () => {
this.map.pm.toggleGlobalRemovalMode();
},
doToggle: true,
toggleStatus: false,
disableOtherButtons: true,
position: this.options.position,
tool: 'edit',
actions: ['cancel'],
};

this._addButton('drawMarker', new L.Control.PMButton(drawMarkerButton));
this._addButton('drawPolyline', new L.Control.PMButton(drawLineButton));
this._addButton(
'drawRectangle',
new L.Control.PMButton(drawRectButton),
);
this._addButton('drawRectangle', new L.Control.PMButton(drawRectButton));
this._addButton('drawPolygon', new L.Control.PMButton(drawPolyButton));
this._addButton('drawCircle', new L.Control.PMButton(drawCircleButton));
this._addButton('cutPolygon', new L.Control.PMButton(cutButton));
this._addButton('editMode', new L.Control.PMButton(editButton));
this._addButton('cutPolygon', new L.Control.PMButton(cutButton));
this._addButton('removalMode', new L.Control.PMButton(deleteButton));
},

Expand Down

0 comments on commit ba34497

Please sign in to comment.