Check for gesture zone in TraceGesture too (#2617)

src/components/MultiGesture.tsx

@@ -4,7 +4,7 @@ import Direction from '../@types/Direction'
 import GesturePath from '../@types/GesturePath'
 import { noop } from '../constants'
 import gestureStore from '../stores/gesture'
-import viewportStore from '../stores/viewport'
+import isInGestureZone from '../util/isInGestureZone'
 import ScrollZone from './ScrollZone'
 import TraceGesture from './TraceGesture'
 
@@ -51,8 +51,6 @@ type MultiGestureProps = PropsWithChildren<{
   shouldCancelGesture?: () => boolean
 }>
 
-const TOOLBAR_HEIGHT = 50
-
 /** Static mapping of intercardinal directions to radians. Used to determine the closest gesture to an angle. Range: -π to π. */
 const dirToRad = {
   NW: -Math.PI * (3 / 4),
@@ -125,15 +123,12 @@ class MultiGesture extends React.Component<MultiGestureProps> {
         const x = e.touches[0].clientX
         const y = e.touches[0].clientY
         this.clientStart = { x, y }
+        const inGestureZone = isInGestureZone(x, y, this.leftHanded)
 
         // disable gestures in the scroll zone on the right side of the screen
         // disable scroll in the gesture zone on the left side of the screen
         // (reverse in left-handed mode)
-        const viewport = viewportStore.getState()
-        const scrollZoneWidth = viewport.scrollZoneWidth
-        const isInGestureZone =
-          (this.leftHanded ? x > scrollZoneWidth : x < viewport.innerWidth - scrollZoneWidth) && y > TOOLBAR_HEIGHT
-        if (isInGestureZone && !props.shouldCancelGesture?.()) {
+        if (inGestureZone && !props.shouldCancelGesture?.()) {
           this.disableScroll = true
         } else {
           this.abandon = true

src/components/TraceGesture.tsx

@@ -8,6 +8,7 @@ import themeColors from '../selectors/themeColors'
 import { gestureString, globalShortcuts } from '../shortcuts'
 import gestureStore from '../stores/gesture'
 import viewportStore from '../stores/viewport'
+import isInGestureZone from '../util/isInGestureZone'
 import FadeTransition from './FadeTransition'
 
 interface TraceGestureProps {
@@ -36,6 +37,7 @@ const useConditionDelay = (condition: boolean, milliseconds: number) => {
 /** Draws a gesture as it is being performed onto a canvas. */
 const TraceGesture = ({ eventNodeRef }: TraceGestureProps) => {
   const colors = useSelector(themeColors)
+  const leftHanded = useSelector(getUserSetting(Settings.leftHanded))
 
   // A hook that is true when there is a cancelled gesture in progress.
   // Handles GestureHint and CommandPaletteGesture which have different ways of showing a cancelled gesture.
@@ -92,7 +94,10 @@ const TraceGesture = ({ eventNodeRef }: TraceGestureProps) => {
       // 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
-      handlePointerStart(e)
+      const shouldActivateGesture = isInGestureZone(e.clientX, e.clientY, leftHanded)
+      if (shouldActivateGesture) {
+        handlePointerStart(e)
+      }
     })
     eventNode?.addEventListener('pointermove', e => {
       e.preventDefault = noop
@@ -111,7 +116,7 @@ const TraceGesture = ({ eventNodeRef }: TraceGestureProps) => {
       eventNode?.removeEventListener('pointermove', handlePointerMove)
       signaturePad.removeEventListener('beginStroke', onBeginStroke)
     }
-  }, [eventNodeRef, onBeginStroke])
+  }, [eventNodeRef, onBeginStroke, leftHanded])
 
   return (
     <div

src/util/isInGestureZone.ts

@@ -0,0 +1,14 @@
+import viewportStore from '../stores/viewport'
+
+const TOOLBAR_HEIGHT = 50
+
+/** Returns true if the pointer is in the gesture zone. To the right for righties, to the left for lefties. */
+const isInGestureZone = (x: number, y: number, leftHanded: boolean) => {
+  const viewport = viewportStore.getState()
+  const scrollZoneWidth = viewport.scrollZoneWidth
+  const isInGestureZone =
+    (leftHanded ? x > scrollZoneWidth : x < viewport.innerWidth - scrollZoneWidth) && y > TOOLBAR_HEIGHT
+  return isInGestureZone
+}
+
+export default isInGestureZone