Point Skipping now draws properly and is easier to understand

diff --git a/src/elements/element.line.js b/src/elements/element.line.js
index 88c2136992685c3337166973359bdf141311ade0..73690d06d1b4d256c3ee944a314e27573a8a1d47 100644 (file)
--- a/src/elements/element.line.js
+++ b/src/elements/element.line.js
@@ -27,8 +27,6 @@
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                fill: true, // do we fill in the area between the line and its base axis
-               skipNull: true,
-               drawNull: false,
        };
 
 
@@ -44,50 +42,51 @@
 
                        // Draw the background first (so the border is always on top)
                        helpers.each(this._children, function(point, index) {
+
                                var previous = helpers.previousItem(this._children, index);
                                var next = helpers.nextItem(this._children, index);
 
-                               // First point only
-                               if (index === 0) {
-                                       ctx.moveTo(point._view.x, point._view.y);
-                                       return;
+                               // First point moves to it's starting position no matter what
+                               if (!index) {
+                                       ctx.moveTo(point._view.x, vm.scaleZero);
                                }
 
-                               // Start Skip and drag along scale baseline
-                               if (point._view.skip && vm.skipNull && !this._loop) {
-                                       ctx.lineTo(previous._view.x, point._view.y);
-                                       ctx.moveTo(next._view.x, point._view.y);
+                               // Skip this point, draw to scaleZero, move to next point, and draw to next point
+                               if (point._view.skip && !this.loop) {
+                                       ctx.lineTo(previous._view.x, vm.scaleZero);
+                                       ctx.moveTo(next._view.x, vm.scaleZero);
+                                       return;
                                }
-                               // End Skip Stright line from the base line
-                               else if (previous._view.skip && vm.skipNull && !this._loop) {
-                                       ctx.moveTo(point._view.x, previous._view.y);
+
+                               // The previous line was skipped, so just draw a normal straight line to the point
+                               if (previous._view.skip) {
                                        ctx.lineTo(point._view.x, point._view.y);
+                                       return;
                                }
 
-                               if (previous._view.skip && vm.skipNull) {
-                                       ctx.moveTo(point._view.x, point._view.y);
-                               }
-                               // Normal Bezier Curve
-                               else {
-                                       if (vm.tension > 0) {
-                                               ctx.bezierCurveTo(
-                                                       previous._view.controlPointNextX,
-                                                       previous._view.controlPointNextY,
-                                                       point._view.controlPointPreviousX,
-                                                       point._view.controlPointPreviousY,
-                                                       point._view.x,
-                                                       point._view.y
-                                               );
-                                       } else {
-                                               ctx.lineTo(point._view.x, point._view.y);
-                                       }
+                               // Draw a bezier to point
+                               if (vm.tension > 0 && index) {
+                                       //ctx.lineTo(point._view.x, point._view.y);
+                                       ctx.bezierCurveTo(
+                                               previous._view.controlPointNextX,
+                                               previous._view.controlPointNextY,
+                                               point._view.controlPointPreviousX,
+                                               point._view.controlPointPreviousY,
+                                               point._view.x,
+                                               point._view.y
+                                       );
+                                       return;
                                }
+
+                               // Draw a straight line to the point
+                               ctx.lineTo(point._view.x, point._view.y);
+
                        }, this);
 
                        // For radial scales, loop back around to the first point
                        if (this._loop) {
+                               // Draw a bezier line
                                if (vm.tension > 0 && !first._view.skip) {
-
                                        ctx.bezierCurveTo(
                                                last._view.controlPointNextX,
                                                last._view.controlPointNextY,
@@ -96,9 +95,10 @@
                                                first._view.x,
                                                first._view.y
                                        );
-                               } else {
-                                       ctx.lineTo(first._view.x, first._view.y);
+                                       return;
                                }
+                               // Draw a straight line
+                               ctx.lineTo(first._view.x, first._view.y);
                        }
 
                        // If we had points and want to fill this line, do so.
@@ -130,31 +130,24 @@
                                var previous = helpers.previousItem(this._children, index);
                                var next = helpers.nextItem(this._children, index);
 
-                               // First point only
-                               if (index === 0) {
-                                       ctx.moveTo(point._view.x, point._view.y);
-                                       return;
+                               if (!index) {
+                                       ctx.moveTo(point._view.x, vm.scaleZero);
                                }
 
-                               // Start Skip and drag along scale baseline
-                               if (point._view.skip && vm.skipNull && !this._loop) {
-                                       ctx.moveTo(previous._view.x, point._view.y);
-                                       ctx.moveTo(next._view.x, point._view.y);
-                                       return;
-                               }
-                               // End Skip Stright line from the base line
-                               if (previous._view.skip && vm.skipNull && !this._loop) {
-                                       ctx.moveTo(point._view.x, previous._view.y);
-                                       ctx.moveTo(point._view.x, point._view.y);
+                               // Skip this point and move to the next points zeroPoint
+                               if (point._view.skip && !this.loop) {
+                                       ctx.moveTo(next._view.x, vm.scaleZero);
                                        return;
                                }
 
-                               if (previous._view.skip && vm.skipNull) {
+                               // Previous point was skipped, just move to the point
+                               if (previous._view.skip) {
                                        ctx.moveTo(point._view.x, point._view.y);
                                        return;
                                }
-                               // Normal Bezier Curve
-                               if (vm.tension > 0) {
+
+                               // Draw a bezier line to the point
+                               if (vm.tension > 0 && index) {
                                        ctx.bezierCurveTo(
                                                previous._view.controlPointNextX,
                                                previous._view.controlPointNextY,
@@ -163,14 +156,18 @@
                                                point._view.x,
                                                point._view.y
                                        );
-                               } else {
-                                       ctx.lineTo(point._view.x, point._view.y);
+                                       return;
                                }
+
+                               // Draw a straight line to the point
+                               ctx.lineTo(point._view.x, point._view.y);
+
                        }, this);
 
                        if (this._loop && !first._view.skip) {
-                               if (vm.tension > 0) {
 
+                               // Draw a bezier line to the first point
+                               if (vm.tension > 0) {
                                        ctx.bezierCurveTo(
                                                last._view.controlPointNextX,
                                                last._view.controlPointNextY,
@@ -179,9 +176,11 @@
                                                first._view.x,
                                                first._view.y
                                        );
-                               } else {
-                                       ctx.lineTo(first._view.x, first._view.y);
+                                       return;
                                }
+
+                               // Draw a straight line to the first point
+                               ctx.lineTo(first._view.x, first._view.y);
                        }
 
                        ctx.stroke();
@@ -189,4 +188,4 @@
                },
        });
 
-}).call(this);
\ No newline at end of file
+}).call(this);