Experiment: implements L.Handler.PathDrag

2025-07-21 23:26:12 +00:00 · 2016-06-07 22:12:13 +02:00
parent 95d5b59c5f
commit 107d0dcb3f
3 changed files with 167 additions and 0 deletions
--- a/build/deps.js
+++ b/build/deps.js
@ -200,6 +200,12 @@ var deps = {
 		desc: 'Makes markers draggable (by mouse or touch).'
 	},

+	PathDrag: {
+		src: ['layer/vector/Path.Drag.js'],
+		deps: ['Path', 'Draggable'],
+		desc: 'Makes paths draggable (by mouse or touch).'
+	},
+
 	ControlZoom: {
 		src: ['control/Control.js',
 		      'control/Control.Zoom.js'],
--- a/debug/vector/path-drag.html
+++ b/debug/vector/path-drag.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Leaflet debug page</title>
+
+    <link rel="stylesheet" href="../../dist/leaflet.css" />
+
+    <link rel="stylesheet" href="../css/screen.css" />
+
+    <script type="text/javascript" src="../../build/deps.js"></script>
+    <script src="../leaflet-include.js"></script>
+    <style type="text/css">
+        #map {
+            width: 1000px;
+            height: 800px;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+    <script type="text/javascript">
+        var center = [41.2058, 9.4307];
+
+        var map = L.map('map', {preferCanvas: false}).setView(center, 13);
+
+        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+        L.polygon([[41.21, 9.42], [41.22, 9.40], [41.23, 9.40]], {draggable: true}).addTo(map);
+        L.polygon([[[41.20, 9.41], [41.20, 9.39], [41.21, 9.41]], [[41.18, 9.42], [41.17, 9.40], [41.19, 9.38]]], {color: 'Tomato', draggable: true}).addTo(map);
+        L.circleMarker([41.20, 9.45], {color: 'Chocolate', radius: 12, draggable: true}).addTo(map);
+        L.polyline([[41.20, 9.36], [41.205, 9.38], [41.19, 9.37]], {draggable: true}).addTo(map);
+
+    </script>
+</body>
+</html>
--- a/src/layer/vector/Path.Drag.js
+++ b/src/layer/vector/Path.Drag.js
@ -0,0 +1,124 @@
+/* A Draggable that does not update the element position
+and takes care of only bubbling to targetted path in Canvas mode. */
+L.PathDraggable = L.Draggable.extend({
+
+	initialize: function (path) {
+		this._path = path;
+		this._canvas = (path._map.getRenderer(path) instanceof L.Canvas);
+		var element = this._canvas ? this._path._map.getRenderer(this._path)._container : this._path._path;
+		L.Draggable.prototype.initialize.call(this, element, element, true);
+	},
+
+	_updatePosition: function () {
+		var e = {originalEvent: this._lastEvent};
+		this.fire('drag', e);
+	},
+
+	_onDown: function (e) {
+		var first = e.touches ? e.touches[0] : e;
+		this._startPoint = new L.Point(first.clientX, first.clientY);
+		if (this._canvas && !this._path._containsPoint(this._startPoint)) { return; }
+		L.Draggable.prototype._onDown.call(this, e);
+	}
+
+});
+
+
+L.Handler.PathDrag = L.Handler.extend({
+
+	initialize: function (path) {
+		this._path = path;
+	},
+
+	getEvents: function () {
+		return {
+			dragstart: this._onDragStart,
+			drag: this._onDrag,
+			dragend: this._onDragEnd
+		};
+	},
+
+	addHooks: function () {
+		if (!this._draggable) { this._draggable = new L.PathDraggable(this._path); }
+		this._draggable.on(this.getEvents(), this).enable();
+		L.DomUtil.addClass(this._draggable._element, 'leaflet-path-draggable');
+	},
+
+	removeHooks: function () {
+		this._draggable.off(this.getEvents(), this).disable();
+		L.DomUtil.removeClass(this._draggable._element, 'leaflet-path-draggable');
+	},
+
+	moved: function () {
+		return this._draggable && this._draggable._moved;
+	},
+
+	_onDragStart: function () {
+		this._startPoint = this._draggable._startPoint;
+		this._path
+		    .closePopup()
+		    .fire('movestart')
+		    .fire('dragstart');
+	},
+
+	_onDrag: function (e) {
+		var path = this._path,
+		    event = (e.originalEvent.touches && e.originalEvent.touches.length === 1 ? e.originalEvent.touches[0] : e.originalEvent),
+		    newPoint = L.point(event.clientX, event.clientY),
+		    latlng = path._map.layerPointToLatLng(newPoint);
+
+		this._offset = newPoint.subtract(this._startPoint);
+		this._startPoint = newPoint;
+
+		this._path.eachLatLng(this.updateLatLng, this);
+		path.redraw();
+
+		e.latlng = latlng;
+		e.offset = this._offset;
+		path.fire('move', e)
+		    .fire('drag', e);
+	},
+
+	_onDragEnd: function (e) {
+		this._path.fire('moveend')
+		    .fire('dragend', e);
+	},
+
+	updateLatLng: function (latlng) {
+		var oldPoint = this._path._map.latLngToLayerPoint(latlng);
+		oldPoint._add(this._offset);
+		var newLatLng = this._path._map.layerPointToLatLng(oldPoint);
+		latlng.lat = newLatLng.lat;
+		latlng.lng = newLatLng.lng;
+	}
+
+});
+
+L.Path.include({
+
+	eachLatLng: function (callback, context) {
+		context = context || this;
+		var loop = function (latlngs) {
+			for (var i = 0; i < latlngs.length; i++) {
+				if (L.Util.isArray(latlngs[i])) {
+					loop(latlngs[i]);
+				} else {
+					callback.call(context, latlngs[i]);
+				}
+			}
+		};
+		loop(this.getLatLngs ? this.getLatLngs() : [this.getLatLng()]);
+	}
+
+});
+
+L.Path.addInitHook(function () {
+
+	if (this.options.draggable) {
+		this._dragging = new L.Handler.PathDrag(this);
+		this.once('add', function () {
+			this._dragging.enable();
+		});
+	}
+
+});