feat(appComponent): added more adjustable parameters

src/app/app.component.html

@@ -15,7 +15,7 @@
 
   <li>
     <label>
-      <div>Amount of points</div>
+      <div>Points</div>
       <input type="number" name="points" [(ngModel)]="canvasParam.points" max="10" min="0" step="1">
     </label>
   </li>
@@ -37,5 +37,17 @@
       <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>
 

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { Param } from './models/param.model';
 import { Config } from './models/config.model';
@@ -24,10 +24,10 @@ export class AppComponent {
         y: 0.4
       },
       stroke: {
-        width: 0.2
+        width: 2
       },
-      spread: 80,
+      spread: 20,
-      showGrid: true
+      showGrid: false
     };
   }
 

src/app/canvas/canvas.directive.ts

@@ -184,20 +184,23 @@ export class CanvasDirective implements OnChanges {
   private spreadLines(points: Point[]) {
     const indexMiddle = Math.floor(points.length * 0.5);
     const pointMiddle = points[indexMiddle];
-    const closestCenter = this.getClosestCenter(pointMiddle);
+    const closestCenter = this.getFarestCenter(pointMiddle);
     const radius = this.Δ(pointMiddle, closestCenter);
     const spreadPoints = [];
     const group = this.svg.append('g').attr('id', 'spread-points');
+    const pies = 80;
 
-    for (let i = 0; i < this.param.spread; i++) {
+    for (let i = 0; i < pies; i++) {
       spreadPoints.push({
-        x: radius * Math.cos(2 * i * Math.PI / this.param.spread) + closestCenter.x,
+        x: radius * Math.cos(2 * i * Math.PI / pies) + closestCenter.x,
-        y: radius * Math.sin(2 * i * Math.PI / this.param.spread) + closestCenter.y,
+        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) => {
@@ -213,7 +216,7 @@ export class CanvasDirective implements OnChanges {
 
       this.drawLine(points);
 
-      return index === 20;
+      return index === this.param.spread - 1;
     });
 
     group.lower();
@@ -227,6 +230,14 @@ export class CanvasDirective implements OnChanges {
     }
   }
 
+  private getFarestCenter(point: Point) {
+    if (this.Δ(point, this.config.start) > this.Δ(point, this.config.end)) {
+      return this.config.start;
+    } else {
+      return this.config.end;
+    }
+  }
+
   /**
    * Draw a curve with a given set of orientation points.
    * @param points Point
@@ -287,12 +298,8 @@ export class CanvasDirective implements OnChanges {
   }
 
   private resetGrid() {
-    const group = Selection.select('g#grid');
-
-    if (group.size() && this.param.showGrid) {
     Selection.selectAll('g#grid').remove();
   }
-  }
 
   /**
    * Update Config Parameters and emit to parent component.
@@ -314,7 +321,6 @@ export class CanvasDirective implements OnChanges {
         color: this.param.colors.end
       }
     };
-
     // Emit Canvas Config to parent Component.
     this.emitConfig.next(this.config);
   }

src/styles.scss

@@ -6,5 +6,6 @@ html, body {
   padding: 0;
   margin: 0;
 
+  background: #fbfcfd;
   font-family: monospace;
 }