cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial polyline/polygon editing implementation, #174

Browse Source
This commit is contained in:
mourner 2012-02-16 14:15:47 +02:00
parent b90c2f551f
commit 43305b9ffb
8 changed files with 215 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
build/deps.js
View File

@ -176,9 +176,16 @@ var deps = {
MarkerDrag: {
src: ['layer/marker/Marker.Drag.js'],
deps: ['Marker'],
desc: 'Makes markers draggable (by mouse or touch).'
},
PolyEdit: {
src: ['layer/vector/Polyline.Edit.js'],
deps: ['Polyline', 'DivIcon'],
desc: 'Polyline and polygon editing.'
},
ControlZoom: {
src: ['control/Control.js',

1
debug/leaflet-include.js
View File

@ -73,6 +73,7 @@
'layer/vector/Path.VML.js',
'layer/vector/canvas/Path.Canvas.js',
'layer/vector/Polyline.js',
'layer/vector/Polyline.Edit.js',
'layer/vector/canvas/Polyline.Canvas.js',
'layer/vector/Polygon.js',
'layer/vector/canvas/Polygon.Canvas.js',

26
debug/vector/editable.html
View File

@ -20,34 +20,16 @@
map = new L.Map('map', {layers: [cloudmade], center: new L.LatLng(50.5, 30.5), zoom: 15});
var icon = new L.DivIcon({
iconSize: new L.Point(8, 8),
className: 'leaflet-div-icon leaflet-editing-icon'
});
var latlngs = [],
path;
var latlngs = [];
for (var i = 0; i < 5; i++) {
latlngs.push(getRandomLatLng(map));
(function (i) {
var marker = new L.Marker(latlngs[i], {
draggable: true,
icon: icon
});
map.addLayer(marker);
marker.on('drag', function() {
latlngs[i] = marker.getLatLng();
path.redraw();
});
}(i));
}
path = new L.Polygon(latlngs, {clickable: false});
var path = new L.Polygon(latlngs, {clickable: false});
map.addLayer(path);
path.editing.enable();
</script>
</body>
</html>

109
dist/leaflet-src.js vendored
View File

@ -2390,14 +2390,12 @@ L.Marker = L.Class.extend({
L.DomEvent.addListener(icon, events[i], this._fireMouseEvent, this);
}
if (!L.Handler.MarkerDrag) {
return;
}
if (L.Handler.MarkerDrag) {
this.dragging = new L.Handler.MarkerDrag(this);
this.dragging = new L.Handler.MarkerDrag(this);
if (this.options.draggable) {
this.dragging.enable();
if (this.options.draggable) {
this.dragging.enable();
}
}
},
@ -3618,6 +3616,14 @@ L.Polyline = L.Path.extend({
return b;
},
_initEvents: function () {
L.Polyline.superclass._initEvents.call(this);
if (L.Handler.PolyEdit) {
this.editing = new L.Handler.PolyEdit(this);
}
},
_getPathPartStr: function (points) {
var round = L.Path.VML;
@ -4934,6 +4940,95 @@ L.Handler.MarkerDrag = L.Handler.extend({
});
L.Handler.PolyEdit = L.Handler.extend({
options: {
icon: new L.DivIcon({
iconSize: new L.Point(8, 8),
className: 'leaflet-div-icon leaflet-editing-icon'
})
},
initialize: function (poly, options) {
this._poly = poly;
L.Util.setOptions(this, options);
},
addHooks: function () {
if (!this._markers) {
this._initMarkers();
}
this._poly._map.addLayer(this._markers);
},
removeHooks: function () {
this._poly._map.removeLayer(this._markers);
},
updateMarkers: function () {
this._markers.clearLayers();
this._initMarkers();
},
_initMarkers: function () {
this._markers = new L.LayerGroup();
var latlngs = this._poly._latlngs,
i, len;
// TODO refactor holes implementation in Polygon
/* var holes = this._poly._holes;
if (holes) {
for (i = 0, len = holes.length; i < len; i++) {
latlngs = latlngs.concat(holes[i]);
}
} */
for (i = 0, len = latlngs.length; i < len; i++) {
var marker = this._createMarker(latlngs[i], i);
this._markers.addLayer(marker);
}
},
_createMarker: function (latlng, index) {
var marker = new L.Marker(latlng, {
draggable: true,
icon: this.options.icon
});
marker._origLatLng = latlng;
marker._index = index;
marker.on('drag', this._onMarkerDrag, this);
marker.on('click', this._onMarkerClick, this);
return marker;
},
_onMarkerDrag: function (e) {
var marker = e.target;
L.Util.extend(marker._origLatLng, marker._latlng);
this._poly.redraw();
},
_onMarkerClick: function (e) {
var marker = e.target,
i = marker._index;
this._markers.removeLayer(marker);
this._poly.spliceLatLngs(i, 1);
this._updateIndexes(i);
},
_updateIndexes: function (removedIndex) {
this._markers._iterateLayers(function (marker) {
if (marker._index > removedIndex) {
marker._index--;
}
});
}
});
L.Control = L.Class.extend({
options: {

2
dist/leaflet.js vendored
View File

File diff suppressed because one or more lines are too long

12
src/layer/marker/Marker.js
View File

@ -143,14 +143,12 @@ L.Marker = L.Class.extend({
L.DomEvent.addListener(icon, events[i], this._fireMouseEvent, this);
}
if (!L.Handler.MarkerDrag) {
return;
}
if (L.Handler.MarkerDrag) {
this.dragging = new L.Handler.MarkerDrag(this);
this.dragging = new L.Handler.MarkerDrag(this);
if (this.options.draggable) {
this.dragging.enable();
if (this.options.draggable) {
this.dragging.enable();
}
}
},

87
src/layer/vector/Polyline.Edit.js Normal file
View File

@ -0,0 +1,87 @@
L.Handler.PolyEdit = L.Handler.extend({
options: {
icon: new L.DivIcon({
iconSize: new L.Point(8, 8),
className: 'leaflet-div-icon leaflet-editing-icon'
})
},
initialize: function (poly, options) {
this._poly = poly;
L.Util.setOptions(this, options);
},
addHooks: function () {
if (!this._markers) {
this._initMarkers();
}
this._poly._map.addLayer(this._markers);
},
removeHooks: function () {
this._poly._map.removeLayer(this._markers);
},
updateMarkers: function () {
this._markers.clearLayers();
this._initMarkers();
},
_initMarkers: function () {
this._markers = new L.LayerGroup();
var latlngs = this._poly._latlngs,
i, len;
// TODO refactor holes implementation in Polygon
/* var holes = this._poly._holes;
if (holes) {
for (i = 0, len = holes.length; i < len; i++) {
latlngs = latlngs.concat(holes[i]);
}
} */
for (i = 0, len = latlngs.length; i < len; i++) {
var marker = this._createMarker(latlngs[i], i);
this._markers.addLayer(marker);
}
},
_createMarker: function (latlng, index) {
var marker = new L.Marker(latlng, {
draggable: true,
icon: this.options.icon
});
marker._origLatLng = latlng;
marker._index = index;
marker.on('drag', this._onMarkerDrag, this);
marker.on('click', this._onMarkerClick, this);
return marker;
},
_onMarkerDrag: function (e) {
var marker = e.target;
L.Util.extend(marker._origLatLng, marker._latlng);
this._poly.redraw();
},
_onMarkerClick: function (e) {
var marker = e.target,
i = marker._index;
this._markers.removeLayer(marker);
this._poly.spliceLatLngs(i, 1);
this._updateIndexes(i);
},
_updateIndexes: function (removedIndex) {
this._markers._iterateLayers(function (marker) {
if (marker._index > removedIndex) {
marker._index--;
}
});
}
});

8
src/layer/vector/Polyline.js
View File

@ -77,6 +77,14 @@ L.Polyline = L.Path.extend({
return b;
},
_initEvents: function () {
L.Polyline.superclass._initEvents.call(this);
if (L.Handler.PolyEdit) {
this.editing = new L.Handler.PolyEdit(this);
}
},
_getPathPartStr: function (points) {
var round = L.Path.VML;