fixed start and ending vector direction to start and end in parallel

src/app/components/graphs.component.ts

@@ -74,6 +74,7 @@ export class GraphsComponent implements OnChanges, OnInit {
   }
 
   ngOnInit() {
+    console.log(this.svgElementRef);
     this.updateGraphs();
   }
 
@@ -104,7 +105,7 @@ export class GraphsComponent implements OnChanges, OnInit {
 
   private updateGraphs(): void {
     const genShiftStart = this.shiftPoint(this.matrix.start, this.config.vectors.start);
-    const genShiftEnd = this.shiftPoint(this.matrix.end, this.config.vectors.end);
+    const genShiftEnd = this.shiftPoint(this.matrix.end, this.config.vectors.end, false);
 
     const curveList = [
       {
@@ -192,9 +193,9 @@ export class GraphsComponent implements OnChanges, OnInit {
     };
   }
 
-  private *shiftPoint(point: Point, vector) {
-    const genShiftX = this.shiftNumber(this.config.vectors.spacing, vector);
-    const genShiftY = this.shiftNumber(this.config.vectors.spacing, vector);
+  private *shiftPoint(point: Point, vector: number, startPositive: boolean = true) {
+    const genShiftX = this.shiftNumber(this.config.vectors.spacing, vector, startPositive);
+    const genShiftY = this.shiftNumber(this.config.vectors.spacing, vector, startPositive);
 
     while (true) {
       yield {
@@ -207,10 +208,10 @@ export class GraphsComponent implements OnChanges, OnInit {
     }
   }
 
-  private *shiftNumber(space: number, vector: number) {
+  private *shiftNumber(space: number, vector: number, startPositive: boolean = true) {
     let current = 0;
     let index = 0;
-    const sign = this.math.flipSign();
+    const sign = this.math.flipSign(startPositive);
 
     while (true) {
       yield current = sign.next().value * index * space + current;

src/app/directives/guilloche.directive.ts

@@ -31,7 +31,6 @@ import { CanvasService } from './../services/canvas.service';
 import { MathService } from './../services/math.service';
 import { GraphService } from '../services/graph.service';
 import { AnimationService } from './../services/animation.service';
-// import { spread } from 'q';
 
 @Directive({
   selector: '[guilloche]'
@@ -155,15 +154,17 @@ export class GuillocheDirective implements OnChanges, OnDestroy {
   }
 
   private drawGraph(points: Point[]): void {
+    this.group
+      .attr('stroke', this.graph.color)
+      .attr('stroke-width', this.graph.stroke)
+      .attr('fill', 'none');
+
     this.pathElements.push(
       this.group.append('path')
         .attr('d', Shape.line()
           .x(p => p.x)
           .y(p => p.y)
-          .curve(Shape.curveBasis)(points))
-        .attr('stroke', this.graph.color)
-        .attr('stroke-width', this.graph.stroke)
-        .attr('fill', 'none'));
+          .curve(Shape.curveBasis)(points)));
 
     if (env.debug) {
       this.debugGraph(points);

src/app/services/math.service.ts

@@ -149,8 +149,8 @@ export class MathService {
     }
   }
 
-  public *flipSign() {
-    let sign = 1;
+  public *flipSign(startPositive: boolean = true) {
+    let sign = startPositive ? 1 : -1;
 
     while (true) {
       yield sign = sign * (-1);