From d15ba4cc79746fdb5d46e194c9af199630f213b9 Mon Sep 17 00:00:00 2001
From: Robin Steinberg <robinsteinberg92@gmail.com>
Date: Wed, 25 Aug 2021 22:57:01 +0200
Subject: [PATCH] Live preview - send every coordinate

---
 index.html | 14 +++---------
 ts/app.ts  | 62 +++++++++++++++++++++++++++++++++++++++---------------
 2 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/index.html b/index.html
index d328e69..16ecb72 100644
--- a/index.html
+++ b/index.html
@@ -9,18 +9,10 @@
     </body>
 
     <style>
-        body {
-            margin: 0 0 0 0;
-        }
-
-        #canvas {
-            height: 100vh;
-            width: 100vw;
-        }
-
         #canvas > canvas {
-            width: 100%;
-            height: 100%;
+            width: 500px;
+            height: 500px;
+            border: 1px solid black;
         }
     </style>
 </html>
diff --git a/ts/app.ts b/ts/app.ts
index 38522a1..c6395d2 100644
--- a/ts/app.ts
+++ b/ts/app.ts
@@ -1,7 +1,7 @@
 class CanvasController {
     private canvas: HTMLCanvasElement;
     private canvasDiv: HTMLDivElement;
-    private ctx: CanvasRenderingContext2D | null;
+    private ctx?: CanvasRenderingContext2D | null;
     private ws: WebSocket;
 
     private isMouseDown: boolean = false;
@@ -18,48 +18,76 @@ class CanvasController {
         this.canvasDiv.appendChild(this.canvas);
         this.canvas.width = this.canvas.offsetWidth;
         this.canvas.height = this.canvas.offsetHeight;
-        this.ctx = this.canvas.getContext('2d');
+
+        if (!this.canvas.getContext) {
+            alert('Canvas API unavailable, drawing will not work!');
+        } else {
+            this.ctx = this.canvas.getContext('2d');
+        }
 
         // Events
-        this.canvasDiv.addEventListener('mousedown', e => this.onMouseDown(e));
-        this.canvasDiv.addEventListener('mouseup', () => this.onMouseUp());
-        this.canvasDiv.addEventListener('mousemove', e => this.onMouseMove(e));
+        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]));
+        }
 
         this.ws = new WebSocket('ws://localhost:8081', 'json');
-        this.ws.onopen = () => this.ws.send("SENDER");
+        this.ws.onopen = () => this.ws.send('SENDER');
     }
 
-    onMouseDown(event: MouseEvent) {
+    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();
     }
 
     onMouseUp() {
         this.isMouseDown = false;
-        this.ctx?.closePath();
         this.paths.push(this.currentPath);
-        this.sendPath();
+        // this.sendPath();
+        this.stopDrawing()
     }
 
-    onMouseMove(event: MouseEvent) {
-        if (!this.isMouseDown || !this.ctx) {
+    onMouseMove(event: MouseEvent | Touch) {
+        if (!this.isMouseDown) {
             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();
+        this.ctx!.beginPath();
+        this.ctx!.moveTo(this.x, this.y);
+        this.ctx!.lineTo(event.clientX, event.clientY);
+        this.ctx!.lineWidth = 1;
+        this.ctx!.stroke();
 
-        this.currentPath.push(new Coordinates(event.clientX, event.clientY));
+        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.ws.send(JSON.stringify(coordinates));
+    }
+
+    stopDrawing() {
+        this.ws.send('STOP');
+    }
+
     sendPath() {
         this.ws.send(JSON.stringify(this.currentPath));
     }