Skip to content

Commit

Permalink
added fire, markerdragend and markerdragstart pm events to rectangle. F…
Browse files Browse the repository at this point in the history 
…ixes #245
  • Loading branch information
@codeofsumit
codeofsumit committed Nov 8, 2017
1 parent bac7256 commit 71a8e55
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 72 deletions.
4 changes: 4 additions & 0 deletions demo/demo.js
View file
Expand Up @@ -210,6 +210,10 @@ map2.on('pm:create', function(e) {
e.layer.pm.enable({ allowSelfIntersection: false });
// e.layer.pm.disable();
// console.log(e.layer.pm.hasSelfIntersection());

e.layer.on('pm:markerdragend', function(e) {
console.log(e);
});
});

map2.on('pm:drawstart', function(e) {
Expand Down
23 changes: 16 additions & 7 deletions src/js/Edit/L.PM.Edit.Circle.js
View file
Expand Up @@ -15,8 +15,8 @@ Edit.Circle = Edit.extend({
enabled() {
return this._enabled;
},
enable(options = {}) {
this.options = options;
enable(options) {
L.Util.setOptions(this, options);

this._map = this._layer._map;

Expand Down Expand Up @@ -109,6 +109,17 @@ Edit.Circle = Edit.extend({
this._syncHintLine();
this._fireEdit();
},
_onMarkerDragStart(e) {
console.log(this.options);
this._layer.fire('pm:markerdragstart', {
markerEvent: e,
});
},
_onMarkerDragEnd(e) {
this._layer.fire('pm:markerdragend', {
markerEvent: e,
});
},
_syncCircleRadius() {
const A = this._centerMarker.getLatLng();
const B = this._outerMarker.getLatLng();
Expand All @@ -134,19 +145,14 @@ Edit.Circle = Edit.extend({
_createCenterMarker(latlng) {
const marker = this._createMarker(latlng);

// marker.on('dragstart', this._onMarkerDragStart, this);
marker.on('move', this._moveCircle, this);
// marker.on('dragend', this._onMarkerDragEnd, this);
// marker.on('contextmenu', this._removeMarker, this);

return marker;
},
_createOuterMarker(latlng) {
const marker = this._createMarker(latlng);

// marker.on('dragstart', this._onMarkerDragStart, this);
marker.on('move', this._resizeCircle, this);
// marker.on('dragend', this._onMarkerDragEnd, this);
// marker.on('contextmenu', this._removeMarker, this);

return marker;
Expand All @@ -160,6 +166,9 @@ Edit.Circle = Edit.extend({
marker._origLatLng = latlng;
marker._pmTempLayer = true;

marker.on('dragstart', this._onMarkerDragStart, this);
marker.on('dragend', this._onMarkerDragEnd, this);

this._layerGroup.addLayer(marker);

return marker;
Expand Down
147 changes: 82 additions & 65 deletions src/js/Edit/L.PM.Edit.Rectangle.js
View file
Expand Up @@ -8,7 +8,7 @@ Edit.Rectangle = Edit.Poly.extend({
// initializes Rectangle Markers
_initMarkers() {
const map = this._map;
const corners = this._findCorners()
const corners = this._findCorners();

// cleanup old ones first
if(this._markerGroup) {
Expand All @@ -21,11 +21,11 @@ Edit.Rectangle = Edit.Poly.extend({
map.addLayer(this._markerGroup);

// create markers for four corners of rectangle
this._markers = []
this._markers = [];
// nest set of corner markers in a 2D array so that we can Cut this Rectangle, if needed
this._markers[0] = corners.map(this._createMarker, this);
// convenience alias, for better readability
this._cornerMarkers = this._markers[0]
this._cornerMarkers = this._markers[0];

if(this.options.snappable) {
this._initSnappableMarkers();
Expand All @@ -37,7 +37,7 @@ Edit.Rectangle = Edit.Poly.extend({
_createMarker(latlng, index) {
const marker = new L.Marker(latlng, {
draggable: true,
icon: L.divIcon({ className: 'marker-icon' })
icon: L.divIcon({ className: 'marker-icon' }),
});

marker._origLatLng = latlng;
Expand All @@ -56,22 +56,26 @@ Edit.Rectangle = Edit.Poly.extend({

// Empty callback for 'contextmenu' binding set in L.PM.Edit.Line.js's _createMarker method (AKA, right-click on marker event)
// (A Rectangle is designed to always remain a "true" rectangle -- if you want it editable, use Polygon Tool instead!!!)
_removeMarker(e) {
_removeMarker() {
// The method, it does nothing!!!
return null
return null;
},

_onMarkerDragStart(e){
_onMarkerDragStart(e) {
// dragged marker
const draggedMarker = e.target
const draggedMarker = e.target;

// Store/update a reference to marker in opposite corner
const corners = this._findCorners()
const corners = this._findCorners();
draggedMarker._oppositeCornerLatLng = corners[(draggedMarker._index + 2) % 4];

// Automatically unsnap all markers on drag start (they'll snap back if close enough to another snappable object)
// (Without this, it's occasionally possible for a marker to get stuck as 'snapped,' which prevents Rectangle resizing)
draggedMarker._snapped = false
draggedMarker._snapped = false;

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

_onMarkerDrag(e) {
Expand All @@ -84,33 +88,46 @@ Edit.Rectangle = Edit.Poly.extend({
}

// If marker is currently snapped to an object, then ignore all drag events (as this resets rectangle shape)
if(!draggedMarker._snapped){
this._adjustRectangleForMarkerMove(draggedMarker)
if(!draggedMarker._snapped) {
this._adjustRectangleForMarkerMove(draggedMarker);
}
},

_onMarkerDragEnd(e){
const corners = this._findCorners()
_onMarkerDragEnd(e) {
const corners = this._findCorners();

// Reposition ALL markers (so that indices are correctly correlated with corner order (NW, NE, SE, SW))
this._adjustAllMarkers(corners)
this._adjustAllMarkers(corners);

// Clean-up data attributes
this._cornerMarkers.forEach((marker) =>{
delete marker._oppositeCornerLatLng
})
this._cornerMarkers.forEach((m) => {
delete m._oppositeCornerLatLng;
});


// Update bounding box
this._layer.setLatLngs(corners)
this._layer.setLatLngs(corners);

// Redraw the shape a final time
this._layer.redraw()
this._layer.redraw();

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

// fire edit event
this._fireEdit();
},

_fireEdit() {
// fire edit event
this._layer.edited = true;
this._layer.fire('pm:edit');
},

// adjusts the rectangle's size and bounds whenever a marker is moved
// params: movedMarker -- the Marker object
_adjustRectangleForMarkerMove(movedMarker){
_adjustRectangleForMarkerMove(movedMarker) {
// update moved marker coordinates
L.extend(movedMarker._origLatLng, movedMarker._latlng);

Expand All @@ -119,80 +136,80 @@ Edit.Rectangle = Edit.Poly.extend({
this._layer.setBounds(L.latLngBounds(movedLatLng, movedMarker._oppositeCornerLatLng));

// Reposition the markers at each corner
this._adjustAdjacentMarkers(movedMarker)
this._adjustAdjacentMarkers(movedMarker);

// Redraw the shape (to update altered rectangle)
this._layer.redraw()
this._layer.redraw();
},

// adjusts the rectangle's size and bounds whenever a marker snaps to another polygon
// params: e -- the snap event
_adjustRectangleForMarkerSnap(e){
if(!this.options.snappable){
return
_adjustRectangleForMarkerSnap(e) {
if(!this.options.snappable) {
return;
}

const snappedMarker = e.target
this._adjustRectangleForMarkerMove(snappedMarker)
const snappedMarker = e.target;
this._adjustRectangleForMarkerMove(snappedMarker);
},

// adjusts the position of all Markers
// params: markerLatLngs -- an array of exactly LatLng objects
_adjustAllMarkers(markerLatLngs){
if(!markerLatLngs.length || markerLatLngs.length != 4){
console.error("_adjustAllMarkers() requires an array of EXACTLY 4 LatLng coordinates")
return
// params: markerLatLngs -- an array of exactly LatLng objects
_adjustAllMarkers(markerLatLngs) {
if(!markerLatLngs.length || markerLatLngs.length != 4) {
console.error('_adjustAllMarkers() requires an array of EXACTLY 4 LatLng coordinates');
return;
}

this._cornerMarkers.forEach((marker, index)=>{
marker.setLatLng(markerLatLngs[index])
})
this._cornerMarkers.forEach((marker, index) => {
marker.setLatLng(markerLatLngs[index]);
});
},

// adjusts the position of the two Markers adjacent to the Marker specified
// params: anchorMarker -- the Marker object used to determine adjacent Markers
_adjustAdjacentMarkers(anchorMarker){
if(!anchorMarker || !anchorMarker.getLatLng || !anchorMarker._oppositeCornerLatLng){
console.error("_adjustAdjacentMarkers() requires a valid Marker object")
return
_adjustAdjacentMarkers(anchorMarker) {
if(!anchorMarker || !anchorMarker.getLatLng || !anchorMarker._oppositeCornerLatLng) {
console.error('_adjustAdjacentMarkers() requires a valid Marker object');
return;
}

const anchorLatLng = anchorMarker.getLatLng()
const oppositeLatLng = anchorMarker._oppositeCornerLatLng
const anchorLatLng = anchorMarker.getLatLng();
const oppositeLatLng = anchorMarker._oppositeCornerLatLng;

// Find two corners not currently occupied by dragged marker and its opposite corner
let unmarkedCorners = []
const corners = this._findCorners()
const unmarkedCorners = [];
const corners = this._findCorners();

corners.forEach((corner) => {
if(!corner.equals(anchorLatLng) && !corner.equals(oppositeLatLng)){
unmarkedCorners.push(corner)
if(!corner.equals(anchorLatLng) && !corner.equals(oppositeLatLng)) {
unmarkedCorners.push(corner);
}
})
});

// reposition markers for those corners
let unmarkedCornerIndex = 0
if(unmarkedCorners.length == 2){
this._cornerMarkers.forEach((marker) =>{
let markerLatLng = marker.getLatLng()
if(!markerLatLng.equals(anchorLatLng) && !markerLatLng.equals(oppositeLatLng)){
marker.setLatLng(unmarkedCorners[unmarkedCornerIndex])
unmarkedCornerIndex++
let unmarkedCornerIndex = 0;
if(unmarkedCorners.length == 2) {
this._cornerMarkers.forEach((marker) => {
const markerLatLng = marker.getLatLng();
if(!markerLatLng.equals(anchorLatLng) && !markerLatLng.equals(oppositeLatLng)) {
marker.setLatLng(unmarkedCorners[unmarkedCornerIndex]);
unmarkedCornerIndex += 1;
}
})
});
}
},

// finds the 4 corners of the current bounding box
// returns array of 4 LatLng objects in this order: Northwest corner, Northeast corner, Southeast corner, Southwest corner
_findCorners(){
var corners = this._layer.getBounds();
var northwest = corners.getNorthWest();
var northeast = corners.getNorthEast();
var southeast = corners.getSouthEast();
var southwest = corners.getSouthWest();

return [northwest, northeast, southeast, southwest];
},
_findCorners() {
const corners = this._layer.getBounds();

const northwest = corners.getNorthWest();
const northeast = corners.getNorthEast();
const southeast = corners.getSouthEast();
const southwest = corners.getSouthWest();

return [northwest, northeast, southeast, southwest];
},
});

0 comments on commit 71a8e55

Please sign in to comment.