added form and update functions

src/app/app.component.html

@@ -49,3 +49,43 @@
   </li>
 </ul>
 
+<aside>
+  <form [formGroup]="configForm" (ngSubmit)="updateGraphs()" novalidate>
+    <div class="form-group">
+      <label class="form-control-label">
+        Breite <small>(bspw. 42, -12, 3.2)</small>
+      </label>
+      <input type="number" class="form-control" formControlName="width">
+    </div>
+    <div class="form-group">
+      <label class="form-control-label">
+        Höhe <small>(bspw. 42, -12, 3.2)</small>
+      </label>
+      <input type="number" class="form-control" formControlName="height">
+    </div>
+    <div class="form-group">
+      <label class="form-control-label">
+        Anfangsvektor
+      </label>
+      <select class="form-control" formControlName="directionStart">
+        <option value="0">Oben</option>
+        <option value="90">Rechts</option>
+        <option value="180">Unten</option>
+        <option value="270">Links</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-control-label">
+        Endvektor
+      </label>
+      <select class="form-control" formControlName="directionEnd">
+        <option value="0">Oben</option>
+        <option value="90">Rechts</option>
+        <option value="180">Unten</option>
+        <option value="270">Links</option>
+      </select>
+    </div>
+    <button type="submit" class="btn btn-primary" [disabled]="configForm.invalid">Aktualisieren</button>
+  </form>
+</aside>
+

src/app/app.component.scss

@@ -32,3 +32,16 @@ ul {
     align-items: center;
   }
 }
+
+aside {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  justify-content: center;
+  margin: 0;
+  padding: 3rem;
+}

src/app/app.component.ts

@@ -1,17 +1,20 @@
+import { ConfigForm } from './forms/config.form';
 import { Component, OnInit } from '@angular/core';
 
 import { Param } from './models/param.model';
 import { Config } from './models/config.model';
+import { FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
 
   public canvasParam: Param;
-  public config: any;
+  public config: any | null;
+  public configForm: FormGroup;
 
   constructor() {
     this.canvasParam = {
@@ -32,16 +35,24 @@ export class AppComponent {
     };
 
     this.config = {
-      start: {
+      width: 10,
-        direction: 0
+      height: -20,
-      },
+      directionStart: 180,
-      end: {
+      directionEnd: 270
-        direction: 270,
-        position: {
-          x: 16,
-          y: -9
-        }
-      }
     };
   }
+
+  ngOnInit() {
+    this.configForm = ConfigForm;
+    this.configForm.reset({...{
+      width: 10,
+      height: -20,
+      directionStart: 180,
+      directionEnd: 270
+    }});
+  }
+
+  public updateGraphs() {
+    this.config = {...this.configForm.value};
+  }
 }

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
 import { CanvasDirective } from './directives/canvas.directive';
@@ -18,6 +18,7 @@ import { GuillocheDirective } from './directives/guilloche.directive';
   ],
   imports: [
     BrowserModule,
+    ReactiveFormsModule,
     FormsModule,
   ],
   providers: [],

src/app/components/graphs.component.ts

@@ -1,10 +1,9 @@
-import { ViewChildren, QueryList, Component, AfterViewInit, ViewChild, Input, OnInit } from '@angular/core';
+import { ViewChildren, QueryList, Component, AfterViewInit, ViewChild, Input, OnInit, 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 { GuillocheComponent } from './../components/guilloche.component';
 import { GuillocheDirective } from './../directives/guilloche.directive';
 import { Graph } from '../models/graph.model';
 
@@ -13,10 +12,8 @@ import { Graph } from '../models/graph.model';
   templateUrl: './graphs.component.html',
   styleUrls: ['./graphs.component.scss']
 })
-export class GraphsComponent implements AfterViewInit, OnInit {
+export class GraphsComponent implements AfterViewInit, OnInit, OnChanges {
 
-  // public width: number;
-  // public height: number;
   public graphs: Graph[];
   public svg: any;
 
@@ -27,22 +24,30 @@ export class GraphsComponent implements AfterViewInit, OnInit {
   @ViewChildren(GuillocheDirective) guillocheViewChildren: QueryList<GuillocheDirective>;
 
   ngOnInit() {
-    // this.width = 0;
+    this.updateGraphs();
-    // this.height = 0;
+  }
-    this.graphs = [...[{
+
-      id: 'first',
+  ngOnChanges(changes: SimpleChanges) {
-      start: {coords: { x: 0, y: 0 }, direction: this.config.start.direction },
+    console.log('graph component (changes)', changes.config);
-      end: { coords: { x: 0, y: -10 }, direction: this.config.end.direction}
+
-    }, {
+    this.updateGraphs();
-      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());
+    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 },
+      end: { coords: { x: 0, y: -10 }, direction: this.config.directionEnd}
+    }, {
+      id: 'second',
+      start: {coords: { x: 0, y: 0 }, direction: this.config.directionEnd },
+      end: { coords: { x: 0, y: -10 }, direction: this.config.directionStart}
+    }]];
   }
 }

src/app/directives/guilloche.directive.ts

@@ -1,5 +1,5 @@
 import { Graph } from './../models/graph.model';
-import { ElementRef, HostListener, Output, EventEmitter, Input, Directive, OnInit } from '@angular/core';
+import { ElementRef, HostListener, Output, EventEmitter, Input, Directive, OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import * as Selection from 'd3-selection';
 import * as Shape from 'd3-shape';
 import * as Random from 'd3-random';
@@ -12,14 +12,14 @@ import { Param } from './../models/param.model';
 @Directive({
   selector: '[guilloche]'
 })
-export class GuillocheDirective implements OnInit {
+export class GuillocheDirective implements OnChanges {
 
   @Input() graph: Graph;
 
   constructor() {
   }
 
-  ngOnInit() {
+  ngOnChanges(changes: SimpleChanges) {
-    console.log('guilloche directive', this.graph);
+    console.log('guilloche directive (changes)', changes.graph);
   }
 }

src/app/forms/config.form.ts

@@ -0,0 +1,17 @@
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+const fb = new FormBuilder();
+
+export let ConfigForm: FormGroup = fb.group({
+  width: fb.control('', Validators.required),
+  height: fb.control('', Validators.required),
+  directionStart: fb.control('', Validators.compose([
+    Validators.min(0),
+    Validators.max(360)
+  ])),
+  directionEnd: fb.control('', Validators.compose([
+    Validators.min(0),
+    Validators.max(360)
+  ])),
+  nodes: fb.control('', Validators.min(1))
+});

src/index.html

@@ -1,14 +1,14 @@
 <!doctype html>
-<html lang="en">
+<html lang="de-DE">
-<head>
+  <head>
     <meta charset="utf-8">
     <title>NlsNg6D3jsGuilloche</title>
     <base href="/">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
-</head>
+  </head>
-<body>
+  <body>
     <app-root></app-root>
-</body>
+  </body>
 </html>