From ca0e2dd64f54f4f332490f2519caa8d1a40c87e0 Mon Sep 17 00:00:00 2001
From: Robin Steinberg <robinsteinberg92@gmail.com>
Date: Thu, 26 Aug 2021 19:38:49 +0200
Subject: [PATCH] Refactored drawing logic into separate class

---
 index.html                    |  2 +-
 ts/app.ts                     | 92 +++++++++--------------------------
 ts/canvas-util/canvasUtil.ts  | 77 +++++++++++++++++++++++++++++
 ts/canvas-util/coordinates.ts |  9 ++++
 4 files changed, 111 insertions(+), 69 deletions(-)
 create mode 100644 ts/canvas-util/canvasUtil.ts
 create mode 100644 ts/canvas-util/coordinates.ts

diff --git a/index.html b/index.html
index 16ecb72..c41c2cb 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
     </body>
 
     <style>
-        #canvas > canvas {
+        #canvas {
             width: 500px;
             height: 500px;
             border: 1px solid black;
diff --git a/ts/app.ts b/ts/app.ts
index c6395d2..b5e1f17 100644
--- a/ts/app.ts
+++ b/ts/app.ts
@@ -1,39 +1,31 @@
+import Coordinates from "./canvas-util/coordinates.js";
+import CanvasUtil from "./canvas-util/canvasUtil.js";
+
 class CanvasController {
-    private canvas: HTMLCanvasElement;
+    private canvasUtil: CanvasUtil;
     private canvasDiv: HTMLDivElement;
-    private ctx?: CanvasRenderingContext2D | null;
     private ws: WebSocket;
 
     private isMouseDown: boolean = false;
-    private x: number = 0;
-    private y: number = 0;
-
-    private paths: Coordinates[][] = [];
-    private currentPath: Coordinates[] = [];
 
     constructor() {
-        this.canvas = document.createElement('canvas');
         this.canvasDiv = document.querySelector('#canvas') as HTMLDivElement;
+        this.canvasUtil = new CanvasUtil(this.canvasDiv.offsetWidth, this.canvasDiv.offsetHeight);
 
-        this.canvasDiv.appendChild(this.canvas);
-        this.canvas.width = this.canvas.offsetWidth;
-        this.canvas.height = this.canvas.offsetHeight;
+        const canvas = this.canvasUtil.getCanvas();
+        this.canvasDiv.appendChild(canvas);
 
-        if (!this.canvas.getContext) {
+        if (!this.canvasUtil.isCanvasApiSupported) {
             alert('Canvas API unavailable, drawing will not work!');
         } else {
-            this.ctx = this.canvas.getContext('2d');
-        }
+            // Events
+            canvas.addEventListener('mousedown', e => this.onMouseDown(e));
+            canvas.addEventListener('mouseup', () => this.onMouseUp());
+            canvas.addEventListener('mousemove', e => this.onMouseMove(e));
 
-        // Events
-        if (this.ctx) {
-            this.canvas.addEventListener('mousedown', e => this.onMouseDown(e));
-            this.canvas.addEventListener('mouseup', () => this.onMouseUp());
-            this.canvas.addEventListener('mousemove', e => this.onMouseMove(e));
-
-            this.canvas.addEventListener('touchstart', e => this.onMouseDown(e.touches[0]));
-            this.canvas.addEventListener('touchend', () => this.onMouseUp());
-            this.canvas.addEventListener('touchmove', e => this.onMouseMove(e.touches[0]));
+            canvas.addEventListener('touchstart', e => this.onMouseDown(e.touches[0]));
+            canvas.addEventListener('touchend', () => this.onMouseUp());
+            canvas.addEventListener('touchmove', e => this.onMouseMove(e.touches[0]));
         }
 
         this.ws = new WebSocket('ws://localhost:8081', 'json');
@@ -42,17 +34,18 @@ class CanvasController {
 
     onMouseDown(event: MouseEvent | Touch) {
         this.isMouseDown = true;
-        this.x = event.clientX;
-        this.y = event.clientY;
-        this.currentPath = [new Coordinates(this.x, this.y)];
-        this.startDrawing();
+
+        const coordinates = new Coordinates(event.clientX, event.clientY);
+        this.canvasUtil.startPath(coordinates);
+
+        this.ws.send('START');
+        this.ws.send(JSON.stringify(coordinates));
     }
 
     onMouseUp() {
         this.isMouseDown = false;
-        this.paths.push(this.currentPath);
-        // this.sendPath();
-        this.stopDrawing()
+        this.canvasUtil.stopPath();
+        this.ws.send('STOP');
     }
 
     onMouseMove(event: MouseEvent | Touch) {
@@ -60,50 +53,13 @@ class CanvasController {
             return;
         }
 
-        this.ctx!.beginPath();
-        this.ctx!.moveTo(this.x, this.y);
-        this.ctx!.lineTo(event.clientX, event.clientY);
-        this.ctx!.lineWidth = 1;
-        this.ctx!.stroke();
-
         const coordinates = new Coordinates(event.clientX, event.clientY);
-
-        this.currentPath.push(coordinates);
-        this.sendCoordindates(coordinates);
-
-        this.x = event.clientX;
-        this.y = event.clientY;
-    }
-
-    startDrawing() {
-        this.ws.send('START');
-        this.ws.send(JSON.stringify(new Coordinates(this.x, this.y)));
-    }
-
-    sendCoordindates(coordinates: Coordinates) {
+        this.canvasUtil.draw(coordinates);
         this.ws.send(JSON.stringify(coordinates));
     }
-
-    stopDrawing() {
-        this.ws.send('STOP');
-    }
-
-    sendPath() {
-        this.ws.send(JSON.stringify(this.currentPath));
-    }
 }
 
 
-class Coordinates {
-    public x: number;
-    public y: number;
-
-    constructor(x: number, y: number) {
-        this.x = x;
-        this.y = y;
-    }
-}
-
 const app = new CanvasController();
 
 export { app };
diff --git a/ts/canvas-util/canvasUtil.ts b/ts/canvas-util/canvasUtil.ts
new file mode 100644
index 0000000..342cac1
--- /dev/null
+++ b/ts/canvas-util/canvasUtil.ts
@@ -0,0 +1,77 @@
+import Coordinates from "./coordinates.js";
+
+export default class CanvasUtil {
+    private canvas?: HTMLCanvasElement;
+    private ctx?: CanvasRenderingContext2D | null;
+
+    private canvasWidth: number;
+    private canvasHeight: number;
+
+    private currentCoordinates: Coordinates;
+
+    public paths: Coordinates[][] = [];
+    public currentPath: Coordinates[] = [];
+
+    constructor(canvasWidth: number, canvasHeight: number) {
+        this.currentCoordinates = new Coordinates(0, 0);
+        this.canvasWidth = canvasWidth;
+        this.canvasHeight = canvasHeight;
+        this.createCanvas();
+    }
+
+    public getCanvas(): HTMLCanvasElement {
+        if (!this.canvas) {
+            this.createCanvas();
+        }
+        return this.canvas!;
+    }
+
+    public recreateCanvas() {
+        this.createCanvas();
+        return this.canvas;
+    }
+
+    public startPath(coordinates: Coordinates) {
+        this.currentPath.push(coordinates);
+        this.currentCoordinates = coordinates;
+    }
+
+    public stopPath() {
+        if (this.currentPath.length) {
+            this.paths.push(this.currentPath);
+        }
+        this.currentPath = [];
+    }
+
+    public draw(coordinates: Coordinates) {
+        if (!this.ctx) {
+            throw new Error('No canvas context available!');
+        }
+
+        this.ctx.beginPath();
+        this.ctx.moveTo(this.currentCoordinates.x, this.currentCoordinates.y);
+        this.ctx.lineTo(coordinates.x, coordinates.y);
+        this.ctx.lineWidth = 1;
+        this.ctx.stroke();
+
+        this.currentPath.push(coordinates);
+        this.currentCoordinates = coordinates;
+    }
+
+    /**
+     * States whether the canvas API is supported by the browser and whether
+     * drawing will work
+     */
+    public get isCanvasApiSupported(): boolean {
+        return !!this.ctx;
+    }
+
+    private createCanvas() {
+        this.canvas = document.createElement('canvas');
+        this.canvas.width = this.canvasWidth;
+        this.canvas.height = this.canvasHeight;
+        if (this.canvas.getContext) {
+            this.ctx = this.canvas.getContext('2d');
+        }
+    }
+}
diff --git a/ts/canvas-util/coordinates.ts b/ts/canvas-util/coordinates.ts
new file mode 100644
index 0000000..f8cceec
--- /dev/null
+++ b/ts/canvas-util/coordinates.ts
@@ -0,0 +1,9 @@
+export default class Coordinates {
+    public x: number;
+    public y: number;
+
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+}