logic splitted into directives and components

src/app/app.component.html

@@ -1,5 +1,4 @@
 <div appCanvas class="canvas"
-(emitConfig)="updateCanvasConfig($event)"
 [paramStartingColor]="canvasParam.colors.start"
 [paramEndingColor]="canvasParam.colors.end"
 [paramPoints]="canvasParam.points"
@@ -9,10 +8,9 @@
 [paramStrokeWidth]="canvasParam.stroke?.width"
 [paramShowGrid]="canvasParam.showGrid"></div>
 
-<ul>
-  <li><b>Static Configuration</b></li>
-  <li *ngIf="canvasConfig"><pre>{{canvasConfig | json}}</pre></li>
+<app-graphs [config]="config"></app-graphs>
 
+<ul>
   <li>
     <label>
       <div>Points</div>

src/app/app.component.ts

@@ -9,8 +9,9 @@ import { Config } from './models/config.model';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  public canvasConfig: Config;
+
   public canvasParam: Param;
+  public config: any;
 
   constructor() {
     this.canvasParam = {
@@ -29,9 +30,18 @@ export class AppComponent {
       spread: 20,
       showGrid: false
     };
-  }
 
-  public updateCanvasConfig(config): void {
-    this.canvasConfig = config;
+    this.config = {
+      start: {
+        direction: 0
+      },
+      end: {
+        direction: 270,
+        position: {
+          x: 16,
+          y: -9
+        }
+      }
+    };
   }
 }

src/app/app.module.ts

@@ -3,12 +3,18 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
-import { CanvasDirective } from './canvas/canvas.directive';
+import { CanvasDirective } from './directives/canvas.directive';
+import { GraphsComponent } from './components/graphs.component';
+// import { GuillocheComponent } from './components/guilloche.component';
+import { GuillocheDirective } from './directives/guilloche.directive';
 
 @NgModule({
   declarations: [
     AppComponent,
-    CanvasDirective
+    GraphsComponent,
+    // GuillocheComponent,
+    CanvasDirective,
+    GuillocheDirective
   ],
   imports: [
     BrowserModule,

src/app/components/graphs.component.html

@@ -0,0 +1,3 @@
+<svg #svg width="100%" height="100%">
+  <g guilloche *ngFor="let graph of graphs" [graph]="graph"></g>
+</svg>

src/app/components/graphs.component.scss

@@ -0,0 +1,8 @@
+:host {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}

src/app/components/graphs.component.ts

@@ -0,0 +1,48 @@
+import { ViewChildren, QueryList, Component, AfterViewInit, ViewChild, Input, OnInit } from '@angular/core';
+import * as Selection from 'd3-selection';
+import * as Shape from 'd3-shape';
+import * as Random from 'd3-random';
+import * as Drag from 'd3-drag';
+
+// import { GuillocheComponent } from './../components/guilloche.component';
+import { GuillocheDirective } from './../directives/guilloche.directive';
+import { Graph } from '../models/graph.model';
+
+@Component({
+  selector: 'app-graphs',
+  templateUrl: './graphs.component.html',
+  styleUrls: ['./graphs.component.scss']
+})
+export class GraphsComponent implements AfterViewInit, OnInit {
+
+  // public width: number;
+  // public height: number;
+  public graphs: Graph[];
+  public svg: any;
+
+  @Input() config: any;
+
+  @ViewChild('svg') svgElementRef;
+  @ViewChild(GuillocheDirective) guillocheViewChild: GuillocheDirective;
+  @ViewChildren(GuillocheDirective) guillocheViewChildren: QueryList<GuillocheDirective>;
+
+  ngOnInit() {
+    // this.width = 0;
+    // this.height = 0;
+    this.graphs = [...[{
+      id: 'first',
+      start: {coords: { x: 0, y: 0 }, direction: this.config.start.direction },
+      end: { coords: { x: 0, y: -10 }, direction: this.config.end.direction}
+    }, {
+      id: 'second',
+      start: {coords: { x: 0, y: 0 }, direction: this.config.end.direction },
+      end: { coords: { x: 0, y: -10 }, direction: this.config.start.direction}
+    }]];
+  }
+
+  ngAfterViewInit() {
+    this.svg = Selection.select(this.svgElementRef.nativeElement);
+
+    console.log('graph component', this.guillocheViewChildren.toArray());
+  }
+}

src/app/directives/canvas.directive.ts

@@ -7,6 +7,7 @@ import * as Drag from 'd3-drag';
 import { Config } from './../models/config.model';
 import { Point } from './../models/point.model';
 import { Param } from './../models/param.model';
+import { GuillocheDirective } from './guilloche.directive';
 
 @Directive({
   selector: '[appCanvas]'
@@ -40,7 +41,6 @@ export class CanvasDirective implements OnChanges {
     private el: ElementRef
   ) {
     this.canvas = el.nativeElement;
-    this.emitConfig = new EventEmitter();
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -321,7 +321,5 @@ export class CanvasDirective implements OnChanges {
         color: this.param.colors.end
       }
     };
-    // Emit Canvas Config to parent Component.
-    this.emitConfig.next(this.config);
   }
 }

src/app/directives/guilloche.directive.ts

@@ -0,0 +1,25 @@
+import { Graph } from './../models/graph.model';
+import { ElementRef, HostListener, Output, EventEmitter, Input, Directive, OnInit } from '@angular/core';
+import * as Selection from 'd3-selection';
+import * as Shape from 'd3-shape';
+import * as Random from 'd3-random';
+import * as Drag from 'd3-drag';
+
+import { Config } from './../models/config.model';
+import { Point } from './../models/point.model';
+import { Param } from './../models/param.model';
+
+@Directive({
+  selector: '[guilloche]'
+})
+export class GuillocheDirective implements OnInit {
+
+  @Input() graph: Graph;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+    console.log('guilloche directive', this.graph);
+  }
+}

src/app/models/config.model.ts

@@ -1,9 +1,14 @@
-import { Point } from './point.model';
-
 export interface Config {
   width: number;
   height: number;
-  start: Point;
-  end: Point;
-  drag?: Point;
+  start: {
+    x: number;
+    y: number;
+    color: string;
+  };
+  end: {
+    x: number;
+    y: number;
+    color: string;
+  };
 }

src/app/models/graph.model.ts

@@ -0,0 +1,14 @@
+import { Point } from './point.model';
+
+export interface Graph {
+  id: string; // ID of SVG group
+  start: {
+    coords: Point;
+    direction: number; // degree between 0 and 360
+  };
+  end: {
+    coords: Point;
+    direction: number; // degree between 0 and 360
+  };
+  landmarks?: Point[]; // orientation points
+}

src/environments/environment.ts

@@ -3,7 +3,10 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  guilloche: {
+    colors: ['#cc0045', '#0067cc']
+  }
 };
 
 /*

src/styles.scss

@@ -9,3 +9,12 @@ html, body {
   background: #fbfcfd;
   font-family: monospace;
 }
+
+app-root {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}

src/tsconfig.app.json

@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "experimentalDecorators": true,
     "outDir": "../out-tsc/app",
     "module": "es2015",
     "types": []

src/tslint.json

@@ -3,9 +3,7 @@
     "rules": {
         "directive-selector": [
             true,
-            "attribute",
-            "app",
-            "camelCase"
+            "attribute"
         ],
         "component-selector": [
             true,