fixed binding

src/app/app.component.html

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

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { Param } from './models/param.model';
 import { Config } from './models/config.model';
@@ -11,7 +11,6 @@ import { Config } from './models/config.model';
 export class AppComponent {
   public canvasConfig: Config;
   public canvasParam: Param;
-  public test: number;
 
   constructor() {
     this.canvasParam = {
@@ -28,7 +27,7 @@ export class AppComponent {
         width: 0.2
       },
       spread: 80,
-      showGrid: false
+      showGrid: true
     };
   }
 

src/app/canvas/canvas.directive.ts

@@ -1,4 +1,4 @@
-import { ElementRef, HostListener, Output, EventEmitter, OnInit, Input, Directive, DoCheck } from '@angular/core';
+import { ElementRef, HostListener, Output, EventEmitter,  Input, Directive, SimpleChanges, OnChanges } from '@angular/core';
 import * as Selection from 'd3-selection';
 import * as Shape from 'd3-shape';
 import * as Random from 'd3-random';
@@ -11,27 +11,28 @@ import { Param } from './../models/param.model';
 @Directive({
   selector: '[appCanvas]'
 })
-export class CanvasDirective implements OnInit, DoCheck {
+export class CanvasDirective implements OnChanges {
   private canvas: any;
   private defs: any;
   private gradient: any;
   private svg: any;
   private expandedPoints: Point[];
-  private drag: Point;
+  private param: Param;
-  private dragging: any;
   public config: Config;
 
-  @Input()
+  @Input() private paramStartingColor: string;
-  public param: Param;
+  @Input() private paramEndingColor: string;
-  public marginX: Param['margin']['x'];
+  @Input() private paramMarginX: number;
+  @Input() private paramMarginY: number;
+  @Input() private paramPoints: number;
+  @Input() private paramSpread: number;
+  @Input() private paramStrokeWidth?: number;
+  @Input() private paramShowGrid?: boolean;
 
-  @Output()
+  @Output() private emitConfig: EventEmitter<Config>;
-  private emitConfig: EventEmitter<Config>;
 
   @HostListener('window:resize', ['$event'])
   private onResize(event) {
-    this.resetLines();
-    this.resetPoints();
     this.init();
   }
 
@@ -42,26 +43,38 @@ export class CanvasDirective implements OnInit, DoCheck {
     this.emitConfig = new EventEmitter();
   }
 
-  ngDoCheck() {
+  ngOnChanges(changes: SimpleChanges) {
-    this.paramAdjustment();
-  }
-
-  paramAdjustment() {
-    this.resetLines();
-    this.resetPoints();
-    this.init();
-  }
-
-  ngOnInit() {
     this.init();
   }
 
   private init() {
+    this.resetLines();
+    this.resetPoints();
+    this.updateParamObject();
     this.updateConfig();
     this.initSvg();
     this.render();
   }
 
+  private updateParamObject() {
+    this.param = {
+      colors: {
+        start: this.paramStartingColor,
+        end: this.paramEndingColor
+      },
+      points: this.paramPoints,
+      margin: {
+        x: this.paramMarginX,
+        y: this.paramMarginY,
+      },
+      spread: this.paramSpread,
+      stroke: {
+        width: this.paramStrokeWidth
+      },
+      showGrid: this.paramShowGrid
+    };
+  }
+
   private initSvg() {
     if (!this.svg) {
       this.svg = Selection.select(this.canvas).append('svg');
@@ -83,6 +96,7 @@ export class CanvasDirective implements OnInit, DoCheck {
   private render() {
     this.drawPoints(this.getExpandedPoints);
     if (this.param.showGrid) {
+      this.resetGrid();
       this.renderGrid(this.getExpandedPoints);
     }
     this.spreadLines(this.getExpandedPoints);
@@ -197,8 +211,6 @@ export class CanvasDirective implements OnInit, DoCheck {
       });
     }
 
-    console.warn(spreadPoints);
-
     spreadPoints.sort((a, b) => {
       return this.Δ(a, pointMiddle) - this.Δ(b, pointMiddle);
     });
@@ -268,13 +280,7 @@ export class CanvasDirective implements OnInit, DoCheck {
    */
   private renderGrid(points: Point[]) {
     const startingPoints = [points.shift(), points.pop()];
-    let group: any;
+    const group = this.svg.append('g').attr('id', 'grid');
-
-    if (!Selection.select('g.grid').size()) {
-      group = this.svg.append('g').attr('class', 'grid');
-    } else {
-      group = Selection.select('g.grid');
-    }
 
     points.forEach(p => {
       startingPoints.forEach(s => {
@@ -291,6 +297,12 @@ export class CanvasDirective implements OnInit, DoCheck {
     group.lower();
   }
 
+  private resetGrid() {
+    if (Selection.select('g#grid').size() >= 1) {
+      Selection.selectAll('g#grid').remove();
+    }
+  }
+
   /**
    * Update Config Parameters and emit to parent component.
    */
@@ -309,8 +321,7 @@ export class CanvasDirective implements OnInit, DoCheck {
         x: 0 + margin,
         y: this.canvas.clientHeight,
         color: this.param.colors.end
-      },
+      }
-      drag: this.drag
     };
 
     // Emit Canvas Config to parent Component.