From 2d635148b86b418349c90bd534c835c2a81791bd Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Wed, 23 May 2018 21:55:52 +0200
Subject: [PATCH] feat(graohsComponent): added vector configuration

---
 src/app/app.component.html                | 137 ++++++++++------------
 src/app/app.component.scss                |   3 +-
 src/app/app.component.ts                  |  12 +-
 src/app/components/graphs.component.ts    |  80 ++++++++-----
 src/app/directives/guilloche.directive.ts |  58 +++++----
 src/app/forms/config.form.ts              |  22 ++--
 src/app/models/graph.model.ts             |   1 +
 src/environments/environment.prod.ts      |  10 +-
 src/environments/environment.ts           |  12 +-
 9 files changed, 186 insertions(+), 149 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index eb1d957..89169df 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -10,87 +10,68 @@
 
 <app-graphs [config]="config"></app-graphs>
 
-<ul *ngIf="false">
-  <li>
-    <label>
-      <div>Points</div>
-      <input type="number" name="points" [(ngModel)]="canvasParam.points" max="10" min="0" step="1">
-    </label>
-  </li>
-  <li>
-    <label>
-      <div>Margin X</div>
-      <input type="number" name="marginX" [(ngModel)]="canvasParam.margin.x" max="1" min="0" step="0.1">
-    </label>
-  </li>
-  <li>
-    <label>
-      <div>Margin Y</div>
-      <input type="number" name="marginY" [(ngModel)]="canvasParam.margin.y" max="1" min="0" step="0.1">
-    </label>
-  </li>
-  <li>
-    <label>
-      <div>Stroke Width</div>
-      <input type="number" name="strokeWidth" [(ngModel)]="canvasParam.stroke.width" max="10" min="0" step="0.1">
-    </label>
-  </li>
-  <li>
-    <label>
-      <div>Spread lines</div>
-      <input type="number" name="spread" [(ngModel)]="canvasParam.spread" max="20" min="5" step="1">
-    </label>
-  </li>
-  <li>
-    <label>
-      <div>Show Grid?</div>
-      <input type="checkbox" name="showGrid" [(ngModel)]="canvasParam.showGrid">
-    </label>
-  </li>
-</ul>
-
-<aside>
+<aside class="col-sm-4 col-lg-3 col-xl-3">
   <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 class="pb-5">
+      <h5>Seitenverhältnis</h5>
+      <hr>
+      <div class="form-group">
+        <label class="form-control-label">
+          Breite
+        </label>
+        <input type="number" class="form-control" formControlName="width">
+      </div>
+      <div class="form-group">
+        <label class="form-control-label">
+          Höhe
+        </label>
+        <input type="number" class="form-control" formControlName="height">
+      </div>
+      <div class="form-group">
+        <label class="form-control-label">
+          Linienstärke
+        </label>
+        <input type="number" class="form-control" formControlName="stroke" min="0.1" max="10" step="0.1">
+      </div>
     </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">
-        Duktus <small>(Strichstärke)</small>
-      </label>
-      <input type="number" class="form-control" formControlName="stroke" min="0.1" max="10" step="0.1">
-    </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 class="pb-5">
+      <h5>Vektoren</h5>
+      <hr>
+      <ng-container formGroupName="vectors">
+        <div class="form-group">
+          <label class="form-control-label">
+            Anfangsvektor
+          </label>
+          <select class="form-control" formControlName="start">
+            <option value="1">Oben</option>
+            <option value="0.5">Rechts</option>
+            <option value="0">Unten</option>
+            <option value="1.5">Links</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-control-label">
+            Endvektor
+          </label>
+          <select class="form-control" formControlName="end">
+            <option value="1">Oben</option>
+            <option value="0.5">Rechts</option>
+            <option value="0">Unten</option>
+            <option value="1.5">Links</option>
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-control-label">
+            Vektordehnung
+          </label>
+          <input type="number" class="form-control" formControlName="range" min="0" max="1" step="0.1">
+        </div>
+      </ng-container>
     </div>
