[Capacitor] Haptic feedback

[raineorshine]

Use the Capacitor Haptics API to provide physical feedback to the user.

https://capacitorjs.com/docs/apis/haptics

Haptic options:

• impact - light | medium | heavy
• notification - success | warning | error
• vibrate - duration
• selectionStart
• selectionChanged
• selectionEnd

Haptic requirements:

• Gesture
  • start: selectionStart
  • swipe: selectionChanged
  • end: selectionEnd
    • except Back/Forward: impact (light)
    • except Delete: notification (warning)
    • except Delete permanently: notification (warning)
  • cancel: notification (warning)
• Scroll
  • Continuous impact? Like old iPod or Nest wheel.
• Long tap
  • start: selectionStart
• Drag-and-drop
  • start: selectionStart
  • drop target changes: selectionChanged
  • end: selectionEnd
  • cancel: notification (warning)
• Hamburger menu
  • toggle: impact (light)
• Link
  • click: impact (light)
• Button
  • click: impact (light)

Plan for 1–2 iterations of tweaks once initial implementation can be physically tested.

[msdewitt]

@raineorshine I've been looking into this issue for a bit now and I have a few questions we can discuss about it. The majority of these Haptrics changes involve impact (light) and I found that we can make it uniform by adding it during the fastClick.ts file which is used throughout the app.

Is this something you are interested in? It adds a light vibration at almost every 'button action' throughout the app, including links, when you tap the screen anywhere to scroll when you open the hamburger menu, and in most other places.

The selectionStart and selectionEnd probably can't be handled in a generic way like this, but its still nice to find this. Tell me what you think.

[raineorshine]

Yes, agreed!

The only one that I'm unsure of is "when you tap the screen anywhere to scroll". Do you mean when you tap the scroll zone on the right?

We can easily add an option to fastClick to preventHaptic for the few exceptions.

[msdewitt]

@raineorshine, I added selectionChanged to the MultiGesture feature when a user swipes the canvas, but I saw that it triggers each time the canvas is updated. Was this what you considered when you listed it on this ticket? Or were you thinking it would be just a selectionStart and selectionEnd event after the user finishes drawing?

[raineorshine]

The gesture should trigger haptics at the start, at the end, and once for each swipe. So →↓→ would trigger:

→ selectionStart
↓ selectionChanged
→ selectionChanged
[release] selectionEnd

[msdewitt]

@raineorshine Got it. I got that worked out in the new pr.

I had another question about the drag-and-drop feature. I tried adding Haptics to it, but I can't seem to replicate the drag and drop feature. Is there a bug here that I don't know about?

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-11-25.at.11.56.44.mp4

[raineorshine]

Ah yes, drag-and-drop currently has some issues that were introduced in #950. This is being tracked in #2474. The developer responsible is currently held up with some other work. We will have to wait till that is fixed before we can add drag-and-drop haptics.

I won't hold up the milestone if #2474 is still stalled.

[msdewitt]

Alright, thanks for the quick response.