HW3 added touch

hw3/Claudio_Maggioni/scripts/app.js

@@ -26,17 +26,22 @@ class App {
       for (const b of ['clear', 'undo', 'camera'])
         this.buttons[b] = document.getElementById(conf.buttons[b]);
 
-      if (this.buttons.clear)
+      if (this.buttons.clear) {
         this.buttons.clear.addEventListener('click', () => {
           this.erase();
           this.background = null;
           history.clear();
         });
+      }
 
-      if (this.buttons.undo)
-        this.buttons.undo.addEventListener('click', () => history.pop(this));
+      if (this.buttons.undo) {
+        this.buttons.undo.addEventListener('click', () => {
+          history.pop();
+          this.redrawAll();
+        });
+      }
 
-      if (this.buttons.camera)
+      if (this.buttons.camera) {
         this.buttons.camera.addEventListener('click', () => {
           const base64 = this.canvas.toDataURL();
           const img = document.createElement('img');
@@ -47,6 +52,7 @@ class App {
           this.favourites.appendChild(img);
           this.favourites.appendChild(span);
         });
+      }
 
       const player = document.createElement('video');
       player.addEventListener('loadeddata', () => {
@@ -102,8 +108,20 @@ class App {
       brushToolbar.appendChild(color);
     }
 
+    const toMouse = (e, func) => {
+      if (e && e.touches && e.touches[0]) {
+        return func.bind(this)({
+          offsetX: e.touches[0].pageX - this.canvas.offsetLeft,
+          offsetY: e.touches[0].pageY - this.canvas.offsetTop
+        });
+      }
+    };
+
+    this.canvas.addEventListener('touchstart', e => toMouse(e, this.startPath));
     this.canvas.addEventListener('mousedown', this.startPath.bind(this));
+    this.canvas.addEventListener('touchmove', e => toMouse(e, this.draw));
     this.canvas.addEventListener('mousemove', this.draw.bind(this));
+    this.canvas.addEventListener('touchcancel', e => toMouse(e, this.endPath));
     this.canvas.addEventListener('mouseup', this.endPath.bind(this));
     this.canvas.addEventListener('mouseout', this.endPath.bind(this));
   }
@@ -148,11 +166,13 @@ class App {
         e.offsetX, e.offsetY));
     }
 
-    this.mousedown = true;
+    if (e instanceof MouseEvent) {
+      this.mousedown = true;
+    }
   }
 
   draw(e, beginNew = true, record = true) {
-    if (this.mousedown) {
+    if (this.mousedown || !(e instanceof MouseEvent)) {
       this._brush.draw(this.ctx, this.strokeStyle, e.offsetX, e.offsetY);
 
       if (record) {
@@ -163,7 +183,7 @@ class App {
       if (beginNew) {
         this.ctx.beginPath();
         this.ctx.moveTo(e.offsetX, e.offsetY);
-      } else {
+      } else if (e instanceof MouseEvent) {
         this.mousedown = false;
       }
     }