+    <h5 class="mt-2">Ausdehnung</h5>
+    <!-- <hr>
+    <small>Anzahl der Schwingungen mittels Knotenpunkten bestimmen und die Skalierung auf der Leinwand einstellen.</small> -->
+    <hr>
     <div class="form-group">
       <label class="form-control-label">
         Skalierung
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index ba05ea0..a2c65aa 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -5,6 +5,7 @@
   top: 0;
   left: 0;
   overflow: hidden;
+  opacity: 0.2;
 }
 
 ul {
@@ -44,5 +45,5 @@ aside {
   justify-content: center;
   margin: 0;
   padding: 3rem;
-  background: rgba(251, 252, 253, 0.8);
+  background: rgba(251, 252, 253, 0.9);
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index e2df7cf..4c27f7d 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -18,9 +18,9 @@ export class AppComponent implements OnInit {
   public configForm: FormGroup;
 
   @HostListener('mousewheel', ['$event'])
-  private onWheelUp(event) {
+  private onMousewheel(event) {
     const delta = Math.sign(event.deltaY);
-    const step = 0.01;
+    const step = env.controls.wheelStep;
 
     this.config = {...this.configForm.value};
 
@@ -36,13 +36,11 @@ export class AppComponent implements OnInit {
       this.config.scale -= step;
     }
 
-    this.config.scale = Math.round(this.config.scale * 100) / 100;
-
+    this.config.scale = Math.round(this.config.scale / step) * step;
     this.configForm.reset({...this.config});
     this.updateGraphs();
   }
 
-
   constructor() {
     this.canvasParam = {
       colors: {
@@ -67,6 +65,10 @@ export class AppComponent implements OnInit {
 
   ngOnInit() {
     this.configForm.reset({...this.config});
+
+    // this.configForm.valueChanges.subscribe(val => {
+    //   console.log('form changes(appComponent)', this.config);
+    // });
   }
 
   public updateGraphs() {
diff --git a/src/app/components/graphs.component.ts b/src/app/components/graphs.component.ts
index e593128..834bfa8 100644
--- a/src/app/components/graphs.component.ts
+++ b/src/app/components/graphs.component.ts
@@ -20,6 +20,7 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
 
   public graphs: Graph[];
   public canvas: any | null;
+  public matrix: any | null;
 
   @Input() config: any;
 
@@ -51,50 +52,43 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
 
   private init() {
     this.updateCanvas();
+    this.updateMatrix();
     this.updateGraphs();
   }
 
   private updateGraphs(): void {
-    const matrix = this.matrix;
-
-    this.graphs = [...[this.adjustGraph('start'), this.adjustGraph('end')]];
+    this.graphs = [this.adjustGraph('start'), this.adjustGraph('end')];
+    console.log('graphs component (updateGraphs):', this.graphs);
   }
 
   private adjustGraph(from: string) {
-    const matrix = this.matrix;
     const to = this.flipflop(from);
+    const startPoint = { x: this.matrix[from].x, y: this.matrix[from].y };
+    const endPoint = { x: this.matrix[to].x, y: this.matrix[to].y };
+
+    console.error(from, '->', to);
 
     return {
+      id: `${from}-to-${to}`,
       start: {
-        coords: { x: matrix[from].x, y: matrix[from].y },
-        direction: this.config.directionStart,
-        color: env.guilloche.colors[from]
+        coords: startPoint,
+        direction: this.config.vectors[from],
+        color: env.guilloche.colors.start
       }, end: {
-        coords: { x: matrix[to].x, y: matrix[to].y },
-        direction: this.config.directionEnd,
-        color: env.guilloche.colors[to]
+        coords: endPoint,
+        direction: this.config.vectors[to],
+        color: env.guilloche.colors.end
       },
       stroke: this.config.stroke,
-      nodes: []
+      nodes: [
+        this.vectorPoint(startPoint, this.config.vectors[from]),
+        this.vectorPoint(endPoint, this.config.vectors[to])
+      ]
     };
-
-    // {
-    //   start: {
-    //     coords: { x: matrix.end.x, y: matrix.end.y },
-    //     direction: this.config.directionEnd,
-    //     color: env.guilloche.colors.start
-    //   }, end: {
-    //     coords: { x: matrix.start.x, y: matrix.start.y },
-    //     direction: this.config.directionStart,
-    //     color: env.guilloche.colors.end
-    //   },
-    //   stroke: this.config.stroke,
-    //   nodes: []
-    // }
   }
 
-  private flipflop(direction: string) {
-    return (direction === 'start') ? 'end' : 'start';
+  private flipflop(x: string) {
+    return (x === 'start') ? 'end' : 'start';
   }
 
   private updateCanvas(): void {
@@ -109,15 +103,17 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
     };
   }
 
-  private get matrix() {
+  private updateMatrix() {
     const totalArea = Math.abs(this.canvas.clientWidth * this.canvas.clientHeight);
     const totalCenter = this.centerPoint(this.canvas.clientWidth, this.canvas.clientHeight);
 
     const baseArea = Math.abs(this.config.width * this.config.height);
     const baseScale = Math.pow(totalArea / baseArea * this.config.scale, 0.5);
-    const baseCenter = this.centerPoint( baseScale * this.config.width, baseScale * this.config.height);
+    const baseWidthScaled = baseScale * this.config.width;
+    const baseHeightScaled = baseScale * this.config.height;
+    const baseCenter = this.centerPoint(baseWidthScaled, baseHeightScaled);
 
-    return {
+    this.matrix = {
       start: {
         x: totalCenter.x - baseCenter.x,
         y: totalCenter.y + baseCenter.y
@@ -125,7 +121,29 @@ export class GraphsComponent implements AfterViewInit, OnChanges {
       end: {
         x: totalCenter.x + baseCenter.x,
         y: totalCenter.y - baseCenter.y
-      }
+      },
+      width: baseWidthScaled,
+      height: baseHeightScaled
     };
   }
+
+  private vectorPoint(point: Point, direction: number) {
+    const range = this.Δ(this.matrix.start, this.matrix.end) * this.config.vectors.range;
+
+    console.log('graphs component(vectorPoint)', point, direction);
+
+    return {
+      x: range * Math.sin(Math.PI * direction) + point.x,
+      y: range * Math.cos(Math.PI * direction) + point.y
+    };
+  }
+
+  /**
+   * Calculate distance between to points with coordinates.
+   * @param a
+   * @param b
+   */
+  private Δ(a: Point, b: Point) {
+    return Math.pow(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2), 0.5);
+  }
 }
diff --git a/src/app/directives/guilloche.directive.ts b/src/app/directives/guilloche.directive.ts
index 31660bf..2fa69b4 100644
--- a/src/app/directives/guilloche.directive.ts
+++ b/src/app/directives/guilloche.directive.ts
@@ -5,6 +5,7 @@ import * as Shape from 'd3-shape';
 import * as Random from 'd3-random';
 import * as Drag from 'd3-drag';
 
+import { environment as env } from './../../environments/environment';
 import { Config } from './../models/config.model';
 import { Point } from './../models/point.model';
 import { Param } from './../models/param.model';
@@ -27,16 +28,16 @@ export class GuillocheDirective implements OnChanges {
   ) {
     this.group = Selection.select(el.nativeElement);
     this.canvas = Selection.select(this.canvasService.get);
-    this.gradientId = 'linear';
   }
 
   ngOnChanges(changes: SimpleChanges) {
     console.log('guilloche directive (changes)', changes.graph.currentValue);
+    this.defineGradient();
     this.drawGraph();
   }
 
-  private drawGraph(): void {
-    console.log('guilloche directive(drawGraph)', this.graph);
+  private defineGradient(): void {
+    this.gradientId = `gradient-${this.graph.id}`;
 
     const defs = this.group.append('defs');
     const grad = defs.append('linearGradient')
@@ -47,33 +48,48 @@ export class GuillocheDirective implements OnChanges {
     grad.append('stop')
       .attr('stop-color', this.graph.end.color)
       .attr('offset', '100%');
+  }
+
+  private drawGraph(): void {
+    const points = [this.graph.start.coords, ...this.graph.nodes, this.graph.end.coords];
 
     this.group.append('path')
       .attr('d', Shape.line()
         .x(p => p.x)
         .y(p => p.y)
-        .curve(Shape.curveBasis)([
-          this.graph.start.coords,
-          this.graph.end.coords
-        ]))
+        .curve(Shape.curveBasis)(points))
       .attr('stroke', `url(#${this.gradientId})`)
       .attr('stroke-width', this.graph.stroke)
       .attr('fill', 'none');
 
-    this.group.append('circle')
-      .attr('cx', this.graph.start.coords.x)
-      .attr('cy', this.graph.start.coords.y)
-      .attr('r', 20)
-      .attr('stroke-width', 1)
-      .attr('fill-opacity', 0)
-      .attr('stroke', this.graph.start.color);
+    if (!env.production) {
+      this.group.append('circle')
+        .attr('cx', this.graph.start.coords.x)
+        .attr('cy', this.graph.start.coords.y)
+        .attr('r', 20)
+        .attr('stroke-width', 1)
+        .attr('fill-opacity', 0)
+        .attr('stroke', this.graph.start.color);
 
-    this.group.append('circle')
-      .attr('cx', this.graph.end.coords.x)
-      .attr('cy', this.graph.end.coords.y)
-      .attr('r', 10)
-      .attr('stroke-width', 1)
-      .attr('fill-opacity', 0)
-      .attr('stroke', this.graph.end.color);
+      this.group.append('circle')
+        .attr('cx', this.graph.end.coords.x)
+        .attr('cy', this.graph.end.coords.y)
+        .attr('r', 10)
+        .attr('stroke-width', 1)
+        .attr('fill-opacity', 0)
+        .attr('stroke', this.graph.end.color);
+
+      this.graph.nodes.forEach(point => {
+        this.group.append('circle')
+          .attr('cx', point.x)
+          .attr('cy', point.y)
+          .attr('r', 5)
+          .attr('stroke-width', 1)
+          .attr('fill-opacity', 0)
+          .attr('stroke', 'darkgray');
+      });
+    }
+
+    console.log('guilloche directive(drawGraph)', this.graph);
   }
 }
diff --git a/src/app/forms/config.form.ts b/src/app/forms/config.form.ts
index e7192ff..438a93d 100644
--- a/src/app/forms/config.form.ts
+++ b/src/app/forms/config.form.ts
@@ -5,14 +5,20 @@ 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)
-  ])),
+  vectors: fb.group({
+    start: fb.control('', Validators.compose([
+      Validators.min(0),
+      Validators.max(2)
+    ])),
+    end: fb.control('', Validators.compose([
+      Validators.min(0),
+      Validators.max(2)
+    ])),
+    range: fb.control('', Validators.compose([
+      Validators.min(0),
+      Validators.max(1)
+    ]))
+  }),
   nodes: fb.control('', Validators.compose([
     Validators.min(1),
     Validators.max(10)
diff --git a/src/app/models/graph.model.ts b/src/app/models/graph.model.ts
index 6750d8e..4fc8d5f 100644
--- a/src/app/models/graph.model.ts
+++ b/src/app/models/graph.model.ts
@@ -1,6 +1,7 @@
 import { Point } from './point.model';
 
 export interface Graph {
+  id: string;
   start: {
     coords: Point;
     direction: number; // degree between 0 and 360
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index e09da73..565552a 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -6,11 +6,17 @@ export const environment = {
       end: '#5eb1bd'
     }
   },
+  controls: {
+    wheelStep: 0.01
+  },
   formDefaults: {
     width: 9,
     height: 16,
-    directionStart: 0,
-    directionEnd: 180,
+    vectors: {
+      start: 1,
+      end: 0,
+      range: 0.3
+    },
     nodes: 3,
     stroke: 1,
     scale: 0.3
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 36dbb81..4613e31 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -10,14 +10,20 @@ export const environment = {
       end: '#0067cc'
     }
   },
+  controls: {
+    wheelStep: 0.01
+  },
   formDefaults: {
     width: 9,
     height: 16,
-    directionStart: 0,
-    directionEnd: 180,
+    vectors: {
+      start: 1,
+      end: 0,
+      range: 0.3
+    },
     nodes: 3,
     stroke: 1,
-    scale: 0.3
+    scale: 0.1
   }
 };