feat(guillocheDirective): added spread lines

src/app/app.component.html

@@ -1,13 +1,3 @@
-<div appCanvas class="canvas"
-[paramStartingColor]="canvasParam.colors.start"
-[paramEndingColor]="canvasParam.colors.end"
-[paramPoints]="canvasParam.points"
-[paramMarginX]="canvasParam.margin.x"
-[paramMarginY]="canvasParam.margin.y"
-[paramSpread]="canvasParam.spread"
-[paramStrokeWidth]="canvasParam.stroke?.width"
-[paramShowGrid]="canvasParam.showGrid"></div>
-
 <app-graphs [config]="config"></app-graphs>
 
 <aside class="col-sm-4 col-lg-3 col-xl-3">
@@ -91,6 +81,12 @@
       </label>
       <input type="number" class="form-control" formControlName="stroke" min="0.1" max="10" step="0.1">
     </div>
+    <div class="form-group mb-4">
+      <label class="form-control-label">
+        Aufspleißen
+      </label>
+      <input type="number" class="form-control" formControlName="spread" min="0" max="40">
+    </div>
     <div class="dropdown-divider mb-4"></div>
     <button type="submit" class="btn btn-lg btn-primary btn-block" [disabled]="configForm.invalid">Aktualisieren</button>
     <div class="dropdown-divider"></div>

src/app/components/graphs.component.html

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

src/app/directives/guilloche.directive.ts

@@ -21,6 +21,8 @@ export class GuillocheDirective implements OnChanges {
   private gradientId: any;
 
   @Input() graph: Graph;
+  @Input() matrix: any;
+  @Input() config: any;
 
   constructor(
     private canvasService: CanvasService,
@@ -31,9 +33,13 @@ export class GuillocheDirective implements OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    console.log('guilloche directive (changes)', changes.graph.currentValue);
+    const points = [this.graph.start.coords, ...this.graph.nodes, this.graph.end.coords];
+
     this.defineGradient();
-    this.drawGraph();
+    // this.drawGraph(points);
+    this.spreadLines(points);
+
+    console.log('guilloche directive (changes)', changes.graph.currentValue);
   }
 
   private defineGradient(): void {
@@ -50,8 +56,7 @@ export class GuillocheDirective implements OnChanges {
       .attr('offset', '100%');
   }
 
-  private drawGraph(): void {
+  private drawGraph(points: Point[]): void {
-    const points = [this.graph.start.coords, ...this.graph.nodes, this.graph.end.coords];
 
     this.group.append('path')
       .attr('d', Shape.line()
@@ -92,4 +97,62 @@ export class GuillocheDirective implements OnChanges {
 
     console.log('guilloche directive(drawGraph)', this.graph);
   }
+
+  private spreadLines(points: Point[]) {
+    const indexMiddle = Math.floor(points.length * 0.5);
+    const pointMiddle = points[indexMiddle];
+    const closestCenter = this.getFarestCenter(pointMiddle);
+    const radius = this.Δ(pointMiddle, closestCenter);
+    const spreadPoints = [];
+    const group = this.canvas.append('g').attr('id', 'spread-points');
+    const pies = 80;
+
+    for (let i = 0; i < pies; i++) {
+      spreadPoints.push({
+        x: radius * Math.cos(2 * i * Math.PI / pies) + closestCenter.x,
+        y: radius * Math.sin(2 * i * Math.PI / pies) + closestCenter.y,
+      });
+    }
+
+    spreadPoints.sort((a, b) => {
+      return this.Δ(a, pointMiddle) - this.Δ(b, pointMiddle);
+      // Good possibility to align orientation points outsite
+      // return this.Δ(b, pointMiddle) - this.Δ(a, pointMiddle);
+    });
+
+    spreadPoints.some((point, index) => {
+      points[indexMiddle] = point;
+
+      this.drawGraph(points);
+
+      return index === this.config.spread - 1;
+    });
+
+    group.lower();
+  }
+
+  private getClosestCenter(point: Point) {
+    if (this.Δ(point, this.matrix.start) < this.Δ(point, this.matrix.end)) {
+      return this.matrix.start;
+    } else {
+      return this.matrix.end;
+    }
+  }
+
+  private getFarestCenter(point: Point) {
+    if (this.Δ(point, this.matrix.start) > this.Δ(point, this.matrix.end)) {
+      return this.matrix.start;
+    } else {
+      return this.matrix.end;
+    }
+  }
+
+  /**
+   * 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);
+  }
 }

src/app/forms/config.form.ts

@@ -32,4 +32,5 @@ export let ConfigForm: FormGroup = fb.group({
     Validators.max(10)
   ])),
   overlap: fb.control('', Validators.min(0.1)),
+  spread: fb.control('', Validators.min(0)),
 });

src/environments/environment.prod.ts

@@ -20,6 +20,7 @@ export const environment = {
     nodes: 2,
     stroke: 1,
     scale: 0.3,
-    overlap: 3
+    overlap: 3,
+    spread: 4
   }
 };

src/environments/environment.ts

@@ -3,7 +3,7 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
+  production: true,
   guilloche: {
     colors: {
       start: '#cc0045',
@@ -24,7 +24,8 @@ export const environment = {
     nodes: 3,
     stroke: 1,
     scale: 0.1,
-    overlap: 1.4
+    overlap: 1.4,
+    spread: 4
   }
 };