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/CommandPalette.tsx

@@ -1,3 +1,5 @@
+import { Capacitor } from '@capacitor/core'
+import { Haptics } from '@capacitor/haptics'
 import React, { FC, ReactElement, useCallback, useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector, useStore } from 'react-redux'
 import { TransitionGroup } from 'react-transition-group'
@@ -322,6 +324,13 @@ const CommandPalette: FC = () => {
 
   // Select the first shortcut when the input changes.
   useEffect(() => {
+    if (shortcuts[0]) {
+      if (shortcuts[0].id != 'favorite' && shortcuts[0].id != 'cursorBack') {
+        if (Capacitor.isNativePlatform()) {
+          Haptics.selectionChanged()
+        }
+      }
+    }
     setSelectedShortcut(shortcuts[0])
   }, [search, shortcuts, setSelectedShortcut])
 

src/components/MultiGesture.tsx

@@ -1,3 +1,5 @@
+import { Capacitor } from '@capacitor/core'
+import { Haptics, NotificationType } from '@capacitor/haptics'
 import React, { PropsWithChildren } from 'react'
 import { GestureResponderEvent, PanResponder, PanResponderInstance, View } from 'react-native'
 import Direction from '../@types/Direction'
@@ -129,6 +131,9 @@ class MultiGesture extends React.Component<MultiGestureProps> {
         // disable scroll in the gesture zone on the left side of the screen
         // (reverse in left-handed mode)
         if (inGestureZone && !props.shouldCancelGesture?.()) {
+          if (Capacitor.isNativePlatform()) {
+            Haptics.selectionStart()
+          }
           this.disableScroll = true
         } else {
           this.abandon = true
@@ -144,6 +149,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()
     })
@@ -215,6 +223,9 @@ class MultiGesture extends React.Component<MultiGestureProps> {
             x: gestureState.moveX,
             y: gestureState.moveY,
           }
+          if (Capacitor.isNativePlatform()) {
+            Haptics.selectionEnd()
+          }
           this.props.onEnd?.({ sequence: this.sequence, clientStart: this.clientStart!, clientEnd, e })
         }
         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/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"