replacements

src/app/components/graphs.component.ts

@@ -24,7 +24,6 @@ import { environment as env } from '../../environments/environment';
 import { GuillocheDirective } from './../directives/guilloche.directive';
 import { CanvasService } from './../services/canvas.service';
 import { Graph } from '../models/graph.model';
-import { Config } from './../models/config.model';
 import { Point } from '../models/point.model';
 
 @Component({
@@ -38,6 +37,8 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
   public canvas: any | null;
   public matrix: any | null;
 
+  private genShiftPoint: any | null;
+
   @Input() config: any;
 
   @ViewChild('svg') svgElementRef;
@@ -73,14 +74,38 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
   }
 
   private updateGraphs(): void {
-    this.graphs = [this.adjustGraph('start'), this.adjustGraph('end')];
+    const curves = [
+      {
+        start: {
+          point: this.matrix['start'],
+          vector: this.config.vectors.start,
+          color: env.guilloche.colors.start
+        },
+        end: {
+          point: this.matrix['end'],
+          vector: this.config.vectors.end,
+          color: env.guilloche.colors.end
+        }
+      },
+      {
+        start: {
+          point: this.matrix['end'],
+          vector: this.config.vectors.start,
+          color: env.guilloche.colors.end
+        },
+        end: {
+          point: this.matrix['start'],
+          vector: this.config.vectors.end,
+          color: env.guilloche.colors.start
+        }
+      }
+    ];
+
+    this.graphs = [this.adjustGraph(curves[0]), this.adjustGraph(curves[1])];
     console.log('graphs component (updateGraphs):', this.graphs);
   }
 
-  private adjustGraph(from: string) {
-    const to = this.flipflop(from);
-    const startPoint = { x: this.matrix[from].x, y: this.matrix[from].y };
-    const endPoint = { x: this.matrix[to].x, y: this.matrix[to].y };
+  private adjustGraph(curve) {
     const expandedPoints = [];
 
     for (let i = 0; i < this.config.nodes; i++) {
@@ -88,22 +113,21 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
     }
 
     return {
-      id: `${from}-to-${to}`,
+      id: `start-to-end`,
       start: {
-        coords: startPoint,
-        direction: this.config.vectors[from],
-        color: env.guilloche.colors[from]
+        coords: curve.start.point,
+        direction: curve.start.vector,
+        color: curve.start.color
       }, end: {
-        coords: endPoint,
-        direction: this.config.vectors[to],
-        color: env.guilloche.colors[to]
+        coords: curve.end.point,
+        direction: curve.end.vector,
+        color: curve.end.color
       },
-      space: this.config.space,
       stroke: this.config.stroke,
       nodes: [
-        this.vectorPoint(startPoint, this.config.vectors[from]),
+        this.vectorPoint(curve.start.point, curve.start.vector),
         ...expandedPoints,
-        this.vectorPoint(endPoint, this.config.vectors[to])
+        this.vectorPoint(curve.end.point, curve.end.vector)
       ]
     };
   }
@@ -185,4 +209,35 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
   private Δ(a: Point, b: Point) {
     return Math.pow(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2), 0.5);
   }
+
+
+
+  private *shiftPoint(point: Point, direction) {
+    const genShiftX = this.shiftNumber(this.config.space, point.x);
+    const genShiftY = this.shiftNumber(this.config.space, point.y);
+
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+
+  private *shiftNumber(num: number, space: number) {
+    let current = num;
+    let index = 0;
+    const sign = this.flipSign();
+
+    while (true) {
+      yield current = sign.next().value * index * space + current;
+      index++;
+    }
+  }
+
+  private *flipSign() {
+    let sign = 1;
+
+    while (true) {
+      yield sign = sign * (-1);
+    }
+  }
 }

src/app/directives/guilloche.directive.ts

@@ -52,7 +52,6 @@ export class GuillocheDirective implements OnChanges {
     const points = [this.graph.start.coords, ...this.graph.nodes, this.graph.end.coords];
 
     this.defineGradient();
-    // this.drawGraph(points);
     this.spreadLines(points);
 
     console.log('guilloche directive (changes)', changes.graph.currentValue);
@@ -83,31 +82,7 @@ export class GuillocheDirective implements OnChanges {
       .attr('fill', 'none');
 
     if (!env.production) {
-      this.group.append('circle')
-        .attr('cx', this.graph.start.coords.x)
-        .attr('cy', this.graph.start.coords.y)
-        .attr('r', 20)
-        .attr('stroke-width', 1)
-        .attr('fill-opacity', 0)
-        .attr('stroke', this.graph.start.color);
-
-      this.group.append('circle')
-        .attr('cx', this.graph.end.coords.x)
-        .attr('cy', this.graph.end.coords.y)
-        .attr('r', 10)
-        .attr('stroke-width', 1)
-        .attr('fill-opacity', 0)
-        .attr('stroke', this.graph.end.color);
-
-      this.graph.nodes.forEach(point => {
-        this.group.append('circle')
-          .attr('cx', point.x)
-          .attr('cy', point.y)
-          .attr('r', 5)
-          .attr('stroke-width', 1)
-          .attr('fill-opacity', 0)
-          .attr('stroke', 'darkgray');
-      });
+      this.showGrid();
     }
 
     console.log('guilloche directive(drawGraph)', this.graph);
@@ -171,4 +146,32 @@ export class GuillocheDirective implements OnChanges {
   private Δ(a: Point, b: Point) {
     return Math.pow(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2), 0.5);
   }
+
+  private showGrid() {
+    this.group.append('circle')
+      .attr('cx', this.graph.start.coords.x)
+      .attr('cy', this.graph.start.coords.y)
+      .attr('r', 20)
+      .attr('stroke-width', 1)
+      .attr('fill-opacity', 0)
+      .attr('stroke', this.graph.start.color);
+
+    this.group.append('circle')
+      .attr('cx', this.graph.end.coords.x)
+      .attr('cy', this.graph.end.coords.y)
+      .attr('r', 10)
+      .attr('stroke-width', 1)
+      .attr('fill-opacity', 0)
+      .attr('stroke', this.graph.end.color);
+
+    this.graph.nodes.forEach(point => {
+      this.group.append('circle')
+        .attr('cx', point.x)
+        .attr('cy', point.y)
+        .attr('r', 5)
+        .attr('stroke-width', 1)
+        .attr('fill-opacity', 0)
+        .attr('stroke', 'darkgray');
+    });
+  }
 }

src/app/models/config.model.ts

@@ -27,4 +27,5 @@ export interface Config {
     y: number;
     color: string;
   };
+  space: number;
 }

src/app/models/graph.model.ts

@@ -28,7 +28,6 @@ export interface Graph {
     direction: number; // degree between 0 and 360
     color: string; // can be set in enviroment
   };
-  space: number; // space between lines
   stroke: number; // stroke width
   nodes?: Point[]; // orientation points
 }