Fixed: #3323, 3d pie parts have better zIndexes, out part of slice cr…

…ossing sides created, normalization of alpha and beta to (-360, 360) range.
highcharts · Sep 17, 2015 · 650eee6 · 650eee6
1 parent 5e99c2c
commit 650eee6
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 20 deletions.
diff --git a/js/highcharts-3d.src.js b/js/highcharts-3d.src.js
@@ -501,6 +501,23 @@ Highcharts.SVGRenderer.prototype.arc3dPath = function (shapeArgs) {
 
 	var out = ['M', cx + (rx * cos(start2)), cy + (ry * sin(start2))];
 	out = out.concat(curveTo(cx, cy, rx, ry, start2, end2, 0, 0));
+
+	// When slice goes over middle, need to add both, left and right outer side:
+	if (end > PI - a && start < PI - a) {
+	// Go to outer side
+	out = out.concat([
+	'L', cx + (rx * cos(end2)) + dx, cy + (ry * sin(end2)) + dy
+	]);
+	// Curve to the true end of the slice
+	out = out.concat(curveTo(cx, cy, rx, ry, end2, end, dx, dy));
+	// Go to the inner side
+	out = out.concat([
+	'L', cx + (rx * cos(end)), cy + (ry * sin(end))
+	]);
+	// Go back to the artifical end2
+	out = out.concat(curveTo(cx, cy, rx, ry, end, end2, 0, 0));
+	}
+
 	out = out.concat([
 		'L', cx + (rx * cos(end2)) + dx, cy + (ry * sin(end2)) + dy
 	]);
@@ -531,22 +548,42 @@ Highcharts.SVGRenderer.prototype.arc3dPath = function (shapeArgs) {
 		'L', cx + (irx * ce), cy + (iry * se),
 		'Z'
 	];
-
-	var a1 = sin((start + end) / 2),
-		a2 = sin(start),
-		a3 = sin(end);
-
+
+	// correction for changed position of vanishing point caused by alpha and beta rotations
+	var angleCorr = Math.atan2(dy, -dx),
+		angleEnd = Math.abs(end + angleCorr), 
+		angleStart = Math.abs(start + angleCorr),
+		angleMid = Math.abs((start + end) / 2 + angleCorr);
+
+	// set to 0-PI range
+	function toZeroPIRange(angle) {
+		angle = angle % (2 * PI);
+		if (angle > PI) {
+			angle = 2 * PI - angle; 
+		}
+		return angle;
+	}
+	angleEnd = toZeroPIRange(angleEnd);
+	angleStart = toZeroPIRange(angleStart);
+	angleMid = toZeroPIRange(angleMid);
+
+	// *1e5 is to compensate pInt in zIndexSetter
+	var incPrecision = 1e5,
+		a1 = angleMid * incPrecision,
+		a2 = angleStart * incPrecision,
+		a3 = angleEnd * incPrecision;
+
 	return {
 		top: top,
-		zTop: r,
+		zTop: PI * incPrecision + 1, // max angle is PI, so this is allways higher
 		out: out,
-		zOut: Math.max(a1, a2, a3) * r,
+		zOut: Math.max(a1, a2, a3),
 		inn: inn,
-		zInn: Math.max(a1, a2, a3) * r,
+		zInn: Math.max(a1, a2, a3),
 		side1: side1,
-		zSide1: a2 * (r * 0.99),
+		zSide1: a3 * 0.99, // to keep below zOut and zInn in case of same values
 		side2: side2,
-		zSide2: a3 * (r * 0.99)
+		zSide2: a2 * 0.99
 	};
 };
 /*** 
@@ -585,6 +622,10 @@ Highcharts.wrap(Highcharts.Chart.prototype, 'init', function (proceed) {
 		pieOptions;
 
 	if (args[0].chart.options3d && args[0].chart.options3d.enabled) {
+		// Normalize alpha and beta to (-360, 360) range
+		args[0].chart.options3d.alpha = (args[0].chart.options3d.alpha || 0) % 360;
+		args[0].chart.options3d.beta = (args[0].chart.options3d.beta || 0) % 360;
+
 		plotOptions = args[0].plotOptions || {};
 		pieOptions = plotOptions.pie || {};
 

diff --git a/js/parts-3d/Chart.js b/js/parts-3d/Chart.js
@@ -34,6 +34,10 @@ Highcharts.wrap(Highcharts.Chart.prototype, 'init', function (proceed) {
 		pieOptions;
 
 	if (args[0].chart.options3d && args[0].chart.options3d.enabled) {
+		// Normalize alpha and beta to (-360, 360) range
+		args[0].chart.options3d.alpha = (args[0].chart.options3d.alpha || 0) % 360;
+		args[0].chart.options3d.beta = (args[0].chart.options3d.beta || 0) % 360;
+
 		plotOptions = args[0].plotOptions || {};
 		pieOptions = plotOptions.pie || {};
 

diff --git a/js/parts-3d/SVGRenderer.js b/js/parts-3d/SVGRenderer.js
@@ -396,6 +396,23 @@ Highcharts.SVGRenderer.prototype.arc3dPath = function (shapeArgs) {
 
 	var out = ['M', cx + (rx * cos(start2)), cy + (ry * sin(start2))];
 	out = out.concat(curveTo(cx, cy, rx, ry, start2, end2, 0, 0));
+
+	// When slice goes over middle, need to add both, left and right outer side:
+	if (end > PI - a && start < PI - a) {
+	// Go to outer side
+	out = out.concat([
+	'L', cx + (rx * cos(end2)) + dx, cy + (ry * sin(end2)) + dy
+	]);
+	// Curve to the true end of the slice
+	out = out.concat(curveTo(cx, cy, rx, ry, end2, end, dx, dy));
+	// Go to the inner side
+	out = out.concat([
+	'L', cx + (rx * cos(end)), cy + (ry * sin(end))
+	]);
+	// Go back to the artifical end2
+	out = out.concat(curveTo(cx, cy, rx, ry, end, end2, 0, 0));
+	}
+
 	out = out.concat([
 		'L', cx + (rx * cos(end2)) + dx, cy + (ry * sin(end2)) + dy
 	]);
@@ -426,21 +443,41 @@ Highcharts.SVGRenderer.prototype.arc3dPath = function (shapeArgs) {
 		'L', cx + (irx * ce), cy + (iry * se),
 		'Z'
 	];
-
-	var a1 = sin((start + end) / 2),
-		a2 = sin(start),
-		a3 = sin(end);
-
+
+	// correction for changed position of vanishing point caused by alpha and beta rotations
+	var angleCorr = Math.atan2(dy, -dx),
+		angleEnd = Math.abs(end + angleCorr), 
+		angleStart = Math.abs(start + angleCorr),
+		angleMid = Math.abs((start + end) / 2 + angleCorr);
+
+	// set to 0-PI range
+	function toZeroPIRange(angle) {
+		angle = angle % (2 * PI);
+		if (angle > PI) {
+			angle = 2 * PI - angle; 
+		}
+		return angle;
+	}
+	angleEnd = toZeroPIRange(angleEnd);
+	angleStart = toZeroPIRange(angleStart);
+	angleMid = toZeroPIRange(angleMid);
+
+	// *1e5 is to compensate pInt in zIndexSetter
+	var incPrecision = 1e5,
+		a1 = angleMid * incPrecision,
+		a2 = angleStart * incPrecision,
+		a3 = angleEnd * incPrecision;
+
 	return {
 		top: top,
-		zTop: r,
+		zTop: PI * incPrecision + 1, // max angle is PI, so this is allways higher
 		out: out,
-		zOut: Math.max(a1, a2, a3) * r,
+		zOut: Math.max(a1, a2, a3),
 		inn: inn,
-		zInn: Math.max(a1, a2, a3) * r,
+		zInn: Math.max(a1, a2, a3),
 		side1: side1,
-		zSide1: a2 * (r * 0.99),
+		zSide1: a3 * 0.99, // to keep below zOut and zInn in case of same values
 		side2: side2,
-		zSide2: a3 * (r * 0.99)
+		zSide2: a2 * 0.99
 	};
 };
diff --git a/samples/issues/highcharts-4.1.8/3323-3d-pie-zindex/demo.details b/samples/issues/highcharts-4.1.8/3323-3d-pie-zindex/demo.details
@@ -0,0 +1,5 @@
+---
+ resources:
+   - http://code.jquery.com/qunit/qunit-1.15.0.js
+   - http://code.jquery.com/qunit/qunit-1.15.0.css
+...
diff --git a/samples/issues/highcharts-4.1.8/3323-3d-pie-zindex/demo.html b/samples/issues/highcharts-4.1.8/3323-3d-pie-zindex/demo.html
@@ -0,0 +1,8 @@
+<script src="http://code.highcharts.com/highcharts.js"></script>
+<script src="http://code.highcharts.com/highcharts-3d.js"></script>
+
+
+<div id="qunit"></div>
+<div id="qunit-fixture"></div>
+
+<div id="container" style="width: 500px;"></div>
diff --git a/samples/issues/highcharts-4.1.8/3323-3d-pie-zindex/demo.js b/samples/issues/highcharts-4.1.8/3323-3d-pie-zindex/demo.js
@@ -0,0 +1,48 @@
+$(function () {
+    QUnit.test('Parts of 3d pie should have correct zIndexes.', function (assert) {
+
+        $('#container').highcharts({
+			chart: {
+				type: 'pie',
+				options3d: {
+					enabled: true,
+					alpha: 0,
+					beta: -60
+				}
+			},
+			plotOptions: {
+				pie: {
+					allowPointSelect: true,
+					slicedOffset: 42,
+					dataLabels: {
+						enabled: false
+					}
+				}
+			},
+			series: [{
+				depth: 200,
+				data: [{
+					y: 1,
+					sliced: true
+				},
+				3, 8, 2, 1]
+			}]
+		});
+
+        var chart = $('#container').highcharts(),
+			points = chart.series[0].points;
+
+        assert.strictEqual(
+            points[1].graphic.side2.zIndex < points[3].graphic.out.zIndex,
+			true,
+            'Correct sequence of pie\'s parts - 1/2'
+        );
+
+		assert.strictEqual(
+            points[0].graphic.side2.zIndex < points[4].graphic.out.zIndex,
+			true,
+            'Correct sequence of pie\'s parts - 2/2'
+        );
+
+    });
+});