Skip to content

Commit

Permalink
added marker index information to markerdrag events. Fixes #225 (PATCH)
Browse files Browse the repository at this point in the history
  • Loading branch information
@codeofsumit
codeofsumit committed Sep 22, 2017
1 parent bcb3ac0 commit ca68845
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 27 deletions.
6 changes: 5 additions & 1 deletion README.md
View file
Expand Up @@ -204,7 +204,11 @@ polygonLayer.on('pm:drag', function(e) {//...});
polygonLayer.on('pm:dragend', function(e) {//...});
// listen to when a marker of a polygon-vertex is being dragged
polygonLayer.on('pm:markerdragstart', function(e) {//...});
polygonLayer.on('pm:markerdragstart', function(e) {
// the property e.ringIndex refers to the coordinate ring inside the polygon the marker belongs to
// if it's undefined, there are no rings
// e.index is the index of the marker inside the coordinate ring / array it belongs to
});
polygonLayer.on('pm:markerdragend', function(e) {//...});
// listen to when snapping occurs
Expand Down
61 changes: 35 additions & 26 deletions src/js/Edit/L.PM.Edit.Line.js
View file
Expand Up @@ -7,7 +7,7 @@ Edit.Line = Edit.extend({
},

toggleEdit(options) {
if(!this.enabled()) {
if (!this.enabled()) {
this.enable(options);
} else {
this.disable();
Expand All @@ -20,11 +20,11 @@ Edit.Line = Edit.extend({
this._map = this._layer._map;

// cancel when map isn't available, this happens when the polygon is removed before this fires
if(!this._map) {
if (!this._map) {
return;
}

if(!this.enabled()) {
if (!this.enabled()) {
// if it was already enabled, disable first
// we don't block enabling again because new options might be passed
this.disable();
Expand All @@ -39,7 +39,7 @@ Edit.Line = Edit.extend({
// if polygon gets removed from map, disable edit mode
this._layer.on('remove', this._onLayerRemove, this);

if(this.options.draggable) {
if (this.options.draggable) {
this._initDraggableLayer();
}
},
Expand All @@ -54,12 +54,12 @@ Edit.Line = Edit.extend({

disable(poly = this._layer) {
// if it's not enabled, it doesn't need to be disabled
if(!this.enabled()) {
if (!this.enabled()) {
return false;
}

// prevent disabling if polygon is being dragged
if(poly.pm._dragging) {
if (poly.pm._dragging) {
return false;
}
poly.pm._enabled = false;
Expand All @@ -84,7 +84,7 @@ Edit.Line = Edit.extend({
const coords = this._layer._latlngs;

// cleanup old ones first
if(this._markerGroup) {
if (this._markerGroup) {
this._markerGroup.clearLayers();
}

Expand All @@ -102,7 +102,7 @@ Edit.Line = Edit.extend({
coordsArr.map((v, k) => {
let nextIndex;

if(this.isPolygon()) {
if (this.isPolygon()) {
nextIndex = (k + 1) % coordsArr.length;
} else {
nextIndex = k + 1;
Expand All @@ -115,16 +115,15 @@ Edit.Line = Edit.extend({

this._markers = [];

if(this.isPolygon()) {
if (this.isPolygon()) {
// coords is a multidimansional array, handle all rings
this._markers = coords.map(handleRing, this);
} else {
// coords is one dimensional, handle the ring
this._markers = handleRing(coords);
}


if(this.options.snappable) {
if (this.options.snappable) {
this._initSnappableMarkers();
}
},
Expand All @@ -151,7 +150,7 @@ Edit.Line = Edit.extend({
// creates the middle markes between coordinates
_createMiddleMarker(leftM, rightM) {
// cancel if there are no two markers
if(!leftM || !rightM) {
if (!leftM || !rightM) {
return false;
}

Expand Down Expand Up @@ -226,7 +225,7 @@ Edit.Line = Edit.extend({
// fire edit event
this._fireEdit();

if(this.options.snappable) {
if (this.options.snappable) {
this._initSnappableMarkers();
}
},
Expand All @@ -249,7 +248,7 @@ Edit.Line = Edit.extend({

// only continue if this is NOT a middle marker (those can't be deleted)
const isMiddleMarker = this.findMarkerIndex(this._markers, marker).index === -1;
if(isMiddleMarker) {
if (isMiddleMarker) {
return;
}

Expand All @@ -260,7 +259,7 @@ Edit.Line = Edit.extend({
this._layer.setLatLngs(coords);

// if the ring of the poly has no coordinates left, remove the ring
if(coordsRing.length <= 1) {
if (coordsRing.length <= 1) {
// remove coords ring
coords.splice(ringIndex, 1);

Expand All @@ -274,16 +273,16 @@ Edit.Line = Edit.extend({
}

// if no coords are left, remove the layer
if(coords.length < 1) {
if (coords.length < 1) {
this._layer.remove();
}

// now handle the middle markers
// remove the marker and the middlemarkers next to it from the map
if(marker._middleMarkerPrev) {
if (marker._middleMarkerPrev) {
this._markerGroup.removeLayer(marker._middleMarkerPrev);
}
if(marker._middleMarkerNext) {
if (marker._middleMarkerNext) {
this._markerGroup.removeLayer(marker._middleMarkerNext);
}

Expand All @@ -293,18 +292,18 @@ Edit.Line = Edit.extend({
let rightMarkerIndex;
let leftMarkerIndex;

if(this.isPolygon()) {
if (this.isPolygon()) {
// find neighbor marker-indexes
rightMarkerIndex = (index + 1) % markerArr.length;
leftMarkerIndex = ((index + markerArr.length) - 1) % markerArr.length;
leftMarkerIndex = (index + markerArr.length - 1) % markerArr.length;
} else {
// find neighbor marker-indexes
leftMarkerIndex = index - 1 < 0 ? undefined : index - 1;
rightMarkerIndex = index + 1 >= markerArr.length ? undefined : index + 1;
}

// don't create middlemarkers if there is only one marker left
if(rightMarkerIndex !== leftMarkerIndex) {
if (rightMarkerIndex !== leftMarkerIndex) {
const leftM = markerArr[leftMarkerIndex];
const rightM = markerArr[rightMarkerIndex];
this._createMiddleMarker(leftM, rightM);
Expand All @@ -322,7 +321,7 @@ Edit.Line = Edit.extend({
let index;
let ringIndex;

if(!this.isPolygon()) {
if (!this.isPolygon()) {
index = markers.findIndex(m => marker._leaflet_id === m._leaflet_id);
} else {
ringIndex = markers.findIndex((inner) => {
Expand Down Expand Up @@ -355,7 +354,7 @@ Edit.Line = Edit.extend({

// only continue if this is NOT a middle marker
const isMiddleMarker = this.findMarkerIndex(this._markers, marker).index === -1;
if(isMiddleMarker) {
if (isMiddleMarker) {
return;
}

Expand All @@ -367,7 +366,7 @@ Edit.Line = Edit.extend({

// find the indizes of next and previous markers
const nextMarkerIndex = (index + 1) % markerArr.length;
const prevMarkerIndex = ((index + markerArr.length) - 1) % markerArr.length;
const prevMarkerIndex = (index + markerArr.length - 1) % markerArr.length;

// update middle markers on the left and right
// be aware that "next" and "prev" might be interchanged, depending on the geojson array
Expand All @@ -377,28 +376,38 @@ Edit.Line = Edit.extend({
const prevMarkerLatLng = markerArr[prevMarkerIndex].getLatLng();
const nextMarkerLatLng = markerArr[nextMarkerIndex].getLatLng();

if(marker._middleMarkerNext) {
if (marker._middleMarkerNext) {
const middleMarkerNextLatLng = this._calcMiddleLatLng(markerLatLng, nextMarkerLatLng);
marker._middleMarkerNext.setLatLng(middleMarkerNextLatLng);
}

if(marker._middleMarkerPrev) {
if (marker._middleMarkerPrev) {
const middleMarkerPrevLatLng = this._calcMiddleLatLng(markerLatLng, prevMarkerLatLng);
marker._middleMarkerPrev.setLatLng(middleMarkerPrevLatLng);
}
},

_onMarkerDragEnd(e) {
const marker = e.target;
const { ringIndex, index } = this.findMarkerIndex(this._markers, marker);

this._layer.fire('pm:markerdragend', {
markerEvent: e,
ringIndex,
index,
});

// fire edit event
this._fireEdit();
},
_onMarkerDragStart(e) {
const marker = e.target;
const { ringIndex, index } = this.findMarkerIndex(this._markers, marker);

this._layer.fire('pm:markerdragstart', {
markerEvent: e,
ringIndex,
index,
});
},

Expand Down

0 comments on commit ca68845

Please sign in to comment.