From 4288b56944672a777f4ed095db4adac4a179ae97 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Sat, 4 Aug 2018 21:58:18 +0200
Subject: [PATCH] removed gradient from graphs

---
 src/app/components/graphs.component.ts    | 14 ++++++--------
 src/app/directives/guilloche.directive.ts | 22 +++-------------------
 src/app/models/graph.model.ts             |  3 +--
 src/environments/environment.prod.ts      |  4 ++--
 src/environments/environment.ts           |  4 ++--
 5 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/src/app/components/graphs.component.ts b/src/app/components/graphs.component.ts
index 1b1b617..acd1dae 100644
--- a/src/app/components/graphs.component.ts
+++ b/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,
-          color: env.guilloche.colors.start
+          vector: this.config.vectors.start
         },
         end: {
           point: this.matrix['end'],
-          vector: this.config.vectors.end,
-          color: env.guilloche.colors.end
+          vector: this.config.vectors.end
         }
       },
       {
+        color: env.guilloche.colors.secondary,
         start: {
           point: this.matrix['end'],
-          vector: this.config.vectors.end,
-          color: env.guilloche.colors.end
+          vector: this.config.vectors.end
         },
         end: {
           point: this.matrix['start'],
-          vector: this.config.vectors.start,
-          color: env.guilloche.colors.start
+          vector: this.config.vectors.start
         }
       }
     ];
diff --git a/src/app/directives/guilloche.directive.ts b/src/app/directives/guilloche.directive.ts
index 009a502..23da6f9 100644
--- a/src/app/directives/guilloche.directive.ts
+++ b/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')
diff --git a/src/app/models/graph.model.ts b/src/app/models/graph.model.ts
index bacdce5..9869993 100644
--- a/src/app/models/graph.model.ts
+++ b/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
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 4786bc9..1906aec 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -18,8 +18,8 @@ export const environment = {
   production: true,
   guilloche: {
     colors: {
-      start: '#F8485E',
-      end: '#5CC0C7'
+      primary: '#F8485E',
+      secondary: '#5CC0C7'
     }
   },
   formDefaults: {
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index d3ef167..a4ed43a 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -18,8 +18,8 @@ export const environment = {
   production: false,
   guilloche: {
     colors: {
-      start: '#cc0045',
-      end: '#0067cc'
+      primary: '#cb0c4d',
+      secondary: '#10c1e8'
     }
   },
   formDefaults: {