improved single responsibility of graphs

projects/nls-guilloche/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nls-guilloche",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/nextlevelshit/nls-ng6-d3js-guilloche"

projects/nls-guilloche/src/lib/directives/guilloche.directive.ts

@@ -22,10 +22,8 @@ import * as Drag from 'd3-drag';
 import * as Ease from 'd3-ease';
 import * as Timer from 'd3-timer';
 
-import { Config } from './../models/config.model';
 import { Graph } from './../models/graph.model';
 import { Point } from './../models/point.model';
-import { Param } from './../models/param.model';
 import { NlsCanvasService } from './../services/canvas.service';
 import { NlsMathService } from './../services/math.service';
 import { NlsGraphService } from '../services/graph.service';
@@ -49,9 +47,7 @@ export class NlsGuillocheDirective implements OnChanges, OnDestroy {
   private pathElements: any;
 
   @Input() graph: Graph;
-  @Input() matrix: any;
+  @Input() animation: boolean;
-  @Input() config: any;
-  @Input() animate: boolean;
 
   constructor(
     private canvasService: NlsCanvasService,
@@ -80,7 +76,7 @@ export class NlsGuillocheDirective implements OnChanges, OnDestroy {
     this.medianPoint = this.math.medianOfCurve(this.initialCurve);
     this.medianIndex = this.math.medianIndex(this.initialCurve);
 
-    if (this.graphService.isAnimated) {
+    if (this.animation) {
       this.graph.nodes = this.graph.nodes.slice().map((node, i) => {
         return {
           x: node.x,
@@ -135,9 +131,9 @@ export class NlsGuillocheDirective implements OnChanges, OnDestroy {
 
   private spreadLines(points: Point[]) {
     const shiftedMedians = [];
-    const genshiftedMedians = this.graphService.spreadOrthogonal(this.medianPoint, this.config.spread.spacing);
+    const genshiftedMedians = this.graphService.spreadOrthogonal(this.medianPoint, this.graph.spread.spacing);
 
-    for (let i = 0; i < this.config.spread.amount; i++) {
+    for (let i = 0; i < this.graph.spread.amount; i++) {
       shiftedMedians.push(genshiftedMedians.next().value);
     }
 

projects/nls-guilloche/src/lib/models/config.model.ts

@@ -20,18 +20,28 @@ export interface Config {
   start: {
     x: number;
     y: number;
-    color: string;
   };
   end: {
     x: number;
     y: number;
-    color: string;
   };
   vectors: {
-    spacing: number
+    spacing: number;
+    start: any;
+    end: any;
+    range: any;
+  };
+  colors: {
+    primary: string;
+    secondary: string;
   };
   spread: {
     amount: number;
     spacing: number
   };
+  date?: Date;
+  nodes: any;
+  stroke: any;
+  overlap: any;
+  scale: any;
 }

projects/nls-guilloche/src/lib/models/graph.model.ts

@@ -15,6 +15,7 @@
  */
 
 import { Point } from './point.model';
+import { Config } from './config.model';
 
 export interface Graph {
   id: string;
@@ -29,6 +30,10 @@ export interface Graph {
     direction?: Point;
     vector: number; // degree between 0 and 360
   };
+  spread: {
+    amount: number;
+    spacing: number
+  };
   stroke: number; // stroke width
   nodes?: Point[]; // orientation points
 }

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.config = Object.assign(
-    this.list = this.historyService.list();
+      {
+        ...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 *ngFor="let graph of graphs" [graph]="graph" [animation]="animation"></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> -->
 </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',