prepared dragging, but will not be neccessary

src/app/app.component.html

@@ -1,7 +1,9 @@
 <div class="canvas" appCanvas (emitConfig)="updateCanvasConfig($event)" [param]="canvasParam"></div>
 
 <ul *ngIf="canvasConfig">
+  <li><b>Static Configuration</b></li>
   <li><pre>{{canvasConfig | json}}</pre></li>
+  <li><b>Changeable Parameters</b></li>
   <li><pre>{{canvasParam | json}}</pre></li>
 </ul>
 

src/app/app.component.scss

@@ -18,10 +18,16 @@ ul {
   justify-content: center;
   margin: 0;
   padding: 3rem;
-  background: rgba(0,0,0,0.1);
-
+  background: rgba(0,0,0,0.3);
+  opacity: 0.3;
+  transition: all 360ms 120ms ease-out;
+  cursor: pointer;
   list-style-type: none;
 
+  &:hover {
+    opacity: 1;
+  }
+
   li {
     display: flex;
     align-items: center;

src/app/app.component.ts

@@ -17,7 +17,8 @@ export class AppComponent {
       colors: {
         start: '#cc0045',
         end: '#0067cc'
-      }
+      },
+      points: 5
     };
   }
 

src/app/canvas/canvas.directive.ts

@@ -43,6 +43,10 @@ export class CanvasDirective implements OnInit {
 
   private init() {
     this.updateConfig();
+    this.expandedPoints = this.expandPoints([
+      this.config.start,
+      this.config.end
+    ]);
     this.initSvg();
     this.render();
   }
@@ -54,13 +58,21 @@ export class CanvasDirective implements OnInit {
     this.svg
       .attr('width', this.config.width)
       .attr('height', this.config.height)
-      .call(Drag.drag().on('drag', () => {
-        this.drag = {
-          x: Selection.event.x,
-          y: Selection.event.y
-        };
-        this.updateConfig();
-      }));
+      .call(Drag.drag()
+        .on('drag', () => {
+          this.drag = {
+            x: Selection.event.x,
+            y: Selection.event.y
+          };
+          this.updateConfig();
+          this.render();
+        })
+        .on('end', () => {
+          delete this.drag;
+          this.updateConfig();
+          this.render();
+        })
+      );
 
     this.defs = this.svg.append('defs');
 
@@ -76,13 +88,9 @@ export class CanvasDirective implements OnInit {
 
   private render() {
     this.resetPoints();
-    this.expandedPoints = this.expandPoints([
-      this.config.start,
-      this.config.end
-    ]);
-    this.drawPoints(this.expandedPoints);
+    this.drawPoints(this.getExpandedPoints);
     this.resetLines();
-    this.drawLine(this.expandedPoints);
+    this.drawLine(this.getExpandedPoints);
   }
 
   private resetPoints(): void {
@@ -128,13 +136,16 @@ export class CanvasDirective implements OnInit {
       }
     };
 
-    points.splice(1, 0, this.generateRandomPoint(matrix));
-    points.splice(1, 0, this.generateRandomPoint(matrix));
-    points.splice(1, 0, this.generateRandomPoint(matrix));
-
+    for (let i = 0; i <= this.param.points; i++) {
+      points.splice(1, 0, this.generateRandomPoint(matrix));
+    }
     return points;
   }
 
+  private get getExpandedPoints() {
+    return this.expandedPoints;
+  }
+
   private calcDelta(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/models/config.model.ts

@@ -5,4 +5,5 @@ export interface Config {
   height: number;
   start: Point;
   end: Point;
+  drag?: Point;
 }

src/app/models/param.model.ts

@@ -3,4 +3,5 @@ export interface Param {
     start: string,
     end: string
   };
+  points: number;
 }

src/styles.scss

@@ -5,4 +5,6 @@ html, body {
   height: 100%;
   padding: 0;
   margin: 0;
+
+  font-family: monospace;
 }