improved single responsibility of graphs

src/app/app.component.html

@@ -1,4 +1,4 @@
-<app-graphs [config]="config" [restoredHistory]="restoredHistory" (svgChange)="prepareSvgExport($event)" [animationActive]="animationActive"></app-graphs>
+<app-graphs [config]="config" [restoredHistory]="restoredHistory" (svgChange)="prepareSvgExport($event)" [animation]="animationActive"></app-graphs>
 
 <aside class="col-sm-4 col-lg-3 col-xl-3">
   <div class="aside-inner">

src/app/app.component.ts

@@ -22,7 +22,6 @@ import * as moment from 'moment';
 import 'moment/min/locales';
 
 import { environment as env } from '../environments/environment';
-import { Param } from './../../projects/nls-guilloche/src/lib/models/param.model';
 import { Config } from './../../projects/nls-guilloche/src/lib/models/config.model';
 import { Graph } from './../../projects/nls-guilloche/src/lib/models/graph.model';
 import { NlsCanvasService } from './../../projects/nls-guilloche/src/lib/services/canvas.service';
@@ -36,7 +35,6 @@ import { NlsGraphService } from './../../projects/nls-guilloche/src/lib/services
 })
 export class AppComponent implements OnInit {
 
-  public canvasParam: Param;
   public config: any | null;
   public configForm: FormGroup;
   public url: any;
@@ -52,21 +50,43 @@ export class AppComponent implements OnInit {
   ) {
     moment.locale('de');
 
-    this.config = env.formDefaults;
+    this.config = {
+      colors: {
+        primary: env.guilloche.colors.primary,
+        secondary: env.guilloche.colors.secondary,
+      },
+      ...env.formDefaults
+    };
     this.configForm = ConfigForm;
     this.list = [];
     this.showList = true;
-    this.animationActive = false;
+    this.animationActive = env.animation;
   }
 
   ngOnInit() {
+    this.resetForm();
+    this.refreshHistory();
+  }
+
+  private resetForm() {
     this.configForm.reset({...this.config});
+  }
+
+  private refreshHistory() {
     this.list = this.historyService.list();
   }
 
   public updateGraphs() {
-    this.config = {...this.configForm.value};
-    this.list = this.historyService.list();
+    this.config = Object.assign(
+      {
+        ...this.config,
+        // Adding date to force ngChange event of graphs component
+        date: new Date()
+      },
+      // Override config with new form values
+      this.configForm.value
+    );
+    this.refreshHistory();
   }
 
   public prepareSvgExport(svg) {
@@ -97,11 +117,9 @@ export class AppComponent implements OnInit {
 
   public startAnimation() {
     this.animationActive = true;
-    this.graphService.startAnimation();
   }
 
   public stopAnimation() {
     this.animationActive = false;
-    this.graphService.stopAnimation();
   }
 }

src/app/components/graphs.component.html

@@ -1,6 +1,4 @@
 <svg #svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
 version="1.1" shape-rendering="geometricPrecision">
-  <g nlsGuilloche [graph]="graphs[0]" [matrix]="matrix" [config]="config" [animate]="true"></g>
-  <g nlsGuilloche [graph]="graphs[1]" [matrix]="matrix" [config]="config" [animate]="true"></g>
-  <!-- <g nlsGuilloche *ngFor="let graph of graphs" [graph]="graph" [matrix]="matrix" [config]="config" [animate]="true"></g> -->
+  <g nlsGuilloche *ngFor="let graph of graphs" [graph]="graph" [animation]="animation"></g>
 </svg>

src/app/components/graphs.component.ts

@@ -23,6 +23,7 @@ import * as Drag from 'd3-drag';
 
 import { environment as env } from '../../environments/environment';
 import { Graph } from './../../../projects/nls-guilloche/src/lib/models/graph.model';
+import { Config } from './../../../projects/nls-guilloche/src/lib/models/config.model';
 import { Point } from './../../../projects/nls-guilloche/src/lib/models/point.model';
 import { NlsCanvasService } from './../../../projects/nls-guilloche/src/lib/services/canvas.service';
 import { NlsHistoryService } from './../../../projects/nls-guilloche/src/lib/services/history.service';
@@ -46,12 +47,10 @@ export class GraphsComponent implements OnChanges, OnInit {
   private genShiftPoint: any | null;
   private genLoadedAllGraphs: any | null;
   private hash: string;
-  private animation: Observable<Graph[]>;
-  private timer: Observable<number>;
 
-  @Input() config: any;
+  @Input() config: Config;
   @Input() restoredHistory: any;
-  @Input() animationActive: boolean;
+  @Input() animation: boolean;
   @Output() svgChange = new EventEmitter();
   @Output() graphChange = new EventEmitter();
   @ViewChild('svg') svgElementRef;
@@ -68,18 +67,18 @@ export class GraphsComponent implements OnChanges, OnInit {
     private graphService: NlsGraphService
   ) {
     this.genLoadedAllGraphs = this.countLoadedGraphs();
-    this.timer = interval(500);
   }
 
   ngOnInit() {
-    this.updateGraphs();
   }
 
   ngOnChanges(changes: SimpleChanges) {
     this.updateCanvas();
     this.updateMatrix();
 
-    if (changes.config && !changes.config.firstChange) {
+    console.log(changes);
+
+    if (changes.config) {
       // Config changes must not trigger any other events
       this.updateGraphs();
       return;
@@ -106,18 +105,23 @@ export class GraphsComponent implements OnChanges, OnInit {
 
     const curveList = [
       {
-        color: env.guilloche.colors.primary,
+        color: this.config.colors.primary,
         start: genShiftStart.next().value,
         end: genShiftEnd.next().value
       },
       {
-        color: env.guilloche.colors.secondary,
+        color: this.config.colors.secondary,
         start: genShiftEnd.next().value,
         end: genShiftStart.next().value
       }
     ];
 
-    this.graphs = curveList.map(curve => this.adjustGraph(curve));
+    this.graphs = curveList.map(curve => {
+      return {
+        ...this.adjustGraph(curve),
+        spread: this.config.spread
+      };
+    });
     this.hash = this.historyService.hash(this.graphs);
     this.saveHistory();
     this.saveGraph();

src/environments/environment.prod.ts

@@ -17,6 +17,7 @@
 export const environment = {
   production: true,
   debug: false,
+  animation: false,
   guilloche: {
     colors: {
       secondary: '#F8485E',

src/environments/environment.ts

@@ -17,6 +17,7 @@
 export const environment = {
   production: false,
   debug: false,
+  animation: false,
   guilloche: {
     colors: {
       primary: '#129490',