Revert line method spread

Author: kurkle

src/elements/element.line.js

@@ -2,6 +2,7 @@
 
 import defaults from '../core/core.defaults';
 import Element from '../core/core.element';
+import helpers from '../helpers';
 
 const defaultColor = defaults.global.defaultColor;
 
@@ -48,78 +49,14 @@ function startAtGap(line, options) {
 	}
 }
 
-const methods = {
-	line: (ctx, previous, target) => {
-		ctx.lineTo(target.x, target.y);
-	},
-	stepMiddle: (ctx, previous, target) => {
-		const midpoint = (previous.x + target.x) / 2.0;
-		ctx.lineTo(midpoint, previous.y);
-		ctx.lineTo(midpoint, target.y);
-		ctx.lineTo(target.x, target.y);
-	},
-	stepMiddleR: (ctx, previous, target) => {
-		const midpoint = (previous.x + target.x) / 2.0;
-		ctx.lineTo(midpoint, target.y);
-		ctx.lineTo(midpoint, previous.y);
-		ctx.lineTo(target.x, target.y);
-	},
-	stepAfter: (ctx, previous, target) => {
-		ctx.lineTo(previous.x, target.y);
-		ctx.lineTo(target.x, target.y);
-	},
-	stepAfterR: (ctx, previous, target) => {
-		ctx.lineTo(target.x, previous.y);
-		ctx.lineTo(target.x, target.y);
-	},
-	stepBefore: (ctx, previous, target) => {
-		ctx.lineTo(target.x, previous.y);
-		ctx.lineTo(target.x, target.y);
-	},
-	stepBeforeR: (ctx, previous, target) => {
-		ctx.lineTo(previous.x, target.y);
-		ctx.lineTo(target.x, target.y);
-	},
-	bezier: (ctx, previous, target) => {
-		ctx.bezierCurveTo(
-			previous.controlPointNextX,
-			previous.controlPointNextY,
-			target.controlPointPreviousX,
-			target.controlPointPreviousY,
-			target.x,
-			target.y);
-	},
-	bezierR: (ctx, previous, target) => {
-		ctx.bezierCurveTo(
-			previous.controlPointPreviousX,
-			previous.controlPointPreviousY,
-			target.controlPointNextX,
-			target.controlPointNextY,
-			target.x,
-			target.y);
-	}
-};
-
-function getLineMethod(line, reverse) {
-	let name = 'bezier';
-	if (line.steppedLine) {
-		const mode = line.steppedLine;
-		if (mode === 'middle') {
-			name = 'stepMiddle';
-		} else if (mode === 'after') {
-			name = 'stepAfter';
-		} else {
-			name = 'stepBefore';
-		}
-	} else if (!line.tension) {
-		name = 'line';
-		reverse = false;
-	}
+function lineTo(ctx, previous, target) {
+	ctx.lineTo(target.x, target.y);
+}
 
-	if (reverse) {
-		name += 'R';
-	}
-	return methods[name];
+function getLineMethod(line) {
+	return line.steppedLine ? helpers.canvas._steppedLineTo
+		: !line.tension ? lineTo
+		: helpers.canvas._bezierCurveTo;
 }
 
 function pointInLine(p1, p2, t) {
@@ -247,7 +184,7 @@ function loopPath(ctx, line, options) {
 	const points = line._children;
 	const vm = line._view;
 	const spanGaps = vm.spanGaps;
-	const lineMethod = getLineMethod(vm, reverse);
+	const lineMethod = getLineMethod(vm);
 	const count = points.length;
 	const dir = reverse ? -1 : 1;
 	let closed = !bound;
@@ -274,7 +211,7 @@ function loopPath(ctx, line, options) {
 			ctx.moveTo(point.x, point.y);
 			move = false;
 		} else {
-			lineMethod(ctx, prev || point, point, vm.steppedLine);
+			lineMethod(ctx, prev || point, point, reverse, vm.steppedLine);
 		}
 		prev = point;
 	}
@@ -288,7 +225,7 @@ function normalPath(ctx, line, options) {
 	const points = line._children;
 	const vm = line._view;
 	const spanGaps = vm.spanGaps;
-	const lineMethod = getLineMethod(vm, reverse);
+	const lineMethod = getLineMethod(vm);
 	const startIndex = bound ? lineStart(points, bounds, reverse) : 0;
 	const count = points.length;
 	const num = count - startIndex;
@@ -315,7 +252,7 @@ function normalPath(ctx, line, options) {
 			ctx.moveTo(point.x, point.y);
 			move = false;
 		} else {
-			lineMethod(ctx, prev || point, point, vm.steppedLine);
+			lineMethod(ctx, prev || point, point, reverse, vm.steppedLine);
 		}
 		prev = point;
 	}

src/helpers/helpers.canvas.js

@@ -170,4 +170,33 @@ module.exports = {
 	unclipArea: function(ctx) {
 		ctx.restore();
 	},
+
+	/**
+	 * @private
+	 */
+	_steppedLineTo: function(ctx, previous, target, flip, mode) {
+		if (mode === 'middle') {
+			const midpoint = (previous.x + target.x) / 2.0;
+			ctx.lineTo(midpoint, flip ? target.y : previous.y);
+			ctx.lineTo(midpoint, flip ? previous.y : target.y);
+		} else if ((mode === 'after' && !flip) || (mode !== 'after' && flip)) {
+			ctx.lineTo(previous.x, target.y);
+		} else {
+			ctx.lineTo(target.x, previous.y);
+		}
+		ctx.lineTo(target.x, target.y);
+	},
+
+	/**
+	 * @private
+	 */
+	_bezierCurveTo: function(ctx, previous, target, flip) {
+		ctx.bezierCurveTo(
+			flip ? previous.controlPointPreviousX : previous.controlPointNextX,
+			flip ? previous.controlPointPreviousY : previous.controlPointNextY,
+			flip ? target.controlPointNextX : target.controlPointPreviousX,
+			flip ? target.controlPointNextY : target.controlPointPreviousY,
+			target.x,
+			target.y);
+	}
 };