From b7a59c02ce25d854755fb2ea8a022f5e7551ad57 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Thu, 10 May 2018 23:12:39 +0200
Subject: [PATCH] added starting and ending points

---
 src/app/app.component.html         |  2 +-
 src/app/app.component.scss         |  3 ++-
 src/app/canvas/canvas.directive.ts | 39 ++++++++++++++++++------------
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6a59da8..3bf0193 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<canvas appCanvas (emitConfig)="updateCanvasConfig($event)"></canvas>
+<div class="canvas" appCanvas (emitConfig)="updateCanvasConfig($event)"></div>
 
 <ul *ngIf="canvasConfig">
   <li><pre>{{canvasConfig | json}}</pre></li>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index e95541e..8f0322e 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,9 +1,10 @@
-canvas {
+.canvas {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
+  overflow: hidden;
 }
 
 ul {
diff --git a/src/app/canvas/canvas.directive.ts b/src/app/canvas/canvas.directive.ts
index 22ba35e..bf778c0 100644
--- a/src/app/canvas/canvas.directive.ts
+++ b/src/app/canvas/canvas.directive.ts
@@ -1,7 +1,7 @@
 import { Point } from './../models/point.model';
 import { Directive, ElementRef, Renderer, AfterViewInit, HostListener, Output, EventEmitter, OnInit } from '@angular/core';
 import { Config } from './../models/config.model';
-import { select } from 'd3-selection';
+import { select, selectAll } from 'd3-selection';
 
 @Directive({
   selector: '[appCanvas]'
@@ -14,13 +14,7 @@ export class CanvasDirective implements OnInit {
   @Output() emitConfig: EventEmitter<Config>;
   @HostListener('window:resize', ['$event'])
   private onResize(event) {
-    this.updateConfig();
-
-    if (this.svg) {
-      this.updateSvg();
-    } else {
-      this.initSvg();
-    }
+    this.init();
   }
 
   constructor(
@@ -32,13 +26,20 @@ export class CanvasDirective implements OnInit {
   }
 
   ngOnInit() {
+    this.init();
+  }
+
+  private init() {
     this.updateConfig();
     this.initSvg();
     this.render();
   }
 
   private initSvg() {
-    this.svg = select(this.canvas).append('svg')
+    if (!this.svg) {
+      this.svg = select(this.canvas).append('svg');
+    }
+    this.svg
       .attr('width', this.config.width)
       .attr('height', this.config.height);
   }
@@ -50,17 +51,25 @@ export class CanvasDirective implements OnInit {
   }
 
   private render() {
-    this.drawLine([
+    this.resetPoints();
+    this.drawPoints([
       this.config.start,
       this.config.end
     ]);
   }
 
-  private drawLine(points: Point[]) {
-    // d3.line()
-    //   .x(function(d) { return x(d.date); })
-    //   .y(function(d) { return y(d.value); })
-    //   .curve(d3.curveCatmullRom.alpha(0.5));
+  private resetPoints(): void {
+    selectAll('circle').remove();
+  }
+
+  private drawPoints(points: Point[]) {
+    points.forEach(point => {
+      this.svg.append('circle')
+        .attr('r', 50)
+        .attr('cx', point.x)
+        .attr('cy', point.y)
+        .attr('fill', '#971240');
+    });
   }
 
   private updateConfig(): void {