allow corner radius for rectangle spotlight & update doc

src/strand-guide-canvas/strand-guide-canvas.js

@@ -21,12 +21,18 @@
 		ctx.restore();
 	}
 
-	function drawRectangle(ctx, x, y, w, h, style) {
+	function drawRectangle(ctx, x, y, w, h, r, style) {
+		if (w < 2 * r) r = w / 2;
+		if (h < 2 * r) r = h / 2;
+
 		ctx.save();
-		ctx.fillRect(x, y, w, h);
-		if(style)
-		  ctx.strokeStyle = style;
-		ctx.stroke();
+		ctx.beginPath();
+		ctx.moveTo(x+r, y);
+		ctx.arcTo(x+w, y,   x+w, y+h, r);
+		ctx.arcTo(x+w, y+h, x,   y+h, r);
+		ctx.arcTo(x,   y+h, x,   y,   r);
+		ctx.arcTo(x,   y,   x+w, y,   r);
+		ctx.closePath();
 		ctx.restore();
 	}
 
@@ -54,7 +60,8 @@
 				observer: '_currentStepChanged'
 			},
 			spotlightType: String,
-			spotlightOffset: Number
+			spotlightOffset: Number,
+			cornerRadius: Number
 		},
 
 		resize: function() {
@@ -106,7 +113,8 @@
 					rect.x - this.spotlightOffset,
 					rect.y - this.spotlightOffset, 
 					rect.width + this.spotlightOffset*2,
-					rect.height + this.spotlightOffset*2
+					rect.height + this.spotlightOffset*2,
+					this.cornerRadius
 				);
 			}
 

src/strand-guide/doc.json

@@ -82,7 +82,7 @@
 			"type":"String",
 			"description":"Instructs the component to draw it's 'spotlight' mask as either a circle or ellipse around the desired target.",
 			"optional":true,
-			"options":["circle", "ellipse"],
+			"options":["circle", "rectangle"],
 			"default":"circle",
 			"attribute":"spotlight-type"
 		},
@@ -94,6 +94,14 @@
 			"default":"10",
 			"attribute":"spotlight-offset"
 		},
+		{
+			"name":"cornerRadius",
+			"type":"Number",
+			"description":"If spotlightType is set to 'rectangle', instructs the component to draw it's 'spotlight' mask with a a corner radius of the specified number, in pixels (only if 'showFocus' is true - see: 'showFocus').",
+			"optional":true,
+			"default":"5",
+			"attribute":"corner-radius"
+		},
 		{
 			"name":"data",
 			"type":"Array",

src/strand-guide/strand-guide.html

@@ -34,6 +34,7 @@
 					hidden="{{hidden}}"
 					spotlight-offset="{{spotlightOffset}}"
 					spotlight-type="{{spotlightType}}"
+					corner-Radius="{{cornerRadius}}"
 					opacity="{{opacity}}"
 					data="{{_tooltipData}}"
 					current-step="{{_currentStep}}"></strand-guide-canvas>

src/strand-guide/strand-guide.js

@@ -83,6 +83,10 @@
 				type: Number,
 				value: 10
 			},
+			cornerRadius: {
+				type: Number,
+				value: 5
+			},
 			_currentStep: {
 				type: Number,
 				notify: true