tldraw/packages
Steve Ruiz 58286db90c
Add long press event (#3275)
This PR adds a "long press" event that fires when pointing for more than
500ms. This event is used in the same way that dragging is used (e.g. to
transition to from pointing_selection to translating) but only on
desktop. On mobile, long presses are used to open the context menu.

![Kapture 2024-03-26 at 18 57
15](https://github.com/tldraw/tldraw/assets/23072548/34a7ee2b-bde6-443b-93e0-082453a1cb61)

## Background

This idea came out of @TodePond's #3208 PR. We use a "dead zone" to
avoid accidentally moving / rotating things when clicking on them, which
is especially common on mobile if a dead zone feature isn't implemented.
However, this makes it difficult to make "fine adjustments" because you
need to drag out of the dead zone (to start translating) and then drag
back to where you want to go.

![Kapture 2024-03-26 at 19 00
38](https://github.com/tldraw/tldraw/assets/23072548/9a15852d-03d0-4b88-b594-27dbd3b68780)

With this change, you can long press on desktop to get to that
translating state. It's a micro UX optimization but especially nice if
apps want to display different UI for "dragging" shapes before the user
leaves the dead zone.

![Kapture 2024-03-26 at 19 02
59](https://github.com/tldraw/tldraw/assets/23072548/f0ff337e-2cbd-4b73-9ef5-9b7deaf0ae91)

### Change Type

<!--  Please select a 'Scope' label ️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [ ] `bugfix` — Bug fix
- [x] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan

1. Long press shapes, selections, resize handles, rotate handles, crop
handles.
2. You should enter the corresponding states, just as you would have
with a drag.

- [ ] Unit Tests TODO

### Release Notes

- Add support for long pressing on desktop.
2024-04-04 21:50:01 +00:00
..
assets ui: make toasts look more toasty (#2988) 2024-03-27 09:41:13 +00:00
editor Add long press event (#3275) 2024-04-04 21:50:01 +00:00
namespaced-tldraw use native structuredClone on node, cloudflare workers, and in tests (#3166) 2024-03-18 17:16:09 +00:00
state Add white migration (#3334) 2024-04-04 18:16:17 +00:00
store Fix typo. (#3306) 2024-03-29 12:32:25 +00:00
tldraw Add long press event (#3275) 2024-04-04 21:50:01 +00:00
tlschema Add white migration (#3334) 2024-04-04 18:16:17 +00:00
tlsync Revert "squish sync data events before sending them out" (#3331) 2024-04-03 10:31:28 +01:00
utils Input buffering (#3223) 2024-04-02 14:29:14 +00:00
validate React-powered SVG exports (#3117) 2024-03-25 14:16:55 +00:00