From b558f89882630be9bcc0fdabeb76512c346f4ba8 Mon Sep 17 00:00:00 2001
From: Burak Tokak <iletisim@buraktokak.com>
Date: Sat, 12 Feb 2022 12:20:01 +0300
Subject: [PATCH 1/3] add toggle direct

---
 index.html |  3 +-
 index.js   | 88 +++++++++++++++++++++++++++++++++---------------------
 2 files changed, 56 insertions(+), 35 deletions(-)

diff --git a/index.html b/index.html
index df8578f..d6ee910 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,8 @@ <h1>Demo of Apple Pencil / 3D touch API</h1>
   <div id="info">
     <a href="https://github.com/quietshu/apple-pencil-safari-api-test" target="_blank">GitHub</a>
     <button onclick="undoDraw()">Undo</button>
+    <button onclick="toggleDirect()">Toggle Direct</button>
   </div>
   <script src="index.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/index.js b/index.js
index 6e4bb1d..6ffe5f4 100644
--- a/index.js
+++ b/index.js
@@ -5,6 +5,7 @@ const context = canvas.getContext('2d')
 let lineWidth = 0
 let isMousedown = false
 let points = []
+let allowDirect = true;
 
 canvas.width = window.innerWidth * 2
 canvas.height = window.innerHeight * 2
@@ -63,29 +64,42 @@ function undoDraw () {
   })
 }
 
+/**
+ * Disable or enable direct touch
+ * @return {void}
+ */
+function toggleDirect () {
+  allowDirect = !allowDirect;
+}
+
 for (const ev of ["touchstart", "mousedown"]) {
   canvas.addEventListener(ev, function (e) {
-    let pressure = 0.1;
-    let x, y;
-    if (e.touches && e.touches[0] && typeof e.touches[0]["force"] !== "undefined") {
-      if (e.touches[0]["force"] > 0) {
-        pressure = e.touches[0]["force"]
+
+    let touch = e.touches ? e.touches[0] : null
+    if(allowDirect || touch.touchType != "direct"){
+
+      let pressure = 0.1;
+      let x, y;
+      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 * 2
+        y = e.touches[0].pageY * 2
+      } else {
+        pressure = 1.0
+        x = e.pageX * 2
+        y = e.pageY * 2
       }
-      x = e.touches[0].pageX * 2
-      y = e.touches[0].pageY * 2
-    } else {
-      pressure = 1.0
-      x = e.pageX * 2
-      y = e.pageY * 2
-    }
 
-    isMousedown = true
+      isMousedown = true
 
-    lineWidth = Math.log(pressure + 1) * 40
-    context.lineWidth = lineWidth// pressure * 50;
+      lineWidth = Math.log(pressure + 1) * 40
+      context.lineWidth = lineWidth// pressure * 50;
 
-    points.push({ x, y, lineWidth })
-    drawOnCanvas(points)
+      points.push({ x, y, lineWidth })
+      drawOnCanvas(points)
+    }
   })
 }
 
