(im2517) (ml5717) Fixed pointer event validation, refactored pointer event code

src/canvas.js

@@ -92,30 +92,21 @@ export const clear = () => {
   canvas.innerHTML = ""
 }
 
-// Note that the PointerEvent is passed as the detail in these 'stroke events'.
-canvas.addEventListener("pointerdown", (e) => {
-  if (e.buttons & 1) {
-    input.dispatchEvent(new CustomEvent("strokestart", { detail: e }))
-  }
-})
-canvas.addEventListener("pointerenter", (e) => {
-  if (e.buttons & 1) {
-    input.dispatchEvent(new CustomEvent("strokestart", { detail: e }))
-  }
-})
-canvas.addEventListener("pointerup", (e) => {
-  if (e.buttons & 1) {
-    input.dispatchEvent(new CustomEvent("strokeend", { detail: e }))
-  }
-})
-canvas.addEventListener("pointerleave", (e) => {
-  if (e.buttons & 1) {
-    input.dispatchEvent(new CustomEvent("strokeend", { detail: e }))
-  }
-})
-canvas.addEventListener("pointermove", (e) => {
-  if (e.buttons & 1) {
-    input.dispatchEvent(new CustomEvent("strokemove", { detail: e }))
+// Necessary since buttons property is non standard on iOS versions < 13.2
+function checkValidPointerEvent(e) {
+  return e.buttons & 1 || e.pointerType === "touch"
+}
+
+const dispatchPointerEvent = (name) => (e) => {
+  if (checkValidPointerEvent(e)) {
+    input.dispatchEvent(new CustomEvent(name, { detail: e }))
   }
-})
+}
+
+// Note that the PointerEvent is passed as the detail in these 'stroke events'.
+canvas.addEventListener("pointerdown", dispatchPointerEvent("strokestart"))
+canvas.addEventListener("pointerenter", dispatchPointerEvent("strokestart"))
+canvas.addEventListener("pointerup", dispatchPointerEvent("strokeend"))
+canvas.addEventListener("pointerleave", dispatchPointerEvent("strokeend"))
+canvas.addEventListener("pointermove", dispatchPointerEvent("strokemove"))
 canvas.addEventListener("touchmove", (e) => e.preventDefault())