Skip to content

Shape fix in events #643

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 1 commit into from
Sep 3, 2020
Merged

Shape fix in events #643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
40 changes: 20 additions & 20 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,19 +321,19 @@ The following events are available on a layer instance:

| Event | Params | Description | Output |
| :----------------- | :----- | :--------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------ |
| pm:edit | `e` | Fired when a layer is edited. | `layer` |
| pm:update | `e` | Fired when edit mode is disabled and a layer is edited and its coordinates have changed. | `layer` |
| pm:enable | `e` | Fired when edit mode on a layer is enabled | `layer` |
| pm:disable | `e` | Fired when edit mode on a layer is disabled | `layer` |
| pm:vertexadded | `e` | Fired when a vertex is added | `layer`, `indexPath`, `latlng`, `marker` |
| pm:vertexremoved | `e` | Fired when a vertex is removed | `layer`, `indexPath`, `marker` |
| pm:markerdragstart | `e` | Fired when dragging of a marker which corresponds to a vertex starts | `layer`, `indexPath`, `markerEvent` |
| pm:markerdragend | `e` | Fired when dragging of a vertex-marker ends | `layer`, `indexPath`, `markerEvent` |
| pm:edit | `e` | Fired when a layer is edited. | `layer`, `shape` |
| pm:update | `e` | Fired when edit mode is disabled and a layer is edited and its coordinates have changed. | `layer`, `shape` |
| pm:enable | `e` | Fired when edit mode on a layer is enabled | `layer`, `shape` |
| pm:disable | `e` | Fired when edit mode on a layer is disabled | `layer`, `shape` |
| pm:vertexadded | `e` | Fired when a vertex is added | `layer`, `indexPath`, `latlng`, `marker`, `shape` |
| pm:vertexremoved | `e` | Fired when a vertex is removed | `layer`, `indexPath`, `marker`, `shape` |
| pm:markerdragstart | `e` | Fired when dragging of a marker which corresponds to a vertex starts | `layer`, `indexPath`, `markerEvent`, `shape` |
| pm:markerdragend | `e` | Fired when dragging of a vertex-marker ends | `layer`, `indexPath`, `markerEvent`, `shape` |
| pm:snapdrag | `e` | Fired during a marker move/drag. Payload includes info about involved layers and snapping calculation| `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` |
| pm:snap | `e` | Fired when a vertex-marker is snapped to another vertex. Also fired on the marker itself. | `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` |
| pm:unsnap | `e` | Fired when a vertex-marker is unsnapped from a vertex. Also fired on the marker itself. | `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` |
| pm:intersect | `e` | When `allowSelfIntersection: false`, this event is fired as soon as a self-intersection is detected. | `layer`, `intersection` |
| pm:centerplaced | `e` | Fired when the center of a circle is moved | `layer`, `latlng` |
| pm:intersect | `e` | When `allowSelfIntersection: false`, this event is fired as soon as a self-intersection is detected. | `layer`, `intersection`, `shape` |
| pm:centerplaced | `e` | Fired when the center of a circle is moved | `layer`, `latlng`, `shape` |

You can enable Edit Mode for all layers on a map like this:

Expand Down Expand Up @@ -386,11 +386,11 @@ The following methods are available on `map.pm`:

The following events are available on a layer instance:

| Event | Params | Description | Output |
| :----------- | :----- | :--------------------------------------- | :--------------------------------------------------------------- |
| pm:dragstart | `e` | Fired when a layer starts being dragged. | `layer` |
| pm:drag | `e` | Fired when a layer is dragged. | `layer`, `containerPoint`,`latlng`, `layerPoint`,`originalEvent` |
| pm:dragend | `e` | Fired when a layer stops being dragged. | `layer` |
| Event | Params | Description | Output |
| :----------- | :----- | :--------------------------------------- | :------------------------------------------------------------------------ |
| pm:dragstart | `e` | Fired when a layer starts being dragged. | `layer`, `shape` |
| pm:drag | `e` | Fired when a layer is dragged. | `layer`, `containerPoint`,`latlng`, `layerPoint`,`originalEvent`, `shape` |
| pm:dragend | `e` | Fired when a layer stops being dragged. | `layer`, `shape` |


The following events are available on a map instance:
Expand Down Expand Up @@ -426,16 +426,16 @@ The following methods are available on `map.pm`:

The following events are available on a layer instance:

| Event | Params | Description | Output |
| :---------- | :----- | :------------------------------------------------------- | :------ |
| pm:remove | `e` | Fired when a layer is removed via Removal Mode | `layer` |
| Event | Params | Description | Output |
| :---------- | :----- | :------------------------------------------------------- | :--------------- |
| pm:remove | `e` | Fired when a layer is removed via Removal Mode | `layer`, `shape` |

The following events are available on a map instance:

| Event | Params | Description | Output |
| :---------------------------- | :----- | :------------------------------------------------------- | :---------------- |
| pm:globalremovalmodetoggled | `e` | Fired when Removal Mode is toggled | `enabled`, `map` |
| pm:remove | `e` | Fired when a layer is removed via Removal Mode | `layer` |
| pm:remove | `e` | Fired when a layer is removed via Removal Mode | `layer`, `shape` |
| layerremove | `e` | Standard Leaflet event. Fired when any layer is removed. | `layer` |

