Haptics

android/app/capacitor.build.gradle

@@ -10,6 +10,7 @@ android {
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-clipboard')
+    implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
     implementation project(':capacitor-status-bar')
 

android/capacitor.settings.gradle

@@ -5,6 +5,9 @@ project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-clipboard'
 project(':capacitor-clipboard').projectDir = new File('../node_modules/@capacitor/clipboard/android')
 
+include ':capacitor-haptics'
+project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
+
 include ':capacitor-keyboard'
 project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor/keyboard/android')
 

ios/App/Podfile

@@ -12,6 +12,7 @@ def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorClipboard', :path => '../../node_modules/@capacitor/clipboard'
+  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
   pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
   pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
 end

package.json

@@ -77,6 +77,7 @@
     "@capacitor/android": "^6.1.2",
     "@capacitor/clipboard": "^6.0.2",
     "@capacitor/core": "^6.2.0",
+    "@capacitor/haptics": "^6.0.2",
     "@capacitor/ios": "^6.2.0",
     "@capacitor/keyboard": "^6.0.2",
     "@capacitor/status-bar": "^6.0.1",

src/actions/deleteThought.ts

@@ -1,3 +1,5 @@
+import { Capacitor } from '@capacitor/core'
+import { Haptics, NotificationType } from '@capacitor/haptics'
 import _ from 'lodash'
 import Index from '../@types/IndexType'
 import Lexeme from '../@types/Lexeme'
@@ -53,6 +55,9 @@ const deleteThought = (state: State, { local = true, pathParent, thoughtId, orph
 
   // See: Payload.local
   const persist = local || remote
+  if (Capacitor.isNativePlatform()) {
+    Haptics.notification({ type: NotificationType.Warning })
+  }
 
   // guard against missing lexeme
   // while this ideally shouldn't happen, there are some concurrency issues that can cause it to happen, as well as freeThoughts, so we should print an error and just delete the Parent

src/components/MultiGesture.tsx

@@ -1,3 +1,5 @@
+import { Capacitor } from '@capacitor/core'
+import { Haptics, ImpactStyle, NotificationType } from '@capacitor/haptics'
 import React, { PropsWithChildren } from 'react'
 import { GestureResponderEvent, PanResponder, PanResponderInstance, View } from 'react-native'
 import Direction from '../@types/Direction'
@@ -144,6 +146,9 @@ class MultiGesture extends React.Component<MultiGestureProps> {
 
     // touchcancel is fired when the user switches apps by swiping from the bottom of the screen
     window.addEventListener('touchcancel', e => {
+      if (Capacitor.isNativePlatform()) {
+        Haptics.notification({ type: NotificationType.Warning })
+      }
       this.props.onCancel?.({ clientStart: this.clientStart, e })
       this.reset()
     })
@@ -162,6 +167,9 @@ class MultiGesture extends React.Component<MultiGestureProps> {
         if (this.props.shouldCancelGesture?.()) {
           this.props.onCancel?.({ clientStart: this.clientStart, e })
           gestureStore.update('')
+          if (Capacitor.isNativePlatform()) {
+            Haptics.notification({ type: NotificationType.Warning })
+          }
           this.abandon = true
           return
         }
@@ -179,6 +187,9 @@ class MultiGesture extends React.Component<MultiGestureProps> {
           this.scrollYStart = window.scrollY
           if (this.props.onStart) {
             this.props.onStart({ clientStart: this.clientStart!, e })
+            if (Capacitor.isNativePlatform()) {
+              Haptics.impact({ style: ImpactStyle.Light })
+            }
           }
           return
         }
@@ -203,6 +214,9 @@ class MultiGesture extends React.Component<MultiGestureProps> {
             // append the gesture to the sequence and call the onGesture handler
             this.sequence += g
             this.props.onGesture?.({ gesture: g, sequence: this.sequence, clientStart: this.clientStart!, e })
+            if (Capacitor.isNativePlatform()) {
+              Haptics.impact({ style: ImpactStyle.Light })
+            }
             gestureStore.update(this.sequence)
           }
         }
@@ -216,6 +230,11 @@ class MultiGesture extends React.Component<MultiGestureProps> {
             y: gestureState.moveY,
           }
           this.props.onEnd?.({ sequence: this.sequence, clientStart: this.clientStart!, clientEnd, e })
+          if (Capacitor.isNativePlatform()) {
+            for (let i = 0; i < this.sequence.length; i++) {
+              Haptics.impact({ style: ImpactStyle.Light })
+            }
+          }
         }
         this.reset()
       },

src/hooks/useDragHold.ts

@@ -1,3 +1,5 @@
+import { Capacitor } from '@capacitor/core'
+import { Haptics } from '@capacitor/haptics'
 import { useCallback, useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import DragThoughtZone from '../@types/DragThoughtZone'
@@ -35,6 +37,9 @@ const useDragHold = ({
       if (disabled) return
       setIsPressed(true)
       dispatch([dragHold({ value: true, simplePath, sourceZone })])
+      if (Capacitor.isNativePlatform()) {
+        Haptics.selectionStart()
+      }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
@@ -51,7 +56,9 @@ const useDragHold = ({
 
         if (state.dragHold) {
           dispatch([dragHold({ value: false }), !hasMulticursor(state) ? alert(null) : null])
-
+          if (Capacitor.isNativePlatform()) {
+            Haptics.selectionEnd()
+          }
           if (toggleMulticursorOnLongPress) {
             dispatch(toggleMulticursor({ path: simplePath }))
           }

src/hooks/useLongPress.ts

@@ -1,3 +1,4 @@
+import { Haptics } from '@capacitor/haptics'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { editingActionCreator as editing } from '../actions/editing'
@@ -41,6 +42,7 @@ const useLongPress = (
         clientCoords.current = { x: e.touches?.[0]?.clientX, y: e.touches?.[0]?.clientY }
       }
       onTouchStart?.()
+      Haptics.selectionStart()
 
       // cast Timeout to number for compatibility with clearTimeout
       clearTimeout(timerIdRef.current)

src/hooks/useToolbarLongPress.ts

@@ -1,3 +1,5 @@
+import { Capacitor } from '@capacitor/core'
+import { Haptics } from '@capacitor/haptics'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import DragShortcutZone from '../@types/DragShortcutZone'
@@ -29,6 +31,9 @@ const useToolbarLongPress = ({
     if (disabled) return
     setIsPressed(true)
     dispatch(toolbarLongPress({ shortcut, sourceZone }))
+    if (Capacitor.isNativePlatform()) {
+      Haptics.selectionStart()
+    }
   }, [disabled, dispatch, shortcut, sourceZone])
 
   /** Turn off isPressed and dismiss an alert when long press ends. */

src/util/fastClick.ts

@@ -1,3 +1,5 @@
+import { Capacitor } from '@capacitor/core'
+import { Haptics, ImpactStyle } from '@capacitor/haptics'
 import _ from 'lodash'
 import { isTouch } from '../browser'
 
@@ -27,7 +29,6 @@ const fastClick = isTouch
           const y = e.touches[0].clientY
           touchStart = { x, y }
         }
-
         tapDown?.(e)
       },
       // cancel tap if touchmove exceeds threshold (e.g. with scrolling or dragging)
@@ -42,6 +43,9 @@ const fastClick = isTouch
         }
       }, 16.666),
       onTouchEnd: (e: React.TouchEvent) => {
+        if (Capacitor.isNativePlatform()) {
+          Haptics.impact({ style: ImpactStyle.Light })
+        }
         let cancel = !touchStart
 
         if (touchStart && e.changedTouches.length > 0) {

yarn.lock

@@ -1928,6 +1928,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@capacitor/haptics@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "@capacitor/haptics@npm:6.0.2"
+  peerDependencies:
+    "@capacitor/core": ^6.0.0
+  checksum: 10c0/c514d3b822541b3ac09625a6dd1647c9a3f94f005470c318da9b680d85024d1938da2aeea76d2641c513126bb836e1fef665bb6a84c7d39a90c6d16237b266d5
+  languageName: node
+  linkType: hard
+
 "@capacitor/ios@npm:^6.2.0":
   version: 6.2.0
   resolution: "@capacitor/ios@npm:6.2.0"
@@ -7658,6 +7667,7 @@ __metadata:
     "@capacitor/cli": "npm:^6.2.0"
     "@capacitor/clipboard": "npm:^6.0.2"
     "@capacitor/core": "npm:^6.2.0"
+    "@capacitor/haptics": "npm:^6.0.2"
     "@capacitor/ios": "npm:^6.2.0"
     "@capacitor/keyboard": "npm:^6.0.2"
     "@capacitor/status-bar": "npm:^6.0.1"