From e4352d957963b7ae8170d8476fe5a0387f57b592 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Thu, 10 May 2018 21:35:28 +0200
Subject: [PATCH] added binging between directive and parent component

---
 src/app/app.component.html         |  8 +++-----
 src/app/app.component.scss         |  9 ++++++++-
 src/app/app.component.ts           |  9 +++++++--
 src/app/canvas/canvas.directive.ts | 11 +++++++----
 src/app/models/config.model.ts     |  4 ++--
 5 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index e226809..6a59da8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,8 +1,6 @@
-<canvas appCanvas></canvas>
+<canvas appCanvas (emitConfig)="updateCanvasConfig($event)"></canvas>
 
-<ul>
-  <li>https://github.com/d3/d3-interpolate</li>
-  <li>https://github.com/d3/d3-timer</li>
-  <li>https://github.com/d3/d3-scale-chromatic</li>
+<ul *ngIf="canvasConfig">
+  <li><pre>{{canvasConfig | json}}</pre></li>
 </ul>
 
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 7f88b02..e95541e 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -9,13 +9,20 @@ canvas {
 ul {
   display: flex;
   position: absolute;
+  top: 0;
+  right: auto;
   bottom: 0;
   left: 0;
-  right: 0;
   justify-content: center;
   margin: 0;
   padding: 3rem;
   background: rgba(0,0,0,0.1);
 
   list-style-type: none;
+
+  li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index ad97cbf..f2ed6f3 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
+import { Config } from './models/config.model';
 import * as d3 from 'd3';
 
 @Component({
@@ -7,5 +8,9 @@ import * as d3 from 'd3';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  title = 'app';
+  public canvasConfig: Config|null;
+
+  public updateCanvasConfig(config): void {
+    this.canvasConfig = config;
+  }
 }
diff --git a/src/app/canvas/canvas.directive.ts b/src/app/canvas/canvas.directive.ts
index 021bb21..bb230c7 100644
--- a/src/app/canvas/canvas.directive.ts
+++ b/src/app/canvas/canvas.directive.ts
@@ -1,14 +1,15 @@
-import { Directive, ElementRef, Renderer, AfterViewInit, HostListener } from '@angular/core';
+import { Directive, ElementRef, Renderer, AfterViewInit, HostListener, Output, EventEmitter, OnInit } from '@angular/core';
 import { Config } from './../models/config.model';
 
 @Directive({
   selector: '[appCanvas]'
 })
-export class CanvasDirective implements AfterViewInit {
+export class CanvasDirective implements OnInit {
   private canvas: any;
   private context: any;
   public config: Config;
 
+  @Output() emitConfig: EventEmitter<Config>;
   @HostListener('window:resize', ['$event'])
   private onResize(event) {
     this.updateConfig();
@@ -20,9 +21,10 @@ export class CanvasDirective implements AfterViewInit {
   ) {
     this.canvas = el.nativeElement;
     this.context = this.canvas.getContext('2d');
+    this.emitConfig = new EventEmitter();
   }
 
-  ngAfterViewInit() {
+  ngOnInit() {
     this.updateConfig();
   }
 
@@ -39,6 +41,7 @@ export class CanvasDirective implements AfterViewInit {
         y: this.canvas.clientHeight
       },
     };
-    console.log(this.config);
+    // Emit Config to parent Component
+    this.emitConfig.next(this.config);
   }
 }
diff --git a/src/app/models/config.model.ts b/src/app/models/config.model.ts
index f563595..c0cadc5 100644
--- a/src/app/models/config.model.ts
+++ b/src/app/models/config.model.ts
@@ -1,8 +1,8 @@
 import { Point } from './point.model';
 
 export interface Config {
-  width: Number;
-  height: Number;
+  width: number;
+  height: number;
   start: Point;
   end: Point;
 }