Fix measureText bug in spriting (#7492)

test/fixtures/core.layouts/long-labels.js

@@ -0,0 +1,36 @@
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			datasets: [
+				{data: [10, 5, 0, 25, 78, -10]}
+			],
+			labels: ['tick1 is very long one', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6 is very long one']
+		},
+		options: {
+			legend: {
+				display: false
+			},
+			scales: {
+				x: {
+					type: 'category',
+					ticks: {
+						maxRotation: 0,
+						autoSkip: false
+					}
+				},
+				y: {
+					type: 'linear',
+					position: 'right'
+				}
+			}
+		}
+	},
+	options: {
+		spriteText: true,
+		canvas: {
+			height: 150,
+			width: 512
+		}
+	}
+};

test/fixtures/scale.time/autoskip-major.js

@@ -25,7 +25,8 @@ module.exports = {
 							enabled: true
 						},
 						source: 'data',
-						autoSkip: true
+						autoSkip: true,
+						maxRotation: 0
 					}
 				},
 				y: {

test/fixtures/scale.time/data-ty.js

@@ -37,7 +37,10 @@ module.exports = {
 			scales: {
 				x: {
 					type: 'time',
-					position: 'bottom'
+					position: 'bottom',
+					ticks: {
+						maxRotation: 0
+					}
 				},
 				y: {
 					display: false

test/fixtures/scale.time/data-xy.js

@@ -37,7 +37,10 @@ module.exports = {
 			scales: {
 				x: {
 					type: 'time',
-					position: 'bottom'
+					position: 'bottom',
+					ticks: {
+						maxRotation: 0
+					}
 				},
 				y: {
 					display: false

test/specs/core.layouts.tests.js

@@ -3,6 +3,8 @@ function getLabels(scale) {
 }
 
 describe('Chart.layouts', function() {
+	describe('auto', jasmine.fixture.specs('core.layouts'));
+
 	it('should be exposed through Chart.layouts', function() {
 		expect(Chart.layouts).toBeDefined();
 		expect(typeof Chart.layouts).toBe('object');
@@ -96,72 +98,6 @@ describe('Chart.layouts', function() {
 		expect(chart.scales.y.labelRotation).toBeCloseTo(0);
 	});
 
-	it('should fit scales with long labels correctly', function() {
-		var chart = window.acquireChart({
-			type: 'line',
-			data: {
-				datasets: [
-					{data: [10, 5, 0, 25, 78, -10]}
-				],
-				labels: ['tick1 is very long one', 'tick2', 'tick3', 'tick4', 'tick5', 'tick6 is very long one']
-			},
-			options: {
-				legend: {
-					display: false
-				},
-				scales: {
-					x: {
-						type: 'category',
-						ticks: {
-							maxRotation: 0,
-							autoSkip: false
-						}
-					},
-					y: {
-						type: 'linear',
-						position: 'right'
-					}
-				}
-			}
-		}, {
-			canvas: {
-				height: 150,
-				width: 512
-			}
-		});
-
-		expect(chart.chartArea.bottom).toBeCloseToPixel(120);
-		expect(chart.chartArea.left).toBeCloseToPixel(60);
-		expect(chart.chartArea.right).toBeCloseToPixel(452);
-		expect(chart.chartArea.top).toBeCloseToPixel(7);
-
-		// Is xScale at the right spot
-		expect(chart.scales.x.bottom).toBeCloseToPixel(150);
-		expect(chart.scales.x.left).toBeCloseToPixel(60);
-		expect(chart.scales.x.right).toBeCloseToPixel(452);
-		expect(chart.scales.x.top).toBeCloseToPixel(120);
-		expect(chart.scales.x.labelRotation).toBeCloseTo(0);
-
-		expect(chart.scales.x.height).toBeCloseToPixel(30);
-		expect(chart.scales.x.paddingLeft).toBeCloseToPixel(60);
-		expect(chart.scales.x.paddingTop).toBeCloseToPixel(0);
-		expect(chart.scales.x.paddingRight).toBeCloseToPixel(60);
-		expect(chart.scales.x.paddingBottom).toBeCloseToPixel(0);
-
-		// Is yScale at the right spot
-		expect(chart.scales.y.bottom).toBeCloseToPixel(120);
-		expect(chart.scales.y.left).toBeCloseToPixel(452);
-		expect(chart.scales.y.right).toBeCloseToPixel(486);
-		expect(chart.scales.y.top).toBeCloseToPixel(7);
-		expect(chart.scales.y.labelRotation).toBeCloseTo(0);
-
-		expect(chart.scales.y.width).toBeCloseToPixel(34);
-		expect(chart.scales.y.paddingLeft).toBeCloseToPixel(0);
-		expect(chart.scales.y.paddingTop).toBeCloseToPixel(7);
-		expect(chart.scales.y.paddingRight).toBeCloseToPixel(0);
-		expect(chart.scales.y.paddingBottom).toBeCloseToPixel(7);
-	});
-
 	it('should fit scales that overlap the chart area', function() {
 		var chart = window.acquireChart({
 			type: 'radar',

test/spriting.js

@@ -34,20 +34,19 @@ const fontWidth = [
 	8, 8, 8, 8, 8, 8, 8, 7, 8, 8, 8, 8, 8, 7, 8, 7
 ];
 
-// get coordinates and size for one character (index = character code)
-function getChar(index) {
-	const i = index - startIndex;
-	const size = 17;
-	const x = Math.min(i % columns, columns - 1);
-	const y = Math.min(Math.floor(i / columns), rows - 1);
-	return {sx: x * size, sy: y * size, w: fontWidth[i], h: fontHeight};
+// get coordinates and size for one character
+function getChar(asciiCode) {
+	const index = asciiCode - startIndex;
+	const x = Math.min(index % columns, columns - 1);
+	const y = Math.min(Math.floor(index / columns), rows - 1);
+	return {sx: x * cellWidth, sy: y * cellHeight, w: fontWidth[index], h: fontHeight};
 }
 
 function measureText(text) {
 	let width = 0;
 	if (text && text.charCodeAt) {
 		for (let i = 0; i < text.length; ++i) {
-			width += fontWidth[Math.min(223, text.charCodeAt(i))];
+			width += fontWidth[Math.min(223, text.charCodeAt(i) - startIndex)];
 		}
 	}
 	return {width};