Add multi touch support

Author: amoshydra

js/libs/Pointer.js

@@ -1,26 +1,24 @@
-var Pointer = (function() {
-  var pointer = {
-    pos1: {
-      x: -1,
-      y: -1,
-    },
-    pos0: {
-      x: -1,
-      y: -1
-    },
-    isClicked: false,
-    release: function release() {
-      this.isClicked = false;
-      this.pos0.y = -1;
-      this.pos0.x = -1;
-    },
-    init: function init() {
-      this.release();
-    },
-    set: function set(pos) {
-      this.pos1.x = pos.x;
-      this.pos1.y = pos.y;
-    }
+var Pointer = function Pointer() {
+  this.pos1 = {
+    x: -1,
+    y: -1
   };
-  return pointer;
-})();
+  this.pos0 = {
+    x: -1,
+    y: -1
+  };
+  this.isClicked = false;
+}
+
+Pointer.prototype = {
+  constructor: Pointer,
+  release: function release() {
+    this.isClicked = false;
+    this.pos0.y = -1;
+    this.pos0.x = -1;
+  },
+  set: function set(pos) {
+    this.pos1.x = pos.x;
+    this.pos1.y = pos.y;
+  }
+}

js/main.js

@@ -1,45 +1,52 @@
 
 Board.init('board');
 Pen.init(Board.ctx);
-Pointer.init();
+var pointerHash = {};
 
 // Attach event listener
 var leaveBoard = function leaveBoard(e) {
   Pen.release();
-  Pointer.release();
+  delete pointerHash[e.pointerId];
 };
 
 Board.dom.addEventListener('pointerdown', function(e) {
-  Pointer.set(Board.getPointerPos(e));
+
+  // Initialise pointer
+  pointer = new Pointer();
+  pointer.set(Board.getPointerPos(e));
+  pointerHash[e.pointerId] = pointer;
+
   // Get function type
   Pen.setFuncType(e);
   if (Pen.funcType === Pen.funcTypes.menu) alert('A menu should be opened in the future');
-  else drawOnCanvas(e, Pointer, Pen);
+  else drawOnCanvas(e, pointer, Pen);
 });
 
 Board.dom.addEventListener('pointermove', function(e) {
   if (Pen.funcType && Pen.funcType.includes(Pen.funcTypes.draw)) {
-    drawOnCanvas(e, Pointer, Pen);
+
+    let pointer = pointerHash[e.pointerId];
+    drawOnCanvas(e, pointer, Pen);
   }
 });
 Board.dom.addEventListener('pointerup', leaveBoard);
 Board.dom.addEventListener('pointerleave', leaveBoard);
 
 // Draw method
-function drawOnCanvas(e, Pointer, Pen) {
-  Pointer.set(Board.getPointerPos(e));
+function drawOnCanvas(e, pointerObj, Pen) {
+  pointerObj.set(Board.getPointerPos(e));
   Pen.setPen(Board.ctx, e);
 
-  if (Pointer.pos0.x < 0) {
-    Pointer.pos0.x = Pointer.pos1.x - 1;
-    Pointer.pos0.y = Pointer.pos1.y - 1;
+  if (pointerObj.pos0.x < 0) {
+    pointerObj.pos0.x = pointerObj.pos1.x - 1;
+    pointerObj.pos0.y = pointerObj.pos1.y - 1;
   }
   Board.ctx.beginPath();
-  Board.ctx.moveTo(Pointer.pos0.x, Pointer.pos0.y)
-  Board.ctx.lineTo(Pointer.pos1.x, Pointer.pos1.y);
+  Board.ctx.moveTo(pointerObj.pos0.x, pointerObj.pos0.y)
+  Board.ctx.lineTo(pointerObj.pos1.x, pointerObj.pos1.y);
   Board.ctx.closePath();
   Board.ctx.stroke();
 
-  Pointer.pos0.x = Pointer.pos1.x;
-  Pointer.pos0.y = Pointer.pos1.y;
+  pointerObj.pos0.x = pointerObj.pos1.x;
+  pointerObj.pos0.y = pointerObj.pos1.y;
 }