fixes for strand-guide

MediaMath · May 11, 2016 · f9e0973 · f9e0973
1 parent b32e39c
commit f9e0973
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 23 deletions.
diff --git a/src/strand-guide-canvas/strand-guide-canvas.js b/src/strand-guide-canvas/strand-guide-canvas.js
@@ -8,35 +8,22 @@
 
 	var Rectangle = StrandLib.Rectangle;
 
-	function drawEllipseWithQuatraticCurve(ctx, x, y, w, h, style) {
-		var kappa = .5522848,
-			ox = (w / 2) * kappa, // control point offset horizontal
-			oy = (h / 2) * kappa, // control point offset vertical
-			xe = x + w,           // x-end
-			ye = y + h,           // y-end
-			xm = x + w / 2,       // x-middle
-			ym = y + h / 2;       // y-middle
+	function drawCircle(ctx, x, y, r, sa, ea, style) {
+		if (!sa) sa = 0;
+		if (!ea) ea = 2 * Math.PI;
 
 		ctx.save();
 		ctx.beginPath();
-		ctx.moveTo(x, ym);
-		ctx.quadraticCurveTo(x,y,xm,y);
-		ctx.quadraticCurveTo(xe,y,xe,ym);
-		ctx.quadraticCurveTo(xe,ye,xm,ye);
-		ctx.quadraticCurveTo(x,ye,x,ym);
+		ctx.arc(x, y, r, sa, ea);
 		if(style)
 		  ctx.strokeStyle = style;
 		ctx.stroke();
 		ctx.restore();
 	}
 
-	function drawCircle(ctx, x, y, r, sa, ea, style) {
-		if (!sa) sa = 0;
-		if (!ea) ea = 2 * Math.PI;
-
+	function drawRectangle(ctx, x, y, w, h, style) {
 		ctx.save();
-		ctx.beginPath();
-		ctx.arc(x, y, r, sa, ea);
+		ctx.fillRect(x, y, w, h);
 		if(style)
 		  ctx.strokeStyle = style;
 		ctx.stroke();
@@ -105,7 +92,7 @@
 			ctx.globalCompositeOperation = 'destination-out';
 			ctx.fillStyle = 'red';
 
-			if (this.spotlightType === this.TYPE_CIRCLE) {
+			if (this.spotlightType === 'circle') {
 				var greater = (rect.width > rect.height) ? rect.width : rect.height;
 				drawCircle(
 					ctx,
@@ -114,8 +101,8 @@
 					greater/2 + this.spotlightOffset
 				);
 			} else {
-				drawEllipseWithQuatraticCurve(
-					ctx, 
+				drawRectangle(
+					ctx,
 					rect.x - this.spotlightOffset,
 					rect.y - this.spotlightOffset, 
 					rect.width + this.spotlightOffset*2,

diff --git a/src/strand-guide/strand-guide.html b/src/strand-guide/strand-guide.html
@@ -33,6 +33,7 @@
 					id="focus"
 					hidden="{{hidden}}"
 					spotlight-offset="{{spotlightOffset}}"
+					spotlight-type="{{spotlightType}}"
 					opacity="{{opacity}}"
 					data="{{_tooltipData}}"
 					current-step="{{_currentStep}}"></strand-guide-canvas>

diff --git a/src/strand-guide/strand-guide.js b/src/strand-guide/strand-guide.js
@@ -18,7 +18,7 @@
 		],
 
 		TYPE_CIRCLE: 'circle',
-		TYPE_ELLIPSE: 'ellipse',
+		TYPE_RECTANGLE: 'rectangle',
 
 		properties: {
 			contentTarget: {