added service to provide canvas all over

src/app/app.component.html

@@ -85,6 +85,12 @@
         <option value="270">Links</option>
       </select>
     </div>
+    <div class="form-group">
+      <label class="form-control-label">
+        Knotenpunkte
+      </label>
+      <input type="number" class="form-control" formControlName="nodes" min="1" max="10">
+    </div>
     <button type="submit" class="btn btn-primary" [disabled]="configForm.invalid">Aktualisieren</button>
   </form>
 </aside>

src/app/app.component.ts

@@ -38,7 +38,8 @@ export class AppComponent implements OnInit {
       width: 10,
       height: -20,
       directionStart: 180,
-      directionEnd: 270
+      directionEnd: 270,
+      nodes: 1
     };
   }
 
@@ -48,7 +49,8 @@ export class AppComponent implements OnInit {
       width: 10,
       height: -20,
       directionStart: 180,
-      directionEnd: 270
+      directionEnd: 270,
+      nodes: 1
     }});
   }
 

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { CanvasDirective } from './directives/canvas.directive';
 import { GraphsComponent } from './components/graphs.component';
 // import { GuillocheComponent } from './components/guilloche.component';
 import { GuillocheDirective } from './directives/guilloche.directive';
+import { CanvasService } from './services/canvas.service';
 
 @NgModule({
   declarations: [
@@ -21,7 +22,9 @@ import { GuillocheDirective } from './directives/guilloche.directive';
     ReactiveFormsModule,
     FormsModule,
   ],
-  providers: [],
+  providers: [
+    CanvasService
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/graphs.component.ts

@@ -1,21 +1,23 @@
-import { ViewChildren, QueryList, Component, AfterViewInit, ViewChild, Input, OnInit, SimpleChanges, OnChanges } from '@angular/core';
+import { ViewChildren, QueryList, Component, AfterViewInit, ViewChild, Input, SimpleChanges, OnChanges } 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 { GuillocheDirective } from './../directives/guilloche.directive';
+import { CanvasService } from './../services/canvas.service';
 import { Graph } from '../models/graph.model';
+import { Config } from './../models/config.model';
 
 @Component({
   selector: 'app-graphs',
   templateUrl: './graphs.component.html',
   styleUrls: ['./graphs.component.scss']
 })
-export class GraphsComponent implements AfterViewInit, OnInit, OnChanges {
+export class GraphsComponent implements AfterViewInit, OnChanges {
 
   public graphs: Graph[];
-  public svg: any;
+  public canvas: any | null;
 
   @Input() config: any;
 
@@ -23,26 +25,25 @@ export class GraphsComponent implements AfterViewInit, OnInit, OnChanges {
   @ViewChild(GuillocheDirective) guillocheViewChild: GuillocheDirective;
   @ViewChildren(GuillocheDirective) guillocheViewChildren: QueryList<GuillocheDirective>;
 
-  ngOnInit() {
+  constructor(
-    this.updateGraphs();
+    private canvasService: CanvasService
+  ) {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    console.log('graph component (changes)', changes.config);
+    console.log('graph component (changes:config)', changes.config.currentValue);
-
+    this.updateCanvas();
     this.updateGraphs();
   }
 
   ngAfterViewInit() {
-    this.svg = Selection.select(this.svgElementRef.nativeElement);
+    console.log('graph component (afterView:children)', this.guillocheViewChildren.toArray());
-
-    console.log('graph component (after view)', this.guillocheViewChildren.toArray());
   }
 
   private updateGraphs(): void {
     this.graphs = [...[{
       id: 'first',
-      start: {coords: { x: 0, y: 0 }, direction: this.config.directionStart },
+      start: {coords: { x: 0, y: 0 }, direction: this.config.directionStart},
       end: { coords: { x: 0, y: -10 }, direction: this.config.directionEnd}
     }, {
       id: 'second',
@@ -50,4 +51,8 @@ export class GraphsComponent implements AfterViewInit, OnInit, OnChanges {
       end: { coords: { x: 0, y: -10 }, direction: this.config.directionStart}
     }]];
   }
+
+  private updateCanvas(): void {
+    this.canvasService.set(this.svgElementRef.nativeElement);
+  }
 }

src/app/directives/guilloche.directive.ts

@@ -8,18 +8,33 @@ 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 { CanvasService } from './../services/canvas.service';
 
 @Directive({
   selector: '[guilloche]'
 })
 export class GuillocheDirective implements OnChanges {
 
+  private canvas: any;
+
   @Input() graph: Graph;
 
-  constructor() {
+  constructor(
+    private canvasService: CanvasService
+  ) {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    console.log('guilloche directive (changes)', changes.graph);
+    console.log('guilloche directive (changes)', changes.graph.currentValue);
+    this.selectCanvas();
+    this.drawGraph();
+  }
+
+  private drawGraph(): void {
+    console.log('guilloche directive(drawGraph)', this.graph, this.canvas);
+  }
+
+  private selectCanvas(): void {
+    this.canvas = Selection.select(this.canvasService.get);
   }
 }

src/app/forms/config.form.ts

@@ -13,5 +13,8 @@ export let ConfigForm: FormGroup = fb.group({
     Validators.min(0),
     Validators.max(360)
   ])),
-  nodes: fb.control('', Validators.min(1))
+  nodes: fb.control('', Validators.compose([
+    Validators.min(1),
+    Validators.max(10)
+  ]))
 });

src/app/services/canvas.service.ts

@@ -0,0 +1,19 @@
+import { Inject, Injectable, Optional, ViewChild } from '@angular/core';
+import * as Selection from 'd3-selection';
+
+@Injectable()
+export class CanvasService {
+
+  public canvas: any;
+
+  constructor() {
+  }
+
+  public get get() {
+    return this.canvas;
+  }
+
+  public set(el) {
+    this.canvas = el;
+  }
+}