@@ -94,30 +108,35 @@ for (const ev of ['touchmove', 'mousemove']) {
     if (!isMousedown) return
     e.preventDefault()
 
-    let pressure = 0.1
-    let x, y
-    if (e.touches && e.touches[0] && typeof e.touches[0]["force"] !== "undefined") {
-      if (e.touches[0]["force"] > 0) {
-        pressure = e.touches[0]["force"]
+    let touch = e.touches ? e.touches[0] : null
+    if(allowDirect || touch.touchType != "direct"){
+
+      let pressure = 0.1
+      let x, y
+      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 * 2
+        y = e.touches[0].pageY * 2
+      } else {
+        pressure = 1.0
+        x = e.pageX * 2
+        y = e.pageY * 2
       }
-      x = e.touches[0].pageX * 2
-      y = e.touches[0].pageY * 2
-    } else {
-      pressure = 1.0
-      x = e.pageX * 2
-      y = e.pageY * 2
-    }
 
-    // smoothen line width
-    lineWidth = (Math.log(pressure + 1) * 40 * 0.2 + lineWidth * 0.8)
-    points.push({ x, y, lineWidth })
+      // smoothen line width
+      lineWidth = (Math.log(pressure + 1) * 40 * 0.2 + lineWidth * 0.8)
+      points.push({ x, y, lineWidth })
 
-    drawOnCanvas(points);
+      drawOnCanvas(points);
+    }
 
     requestIdleCallback(() => {
       $force.textContent = 'force = ' + pressure
 
-      const touch = e.touches ? e.touches[0] : null
+      let touch = e.touches ? e.touches[0] : null
+
       if (touch) {
         $touches.innerHTML = `
           touchType = ${touch.touchType} ${touch.touchType === 'direct' ? '👆' : '✍️'} <br/>
@@ -126,6 +145,7 @@ for (const ev of ['touchmove', 'mousemove']) {
           rotationAngle = ${touch.rotationAngle} <br/>
           altitudeAngle = ${touch.altitudeAngle} <br/>
           azimuthAngle = ${touch.azimuthAngle} <br/>
+          allowDirect = ${allowDirect} <br/>
         `
       }
     })

From 3ca322079e004c96f980e4d966477857c4862510 Mon Sep 17 00:00:00 2001
From: Burak Tokak <iletisim@buraktokak.com>
Date: Sat, 12 Feb 2022 12:30:39 +0300
Subject: [PATCH 2/3] fix stat panel & add allowDirect status in stats

---
 index.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/index.js b/index.js
index 6ffe5f4..089ca3d 100644
--- a/index.js
+++ b/index.js
@@ -69,17 +69,18 @@ function undoDraw () {
  * @return {void}
  */
 function toggleDirect () {
+  $touches.innerHTML = $touches.innerHTML.replace(`allowDirect = ${String(allowDirect)}`, `allowDirect = ${String(!allowDirect)}`)
   allowDirect = !allowDirect;
 }
 
 for (const ev of ["touchstart", "mousedown"]) {
   canvas.addEventListener(ev, function (e) {
+    let pressure = 0.1;
+    let x, y;
 
     let touch = e.touches ? e.touches[0] : null
-    if(allowDirect || touch.touchType != "direct"){
+    if(allowDirect || touch && touch.touchType != "direct"){
 
-      let pressure = 0.1;
-      let x, y;
       if (e.touches && e.touches[0] && typeof e.touches[0]["force"] !== "undefined") {
         if (e.touches[0]["force"] > 0) {
           pressure = e.touches[0]["force"]
@@ -108,10 +109,11 @@ for (const ev of ['touchmove', 'mousemove']) {
     if (!isMousedown) return
     e.preventDefault()
 
+    let pressure = 0.1;
+    let x, y;
     let touch = e.touches ? e.touches[0] : null
-    if(allowDirect || touch.touchType != "direct"){
 
-      let pressure = 0.1
+    if(allowDirect || touch && touch.touchType != "direct"){
       let x, y
       if (e.touches && e.touches[0] && typeof e.touches[0]["force"] !== "undefined") {
         if (e.touches[0]["force"] > 0) {

From c98b907da053c19a92a011472350ebf188d2e06c Mon Sep 17 00:00:00 2001
From: Burak Tokak <iletisim@buraktokak.com>
Date: Sat, 12 Feb 2022 12:38:44 +0300
Subject: [PATCH 3/3] clean up

---
 index.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/index.js b/index.js
index 089ca3d..a7adcee 100644
--- a/index.js
+++ b/index.js
@@ -78,7 +78,7 @@ for (const ev of ["touchstart", "mousedown"]) {
     let pressure = 0.1;
     let x, y;
 
-    let touch = e.touches ? e.touches[0] : null
+    const touch = e.touches ? e.touches[0] : null
     if(allowDirect || touch && touch.touchType != "direct"){
 
       if (e.touches && e.touches[0] && typeof e.touches[0]["force"] !== "undefined") {
@@ -111,7 +111,7 @@ for (const ev of ['touchmove', 'mousemove']) {
 
     let pressure = 0.1;
     let x, y;
-    let touch = e.touches ? e.touches[0] : null
+    const touch = e.touches ? e.touches[0] : null
 
     if(allowDirect || touch && touch.touchType != "direct"){
       let x, y
@@ -137,8 +137,6 @@ for (const ev of ['touchmove', 'mousemove']) {
     requestIdleCallback(() => {
       $force.textContent = 'force = ' + pressure
 
-      let touch = e.touches ? e.touches[0] : null
-
       if (touch) {
         $touches.innerHTML = `
           touchType = ${touch.touchType} ${touch.touchType === 'direct' ? '👆' : '✍️'} <br/>