escaroda · March 1, 2019 06:48 · Jul 24, 2018 · Jul 1, 2018 · Jul 1, 2018 · Jul 1, 2018
diff --git a/drawing-board.componet.ts → drawing-board.component.ts b/drawing-board.componet.ts → drawing-board.component.ts
diff --git a/drawing-board.componet.ts b/drawing-board.componet.ts
@@ -7,7 +7,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { fromEvent } from 'rxjs';
-import { switchMap, takeUntil, pairwise } from 'rxjs/operators';
+import { pairwise, switchMap, takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-drawing-board',

diff --git a/drawing-board.componet.ts b/drawing-board.componet.ts
@@ -3,8 +3,8 @@ import {
   Component,
   ElementRef,
   Input,
-  ViewChild,
-  OnDestroy
+  OnDestroy,
+  ViewChild
 } from '@angular/core';
 import { fromEvent } from 'rxjs';
 import { switchMap, takeUntil, pairwise } from 'rxjs/operators';

diff --git a/drawing.componet.ts → drawing-board.componet.ts b/drawing.componet.ts → drawing-board.componet.ts
diff --git a/drawing.componet.ts b/drawing.componet.ts
@@ -3,13 +3,14 @@ import {
   Component,
   ElementRef,
   Input,
-  ViewChild
+  ViewChild,
+  OnDestroy
 } from '@angular/core';
 import { fromEvent } from 'rxjs';
 import { switchMap, takeUntil, pairwise } from 'rxjs/operators';
 
 @Component({
-  selector: 'app-canvas',
+  selector: 'app-drawing-board',
   template: `<canvas #canvas></canvas>`,
   styles: [
     `
@@ -19,11 +20,12 @@ import { switchMap, takeUntil, pairwise } from 'rxjs/operators';
     `
   ]
 })
-export class DrawingComponent implements AfterViewInit {
+export class DrawingBoardComponent implements AfterViewInit, OnDestroy {
   @Input() width = 512;
   @Input() height = 418;
   @ViewChild('canvas') canvas: ElementRef;
   cx: CanvasRenderingContext2D;
+  drawingSubscription: Subscription;
   constructor() {}
 
   ngAfterViewInit() {
@@ -46,7 +48,7 @@ export class DrawingComponent implements AfterViewInit {
 
   captureEvents(canvasEl: HTMLCanvasElement) {
     // this will capture all mousedown events from teh canvas element
-    fromEvent(canvasEl, 'mousedown')
+    this.drawingSubscription = fromEvent(canvasEl, 'mousedown')
       .pipe(
         switchMap(e => {
           // after a mouse down, we'll record all mouse moves
@@ -104,4 +106,9 @@ export class DrawingComponent implements AfterViewInit {
       this.cx.stroke();
     }
   }
+
+  ngOnDestroy() {
+    // this will remove event lister when this component is destroyed
+    this.drawingSubscription.unsubscribe();
+  }
 }
diff --git a/ng-drawing.componet.ts → drawing.componet.ts b/ng-drawing.componet.ts → drawing.componet.ts
@@ -19,7 +19,7 @@ import { switchMap, takeUntil, pairwise } from 'rxjs/operators';
     `
   ]
 })
-export class VaultComponent implements AfterViewInit {
+export class DrawingComponent implements AfterViewInit {
   @Input() width = 512;
   @Input() height = 418;
   @ViewChild('canvas') canvas: ElementRef;
@@ -45,12 +45,19 @@ export class VaultComponent implements AfterViewInit {
   }
 
   captureEvents(canvasEl: HTMLCanvasElement) {
+    // this will capture all mousedown events from teh canvas element
     fromEvent(canvasEl, 'mousedown')
       .pipe(
         switchMap(e => {
+          // after a mouse down, we'll record all mouse moves
           return fromEvent(canvasEl, 'mousemove').pipe(
+            // we'll stop (and unsubscribe) once the user releases the mouse
+            // this will trigger a 'mouseup' event
             takeUntil(fromEvent(canvasEl, 'mouseup')),
+            // we'll also stop (and unsubscribe) once the mouse leaves the canvas (mouseleave event)
             takeUntil(fromEvent(canvasEl, 'mouseleave')),
+            // pairwise lets us get the previous value to draw a line from
+            // the previous point to the current point
             pairwise()
           );
         })

diff --git a/ng-drawing.componet.ts b/ng-drawing.componet.ts
@@ -0,0 +1,100 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild
+} from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { switchMap, takeUntil, pairwise } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-canvas',
+  template: `<canvas #canvas></canvas>`,
+  styles: [
+    `
+      canvas {
+        border: 1px solid #000;
+      }
+    `
+  ]
+})
+export class VaultComponent implements AfterViewInit {
+  @Input() width = 512;
+  @Input() height = 418;
+  @ViewChild('canvas') canvas: ElementRef;
+  cx: CanvasRenderingContext2D;
+  constructor() {}
+
+  ngAfterViewInit() {
+    // get the context
+    const canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
+    this.cx = canvasEl.getContext('2d');
+
+    // set the width and height
+    canvasEl.width = this.width;
+    canvasEl.height = this.height;
+
+    // set some default properties about the line
+    this.cx.lineWidth = 3;
+    this.cx.lineCap = 'round';
+    this.cx.strokeStyle = '#000';
+
+    // we'll implement this method to start capturing mouse events
+    this.captureEvents(canvasEl);
+  }
+
+  captureEvents(canvasEl: HTMLCanvasElement) {
+    fromEvent(canvasEl, 'mousedown')
+      .pipe(
+        switchMap(e => {
+          return fromEvent(canvasEl, 'mousemove').pipe(
+            takeUntil(fromEvent(canvasEl, 'mouseup')),
+            takeUntil(fromEvent(canvasEl, 'mouseleave')),
+            pairwise()
+          );
+        })
+      )
+      .subscribe((res: [MouseEvent, MouseEvent]) => {
+        const rect = canvasEl.getBoundingClientRect();
+
+        // previous and current position with the offset
+        const prevPos = {
+          x: res[0].clientX - rect.left,
+          y: res[0].clientY - rect.top
+        };
+
+        const currentPos = {
+          x: res[1].clientX - rect.left,
+          y: res[1].clientY - rect.top
+        };
+
+        // this method we'll implement soon to do the actual drawing
+        this.drawOnCanvas(prevPos, currentPos);
+      });
+  }
+
+  drawOnCanvas(
+    prevPos: { x: number; y: number },
+    currentPos: { x: number; y: number }
+  ) {
+    // incase the context is not set
+    if (!this.cx) {
+      return;
+    }
+
+    // start our drawing path
+    this.cx.beginPath();
+
+    // we're drawing lines so we need a previous position
+    if (prevPos) {
+      // sets the start point
+      this.cx.moveTo(prevPos.x, prevPos.y); // from
+      // draws a line from the start pos until the current position
+      this.cx.lineTo(currentPos.x, currentPos.y);
+
+      // strokes the current path with the styles we set earlier
+      this.cx.stroke();
+    }
+  }
+}