removed gradient from graphs

src/app/components/graphs.component.ts

@@ -76,27 +76,25 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
   private updateGraphs(): void {
     const curves = [
       {
+        color: env.guilloche.colors.primary,
         start: {
           point: this.matrix['start'],
-          vector: this.config.vectors.start,
+          vector: this.config.vectors.start
-          color: env.guilloche.colors.start
         },
         end: {
           point: this.matrix['end'],
-          vector: this.config.vectors.end,
+          vector: this.config.vectors.end
-          color: env.guilloche.colors.end
         }
       },
       {
+        color: env.guilloche.colors.secondary,
         start: {
           point: this.matrix['end'],
-          vector: this.config.vectors.end,
+          vector: this.config.vectors.end
-          color: env.guilloche.colors.end
         },
         end: {
           point: this.matrix['start'],
-          vector: this.config.vectors.start,
+          vector: this.config.vectors.start
-          color: env.guilloche.colors.start
         }
       }
     ];

src/app/directives/guilloche.directive.ts

@@ -34,7 +34,6 @@ export class GuillocheDirective implements OnChanges {
 
   private canvas: any;
   private group: any;
-  private gradientId: any;
 
   @Input() graph: Graph;
   @Input() matrix: any;
@@ -51,33 +50,18 @@ export class GuillocheDirective implements OnChanges {
   ngOnChanges(changes: SimpleChanges) {
     const points = [this.graph.start.point, ...this.graph.nodes, this.graph.end.point];
 
-    this.defineGradient();
     this.spreadLines(points);
 
     console.log('guilloche directive (changes)', changes.graph.currentValue);
   }
 
-  private defineGradient(): void {
-    this.gradientId = `gradient-${this.graph.id}`;
-
-    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%');
-  }
-
   private drawGraph(points: Point[]): void {
     this.group.append('path')
       .attr('d', Shape.line()
         .x(p => p.x)
         .y(p => p.y)
         .curve(Shape.curveBasis)(points))
-      .attr('stroke', `url(#${this.gradientId})`)
+      .attr('stroke', this.graph.color)
       .attr('stroke-width', this.graph.stroke)
       .attr('fill', 'none');
 
@@ -154,7 +138,7 @@ export class GuillocheDirective implements OnChanges {
       .attr('r', 20)
       .attr('stroke-width', 1)
       .attr('fill-opacity', 0)
-      .attr('stroke', this.graph.start.color);
+      .attr('stroke', this.graph.color);
 
     this.group.append('circle')
       .attr('cx', this.graph.end.point.x)
@@ -162,7 +146,7 @@ export class GuillocheDirective implements OnChanges {
       .attr('r', 10)
       .attr('stroke-width', 1)
       .attr('fill-opacity', 0)
-      .attr('stroke', this.graph.end.color);
+      .attr('stroke', this.graph  .color);
 
     this.graph.nodes.forEach(point => {
       this.group.append('circle')

src/app/models/graph.model.ts

@@ -18,15 +18,14 @@ import { Point } from './point.model';
 
 export interface Graph {
   id: string;
+  color: string; // can be set in enviroment
   start: {
     point: Point;
     vector: number; // degree between 0 and 360
-    color: string // can be set in enviroment
   };
   end: {
     point: Point;
     vector: number; // degree between 0 and 360
-    color: string; // can be set in enviroment
   };
   stroke: number; // stroke width
   nodes?: Point[]; // orientation points

src/environments/environment.prod.ts

@@ -18,8 +18,8 @@ export const environment = {
   production: true,
   guilloche: {
     colors: {
-      start: '#F8485E',
+      primary: '#F8485E',
-      end: '#5CC0C7'
+      secondary: '#5CC0C7'
     }
   },
   formDefaults: {

src/environments/environment.ts

@@ -18,8 +18,8 @@ export const environment = {
   production: false,
   guilloche: {
     colors: {
-      start: '#cc0045',
+      primary: '#cb0c4d',
-      end: '#0067cc'
+      secondary: '#10c1e8'
     }
   },
   formDefaults: {