You can also listen to specific removal mode events on the map instance like this:
Expand Down Expand Up @@ -483,7 +483,7 @@ The following events are available on a layer instance:
| Event | Params | Description | Output |
| :------ | :----- | :--------------------------------- | :---------------------------------- |
| pm:cut | `e` | Fired when the layer being cut | `shape`, `layer`, `originalLayer` |
| pm:edit | `e` | Fired when a layer is edited / cut | `layer` |
| pm:edit | `e` | Fired when a layer is edited / cut | `layer`, `shape` |

The following events are available on a map instance:

Expand Down
1 change: 1 addition & 0 deletions cypress/integration/toolbar.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,7 @@ describe('Testing the Toolbar', () => {
cy.window().then(() => {
map.pm.enableDraw('PolygonCopy');
map.on('pm:create', (e) => {
expect(e.shape).to.equal('PolygonCopy');
e.layer.on('click', (l) => testlayer = l.target)
})
});
Expand Down
2 changes: 2 additions & 0 deletions src/js/Draw/L.PM.Draw.Circle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,7 @@ Draw.Circle = Draw.extend({
this._layer.fire('pm:centerplaced', {
workingLayer: this._layer,
latlng,
shape: this._shape
});
}
},
Expand All @@ -209,6 +210,7 @@ Draw.Circle = Draw.extend({

// create the final circle layer
const circleLayer = L.circle(center, options).addTo(this._map);
this._setShapeForFinishLayer(circleLayer);
this._addDrawnLayerProp(circleLayer);

// create polygon around the circle border
Expand Down
2 changes: 2 additions & 0 deletions src/js/Draw/L.PM.Draw.CircleMarker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,7 @@ Draw.CircleMarker = Draw.Marker.extend({

// create marker
const marker = L.circleMarker(latlng, this.options.pathOptions);
this._setShapeForFinishLayer(marker);
this._addDrawnLayerProp(marker);
// add marker to the map
marker.addTo(this._map);
Expand Down Expand Up @@ -280,6 +281,7 @@ Draw.CircleMarker = Draw.Marker.extend({

// create the final circle layer
const circleLayer = L.circleMarker(center, options).addTo(this._map);
this._setShapeForFinishLayer(circleLayer);
this._addDrawnLayerProp(circleLayer);
// create polygon around the circle border
circleLayer.pm._updateHiddenPolyCircle();
Expand Down
2 changes: 1 addition & 1 deletion src/js/Draw/L.PM.Draw.Cut.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ Draw.Cut = Draw.Polygon.extend({
});

// fire edit event after cut
originalLayer.fire('pm:edit', { layer: originalLayer});
originalLayer.fire('pm:edit', { layer: originalLayer, shape: originalLayer.pm.getShape()});
});
this._editedLayers = [];
},
Expand Down
1 change: 1 addition & 0 deletions src/js/Draw/L.PM.Draw.Line.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,7 @@ Draw.Line = Draw.extend({
const polylineLayer = L.polyline(coords, this.options.pathOptions).addTo(
this._map
);
this._setShapeForFinishLayer(polylineLayer);
this._addDrawnLayerProp(polylineLayer);

// disable drawing
Expand Down
1 change: 1 addition & 0 deletions src/js/Draw/L.PM.Draw.Marker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ Draw.Marker = Draw.extend({

// create marker
const marker = new L.Marker(latlng, this.options.markerStyle);
this._setShapeForFinishLayer(marker);
this._addDrawnLayerProp(marker);

// add marker to the map
Expand Down
1 change: 1 addition & 0 deletions src/js/Draw/L.PM.Draw.Polygon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ Draw.Polygon = Draw.Line.extend({
const polygonLayer = L.polygon(coords, this.options.pathOptions).addTo(
this._map
);
this._setShapeForFinishLayer(polygonLayer);
this._addDrawnLayerProp(polygonLayer);

// disable drawing
Expand Down
1 change: 1 addition & 0 deletions src/js/Draw/L.PM.Draw.Rectangle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,7 @@ Draw.Rectangle = Draw.extend({
const rectangleLayer = L.rectangle([A, B], this.options.pathOptions).addTo(
this._map
);
this._setShapeForFinishLayer(rectangleLayer);
this._addDrawnLayerProp(rectangleLayer);

// disable drawing
Expand Down
4 changes: 4 additions & 0 deletions src/js/Draw/L.PM.Draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ const Draw = L.Class.extend({

this[name] = new L.PM.Draw[instance](this._map);
this[name].toolbarButtonName = name;
this[name]._shape = name;
this.shapes.push(name);

// needed when extended / copied from a custom instance
Expand Down Expand Up @@ -143,6 +144,9 @@ const Draw = L.Class.extend({
},
_addDrawnLayerProp(layer){
layer._drawnByGeoman = true;
},
_setShapeForFinishLayer(layer){
layer.pm._shape = this._shape;
}
});

Expand Down
19 changes: 12 additions & 7 deletions src/js/Edit/L.PM.Edit.Circle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ Edit.Circle = Edit.extend({

this.applyOptions();

this._layer.fire('pm:enable', { layer: this._layer });
this._layer.fire('pm:enable', { layer: this._layer, shape: this.getShape() });

// if polygon gets removed from map, disable edit mode
this._layer.on('remove', e => {
Expand Down Expand Up @@ -92,10 +92,10 @@ Edit.Circle = Edit.extend({
const el = layer._path ? layer._path : this._layer._renderer._container;
L.DomUtil.removeClass(el, 'leaflet-pm-draggable');

this._layer.fire('pm:disable', { layer: this._layer });
this._layer.fire('pm:disable', { layer: this._layer, shape: this.getShape() });

if (this._layerEdited) {
this._layer.fire('pm:update', { layer: this._layer });
this._layer.fire('pm:update', { layer: this._layer, shape: this.getShape() });
}
this._layerEdited = false;

Expand Down Expand Up @@ -152,12 +152,15 @@ Edit.Circle = Edit.extend({
this._layer.fire('pm:centerplaced', {
layer: this._layer,
latlng: center,
shape: this.getShape()
});
},
_onMarkerDragStart(e) {
this._layer.fire('pm:markerdragstart', {
layer: this._layer,
markerEvent: e,
shape: this.getShape(),
indexPath: undefined
});
},
_onMarkerDragEnd(e) {
Expand All @@ -168,6 +171,8 @@ Edit.Circle = Edit.extend({
this._layer.fire('pm:markerdragend', {
layer: this._layer,
markerEvent: e,
shape: this.getShape(),
indexPath: undefined
});
},
_syncCircleRadius() {
Expand Down Expand Up @@ -233,17 +238,17 @@ Edit.Circle = Edit.extend({
},
_fireEdit() {
// fire edit event
this._layer.fire('pm:edit', { layer: this._layer });
this._layer.fire('pm:edit', { layer: this._layer, shape: this.getShape() });
this._layerEdited = true;
},
_fireDragStart() {
this._layer.fire('pm:dragstart');
this._layer.fire('pm:dragstart', { layer: this._layer, shape: this.getShape() });
},
_fireDrag(e) {
this._layer.fire('pm:drag', e);
this._layer.fire('pm:drag', Object.assign({},e, {shape:this.getShape()}));
},
_fireDragEnd() {
this._layer.fire('pm:dragend');
this._layer.fire('pm:dragend', { layer: this._layer, shape: this.getShape() });
},
_updateHiddenPolyCircle() {
if (this._hiddenPolyCircle) {
Expand Down
19 changes: 12 additions & 7 deletions src/js/Edit/L.PM.Edit.CircleMarker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ Edit.CircleMarker = Edit.extend({
}
this.applyOptions();

this._layer.fire('pm:enable', { layer: this._layer });
this._layer.fire('pm:enable', { layer: this._layer, shape: this.getShape() });
// change state
this._enabled = true;

Expand Down Expand Up @@ -106,10 +106,10 @@ Edit.CircleMarker = Edit.extend({

// only fire events if it was enabled before
if (!this.enabled()) {
this._layer.fire('pm:disable', { layer: this._layer });
this._layer.fire('pm:disable', { layer: this._layer, shape: this.getShape() });

if (this._layerEdited) {
this._layer.fire('pm:update', { layer: this._layer });
this._layer.fire('pm:update', { layer: this._layer, shape: this.getShape() });
}
this._layerEdited = false;
}
Expand Down Expand Up @@ -180,6 +180,7 @@ Edit.CircleMarker = Edit.extend({
this._layer.fire('pm:centerplaced', {
layer: this._layer,
latlng: center,
shape: this.getShape()
});
},
_createOuterMarker(latlng) {
Expand Down Expand Up @@ -240,25 +241,29 @@ Edit.CircleMarker = Edit.extend({
if (this.options.editable) {
this.disable();
}
this._layer.fire('pm:remove');
this._layer.remove();
this._layer.fire('pm:remove', { layer: this._layer });
this._map.fire('pm:remove', { layer: this._layer });
this._layer.fire('pm:remove', { layer: this._layer, shape: this.getShape() });
this._map.fire('pm:remove', { layer: this._layer, shape: this.getShape() });
},
_onMarkerDragStart(e) {
this._layer.fire('pm:markerdragstart', {
markerEvent: e,
layer: this._layer,
shape: this.getShape(),
indexPath: undefined
});
},
_fireEdit() {
// fire edit event
this._layer.fire('pm:edit', { layer: this._layer });
this._layer.fire('pm:edit', { layer: this._layer, shape: this.getShape() });
this._layerEdited = true;
},
_onMarkerDragEnd(e) {
this._layer.fire('pm:markerdragend', {
layer: this._layer,
markerEvent: e,
shape: this.getShape(),
indexPath: undefined
});
},
// _initSnappableMarkers when option editable is not true
Expand Down
Loading