Merge pull request #5 from ErikKimsey/master

Bindings are made and param changes are communicating to canvas.direc…

src/app/app.component.html

@@ -9,25 +9,25 @@
   <li>
     <label>
       <div>Amount of points</div>
-      <input type="number" name="canvasParam.points" [(ngModel)]="canvasParam.points" max="10" min="0" step="1">
+      <input type="number" name="points" [(ngModel)]="canvasParam.points" max="10" min="0" step="1">
     </label>
   </li>
   <li>
     <label>
       <div>Margin X</div>
-      <input type="number" [(ngModel)]="canvasParam.margin.x" max="1" min="0" step="0.1">
+      <input type="number" name="marginX" [(ngModel)]="canvasParam.margin.x" max="1" min="0" step="0.1">
     </label>
   </li>
   <li>
     <label>
       <div>Margin Y</div>
-      <input type="number" [(ngModel)]="canvasParam.margin.y" max="1" min="0" step="0.1">
+      <input type="number" name="marginY" [(ngModel)]="canvasParam.margin.y" max="1" min="0" step="0.1">
     </label>
   </li>
   <li>
       <label>
         <div>Stroke Width</div>
-        <input type="number" [(ngModel)]="canvasParam.stroke.width" max="10" min="0" step="0.1">
+        <input type="number" name="strokeWidth" [(ngModel)]="canvasParam.stroke.width" max="10" min="0" step="0.1">
       </label>
     </li>
 </ul>

src/app/app.component.ts

@@ -31,7 +31,24 @@ export class AppComponent {
       spread: 80,
       showGrid: true
     };
+
+    /**
+     * 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

@@ -22,7 +22,8 @@ export class CanvasDirective implements OnInit, OnChanges {
   public config: Config;
 
   @Input()
-  private param: Param;
+  public param: Param;
+  public marginX: Param['margin']['x'];
   
 
   @Output()
@@ -43,10 +44,14 @@ export class CanvasDirective implements OnInit, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    console.log(changes.param);
+    console.log("ch ch ch chaaaangesss ",changes.param);
   }
 
   ngDoCheck(){
+    this.paramAdjustment();
+  }
+
+  paramAdjustment(){
     this.resetLines();
     this.resetPoints();
     this.init(); 
@@ -121,7 +126,6 @@ export class CanvasDirective implements OnInit, OnChanges {
   private expandPoints(points: Point[]) {
     const newPoints: Point[] = [];
     
-    
     const matrix = {
       min: {
         x: points.reduce((a, b) => a.x < b.x ? a : b).x,
@@ -131,7 +135,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,
@@ -177,6 +181,7 @@ 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)()