From b18c1966100853c8217889f8796f899b17d76a90 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Wed, 23 May 2018 09:14:52 +0200
Subject: [PATCH] logic splitted into directives and components

---
 src/app/app.component.html                    |  6 +--
 src/app/app.component.ts                      | 18 +++++--
 src/app/app.module.ts                         | 10 +++-
 src/app/components/graphs.component.html      |  3 ++
 src/app/components/graphs.component.scss      |  8 ++++
 src/app/components/graphs.component.ts        | 48 +++++++++++++++++++
 .../canvas.directive.ts                       |  4 +-
 src/app/directives/guilloche.directive.ts     | 25 ++++++++++
 src/app/models/config.model.ts                | 15 ++++--
 src/app/models/graph.model.ts                 | 14 ++++++
 src/environments/environment.ts               |  5 +-
 src/styles.scss                               |  9 ++++
 src/tsconfig.app.json                         |  1 +
 src/tslint.json                               |  4 +-
 14 files changed, 148 insertions(+), 22 deletions(-)
 create mode 100644 src/app/components/graphs.component.html
 create mode 100644 src/app/components/graphs.component.scss
 create mode 100644 src/app/components/graphs.component.ts
 rename src/app/{canvas => directives}/canvas.directive.ts (98%)
 create mode 100644 src/app/directives/guilloche.directive.ts
 create mode 100644 src/app/models/graph.model.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index aed8c49..2eab80b 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7731d4e..db82489 100644
--- a/src/app/app.component.ts
+++ b/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
+        }
+      }
+    };
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1dc99de..11cfc26 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/components/graphs.component.html b/src/app/components/graphs.component.html
new file mode 100644
index 0000000..52d4021
--- /dev/null
+++ b/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>
diff --git a/src/app/components/graphs.component.scss b/src/app/components/graphs.component.scss
new file mode 100644
index 0000000..75dea60
--- /dev/null
+++ b/src/app/components/graphs.component.scss
@@ -0,0 +1,8 @@
+:host {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
diff --git a/src/app/components/graphs.component.ts b/src/app/components/graphs.component.ts
new file mode 100644
index 0000000..1157bb6
--- /dev/null
+++ b/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());
+  }
+}
diff --git a/src/app/canvas/canvas.directive.ts b/src/app/directives/canvas.directive.ts
similarity index 98%
rename from src/app/canvas/canvas.directive.ts
rename to src/app/directives/canvas.directive.ts
index eb00084..74ba2f2 100644
--- a/src/app/canvas/canvas.directive.ts
+++ b/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);
   }
 }
diff --git a/src/app/directives/guilloche.directive.ts b/src/app/directives/guilloche.directive.ts
new file mode 100644
index 0000000..e3419be
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/src/app/models/config.model.ts b/src/app/models/config.model.ts
index 490dd9d..2067076 100644
--- a/src/app/models/config.model.ts
+++ b/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;
+  };
 }
diff --git a/src/app/models/graph.model.ts b/src/app/models/graph.model.ts
new file mode 100644
index 0000000..e8f75d8
--- /dev/null
+++ b/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
+}
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 012182e..0788eb3 100644
--- a/src/environments/environment.ts
+++ b/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']
+  }
 };
 
 /*
diff --git a/src/styles.scss b/src/styles.scss
index 7e6f120..7d03d96 100644
--- a/src/styles.scss
+++ b/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;
+}
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
index 722c370..76cbb96 100644
--- a/src/tsconfig.app.json
+++ b/src/tsconfig.app.json
@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "experimentalDecorators": true,
     "outDir": "../out-tsc/app",
     "module": "es2015",
     "types": []
diff --git a/src/tslint.json b/src/tslint.json
index 52e2c1a..fe0961a 100644
--- a/src/tslint.json
+++ b/src/tslint.json
@@ -3,9 +3,7 @@
     "rules": {
         "directive-selector": [
             true,
-            "attribute",
-            "app",
-            "camelCase"
+            "attribute"
         ],
         "component-selector": [
             true,