Skip to content

Commit

Permalink
Add new events pm:dragenable, pm:dragdisable, pm:change (#1112)…
Browse files Browse the repository at this point in the history 
… (minor)

* Add new events `pm:dragenable`, `pm:dragdisable`, `pm:positionchange`

* Rename positionchange to change

* Fix TS

* rename position functions
  • Loading branch information
@Falke-Design
Falke-Design committed Apr 20, 2022
1 parent 8256536 commit 260b2b4
Show file tree
Hide file tree
Showing 16 changed files with 187 additions and 31 deletions.
49 changes: 27 additions & 22 deletions README.md
View file
Expand Up @@ -327,13 +327,14 @@ map.on('pm:drawstart', ({ workingLayer }) => {

Here's a list of layer events you can listen to:

| Event | Params | Description | Output |
| :-------------- | :----- | :-------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------ |
| pm:vertexadded | `e` | Called when a new vertex is added. Payload includes the new vertex, it's marker, index, working layer and shape type. | `shape`, `workingLayer`, `marker`, `latlng` |
| 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 is snapped. Payload is the same as in `snapdrag`. | `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` |
| pm:unsnap | `e` | Fired when a vertex is unsnapped. Payload is the same as in `snapdrag`. | `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` |
| pm:centerplaced | `e` | Called when the center of a circle is placed/moved. | `shape`, `workingLayer`, `latlng` |
| Event | Params | Description | Output |
| :---------------- | :----- | :-------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------ |
| pm:vertexadded | `e` | Called when a new vertex is added. Payload includes the new vertex, it's marker, index, working layer and shape type. | `shape`, `workingLayer`, `marker`, `latlng` |
| 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 is snapped. Payload is the same as in `snapdrag`. | `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` |
| pm:unsnap | `e` | Fired when a vertex is unsnapped. Payload is the same as in `snapdrag`. | `shape`, `distance`, `layer` = `workingLayer`, `marker`, `layerInteractedWith`, `segment`, `snapLatLng` |
| pm:centerplaced | `e` | Called when the center of a circle is placed/moved. | `shape`, `workingLayer`, `latlng` |
| pm:change | `e` | Fired coordinates of the layer changed. | `layer`, `latlngs`, `shape` |

For making the snapping to other layers selective, you can add the "snapIgnore" option to your layers to disable the snapping to them during drawing.

Expand Down Expand Up @@ -443,7 +444,7 @@ The following events are available on a layer instance:
| 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`, `shape` |
| pm:centerplaced | `e` | Fired when the center of a circle is moved. | `layer`, `latlng`, `shape` |

| pm:change | `e` | Fired coordinates of the layer changed. | `layer`, `latlngs`, `shape` |
The following events are available on a map instance:

| Event | Params | Description | Output |
Expand Down Expand Up @@ -493,11 +494,14 @@ 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`, `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` |
| 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` |
| pm:dragenable | `e` | Fired when Drag Mode on a layer is enabled. | `layer`, `shape` |
| pm:dragdisable | `e` | Fired when Drag Mode on a layer is disabled. | `layer`, `shape` |
| pm:change | `e` | Fired coordinates of the layer changed. | `layer`, `latlngs`, `shape` |

The following events are available on a map instance:

Expand Down Expand Up @@ -629,21 +633,22 @@ The following methods are available for layers under `layer.pm`:

The following events are available on a layer instance:

| Event | Params | Description | Output |
| :--------------- | :----- | :------------------------------------------- | :----------------------------------------------------------------------------------- |
| pm:rotateenable | `e` | Fired when rotation is enabled for a layer. | `layer`, `helpLayer` |
| pm:rotatedisable | `e` | Fired when rotation is disabled for a layer. | `layer` |
| pm:rotatestart | `e` | Fired when rotation starts on a layer. | `layer`, `helpLayer`, `startAngle`, `originLatLngs` |
| pm:rotate | `e` | Fired when a layer is rotated. | `layer`, `helpLayer`, `startAngle`, `angle`, `angleDiff`, `oldLatLngs`, `newLatLngs` |
| pm:rotateend | `e` | Fired when rotation ends on a layer. | `layer`, `helpLayer`, `startAngle`, `angle`, `originLatLngs`, `newLatLngs` |
| Event | Params | Description | Output |
| :---------------- | :----- | :---------------------------------------------------- | :----------------------------------------------------------------------------------- |
| pm:rotateenable | `e` | Fired when rotation is enabled for a layer. | `layer`, `helpLayer`, `shape` |
| pm:rotatedisable | `e` | Fired when rotation is disabled for a layer. | `layer`, `shape` |
| pm:rotatestart | `e` | Fired when rotation starts on a layer. | `layer`, `helpLayer`, `startAngle`, `originLatLngs` |
| pm:rotate | `e` | Fired when a layer is rotated. | `layer`, `helpLayer`, `startAngle`, `angle`, `angleDiff`, `oldLatLngs`, `newLatLngs` |
| pm:rotateend | `e` | Fired when rotation ends on a layer. | `layer`, `helpLayer`, `startAngle`, `angle`, `originLatLngs`, `newLatLngs` |
| pm:change | `e` | Fired coordinates of the layer changed. | `layer`, `latlngs`, `shape` |

The following events are available on a map instance:

| Event | Params | Description | Output |
| :------------------------- | :----- | :------------------------------------------- | :----------------------------------------------------------------------------------- |
| pm:globalrotatemodetoggled | `e` | Fired when Rotate Mode is toggled. | `enabled`, `map` |
| pm:rotateenable | `e` | Fired when rotation is enabled for a layer. | `layer`, `helpLayer` |
| pm:rotatedisable | `e` | Fired when rotation is disabled for a layer. | `layer` |
| pm:rotateenable | `e` | Fired when rotation is enabled for a layer. | `layer`, `helpLayer`, `shape` |
| pm:rotatedisable | `e` | Fired when rotation is disabled for a layer. | `layer`, `shape` |
| pm:rotatestart | `e` | Fired when rotation starts on a layer. | `layer`, `helpLayer`, `startAngle`, `originLatLngs` |
| pm:rotate | `e` | Fired when a layer is rotated. | `layer`, `helpLayer`, `startAngle`, `angle`, `angleDiff`, `oldLatLngs`, `newLatLngs` |
| pm:rotateend | `e` | Fired when rotation ends on a layer. | `layer`, `helpLayer`, `startAngle`, `angle`, `originLatLngs`, `newLatLngs` |
Expand Down
35 changes: 34 additions & 1 deletion leaflet-geoman.d.ts
View file
Expand Up @@ -281,6 +281,11 @@ declare module 'leaflet' {
once(type: 'pm:intersect', fn: PM.IntersectEventHandler): this;
off(type: 'pm:intersect', fn?: PM.IntersectEventHandler): this;

/** Fired coordinates of the layer changed. */
on(type: 'pm:change', fn: PM.ChangeEventHandler): this;
once(type: 'pm:change', fn: PM.ChangeEventHandler): this;
off(type: 'pm:change', fn?: PM.ChangeEventHandler): this;

/******************************************
*
* TODO: EDIT MODE EVENTS ON MAP ONLY
Expand Down Expand Up @@ -342,6 +347,16 @@ declare module 'leaflet' {
once(type: 'pm:dragend', fn: PM.DragEndEventHandler): this;
off(type: 'pm:dragend', fn?: PM.DragEndEventHandler): this;

/** Fired when drag mode on a layer is enabled. */
on(type: 'pm:dragenable', fn: PM.DragEnableEventHandler): this;
once(type: 'pm:dragenable', fn: PM.DragEnableEventHandler): this;
off(type: 'pm:dragenable', fn?: PM.DragEnableEventHandler): this;

/** Fired when drag mode on a layer is disabled. */
on(type: 'pm:dragdisable', fn: PM.DragDisableEventHandler): this;
once(type: 'pm:dragdisable', fn: PM.DragDisableEventHandler): this;
off(type: 'pm:dragdisable', fn?: PM.DragDisableEventHandler): this;

/******************************************
*
* TODO: REMOVE MODE EVENTS ON MAP ONLY
Expand Down Expand Up @@ -1336,6 +1351,11 @@ declare module 'leaflet' {
layer: L.Layer;
intersection: L.LatLng;
}) => void;
export type ChangeEventHandler = (e: {
shape: PM.SUPPORTED_SHAPES;
layer: L.Layer;
latlngs: L.LatLng | L.LatLng[];
}) => void;

/**
* EDIT MODE MAP EVENT HANDLERS
Expand Down Expand Up @@ -1372,6 +1392,15 @@ declare module 'leaflet' {
layer: L.Layer;
shape: PM.SUPPORTED_SHAPES;
}) => void;
export type DragEnableEventHandler = (e: {
layer: L.Layer;
shape: PM.SUPPORTED_SHAPES;
}) => void;
export type DragDisableEventHandler = (e: {
layer: L.Layer;
shape: PM.SUPPORTED_SHAPES;
}) => void;


/**
* REMOVE MODE LAYER EVENT HANDLERS
Expand Down Expand Up @@ -1409,8 +1438,12 @@ declare module 'leaflet' {
export type RotateEnableEventHandler = (e: {
layer: L.Layer;
helpLayer: L.Layer;
shape: PM.SUPPORTED_SHAPES;
}) => void;
export type RotateDisableEventHandler = (e: {
layer: L.Layer
shape: PM.SUPPORTED_SHAPES;
}) => void;
export type RotateDisableEventHandler = (e: { layer: L.Layer }) => void;
export type RotateStartEventHandler = (e: {
layer: L.Layer;
helpLayer: L.Layer;
Expand Down
7 changes: 7 additions & 0 deletions src/js/Draw/L.PM.Draw.Circle.js
View file
Expand Up @@ -180,6 +180,12 @@ Draw.Circle = Draw.extend({
}

this._handleHintMarkerSnapping();

const latlng =
this._layerGroup && this._layerGroup.hasLayer(this._centerMarker)
? this._centerMarker.getLatLng()
: this._hintMarker.getLatLng();
this._fireChange(latlng, 'Draw');
},
_placeCenterMarker(e) {
this._layerGroup.addLayer(this._layer);
Expand Down Expand Up @@ -215,6 +221,7 @@ Draw.Circle = Draw.extend({
);

this._fireCenterPlaced();
this._fireChange(this._layer.getLatLng(), 'Draw');
}
},
_finishShape(e) {
Expand Down
14 changes: 13 additions & 1 deletion src/js/Draw/L.PM.Draw.CircleMarker.js
View file
Expand Up @@ -22,13 +22,18 @@ Draw.CircleMarker = Draw.Marker.extend({

// Draw the CircleMarker like a Circle
if (this.options.editable) {
// we need to set the radius to 0 without overwriting the CircleMarker style
const templineStyle = {};
L.setOptions(templineStyle, this.options.templineStyle);
templineStyle.radius = 0;

// create a new layergroup
this._layerGroup = new L.LayerGroup();
this._layerGroup._pmTempLayer = true;
this._layerGroup.addTo(this._map);

// this is the circle we want to draw
this._layer = L.circleMarker([0, 0], this.options.templineStyle);
this._layer = L.circleMarker([0, 0], templineStyle);
this._setPane(this._layer, 'layerPane');
this._layer._pmTempLayer = true;

Expand Down Expand Up @@ -205,6 +210,7 @@ Draw.CircleMarker = Draw.Marker.extend({
);

this._fireCenterPlaced();
this._fireChange(this._layer.getLatLng(), 'Draw');
}
},
_syncHintLine() {
Expand Down Expand Up @@ -247,6 +253,12 @@ Draw.CircleMarker = Draw.Marker.extend({
}

this._handleHintMarkerSnapping();

const latlng =
this._layerGroup && this._layerGroup.hasLayer(this._centerMarker)
? this._centerMarker.getLatLng()
: this._hintMarker.getLatLng();
this._fireChange(latlng, 'Draw');
},
isRelevantMarker(layer) {
return (
Expand Down
1 change: 1 addition & 0 deletions src/js/Draw/L.PM.Draw.Cut.js
View file
Expand Up @@ -254,4 +254,5 @@ Draw.Cut = Draw.Polygon.extend({
}
return diff;
},
_change: L.Util.falseFn,
});
9 changes: 8 additions & 1 deletion src/js/Draw/L.PM.Draw.Line.js
View file
Expand Up @@ -176,6 +176,9 @@ Draw.Line = Draw.extend({
if (!this.options.allowSelfIntersection) {
this._handleSelfIntersection(true, e.latlng);
}
const latlngs = this._layer._defaultShape().slice();
latlngs.push(this._hintMarker.getLatLng());
this._change(latlngs);
},
hasSelfIntersection() {
// check for self intersection of the layer and return true/false
Expand Down Expand Up @@ -258,7 +261,7 @@ Draw.Line = Draw.extend({
this._hintline.setLatLngs([latlng, latlng]);

this._fireVertexAdded(newMarker, undefined, latlng, 'Draw');

this._change(this._layer.getLatLngs());
// check if we should finish on snap
if (this.options.finishOn === 'snap' && this._hintMarker._snapped) {
this._finishShape(e);
Expand Down Expand Up @@ -298,6 +301,7 @@ Draw.Line = Draw.extend({
this._setTooltipText();

this._fireVertexRemoved(marker, indexPath, 'Draw');
this._change(this._layer.getLatLngs());
},
_finishShape() {
// if self intersection is not allowed, do not finish the shape!
Expand Down Expand Up @@ -374,4 +378,7 @@ Draw.Line = Draw.extend({
}
this._hintMarker.setTooltipContent(text);
},
_change(latlngs) {
this._fireChange(latlngs, 'Draw');
},
});
2 changes: 2 additions & 0 deletions src/js/Draw/L.PM.Draw.Marker.js
View file
Expand Up @@ -119,6 +119,8 @@ Draw.Marker = Draw.extend({
fakeDragEvent.target = this._hintMarker;
this._handleSnapping(fakeDragEvent);
}

this._fireChange(this._hintMarker.getLatLng(), 'Draw');
},
_createMarker(e) {
if (!e.latlng) {
Expand Down
6 changes: 6 additions & 0 deletions src/js/Draw/L.PM.Draw.Rectangle.js
View file
Expand Up @@ -201,6 +201,12 @@ Draw.Rectangle = Draw.extend({
fakeDragEvent.target = this._hintMarker;
this._handleSnapping(fakeDragEvent);
}

const latlngs =
this._layerGroup && this._layerGroup.hasLayer(this._layer)
? this._layer.getLatLngs()
: [this._hintMarker.getLatLng()];
this._fireChange(latlngs, 'Draw');
},
_syncRectangleSize() {
const A = fixLatOffset(this._startMarker.getLatLng(), this._map);
Expand Down
4 changes: 3 additions & 1 deletion src/js/Edit/L.PM.Edit.Circle.js
View file
Expand Up @@ -196,6 +196,7 @@ Edit.Circle = Edit.extend({
this._updateHiddenPolyCircle();

this._fireCenterPlaced('Edit');
this._fireChange(this._layer.getLatLng(), 'Edit');
},
_syncCircleRadius() {
const A = this._centerMarker.getLatLng();
Expand All @@ -218,6 +219,7 @@ Edit.Circle = Edit.extend({
}

this._updateHiddenPolyCircle();
this._fireChange(this._layer.getLatLng(), 'Edit');
},
_syncHintLine() {
const A = this._centerMarker.getLatLng();
Expand Down Expand Up @@ -269,7 +271,7 @@ Edit.Circle = Edit.extend({
return;
}
delete this._vertexValidationReset;
this._fireDragStart(e);
this._fireDragStart();
},
_onCircleDrag(e) {
if (this._vertexValidationReset) {
Expand Down
2 changes: 2 additions & 0 deletions src/js/Edit/L.PM.Edit.CircleMarker.js
View file
Expand Up @@ -228,6 +228,7 @@ Edit.CircleMarker = Edit.extend({
this._updateHiddenPolyCircle();

this._fireCenterPlaced('Edit');
this._fireChange(this._layer.getLatLng(), 'Edit');
},
_syncMarkers() {
const center = this._layer.getLatLng();
Expand Down Expand Up @@ -263,6 +264,7 @@ Edit.CircleMarker = Edit.extend({
}

this._updateHiddenPolyCircle();
this._fireChange(this._layer.getLatLng(), 'Edit');
},
_syncHintLine() {
const A = this._centerMarker.getLatLng();
Expand Down

0 comments on commit 260b2b4

Please sign in to comment.