Skip to content

Commit

Permalink
Added Dedicated Drag Mode (#390) (minor)
Browse files Browse the repository at this point in the history 
* created first workable dragging button

* changed icons

* circle is now draggable

* removed preventVertexEdit option

* removed unused icons

* enabled all tests again
  • Loading branch information
@codeofsumit
codeofsumit committed Jan 19, 2019
1 parent ba34497 commit a185a64
Show file tree
Hide file tree
Showing 13 changed files with 167 additions and 185 deletions.
11 changes: 1 addition & 10 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,7 @@ and include them in your project.
CSS

```html
<link
rel="stylesheet"
href="https://unpkg.com/leaflet.pm@latest/dist/leaflet.pm.css"
/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.pm@latest/dist/leaflet.pm.css" />
```

JS
Expand Down Expand Up @@ -277,9 +274,6 @@ var polygonLayer = L.geoJson(data).addTo(map);

// optional options
var options = {
// makes the layer draggable
draggable: true,

// makes the vertices snappable to other layers
// temporarily disable snapping during drag by pressing ALT
snappable: true,
Expand All @@ -293,9 +287,6 @@ var options = {

// disable the removal of markers/vertexes via right click
preventMarkerRemoval: false,

// disable the possibility to edit vertexes
preventVertexEdit: false,
};

// enable edit mode
Expand Down
2 changes: 1 addition & 1 deletion cypress/integration/polygon.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ describe('Draw & Edit Poly', () => {
return l;
})
.as('poly')
.then(poly => poly._latlngs[0][0])
.then((poly) => poly._latlngs[0][0])
.as('firstLatLng');
});

Expand Down
14 changes: 0 additions & 14 deletions src/assets/icons/Cursor.svg
View file

This file was deleted.

14 changes: 14 additions & 0 deletions src/assets/icons/Edit_Vertex.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions src/assets/icons/Move.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 0 additions & 17 deletions src/assets/icons/Wrench.svg
View file

This file was deleted.

10 changes: 5 additions & 5 deletions src/css/controls.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,10 @@
background-image: url('../assets/icons/Eraser.svg');
}
.leaflet-pm-toolbar .leaflet-pm-icon-edit {
background-image: url('../assets/icons/Wrench.svg');
background-image: url('../assets/icons/Edit_Vertex.svg');
}
.leaflet-pm-toolbar .leaflet-pm-icon-drag {
background-image: url('../assets/icons/Move.svg');
}
.leaflet-pm-toolbar .leaflet-pm-icon-cut {
background-image: url('../assets/icons/Scissors.svg');
Expand Down Expand Up @@ -72,10 +75,7 @@
white-space: nowrap;
}

