Update gesture pad & use touch events (#2706)

Co-authored-by: Raine Revere <[email protected]>

.ncurc.js

@@ -23,11 +23,6 @@ module.exports = {
     // https://gitlab.com/nfriend/ts-key-enum#which-version-should-i-use
     'ts-key-enum',
 
-    // Breaks on mobile Safari.
-    // undefined is not an object (evaluating signaturePad._handlePonterStart.bind')
-    // https://github.com/szimek/signature_pad/releases/tag/v5.0.0
-    'react-signature-pad-wrapper',
-
     // customSnapshotIdentifier breaks in puppeteer snapshot tests on puppeteer v23.
     // Error running image diff: Unknown Error
     // https://github.com/vitest-dev/vitest/releases/tag/v2.0.0

package.json

@@ -120,7 +120,7 @@
     "react-native-gesture-handler": "^2.21.1",
     "react-native-web": "^0.19.13",
     "react-redux": "^9.1.2",
-    "react-signature-pad-wrapper": "^3.4.0",
+    "react-signature-pad-wrapper": "^4.1.0",
     "react-split-pane": "^0.1.92",
     "react-transition-group": "^4.4.5",
     "redux": "^5.0.1",

src/components/TraceGesture.tsx

@@ -65,23 +65,38 @@ const TraceGesture = ({ eventNodeRef }: TraceGestureProps) => {
     const signaturePad = signaturePadRef.current['signaturePad']
     const eventNode = eventNodeRef?.current
 
-    // Attach pointer handlers to a provided node rather than the signature pad canvas.
+    // Attach touch handlers to a provided node rather than the signature pad canvas.
     // See: eventNodeRef
-    const handlePointerStart = signaturePad._handlePointerStart.bind(signaturePad)
-    const handlePointerMove = signaturePad._handlePointerMove.bind(signaturePad)
+    const handleTouchStart = signaturePad._handleTouchStart.bind(signaturePad)
+    const handleTouchMove = signaturePad._handleTouchMove.bind(signaturePad)
+    const handleTouchEnd = signaturePad._handleTouchEnd.bind(signaturePad)
 
-    eventNode?.addEventListener('pointerdown', e => {
+    eventNode?.addEventListener('touchstart', e => {
       // Make preventDefault a noop otherwise tap-to-edit is broken.
       // e.cancelable is readonly and monkeypatching preventDefault is easier than copying e.
       e.preventDefault = noop
-      const shouldActivateGesture = isInGestureZone(e.clientX, e.clientY, leftHanded)
-      if (shouldActivateGesture) {
-        handlePointerStart(e)
+
+      const touch = e.touches[0]
+      if (isInGestureZone(touch.clientX, touch.clientY, leftHanded)) {
+        handleTouchStart(e)
+      }
+    })
+
+    eventNode?.addEventListener('touchmove', e => {
+      const isGestureInProgress = gestureStore.getState().length > 0
+      const touch = e.touches[0]
+
+      if (isGestureInProgress && isInGestureZone(touch.clientX, touch.clientY, leftHanded)) {
+        handleTouchMove(e)
       }
     })
-    eventNode?.addEventListener('pointermove', e => {
+
+    eventNode?.addEventListener('touchend', e => {
+      // Make preventDefault a noop otherwise tap-to-edit is broken.
+      // e.cancelable is readonly and monkeypatching preventDefault is easier than copying e.
       e.preventDefault = noop
-      handlePointerMove(e)
+
+      handleTouchEnd(e)
     })
 
     signaturePad.addEventListener('beginStroke', onBeginStroke)
@@ -92,8 +107,9 @@ const TraceGesture = ({ eventNodeRef }: TraceGestureProps) => {
     signaturePad.canvas.height = signaturePad.canvas.offsetHeight
 
     return () => {
-      eventNode?.removeEventListener('pointerdown', handlePointerStart)
-      eventNode?.removeEventListener('pointermove', handlePointerMove)
+      eventNode?.removeEventListener('touchstart', handleTouchStart)
+      eventNode?.removeEventListener('touchmove', handleTouchMove)
+      eventNode?.removeEventListener('touchend', handleTouchEnd)
       signaturePad.removeEventListener('beginStroke', onBeginStroke)
     }
   }, [eventNodeRef, onBeginStroke, leftHanded])

yarn.lock

@@ -8078,7 +8078,7 @@ __metadata:
     react-native-gesture-handler: "npm:^2.21.1"
     react-native-web: "npm:^0.19.13"
     react-redux: "npm:^9.1.2"
-    react-signature-pad-wrapper: "npm:^3.4.0"
+    react-signature-pad-wrapper: "npm:^4.1.0"
     react-split-pane: "npm:^0.1.92"
     react-transition-group: "npm:^4.4.5"
     redux: "npm:^5.0.1"
@@ -15303,16 +15303,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-signature-pad-wrapper@npm:^3.4.0":
-  version: 3.4.1
-  resolution: "react-signature-pad-wrapper@npm:3.4.1"
+"react-signature-pad-wrapper@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "react-signature-pad-wrapper@npm:4.1.0"
   dependencies:
-    signature_pad: "npm:^4.0.0"
+    prop-types: "npm:^15.8.1"
+    signature_pad: "npm:^5.0.1"
     throttle-debounce: "npm:^5.0.0"
   peerDependencies:
-    react: 17 - 18
-    react-dom: 17 - 18
-  checksum: 10c0/f38c58ed30e1d7ed02348430ddc7b18d21db6049ee2cd5ff689377be7ed586d3550a33ba1f06c92274153f44ab75ab2652fb8e0872f307bdc739ea43e066ac4a
+    react: 17 - 19
+    react-dom: 17 - 19
+  checksum: 10c0/0f8beb9dd14b31a8c915e78ff2983c13adbff5f5949916a9c33f76bcfa8e8ccd5a0cd598ca733513e239637dc17d0243070cb426f082fc6e8d4b5624c35eb475
   languageName: node
   linkType: hard
 
@@ -16229,10 +16230,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"signature_pad@npm:^4.0.0":
-  version: 4.2.0
-  resolution: "signature_pad@npm:4.2.0"
-  checksum: 10c0/9b7792c90fea0d90b095ddb724d046ecaea20ce2de9845c270f08407ca8402888e0b04b9bab2865271e7d18fe765e1954d4a142e0cbfd551f428e9298f3fb890
+"signature_pad@npm:^5.0.1":
+  version: 5.0.4
+  resolution: "signature_pad@npm:5.0.4"
+  checksum: 10c0/bf6fa4393e00c86d32b66b7cd613db37491918576b00bdd1d99ae7250ff664305b28b7d64706b5c7111a67ecc8e82e959221514b15a6d0b35acaa418b0562eaf
   languageName: node
   linkType: hard