From 4c992c8c38f479fadf9c2fc6b3e7bf78be2e9cab Mon Sep 17 00:00:00 2001
From: Christopher Moeller <cmoel@me.com>
Date: Tue, 25 Oct 2016 16:32:27 -0500
Subject: [PATCH] Add rectRounded point style

---
 docs/03-Line-Chart.md          |  2 +-
 docs/05-Radar-Chart.md         |  2 +-
 src/core/core.canvasHelpers.js |  8 ++++++++
 test/element.point.tests.js    | 24 ++++++++++++++++++++++++
 4 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/docs/03-Line-Chart.md b/docs/03-Line-Chart.md
index f62a20879df..24b77cfe6df 100644
--- a/docs/03-Line-Chart.md
+++ b/docs/03-Line-Chart.md
@@ -57,7 +57,7 @@ pointHitRadius | `Number or Array<Number>` | The pixel size of the non-displayed
 pointHoverBackgroundColor | `Color or Array<Color>` | Point background color when hovered
 pointHoverBorderColor | `Color or Array<Color>` | Point border color when hovered
 pointHoverBorderWidth | `Number or Array<Number>` | Border width of point when hovered
-pointStyle | `String, Array<String>, Image, Array<Image>` | The style of point. Options are 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using `drawImage`. 
+pointStyle | `String, Array<String>, Image, Array<Image>` | The style of point. Options are 'circle', 'triangle', 'rect', 'rectRounded', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'. If the option is an image, that image is drawn on the canvas using `drawImage`.
 showLine | `Boolean` | If false, the line is not drawn for this dataset
 spanGaps | `Boolean` | If true, lines will be drawn between points with no or null data
 steppedLine | `Boolean` | If true, the line is shown as a stepped line and 'lineTension' will be ignored
diff --git a/docs/05-Radar-Chart.md b/docs/05-Radar-Chart.md
index f191c3a8178..b7527d84be4 100644
--- a/docs/05-Radar-Chart.md
+++ b/docs/05-Radar-Chart.md
@@ -50,7 +50,7 @@ hitRadius | `Number or Array<Number>` | The pixel size of the non-displayed poin
 pointHoverBackgroundColor | `Color or Array<Color>` | Point background color when hovered
 pointHoverBorderColor | `Color or Array<Color>` | Point border color when hovered
 pointHoverBorderWidth | `Number or Array<Number>` | Border width of point when hovered
-pointStyle | `String or Array<String>` | The style of point. Options include 'circle', 'triangle', 'rect', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'
+pointStyle | `String or Array<String>` | The style of point. Options include 'circle', 'triangle', 'rect', 'rectRounded', 'rectRot', 'cross', 'crossRot', 'star', 'line', and 'dash'
 
 An example data object using these attributes is shown below.
 
diff --git a/src/core/core.canvasHelpers.js b/src/core/core.canvasHelpers.js
index 439df7dba1b..42fac5c00b5 100644
--- a/src/core/core.canvasHelpers.js
+++ b/src/core/core.canvasHelpers.js
@@ -43,6 +43,14 @@ module.exports = function(Chart) {
 			ctx.fillRect(x - size, y - size, 2 * size, 2 * size);
 			ctx.strokeRect(x - size, y - size, 2 * size, 2 * size);
 			break;
+		case 'rectRounded':
+			var offset = radius / Math.SQRT2;
+			var leftX = x - offset;
+			var topY = y - offset;
+			var sideSize = Math.SQRT2 * radius;
+			Chart.helpers.drawRoundedRectangle(ctx, leftX, topY, sideSize, sideSize, radius / 2);
+			ctx.fill();
+			break;
 		case 'rectRot':
 			size = 1 / Math.SQRT2 * radius;
 			ctx.beginPath();
diff --git a/test/element.point.tests.js b/test/element.point.tests.js
index 61fe3d09a4e..01eba3046ef 100644
--- a/test/element.point.tests.js
+++ b/test/element.point.tests.js
@@ -208,6 +208,30 @@ describe('Point element tests', function() {
 			args: []
 		}]);
 
+		var drawRoundedRectangleSpy = jasmine.createSpy('drawRoundedRectangle');
+		var drawRoundedRectangle = Chart.helpers.drawRoundedRectangle;
+		var offset = point._view.radius / Math.SQRT2;
+		Chart.helpers.drawRoundedRectangle = drawRoundedRectangleSpy;
+		mockContext.resetCalls();
+		point._view.pointStyle = 'rectRounded';
+		point.draw();
+
+		expect(drawRoundedRectangleSpy).toHaveBeenCalledWith(
+			mockContext,
+			10 - offset,
+			15 - offset,
+			Math.SQRT2 * 2,
+			Math.SQRT2 * 2,
+			2 / 2
+		);
+		expect(mockContext.getCalls()).toContain(
+			jasmine.objectContaining({
+				name: 'fill',
+				args: [],
+			})
+		);
+
+		Chart.helpers.drawRoundedRectangle = drawRoundedRectangle;
 		mockContext.resetCalls();
 		point._view.pointStyle = 'rectRot';
 		point.draw();