[mobile] Cancel gesture diagram

[raineorshine]

The gesture is cancelled when the current sequence of swipes does not match any commands (i.e. "scribble").

Steps to Reproduce

1. Simulate mobile using the device toolbar from Chrome Dev Tools.
2. Start swiping

Current Behavior

Cancel does not appear in the Command Palette (gesture menu).

Once the current sequence of swipes matches no gesture, the gesture menu switches to an alert that says "✗ Cancel Gesture".

Expected Behavior

• Cancel should always appear at the end of the gesture menu.
• Once the current sequence of swipes matches no gesture, do not switch the gesture menu to an alert that says "✗ Cancel Gesture". Instead, highlight the text and svg of the the cancel gesture just like other gestures when they are selected. Otherwise, render the cancel gesture diagram in the foreground color.
• Remove GESTURE_CANCEL_ALERT_TEXT and related functionality that is no longer used.
• Pass null to path in the GestureDiagram component to indicate the Cancel gesture. Document in prop JSDOC.

  em/src/components/GestureDiagram.tsx

  Line 18 in 5bfeca0

  path: GesturePath

• Render the cancel gesture with the same proportions and stroke width as the other gesture diagrams.
• Render with correct proportions at all font sizes.
• Add the cancel gesture to https://github.com/cybersemics/em/blob/5bfeca0d0823f3863d68e6b2202ccef6db8251b5/src/components/modals/TestGestureDiagram.tsx.

A mockup of the Cancel gesture diagram:

Cancel gesture diagram SVG:

<svg width="26" height="22" viewBox="0 0 26 22" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.2725 0.714111C7.51965 3.8284 5.38488 6.62757 3.32706 9.53916C2.78228 10.31 2.34409 10.9449 1.86001 11.742C1.61923 12.1385 1.24853 12.6919 1.15146 13.1773C1.13411 13.264 1.17847 13.2863 1.25138 13.2681C1.67295 13.1627 2.15668 12.9113 2.52768 12.7276C7.4968 10.2679 11.7666 6.68876 16.4261 3.73452C18.1996 2.61011 20.1063 1.47669 22.1308 0.863996C22.8342 0.651122 22.5133 1.3142 22.3443 1.74968C21.91 2.86867 21.1473 3.86772 20.4094 4.80188C18.9097 6.70051 16.9227 8.26976 15.0181 9.74354C12.4635 11.7203 9.78768 13.554 7.29674 15.6118C6.3193 16.4192 5.37795 17.2552 4.47618 18.1462C4.01607 18.6008 3.51334 19.0404 3.18172 19.6042C3.0095 19.8969 3.10278 19.9327 3.39519 19.9221C4.08649 19.897 4.79822 19.8572 5.47541 19.7086C7.05389 19.3623 8.53153 18.5857 10.0219 17.9872C11.5619 17.3688 13.1128 16.7992 14.632 16.1296C17.0018 15.085 19.356 14.0449 21.4995 12.5777C22.2937 12.0341 23.0976 11.5068 23.884 10.9517C24.1828 10.7408 24.8514 10.0682 24.8514 10.4339C24.8514 10.8715 24.3341 11.4593 24.1247 11.7874C23.4648 12.8219 22.7443 13.8086 21.99 14.776C20.5168 16.6656 18.6452 17.9367 16.6759 19.2726C15.9788 19.7455 15.2156 20.2057 14.5821 20.7669C14.4752 20.8616 14.332 21.0133 14.2777 21.153C14.1713 21.4267 14.8675 21.199 15.1589 21.1621C16.8507 20.9478 18.5347 20.6994 20.2277 20.4989" stroke="white" stroke-width="1.25" stroke-linecap="round"/> </svg>

[Howlmaster]

Hi @raineorshine

I hope you’re doing well! I noticed the issue with the gesture cancellation in the command palette, and I’d love to help out with it. I think I can make the changes needed to ensure the cancel gesture is always visible and looks right.

If you’d like, feel free to assign this task to me. I would like to contribute to your project.

Thanks!

[raineorshine]

Hi, thanks for your interest! I would be grateful for your help, and em is a fun codebase to work on. Let me know if you need any help setting up the project. I have a couple recommendations specifically for this issue:

• Take a look at Add question mark gesture to Help command #2745 as a point of comparison as it bears a lot of similarities to this issue.
• Open a draft PR with you initial work so I can make sure you're on the right track.

There are a lot of points to the Expected Behavior (above), so make sure to go through them closely and let me know if anything needs clarification.

Thanks!