@raruto/leaflet-elevation 2.0.2 → 2.0.3

package/src/components/chart.js

@@ -85,6 +85,7 @@ export var Chart = L.Control.Elevation.Chart = L.Class.extend({
 		this._updateScale();
 		this._updateArea();
 		this._updateAxis();
+		this._updateMargins();
 		this._updateLegend();
 		this._updateClipper();
 
@@ -536,80 +537,88 @@ export var Chart = L.Control.Elevation.Chart = L.Class.extend({
 	},
 
 	_updateLegend: function () {
-
-		if (this.options.legend === false) return;
-
-		const legendOpts = {
-			width  : this._width(),
-			height : this._height(),
-			margins: this.options.margins,
-		};
-
-		// Reset legend items
-		this._legend.selectAll('g').remove();
-		_.each(this._props.legendItems, (legend) => {
-			this._legend.append("g").call(D3.LegendItem(L.extend(legendOpts, legend)));
-		});
-
+		let xAxesB  = this._axis.selectAll('.x.axis.bottom').nodes().length;
+		
 		// Get legend items
-		let items  = this._legend.selectAll('.legend-item');
+		let items = Object.keys(this._paths);
 
 		// Calculate legend item positions
-		let n      = items.nodes().length;
+		let n      = items.length;
 		let v      = Array(Math.floor(n / 2)).fill(null).map((d, i) => (i + 1) * 2 - (1 - Math.sign(n % 2)));
 		let rev    = v.slice().reverse().map((d) => -(d));
 
+		// push a fake element to handle center alignment (odd numbers)
 		if (n % 2 !== 0) {
 			rev.push(0);
 		}
 		v = rev.concat(v);
 
+		// Reset legend items
+		this._legend.selectAll('g').remove();
+		_.each(this._props.legendItems, (legend) => {
+			this._legend.append("g").call(
+				D3.LegendItem(L.extend({
+					width  : this._width(),
+					height : this._height(),
+					margins: this.options.margins,
+				}, legend))
+			);
+		});
+
+		// Reset legend items
+		this._legend.append("g").call(
+			D3.LegendSmall({
+				width  : this._width(),
+				height : this._height(),
+				items  : items,
+				onClick: (selected) => {
+					_.each(items, name => this._togglePath(name, selected == name, true));
+					this._updateArea();
+				}
+			})
+		);
+		
+		_.each(items, (name, i) => {
+			// Adjust legend item positions
+			this._legend.select('[data-name=' + name + ']').attr("transform", "translate(" + (v[i] * 55) + ", " + (xAxesB * 2) + ")");
+			// Set initial state (disabled controls)
+			this._togglePath(name, !(name in this.options && this.options[name] == 'disabled'), true);
+		});
+
+	},
+
+	_updateMargins: function() {
 		// Get chart margins
 		let xAxesB  = this._axis.selectAll('.x.axis.bottom').nodes().length;
-		let marginB = 30 + (xAxesB * 2);
-		let marginR = n * 30;
+		let xAxesL  = this._axis.selectAll('.y.axis.left').nodes().length;
+		let xAxesR  = this._axis.selectAll('.y.axis.right').nodes().length;
+		let marginB = 60 + (xAxesB * 2);
+		let marginL = 10 + (xAxesL * 30);
+		let marginR = 40 + (xAxesR * 30);
+
+		let marginsUpdated = false
 
-		// Adjust chart right margins
-		if (n && this.options.margins.right < marginR) {
+		// Adjust right margin
+		if (xAxesR && this.options.margins.right < marginR) {
 			this.options.margins.right  = marginR;
-			this.fire('margins_updated');
+			marginsUpdated = true;
 		}
 
-		// Adjust chart bottom margins
+		// Adjust left margin
+		if(xAxesL && this.options.margins.left < marginL) {
+			this.options.margins.left = marginL;
+			marginsUpdated = true;
+		}
+
+		// Adjust bottom margin
 		if(xAxesB && this.options.margins.bottom < marginB) {
 			this.options.margins.bottom = marginB;
-			this.fire('margins_updated');
+			marginsUpdated = true;
 		}
 
-		items
-			.each((d, i, n) => {
-
-				let legend  = d3.select(n[i]);
-				let rect    = legend.select('rect');
-				let name    = legend.attr('data-name');
-				let path    = this._paths[name];
-
-				let tx      = v[i] * 55;
-				let ty      = xAxesB * 2;
-
-				legend
-
-				// Adjust legend item positions
-				.attr("transform", "translate(" + tx + ", " + ty + ")");
-
-				// Set initial state (disabled controls)
-				if (name in this.options && this.options[name] == 'disabled') {
-					path.classed('leaflet-hidden', true);
-					legend.select('text').style('text-decoration-line', 'line-through');
-					legend.select('rect').style('fill-opacity', '0');
-				}
-
-				// Apply d3-zoom (bind <clipPath> mask)
-				if (this._mask) {
-					path.attr('mask', 'url(#' + this._mask.attr('id') + ')');
-				}
-
-			});
+		if (marginsUpdated) {
+			this.fire('margins_updated');
+		}
 	},
 
 	_updateScale: function() {
@@ -733,6 +742,21 @@ export var Chart = L.Control.Elevation.Chart = L.Class.extend({
 			}));
 	},
 
+	_togglePath(name, enabled = true, lazy = false) {
+		let path    = this._paths[name];
+		let legend  = this._container.select('.legend [data-name=' + name + ']');
+		path.classed('leaflet-hidden', !enabled);
+		legend.select('text').style('text-decoration-line', enabled ? '' : 'line-through');
+		legend.select('rect').style('fill-opacity', enabled ? '': '0');
+		// Apply d3-zoom (bind <clipPath> mask)
+		if (this._mask) {
+			path.attr('mask', 'url(#' + this._mask.attr('id') + ')');
+		}
+		if (!lazy) {
+			this._updateArea();
+		}
+	},
+
 	_hideDiagramIndicator: function() {
 		this._tooltip.attr("display", 'none');
 	},

package/src/components/d3.js

@@ -214,6 +214,70 @@ export const LegendItem = ({
 	}
 };
 
+export const LegendSmall = ({
+	width,
+	height,
+	items,
+	onClick
+}) => {
+	return g => {
+		let idx = 0;
+
+		g.data([{
+			x: width,
+			y: height + 40
+		}]).attr("transform", d => "translate(" + d.x + "," + d.y + ")").classed('legend-switcher');
+
+		// let label  = g.selectAll(".legend-switcher-label")  .data([{ idx: 0 }]);
+		let label = g.append('svg:text')
+						.attr("class", "legend-switcher-label")
+						.attr("text-anchor", "end")
+						.attr("x", -25)
+						.attr("y", 5)
+						.on("mousedown", (e, d) => setIdx(L.Util.wrapNum((idx + 1), [0, items.length])));
+
+		let symbol = g.selectAll(".legend-switcher-symbol").data([
+			{ type: d3.symbolTriangle, x: 0,   y: 3, angle: 0,   size: 50, id: "down" },
+			{ type: d3.symbolTriangle, x: -13, y: 0, angle: 180, size: 50, id: "up" }
+		]);
+
+		symbol.exit().remove();
+		label.exit().remove();
+	
+		symbol.enter()
+			.append("svg:path")
+			.attr("class", "legend-switcher-symbol")
+			.attr("cursor", 'pointer')
+			.attr("fill", "#000")
+			.merge(symbol)
+			.attr("d", 
+				d3.symbol()
+				.type(d => d.type)
+				.size(d => d.size)
+			)
+			.attr("transform", d => "translate(" + d.x + "," + d.y + ") rotate(" + d.angle + ")")
+			.on("mousedown", (e, d) => setIdx(L.Util.wrapNum((d.id === "up" ? idx + 1 : idx - 1), [0, items.length])));
+
+		const setIdx = (id) => {
+			idx = id;
+			// label.enter()
+			// 	.append('text')
+			// 	.attr("class", "legend-switcher-label")
+			// 	.attr("text-anchor", "end")
+			// 	.attr("x", -25)
+			// 	.attr("y", 5)
+			// 	.merge(label.data([{ idx: id }]))
+			// 	.text(d => items.length ? (items[idx][0].toUpperCase() + items[idx].slice(1)) : '')
+			// 	.on("mousedown", (e, d) => setIdx(L.Util.wrapNum((idx + 1), [0, items.length])));
+			label.text(items.length ? (items[idx][0].toUpperCase() + items[idx].slice(1)) : '');
+			onClick(items[idx]);
+		};
+		setIdx(0);
+		
+		return g;
+	};
+};
+
 export const Tooltip = ({
 	xCoord,
 	yCoord,
@@ -300,27 +364,21 @@ export const Ruler = ({
 	return g => {
 
 		g.data([{
-				"x": 0,
-				"y": height,
+				x: 0,
+				y: height,
 			}])
 			.attr("transform", d => "translate(" + d.x + "," + d.y + ")");
 
-		let rect   = g.selectAll('.horizontal-drag-rect')
-			.data([{ w: width }]);
-
-		let line   = g.selectAll('.horizontal-drag-line')
-			.data([{ w: width }]);
-
-		let label  = g.selectAll('.horizontal-drag-label')
-			.data([{ w: width - 8 }]);
-
+		let rect   = g.selectAll('.horizontal-drag-rect').data([{ w: width }]);
+		let line   = g.selectAll('.horizontal-drag-line').data([{ w: width }]);
+		let label  = g.selectAll('.horizontal-drag-label').data([{ w: width - 8 }]);
 		let symbol = g.selectAll('.horizontal-drag-symbol')
 			.data([{
-				"type": d3.symbolTriangle,
-				"x": width + 7,
-				"y": 0,
-				"angle": -90,
-				"size": 50
+				type: d3.symbolTriangle,
+				x: width + 7,
+				y: 0,
+				angle: -90,
+				size: 50
 			}]);
 
 		rect.exit().remove();

package/src/control.js

@@ -593,10 +593,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 				.on('margins_updated', this._resizeChart,    this);
 	
 	
-			this.fire("elechart_axis");
-	
-			if (this.options.legend) this.fire("elechart_legend");
-	
 			this.fire("elechart_init");
 
 			map
@@ -1205,7 +1201,6 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	_updateChart: function() {
 		if (this._chart && this._container) {
 			this.fire("elechart_axis");
-			this.fire("elechart_area");
 	
 			this._chart.update({ data: this._data, options: this.options });
 	
@@ -1253,27 +1248,26 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Update chart summary.
 	 */
 	_updateSummary: function() {
-		if (!this._summary) return;
-
-		this._summary.reset();
-
-		if (this.options.summary) {
-			this.fire("elechart_summary");
-			this._summary.update();
+		if (this._summary) {
+			this._summary.reset();
+			if (this.options.summary) {
+				this.fire("elechart_summary");
+				this._summary.update();
+			}
+			if (this.options.downloadLink && this._downloadURL) { // TODO: generate dynamically file content instead of using static file urls.
+				this._summary._container.innerHTML += '<span class="download"><a href="#">' + L._('Download') + '</a></span>'
+				_.select('.download a', this._summary._container).onclick = ({preventDefault}) => {
+					preventDefault();
+					let event = { downloadLink: this.options.downloadLink, confirm: _.saveFile.bind(this, this._downloadURL) };
+					if (this.options.downloadLink == 'modal' && typeof CustomEvent === "function") {
+						document.dispatchEvent(new CustomEvent("eletrack_download", { detail: event }));
+					} else if (this.options.downloadLink == 'link' || this.options.downloadLink === true) {
+						event.confirm();
+					}
+					this.fire('eletrack_download', event);
+				};
+			}
 		}
-		if (this.options.downloadLink && this._downloadURL) { // TODO: generate dynamically file content instead of using static file urls.
-			this._summary._container.innerHTML += '<span class="download"><a href="#">' + L._('Download') + '</a></span>'
-			_.select('.download a', this._summary._container).onclick = ({preventDefault}) => {
-				preventDefault();
-				let event = { downloadLink: this.options.downloadLink, confirm: _.saveFile.bind(this, this._downloadURL) };
-				if (this.options.downloadLink == 'modal' && typeof CustomEvent === "function") {
-					document.dispatchEvent(new CustomEvent("eletrack_download", { detail: event }));
-				} else if (this.options.downloadLink == 'link' || this.options.downloadLink === true) {
-					event.confirm();
-				}
-				this.fire('eletrack_download', event);
-			};
-		};
 	},
 
 

package/src/handlers/heart.js

@@ -13,8 +13,8 @@ export function Heart() {
             axis       : "y",
             position   : "left",
             scale      : { min: -1, max: +1 },
-            tickPadding: 16,
-            labelX     : -18,
+            tickPadding: 25,
+            labelX     : -30,
             labelY     : -8,
         },
         path: {

package/src/index.css

@@ -60,6 +60,7 @@
 }
 
 .elevation-control.elevation .axis text,
+.elevation-control.elevation .legend text,
 .elevation-control.elevation .point text {
   fill: #000;
   font-weight: 700;

package/src/utils.js

@@ -139,9 +139,9 @@ export const iSum = (iVal, sum) => iVal + (sum || 0);
 /**
  * Alias for some leaflet core functions
  */
-export const { on, off }  = L.DomEvent;
-export const { throttle } = L.Util;
-export const { hasClass } = L.DomUtil;
+export const { on, off }           = L.DomEvent;
+export const { throttle, wrapNum } = L.Util;
+export const { hasClass }          = L.DomUtil;
 
 /**
  * Limit floating point precision