From: Evert Timberg <evert.timberg@gmail.com>
Date: Mon, 23 Nov 2015 23:58:51 +0000 (-0500)
Subject: Allow clicking on legend text
X-Git-Tag: 2.0.0-beta2~25^2~21
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=afc6d9094b6c015da78ea20cddcb2e2b2dd9ac94;p=thirdparty%2FChart.js.git

Allow clicking on legend text
---

diff --git a/src/core/core.legend.js b/src/core/core.legend.js
index d6abcafad..cc936f5a3 100644
--- a/src/core/core.legend.js
+++ b/src/core/core.legend.js
@@ -140,6 +140,9 @@
 			var titleFont = helpers.fontString(this.options.title.fontSize, this.options.title.fontStyle, this.options.title.fontFamily);
 			var labelFont = helpers.fontString(this.options.labels.fontSize, this.options.labels.fontStyle, this.options.labels.fontFamily);
 
+			// Reset hit boxes
+			this.legendHitBoxes = [];
+
 			// Width
 			if (this.isHorizontal()) {
 				this.minSize.width = this.maxWidth; // fill all the width
@@ -164,7 +167,8 @@
 
 				// Labels
 
-				this.labelWidths = [0];
+				// Width of each line of legend boxes. Labels wrap onto multiple lines when there are too many to fit on one
+				this.lineWidths = [0];
 				var totalHeight = this.labels.length ? this.options.labels.fontSize + (this.options.labels.padding) : 0;
 
 				ctx.textAlign = "left";
@@ -173,11 +177,20 @@
 
 				helpers.each(this.labels, function(label, i) {
 					var width = this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + ctx.measureText(label).width;
-					if (this.labelWidths[this.labelWidths.length - 1] + width >= this.width) {
+					if (this.lineWidths[this.lineWidths.length - 1] + width >= this.width) {
 						totalHeight += this.options.labels.fontSize + (this.options.labels.padding);
-						this.labelWidths[this.labelWidths.length] = this.left;
+						this.lineWidths[this.lineWidths.length] = this.left;
 					}
-					this.labelWidths[this.labelWidths.length - 1] += width + this.options.labels.padding;
+
+					// Store the hitbox width and height here. Final position will be updated in `draw`
+					this.legendHitBoxes[i] = {
+						left: 0,
+						top: 0,
+						width: width,
+						height: this.options.labels.fontSize,
+					};
+
+					this.lineWidths[this.lineWidths.length - 1] += width + this.options.labels.padding;
 				}, this);
 
 				this.minSize.height += totalHeight;
@@ -199,16 +212,10 @@
 
 		// Actualy draw the legend on the canvas
 		draw: function() {
-			// Reset hit boxes
-			this.legendHitBoxes = [];
-
 			if (this.options.display) {
-
-				console.log(this.labelWidths);
-
 				var ctx = this.ctx;
 				var cursor = {
-					x: this.left + ((this.width - this.labelWidths[0]) / 2),
+					x: this.left + ((this.width - this.lineWidths[0]) / 2),
 					y: this.top,
 					line: 0,
 				};
@@ -239,7 +246,7 @@
 						if (cursor.x + width >= this.width) {
 							cursor.y += this.options.labels.fontSize + (this.options.labels.padding);
 							cursor.line++;
-							cursor.x = this.left + ((this.width - this.labelWidths[cursor.line]) / 2);
+							cursor.x = this.left + ((this.width - this.lineWidths[cursor.line]) / 2);
 						}
 
 						// Set the ctx for the box
@@ -260,13 +267,8 @@
 						ctx.fillRect(cursor.x, cursor.y, this.options.labels.boxWidth, this.options.labels.fontSize);
 						ctx.restore();
 
-						// Store the hitbox
-						this.legendHitBoxes[i] = {
-							left: cursor.x,
-							top: cursor.y,
-							right: cursor.x + this.options.labels.boxWidth,
-							bottom: cursor.y + this.options.labels.fontSize,
-						};
+						this.legendHitBoxes[i].left = cursor.x;
+						this.legendHitBoxes[i].top = cursor.y;
 
 						ctx.fillText(label, this.options.labels.boxWidth + (this.options.labels.fontSize / 2) + cursor.x, cursor.y);
 						cursor.x += width + (this.options.labels.padding);
@@ -330,7 +332,8 @@
 					// See if we are touching one of the dataset boxes
 					for (var i = 0; i < this.legendHitBoxes.length; ++i) {
 						var hitBox = this.legendHitBoxes[i];
-						if (position.x >= hitBox.left && position.x <= hitBox.right && position.y >= hitBox.top && position.y <= hitBox.bottom) {
+
+						if (position.x >= hitBox.left && position.x <= hitBox.left + hitBox.width && position.y >= hitBox.top && position.y <= hitBox.top + hitBox.height) {
 							this.chart.data.datasets[i].hidden = !this.chart.data.datasets[i].hidden;
 
 							// We hid a dataset ... rerender the chart