fix(canvasDirective): tidying up and removing unneccessary code

src/app/app.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-// import { FormsModule } from '@angular/forms';
 
 import { Param } from './models/param.model';
 import { Config } from './models/config.model';
@@ -26,29 +25,12 @@ export class AppComponent {
         y: 0.4
       },
       stroke: {
-        width: 2
+        width: 0.2
       },
       spread: 80,
-      showGrid: true
+      showGrid: false
     };
-
-    /**
-     * A test of canvasParam.margin change and binding to canvas.directive
-     */
-    let x = 1;
-    let intrvlId = setInterval(() => {
-      if (x < 5) {
-        this.canvasParam.margin.x += 0.2;
-        x += 1;
-        console.log("canvas param  ", this.canvasParam.margin.x);
-      } else {
-        clearInterval(intrvlId);
   }
-    }, 1000);
-    /**
-     * 
-     */
-  };
 
   public updateCanvasConfig(config): void {
     this.canvasConfig = config;

src/app/canvas/canvas.directive.ts

@@ -1,4 +1,4 @@
-import { ElementRef, HostListener, Output, EventEmitter, OnInit, Input, OnChanges, SimpleChanges, Directive } from '@angular/core';
+import { ElementRef, HostListener, Output, EventEmitter, OnInit, Input, Directive, DoCheck } from '@angular/core';
 import * as Selection from 'd3-selection';
 import * as Shape from 'd3-shape';
 import * as Random from 'd3-random';
@@ -11,7 +11,7 @@ import { Param } from './../models/param.model';
 @Directive({
   selector: '[appCanvas]'
 })
-export class CanvasDirective implements OnInit, OnChanges {
+export class CanvasDirective implements OnInit, DoCheck {
   private canvas: any;
   private defs: any;
   private gradient: any;
@@ -25,7 +25,6 @@ export class CanvasDirective implements OnInit, OnChanges {
   public param: Param;
   public marginX: Param['margin']['x'];
 
-
   @Output()
   private emitConfig: EventEmitter<Config>;
 
@@ -43,10 +42,6 @@ export class CanvasDirective implements OnInit, OnChanges {
     this.emitConfig = new EventEmitter();
   }
 
-  ngOnChanges(changes: SimpleChanges) {
-    console.log("ch ch ch chaaaangesss ",changes.param);
-  }
-
   ngDoCheck() {
     this.paramAdjustment();
   }
@@ -94,7 +89,8 @@ export class CanvasDirective implements OnInit, OnChanges {
   }
 
   private resetPoints(): void {
-    Selection.selectAll('circle').remove();
+    Selection.selectAll('g#spread-points').remove();
+    Selection.selectAll('g.points').remove();
   }
 
   private drawPoints(points: Point[]) {
@@ -135,7 +131,7 @@ export class CanvasDirective implements OnInit, OnChanges {
         x: points.reduce((a, b) => a.x > b.x ? a : b).x,
         y: points.reduce((a, b) => a.y > b.y ? a : b).y,
       }
-    }
+    };
 
     points.splice(1, 0, {
       x: this.config.end.x,
@@ -154,7 +150,6 @@ export class CanvasDirective implements OnInit, OnChanges {
   }
 
   private get getExpandedPoints() {
-    
     const group = Selection.select('g.points');
     const points = [];
     const that = this;
@@ -181,7 +176,6 @@ export class CanvasDirective implements OnInit, OnChanges {
   }
 
   private generateRandomPoint(matrix) {
-       
     return {
       x: Random.randomUniform(matrix.min.x, matrix.max.x)(),
       y: Random.randomUniform(matrix.min.y, matrix.max.y)()
@@ -264,7 +258,6 @@ export class CanvasDirective implements OnInit, OnChanges {
    * @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);
   }