Support touchscreens and multi-touch

src/app.js

@@ -48,14 +48,14 @@ const addOrUpdatePathElem = (pathElems, id, points) => {
 
   let subpath = []
 
-  for (let point of points) {
+  for (const point of points) {
     if (point[0] === undefined) {
       continue
     }
 
     if (point[2] === false) {
-      if (subpath.length === 1) {
-        let subpathElem = document.createElementNS(
+      if (subpath.length == 1) {
+        const subpathElem = document.createElementNS(
           "http://www.w3.org/2000/svg",
           "circle",
         )
@@ -68,7 +68,7 @@ const addOrUpdatePathElem = (pathElems, id, points) => {
 
         pathElem.appendChild(subpathElem)
       } else if (subpath.length > 0) {
-        let subpathElem = document.createElementNS(
+        const subpathElem = document.createElementNS(
           "http://www.w3.org/2000/svg",
           "path",
         )
@@ -125,19 +125,13 @@ function handleRoomConnectClick() {
 function handleRoomConnectionEstablished(room) {
   showConnectedRoom(room.name)
 
-  let userInput = false
-  let currentTool = tools.PEN
-
-  let pathElems = new Map()
-  let currentPathID = null
-
   HTML.userIDElem.value = room.ownID || ""
   room.addEventListener("allocateOwnID", ({ detail: id }) => {
     HTML.userIDElem.value = id
   })
 
   room.addEventListener("userJoin", ({ detail: id }) => {
-    if (HTML.connectedPeers.children.length === 0) {
+    if (HTML.connectedPeers.children.length == 0) {
       HTML.connectedPeers.innerHTML = ""
     }
 
@@ -153,89 +147,63 @@ function handleRoomConnectionEstablished(room) {
       }
     }
 
-    if (HTML.connectedPeers.children.length === 0) {
+    if (HTML.connectedPeers.children.length == 0) {
       HTML.connectedPeers.innerHTML = "No peers are connected"
     }
   })
 
+  const pathElems = new Map()
+
   room.addEventListener("addOrUpdatePath", ({ detail: { id, points } }) => {
     addOrUpdatePathElem(pathElems, id, points)
   })
 
-  const canvasOnMouseDown = (e) => {
-    userInput = true
-
-    let mouse = [e.offsetX, e.offsetY]
-
-    if (currentTool === tools.PEN) {
-      currentPathID = room.addPath(mouse)
-    } else if (currentTool === tools.ERASER) {
-      room.getPaths().forEach((points, pathID) => {
-        points.forEach((point, i) => {
-          if (getDistance(mouse, point) <= ERASERRADIUS) {
-            room.erasePoint(pathID, i)
-          }
-        })
-      })
-    }
-  }
-  HTML.canvas.addEventListener("mousedown", canvasOnMouseDown)
-
-  const canvasOnMouseLeave = () => {
-    userInput = false
-  }
-  HTML.canvas.addEventListener("mouseleave", canvasOnMouseLeave)
-
-  const canvasOnMouseEnter = (e) => {
-    if (e.buttons === 0) {
-      userInput = false
+  let currentTool = tools.PEN
+  const pathIDsByPointerID = new Map()
 
+  const canvasOnPointerEnter = (e) => {
+    if (~e.buttons & 1) {
       return
     }
 
-    userInput = true
-
-    let mouse = [e.offsetX, e.offsetY]
+    const mousePos = [e.offsetX, e.offsetY]
 
-    if (currentTool === tools.PEN) {
-      currentPathID = room.addPath(mouse)
-    } else if (currentTool === tools.ERASER) {
+    if (currentTool == tools.PEN) {
+      pathIDsByPointerID.set(e.pointerId, room.addPath(mousePos))
+    } else if (currentTool == tools.ERASER) {
       room.getPaths().forEach((points, pathID) => {
         points.forEach((point, i) => {
-          if (getDistance(mouse, point) <= ERASERRADIUS) {
+          if (getDistance(mousePos, point) <= ERASERRADIUS) {
             room.erasePoint(pathID, i)
           }
         })
       })
     }
   }
-  HTML.canvas.addEventListener("mouseenter", canvasOnMouseEnter)
 
-  const canvasOnMouseUp = () => {
-    userInput = false
+  const canvasOnPointerLeave = (e) => {
+    pathIDsByPointerID.delete(e.pointerId)
   }
-  HTML.canvas.addEventListener("mouseup", canvasOnMouseUp)
 
-  const canvasOnMouseMove = (e) => {
-    if (!userInput) {
+  const canvasOnPointerMove = (e) => {
+    if (~e.buttons & 1) {
       return
     }
 
-    let mouse = [e.offsetX, e.offsetY]
+    const mousePos = [e.offsetX, e.offsetY]
 
-    if (currentTool === tools.PEN) {
-      room.extendPath(currentPathID, mouse)
-    } else if (currentTool === tools.ERASER) {
+    if (currentTool == tools.PEN) {
+      room.extendPath(pathIDsByPointerID.get(e.pointerId), mousePos)
+    } else if (currentTool == tools.ERASER) {
       room.getPaths().forEach((points, pathID) => {
         points.forEach((point, i) => {
-          if (getDistance(mouse, point) <= ERASERRADIUS) {
+          if (getDistance(mousePos, point) <= ERASERRADIUS) {
             room.erasePoint(pathID, i)
           }
         })
       })
     }
   }
-  HTML.canvas.addEventListener("mousemove", canvasOnMouseMove)
 
   const peerButtonOnClick = () => {
     const peerID = HTML.peerIDElem.value
@@ -245,7 +213,6 @@ function handleRoomConnectionEstablished(room) {
     room.inviteUser(peerID)
     HTML.peerIDElem.value = ""
   }
-  HTML.peerButton.addEventListener("click", peerButtonOnClick)
 
   const penButtonOnClick = () => {
     currentTool = tools.PEN
@@ -253,7 +220,6 @@ function handleRoomConnectionEstablished(room) {
     HTML.penButton.classList.add("selected")
     HTML.eraserButton.classList.remove("selected")
   }
-  HTML.penButton.addEventListener("click", penButtonOnClick)
 
   const eraserButtonOnClick = () => {
     currentTool = tools.ERASER
@@ -261,18 +227,28 @@ function handleRoomConnectionEstablished(room) {
     HTML.penButton.classList.remove("selected")
     HTML.eraserButton.classList.add("selected")
   }
-  HTML.eraserButton.addEventListener("click", eraserButtonOnClick)
 
+  HTML.canvas.addEventListener("pointerdown", canvasOnPointerEnter)
+  HTML.canvas.addEventListener("pointerenter", canvasOnPointerEnter)
+  HTML.canvas.addEventListener("pointerup", canvasOnPointerLeave)
+  HTML.canvas.addEventListener("pointerleave", canvasOnPointerLeave)
+  HTML.canvas.addEventListener("pointermove", canvasOnPointerMove)
+  HTML.penButton.addEventListener("click", penButtonOnClick)
+  HTML.eraserButton.addEventListener("click", eraserButtonOnClick)
+  HTML.peerButton.addEventListener("click", peerButtonOnClick)
   HTML.roomConnectButton.removeEventListener("click", handleRoomConnectClick)
+
   const roomConnectButtonOnClick = () => {
     const selectedRoomID = HTML.roomIDElem.value
-    if (!selectedRoomID || selectedRoomID === room.name) return
+    if (!selectedRoomID || selectedRoomID == room.name) {
+      return
+    }
 
-    HTML.canvas.removeEventListener("mousedown", canvasOnMouseDown)
-    HTML.canvas.removeEventListener("mouseleave", canvasOnMouseLeave)
-    HTML.canvas.removeEventListener("mouseenter", canvasOnMouseEnter)
-    HTML.canvas.removeEventListener("mouseup", canvasOnMouseUp)
-    HTML.canvas.removeEventListener("mousemove", canvasOnMouseMove)
+    HTML.canvas.removeEventListener("pointerdown", canvasOnPointerEnter)
+    HTML.canvas.removeEventListener("pointerenter", canvasOnPointerEnter)
+    HTML.canvas.removeEventListener("pointerup", canvasOnPointerLeave)
+    HTML.canvas.removeEventListener("pointerleave", canvasOnPointerLeave)
+    HTML.canvas.removeEventListener("pointermove", canvasOnPointerMove)
     HTML.peerButton.removeEventListener("click", peerButtonOnClick)
     HTML.penButton.removeEventListener("click", penButtonOnClick)
     HTML.eraserButton.removeEventListener("click", eraserButtonOnClick)
@@ -282,7 +258,7 @@ function handleRoomConnectionEstablished(room) {
     )
 
     room.disconnect()
-    room = undefined
+    room = null
 
     handleRoomConnectClick()
   }
@@ -299,6 +275,8 @@ function connectToARoom(roomID) {
     .catch(handleRoomConnectionError)
 }
 
+HTML.canvas.addEventListener("touchmove", (e) => e.preventDefault())
+
 HTML.roomConnectButton.addEventListener("click", handleRoomConnectClick, {
   once: true,
 })