Merge remote-tracking branch 'origin/master' into benchmark-testing

src/app.js

@@ -36,6 +36,7 @@ function getNormalizedPressure(e) {
   if (e.pressure === 0 && e.buttons) {
     return 0.5
   }
+
   return e.pressure
 }
 
@@ -179,6 +180,112 @@ const onRoomConnect = (room_) => {
     HTML.fastUndoButton.classList.remove("disabled")
     HTML.undoButton.classList.remove("disabled")
   })
+
+  HTML.canvas.addEventListener("touchstart", (e) => {
+    e.preventDefault()
+    let pressure = 0
+    let x, y
+    const topPanelHeight = HTML.topPanel.offsetHeight
+    if (
+      e.touches &&
+      e.touches[0] &&
+      typeof e.touches[0]["force"] !== "undefined"
+    ) {
+      if (e.touches[0]["force"] > 0) {
+        pressure = e.touches[0]["force"]
+      }
+      x = e.touches[0].pageX
+      y = e.touches[0].pageY - topPanelHeight
+    } else {
+      pressure = 1.0
+      x = e.pageX
+      y = e.pageY - topPanelHeight
+    }
+
+    clearRecognizedUpcoming()
+    if (room == null) {
+      return
+    }
+    const currentTool = toolSelection.getTool()
+    const mousePos = [x, y]
+    if (currentTool == toolSelection.Tools.PEN) {
+      pathIDsByPointerID.set(
+        e.pointerId,
+        room.addPath(selectedColorAndRadiusPoint(...mousePos, pressure)),
+      )
+    } else if (currentTool == toolSelection.Tools.ERASER) {
+      eraseEverythingAtPosition(
+        ...mousePos,
+        toolSelection.getEraseRadius(),
+        room,
+      )
+    }
+  })
+
+  HTML.canvas.addEventListener("touchmove", (e) => {
+    let pressure = 0
+    let x, y
+    const topPanelHeight = HTML.topPanel.offsetHeight
+    if (
+      e.touches &&
+      e.touches[0] &&
+      typeof e.touches[0]["force"] !== "undefined"
+    ) {
+      if (e.touches[0]["force"] > 0) {
+        pressure = e.touches[0]["force"]
+      }
+      x = e.touches[0].pageX
+      y = e.touches[0].pageY - topPanelHeight
+    } else {
+      pressure = 1.0
+      x = e.pageX
+      y = e.pageY - topPanelHeight
+    }
+
+    if (room == null) {
+      return
+    }
+    const currentTool = toolSelection.getTool()
+    const mousePos = [x, y]
+    if (currentTool == toolSelection.Tools.PEN) {
+      const pathID = pathIDsByPointerID.get(e.pointerId)
+      room.extendPath(
+        pathID,
+        selectedColorAndRadiusPoint(...mousePos, pressure),
+      )
+      if (toolSelection.isRecognitionModeSet()) {
+        drawRecognizedUpcoming(room.getPoints(pathID), pressure)
+      }
+    } else if (currentTool == toolSelection.Tools.ERASER) {
+      eraseEverythingAtPosition(
+        ...mousePos,
+        toolSelection.getEraseRadius(),
+        room,
+      )
+    }
+  })
+
+  HTML.canvas.addEventListener("touchend", (e) => {
+    const { pointerId } = e
+    const pressure = getNormalizedPressure(e)
+    const pathID = pathIDsByPointerID.get(pointerId)
+    if (toolSelection.isRecognitionModeSet()) {
+      drawRecognized(pathID, room.getPoints(pathID), pressure)
+    }
+    pathIDsByPointerID.delete(pointerId)
+    clearRecognizedUpcoming()
+  })
+
+  HTML.canvas.addEventListener("touchleave", (e) => {
+    const { pointerId } = e
+    const pressure = getNormalizedPressure(e)
+    const pathID = pathIDsByPointerID.get(pointerId)
+    if (toolSelection.isRecognitionModeSet()) {
+      drawRecognized(pathID, room.getPoints(pathID), pressure)
+    }
+    pathIDsByPointerID.delete(pointerId)
+    clearRecognizedUpcoming()
+  })
 }
 
 function getRecognizedShapePoints(points) {

src/elements.js

@@ -34,3 +34,4 @@ export const strokeRadiusSlider = document.getElementById("range")
 export const output = document.getElementById("value")
 export const labelColours = document.getElementById("colours")
 export const userInfo = document.getElementById("user-avatar")
+export const topPanel = document.getElementById("top-panel")