feat(graphsComponent): modularized graph parametrization

src/app/components/graphs.component.ts

@@ -57,29 +57,44 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
   private updateGraphs(): void {
     const matrix = this.matrix;
 
-    this.graphs = [...[{
+    this.graphs = [...[this.adjustGraph('start'), this.adjustGraph('end')]];
+  }
+
+  private adjustGraph(from: string) {
+    const matrix = this.matrix;
+    const to = this.flipflop(from);
+
+    return {
       start: {
-        coords: { x: matrix.start.x, y: matrix.start.y },
+        coords: { x: matrix[from].x, y: matrix[from].y },
         direction: this.config.directionStart,
-        color: env.guilloche.colors.start
+        color: env.guilloche.colors[from]
       }, end: {
-        coords: { x: matrix.end.x, y: matrix.end.y },
+        coords: { x: matrix[to].x, y: matrix[to].y },
         direction: this.config.directionEnd,
-        color: env.guilloche.colors.end
+        color: env.guilloche.colors[to]
       },
-      stroke: this.config.stroke
-    }, {
-      start: {
-        coords: { x: matrix.end.x, y: matrix.end.y },
-        direction: this.config.directionEnd,
-        color: env.guilloche.colors.start
-      }, end: {
-        coords: { x: matrix.start.x, y: matrix.start.y },
-        direction: this.config.directionStart,
-        color: env.guilloche.colors.end
-      },
-      stroke: this.config.stroke
-    }]];
+      stroke: this.config.stroke,
+      nodes: []
+    };
+
+    // {
+    //   start: {
+    //     coords: { x: matrix.end.x, y: matrix.end.y },
+    //     direction: this.config.directionEnd,
+    //     color: env.guilloche.colors.start
+    //   }, end: {
+    //     coords: { x: matrix.start.x, y: matrix.start.y },
+    //     direction: this.config.directionStart,
+    //     color: env.guilloche.colors.end
+    //   },
+    //   stroke: this.config.stroke,
+    //   nodes: []
+    // }
+  }
+
+  private flipflop(direction: string) {
+    return (direction === 'start') ? 'end' : 'start';
   }
 
   private updateCanvas(): void {
@@ -87,6 +102,13 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
     this.canvasService.set(this.canvas);
   }
 
+  private centerPoint(width, height): Point {
+    return {
+      x: width * 0.5,
+      y: height * 0.5
+    };
+  }
+
   private get matrix() {
     const totalArea = Math.abs(this.canvas.clientWidth * this.canvas.clientHeight);
     const totalCenter = this.centerPoint(this.canvas.clientWidth, this.canvas.clientHeight);
@@ -106,11 +128,4 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
       }
     };
   }
-
-  private centerPoint(width, height): Point {
-    return {
-      x: width * 0.5,
-      y: height * 0.5
-    };
-  }
 }

src/app/directives/guilloche.directive.ts

@@ -17,6 +17,7 @@ export class GuillocheDirective implements OnChanges {
 
   private canvas: any;
   private group: any;
+  private gradientId: any;
 
   @Input() graph: Graph;
 
@@ -26,6 +27,7 @@ export class GuillocheDirective implements OnChanges {
   ) {
     this.group = Selection.select(el.nativeElement);
     this.canvas = Selection.select(this.canvasService.get);
+    this.gradientId = 'linear';
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -36,6 +38,16 @@ export class GuillocheDirective implements OnChanges {
   private drawGraph(): void {
     console.log('guilloche directive(drawGraph)', this.graph);
 
+    const defs = this.group.append('defs');
+    const grad = defs.append('linearGradient')
+      .attr('id', this.gradientId);
+    grad.append('stop')
+      .attr('stop-color', this.graph.start.color)
+      .attr('offset', '0%');
+    grad.append('stop')
+      .attr('stop-color', this.graph.end.color)
+      .attr('offset', '100%');
+
     this.group.append('path')
       .attr('d', Shape.line()
         .x(p => p.x)
@@ -44,7 +56,7 @@ export class GuillocheDirective implements OnChanges {
           this.graph.start.coords,
           this.graph.end.coords
         ]))
-      .attr('stroke', 'url(#gradient)')
+      .attr('stroke', `url(#${this.gradientId})`)
       .attr('stroke-width', this.graph.stroke)
       .attr('fill', 'none');