.leaflet-right
.leaflet-pm-toolbar
.button-container
.leaflet-pm-actions-container {
.leaflet-right .leaflet-pm-toolbar .button-container .leaflet-pm-actions-container {
right: 31px;
left: auto;
}
Expand Down
5 changes: 1 addition & 4 deletions src/js/Edit/L.PM.Edit.Circle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,11 +163,8 @@ Edit.Circle = Edit.extend({
},
_createOuterMarker(latlng) {
const marker = this._createMarker(latlng);
if (this.options.preventVertexEdit) {
marker.dragging.disable();
}

marker.on('move', this._resizeCircle, this);
// marker.on('contextmenu', this._removeMarker, this);

return marker;
},
Expand Down
96 changes: 20 additions & 76 deletions src/js/Edit/L.PM.Edit.Line.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,7 @@ Edit.Line = Edit.extend({
this._layer.on('remove', this._onLayerRemove, this);

if (!this.options.allowSelfIntersection) {
this._layer.on(
'pm:vertexremoved',
this._handleSelfIntersectionOnVertexRemoval,
this,
);
}

if (this.options.draggable) {
this._initDraggableLayer();
this._layer.on('pm:vertexremoved', this._handleSelfIntersectionOnVertexRemoval, this);
}

if (!this.options.allowSelfIntersection) {
Expand Down Expand Up @@ -98,10 +90,7 @@ Edit.Line = Edit.extend({
this._layer.off('remove', this._onLayerRemove, this);

if (!this.options.allowSelfIntersection) {
this._layer.off(
'pm:vertexremoved',
this._handleSelfIntersectionOnVertexRemoval,
);
this._layer.off('pm:vertexremoved', this._handleSelfIntersectionOnVertexRemoval);
}

// remove draggable class
Expand Down Expand Up @@ -201,9 +190,7 @@ Edit.Line = Edit.extend({
// create small markers in the middle of the regular markers
coordsArr.map((v, k) => {
// find the next index fist
const nextIndex = this.isPolygon()
? (k + 1) % coordsArr.length
: k + 1;
const nextIndex = this.isPolygon() ? (k + 1) % coordsArr.length : k + 1;
// create the marker
return this._createMiddleMarker(ringArr[k], ringArr[nextIndex]);
});
Expand All @@ -222,7 +209,7 @@ Edit.Line = Edit.extend({
// creates initial markers for coordinates
_createMarker(latlng) {
const marker = new L.Marker(latlng, {
draggable: !this.options.preventVertexEdit,
draggable: true,
icon: L.divIcon({ className: 'marker-icon' }),
});

Expand All @@ -248,11 +235,7 @@ Edit.Line = Edit.extend({
return false;
}

const latlng = Utils.calcMiddleLatLng(
this._map,
leftM.getLatLng(),
rightM.getLatLng(),
);
const latlng = Utils.calcMiddleLatLng(this._map, leftM.getLatLng(), rightM.getLatLng());

const middleMarker = this._createMarker(latlng);
const middleIcon = L.divIcon({
Expand Down Expand Up @@ -303,20 +286,13 @@ Edit.Line = Edit.extend({
const coords = this._layer._latlngs;

// the index path to the marker inside the multidimensional marker array
const { indexPath, index, parentPath } = this.findDeepMarkerIndex(
this._markers,
leftM,
);
const { indexPath, index, parentPath } = this.findDeepMarkerIndex(this._markers, leftM);

// define the coordsRing that is edited
const coordsRing =
indexPath.length > 1 ? get(coords, parentPath) : coords;
const coordsRing = indexPath.length > 1 ? get(coords, parentPath) : coords;

// define the markers array that is edited
const markerArr =
indexPath.length > 1
? get(this._markers, parentPath)
: this._markers;
const markerArr = indexPath.length > 1 ? get(this._markers, parentPath) : this._markers;

// add coordinate to coordinate array
coordsRing.splice(index + 1, 0, latlng);
Expand Down Expand Up @@ -362,25 +338,18 @@ Edit.Line = Edit.extend({
const coords = this._layer.getLatLngs();

// the index path to the marker inside the multidimensional marker array
const { indexPath, index, parentPath } = this.findDeepMarkerIndex(
this._markers,
marker,
);
const { indexPath, index, parentPath } = this.findDeepMarkerIndex(this._markers, marker);

// only continue if this is NOT a middle marker (those can't be deleted)
if (!indexPath) {
return;
}

// define the coordsRing that is edited
const coordsRing =
indexPath.length > 1 ? get(coords, parentPath) : coords;
const coordsRing = indexPath.length > 1 ? get(coords, parentPath) : coords;

// define the markers array that is edited
const markerArr =
indexPath.length > 1
? get(this._markers, parentPath)
: this._markers;
const markerArr = indexPath.length > 1 ? get(this._markers, parentPath) : this._markers;

// remove coordinate
coordsRing.splice(index, 1);
Expand Down Expand Up @@ -426,13 +395,11 @@ Edit.Line = Edit.extend({
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;
rightMarkerIndex = index + 1 >= markerArr.length ? undefined : index + 1;
}

// don't create middlemarkers if there is only one marker left
Expand All @@ -459,12 +426,7 @@ Edit.Line = Edit.extend({
isEmptyDeep(l) {
// thanks for the function, Felix Heck
const flatten = list =>
list
.filter(x => ![null, '', undefined].includes(x))
.reduce(
(a, b) => a.concat(Array.isArray(b) ? flatten(b) : b),
[],
);
list.filter(x => ![null, '', undefined].includes(x)).reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);

return !flatten(l).length;
},
Expand Down Expand Up @@ -504,10 +466,7 @@ Edit.Line = Edit.extend({
const latlng = marker.getLatLng();

// get indexPath of Marker
const { indexPath, index, parentPath } = this.findDeepMarkerIndex(
this._markers,
marker,
);
const { indexPath, index, parentPath } = this.findDeepMarkerIndex(this._markers, marker);

// update coord
const parent = indexPath.length > 1 ? get(coords, parentPath) : coords;
Expand All @@ -521,10 +480,7 @@ Edit.Line = Edit.extend({
// dragged marker
const marker = e.target;

const { indexPath, index, parentPath } = this.findDeepMarkerIndex(
this._markers,
marker,
);
const { indexPath, index, parentPath } = this.findDeepMarkerIndex(this._markers, marker);

// only continue if this is NOT a middle marker
if (!indexPath) {
Expand All @@ -534,15 +490,11 @@ Edit.Line = Edit.extend({
this.updatePolygonCoordsFromMarkerDrag(marker);

// the dragged markers neighbors
const markerArr =
indexPath.length > 1
? get(this._markers, parentPath)
: this._markers;
const markerArr = indexPath.length > 1 ? get(this._markers, parentPath) : this._markers;

// 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 @@ -553,20 +505,12 @@ Edit.Line = Edit.extend({
const nextMarkerLatLng = markerArr[nextMarkerIndex].getLatLng();

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

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

Expand Down
6 changes: 4 additions & 2 deletions src/js/Edit/L.PM.Edit.Rectangle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,12 @@ Edit.Rectangle = Edit.Poly.extend({

// create markers for four corners of rectangle
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;

if (this.options.snappable) {
this._initSnappableMarkers();
Expand All @@ -34,7 +36,7 @@ Edit.Rectangle = Edit.Poly.extend({
// creates initial markers for coordinates
_createMarker(latlng, index) {
const marker = new L.Marker(latlng, {
draggable: !this.options.preventVertexEdit,
draggable: true,
icon: L.divIcon({ className: 'marker-icon' }),
});

Expand Down

0 comments on commit a185a64

Please sign in to comment.