https://biblio.toscana.it/static/js/leaflet/leaflet.curve.js

1/*
2 * Leaflet.curve v0.4.1 - a plugin for Leaflet mapping library. https://github.com/elfalem/Leaflet.curve
3 * (c) elfalem 2015-2019
4 */
5/*
6 * note that SVG (x, y) corresponds to (long, lat)
7 */
8
9L.Curve = L.Path.extend({
10	options: {
11	},
12	
13	initialize: function(path, options){
14		L.setOptions(this, options);
15		this._setPath(path);
16	},
17	
18	getPath: function(){
19		return this._coords;
20	},
21	
22	setPath: function(path){
23		this._setPath(path);
24		return this.redraw();
25	},
26	
27	getBounds: function() {
28		return this._bounds;
29	},
30
31	_setPath: function(path){
32		this._coords = path;
33		this._bounds = this._computeBounds();
34	},
35	
36	_computeBounds: function(){
37		var bound = new L.LatLngBounds();
38		var lastPoint;
39		var lastCommand;
40		var coord;
41		for(var i = 0; i < this._coords.length; i++){
42			coord = this._coords[i];
43			if(typeof coord == 'string' || coord instanceof String){
44				lastCommand = coord;
45			}else if(lastCommand == 'H'){
46				bound.extend([lastPoint.lat,coord[0]]);
47				lastPoint = new L.latLng(lastPoint.lat,coord[0]);
48			}else if(lastCommand == 'V'){
49				bound.extend([coord[0], lastPoint.lng]);
50				lastPoint = new L.latLng(coord[0], lastPoint.lng);
51			}else if(lastCommand == 'C'){
52				var controlPoint1 = new L.latLng(coord[0], coord[1]);
53				coord = this._coords[++i];
54				var controlPoint2 = new L.latLng(coord[0], coord[1]);
55				coord = this._coords[++i];
56				var endPoint = new L.latLng(coord[0], coord[1]);
57
58				bound.extend(controlPoint1);
59				bound.extend(controlPoint2);
60				bound.extend(endPoint);
61
62				endPoint.controlPoint1 = controlPoint1;
63				endPoint.controlPoint2 = controlPoint2;
64				lastPoint = endPoint;
65			}else if(lastCommand == 'S'){
66				var controlPoint2 = new L.latLng(coord[0], coord[1]);
67				coord = this._coords[++i];
68				var endPoint = new L.latLng(coord[0], coord[1]);
69
70				var controlPoint1 = lastPoint;
71				if(lastPoint.controlPoint2){
72					var diffLat = lastPoint.lat - lastPoint.controlPoint2.lat;
73					var diffLng = lastPoint.lng - lastPoint.controlPoint2.lng;
74					controlPoint1 = new L.latLng(lastPoint.lat + diffLat, lastPoint.lng + diffLng);
75				}
76
77				bound.extend(controlPoint1);
78				bound.extend(controlPoint2);
79				bound.extend(endPoint);
80
81				endPoint.controlPoint1 = controlPoint1;
82				endPoint.controlPoint2 = controlPoint2;
83				lastPoint = endPoint;
84			}else if(lastCommand == 'Q'){
85				var controlPoint = new L.latLng(coord[0], coord[1]);
86				coord = this._coords[++i];
87				var endPoint = new L.latLng(coord[0], coord[1]);
88
89				bound.extend(controlPoint);
90				bound.extend(endPoint);
91
92				endPoint.controlPoint = controlPoint;
93				lastPoint = endPoint;
94			}else if(lastCommand == 'T'){
95				var endPoint = new L.latLng(coord[0], coord[1]);
96
97				var controlPoint = lastPoint;
98				if(lastPoint.controlPoint){
99					var diffLat = lastPoint.lat - lastPoint.controlPoint.lat;
100					var diffLng = lastPoint.lng - lastPoint.controlPoint.lng;
101					controlPoint = new L.latLng(lastPoint.lat + diffLat, lastPoint.lng + diffLng);
102				}
103
104				bound.extend(controlPoint);
105				bound.extend(endPoint);
106
107				endPoint.controlPoint = controlPoint;
108				lastPoint = endPoint;
109			}else{
110				bound.extend(coord);
111				lastPoint = new L.latLng(coord[0], coord[1]);
112			}
113		}
114		return bound;
115	},
116	
117	getCenter: function () {
118		return this._bounds.getCenter();
119	},
120	
121	_update: function(){
122		if (!this._map) { return; }
123		
124		this._updatePath();
125	},
126	
127	_updatePath: function() {
128		if(this._usingCanvas){
129			this._updateCurveCanvas();
130		}else{
131			this._updateCurveSvg();
132		}
133	},
134
135	_project: function() {
136		var coord, lastCoord, curCommand, curPoint;
137
138		this._points = [];
139
140		for(var i = 0; i < this._coords.length; i++){
141			coord = this._coords[i];
142			if(typeof coord == 'string' || coord instanceof String){
143				this._points.push(coord);
144				curCommand = coord;
145			}else {
146				switch(coord.length){
147					case 2:
148						curPoint = this._latLngToPointFn.call(this._map, coord);
149						lastCoord = coord;
150					break;
151					case 1:
152						if(curCommand == 'H'){
153							curPoint = this._latLngToPointFn.call(this._map, [lastCoord[0], coord[0]]);
154							lastCoord = [lastCoord[0], coord[0]];
155						}else{

156							curPoint = this._latLngToPointFn.call(this._map, [coord[0], lastCoord[1]]);
157							lastCoord = [coord[0], lastCoord[1]];
158						}
159					break;
160				}
161				this._points.push(curPoint);
162			}
163		}
164	},
165
166	_curvePointsToPath: function(points){
167		var point, curCommand, str = '';
168		for(var i = 0; i < points.length; i++){
169			point = points[i];
170			if(typeof point == 'string' || point instanceof String){
171				curCommand = point;
172				str += curCommand;
173			}else{
174				switch(curCommand){
175					case 'H':
176						str += point.x + ' ';
177						break;
178					case 'V':
179						str += point.y + ' ';
180						break;
181					default:
182						str += point.x + ',' + point.y + ' ';
183						break;
184				}
185			}
186		}
187		return str || 'M0 0';
188	},
189
190	beforeAdd: function(map){
191		L.Path.prototype.beforeAdd.call(this, map);
192
193		this._usingCanvas = this._renderer instanceof L.Canvas;
194
195		this._latLngToPointFn = this._usingCanvas ? map.latLngToContainerPoint : map.latLngToLayerPoint;
196		if(this._usingCanvas){
197			this._pathSvgElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');			
198		}
199	},
200
201	onAdd: function(map){
202		if(this._usingCanvas){
203			// determine if dash array is set by user
204			this._canvasSetDashArray = !this.options.dashArray;
205		}
206		
207		L.Path.prototype.onAdd.call(this, map); // calls _update()
208
209		if(this._usingCanvas){
210			this._animationCanvasElement = this._insertCustomCanvasElement();
211
212			this._resizeCanvas();
213
214			map.on('resize', this._resizeCanvas, this);
215
216			if(this.options.animate && typeof(TWEEN) === 'object'){
217				this._pathLength = this._pathSvgElement.getTotalLength();
218
219				this._normalizeCanvasAnimationOptions();
220
221				this._tweenedObject = {offset: this._pathLength};
222				this._tween = new TWEEN.Tween(this._tweenedObject)
223					.to({offset: 0}, this.options.animate.duration)
224					// difference of behavior with SVG, delay occurs on every iteration
225					.delay(this.options.animate.delay)
226					.repeat(this.options.animate.iterations - 1)
227					.onComplete(function(scope){
228						return function(){
229							scope._canvasAnimating = false;
230						}
231					}(this))
232					.start();
233
234				this._canvasAnimating = true;
235				this._animateCanvas();
236			}else{
237				this._canvasAnimating = false;
238			}
239		}else{
240			if(this.options.animate){
241				var length = this._svgSetDashArray();
242				
243				this._path.animate([
244					{strokeDashoffset: length},
245					{strokeDashoffset: 0}
246				], this.options.animate);
247			}
248		}
249	},
250
251	onRemove: function(map){
252		L.Path.prototype.onRemove.call(this, map);
253
254		if(this._usingCanvas){
255			this._clearCanvas();
256			L.DomUtil.remove(this._animationCanvasElement);
257			map.off('resize', this._resizeCanvas, this);
258		}
259	},
260
261	// SVG specific logic
262	_updateCurveSvg: function(){
263		this._renderer._setPath(this, this._curvePointsToPath(this._points));
264
265		if(this.options.animate){			
266			this._svgSetDashArray();
267		}
268	},
269
270	_svgSetDashArray: function(){
271		var path = this._path;
272		var length = path.getTotalLength();
273		
274		if(!this.options.dashArray){
275			path.style.strokeDasharray = length + ' ' + length;
276		}
277		return length;
278	},
279
280	// Needed by the `Canvas` renderer for interactivity
281	_containsPoint: function(layerPoint) {
282		return this._bounds.contains(this._map.layerPointToLatLng(layerPoint));
283	},
284
285	// Canvas specific logic below here
286	_insertCustomCanvasElement: function(){
287		var element = L.DomUtil.create('canvas', 'leaflet-zoom-animated');
288		var originProp = L.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin']);
289		element.style[originProp] = '50% 50%';
290		var pane = this._map.getPane(this.options.pane);
291		pane.insertBefore(element, pane.firstChild);
292
293		return element;
294	},
295
296	_normalizeCanvasAnimationOptions: function(){
297		var opts = {
298			delay: 0,
299			duration: 0,
300			iterations:	1
301		};
302		if(typeof(this.options.animate) == "number"){
303			opts.duration = this.options.animate;
304		}else{
305			if(this.options.animate.duration){
306				opts.duration = this.options.animate.duration;
307			}
308			if(this.options.animate.delay){
309				opts.delay =this.options.animate.delay;
310			}
311			if(this.options.animate.iterations){

312				opts.iterations = this.options.animate.iterations;
313			}
314		}
315
316		this.options.animate = opts;
317	},
318
319	_updateCurveCanvas: function(){
320		this._project();
321
322		var pathString = this._curvePointsToPath(this._points);
323		this._pathSvgElement.setAttribute('d', pathString);
324		
325		if(this.options.animate && typeof(TWEEN) === 'object' && this._canvasSetDashArray){
326			this._pathLength = this._pathSvgElement.getTotalLength();
327			this.options.dashArray = this._pathLength + '';
328			this._renderer._updateDashArray(this);
329		}
330
331		this._path2d = new Path2D(pathString);
332
333		if(this._animationCanvasElement){
334			this._resetCanvas();
335		}
336
337		
338	},
339
340	_animationCanvasElement: null,
341
342	_resizeCanvas: function() {
343		var size = this._map.getSize();
344		this._animationCanvasElement.width = size.x;
345		this._animationCanvasElement.height = size.y;
346
347		this._resetCanvas();
348	},
349
350	_resetCanvas: function() {
351		var topLeft = this._map.containerPointToLayerPoint([0, 0]);
352		L.DomUtil.setPosition(this._animationCanvasElement, topLeft);
353
354		this._redrawCanvas();
355	},
356
357	_redrawCanvas: function(){
358		if(!this._canvasAnimating){
359			this._clearCanvas();
360			var ctx = this._animationCanvasElement.getContext('2d');
361			this._curveFillStroke(this._path2d, ctx);
362		}
363	},
364
365	_clearCanvas: function() {
366		this._animationCanvasElement.getContext('2d').clearRect(0, 0, this._animationCanvasElement.width, this._animationCanvasElement.height);
367	},
368  
369	_animateCanvas: function(time){
370		TWEEN.update(time);
371	
372		var ctx = this._animationCanvasElement.getContext('2d');
373		ctx.clearRect(0, 0, this._animationCanvasElement.width, this._animationCanvasElement.height);
374		ctx.lineDashOffset = this._tweenedObject.offset;
375
376		this._curveFillStroke(this._path2d, ctx);
377
378		if(this._canvasAnimating){
379			this._animationFrameId = L.Util.requestAnimFrame(this._animateCanvas, this);
380		}
381	},
382
383	// similar to Canvas._fillStroke(ctx, layer)
384	_curveFillStroke: function (path2d, ctx) {
385		var options = this.options;
386
387		if (options.fill) {
388			ctx.globalAlpha = options.fillOpacity;
389			ctx.fillStyle = options.fillColor || options.color;
390			ctx.fill(path2d, options.fillRule || 'evenodd');
391		}
392
393		if (options.stroke && options.weight !== 0) {
394			if (ctx.setLineDash) {
395				ctx.setLineDash(this.options && this.options._dashArray || []);
396			}
397			ctx.globalAlpha = options.opacity;
398			ctx.lineWidth = options.weight;
399			ctx.strokeStyle = options.color;
400			ctx.lineCap = options.lineCap;
401			ctx.lineJoin = options.lineJoin;
402			ctx.stroke(path2d);
403		}
404	}
405});
406
407L.curve = function (path, options){
408	return new L.Curve(path, options);
409};