[experiment] handles prototype 1: no gods no handles

[SomeHats]

(i've not actually removed the handles code in this pr - just take a look at the speech bubble example for what a new API might look like)

in this version, I've added a couple of very light-weight additions to the library:

• A couple of utilities for mutating the state chart (.find, .addChild)
• A <HandleControl position onPointerDown /> component designed to be rendered with InFrontOfTheCanvas

Then, in the example i've implemented what is effectively a handle on top of that:

• the <SpeechBubbleHandle /> component adds its node to the state chart on mount
• it renders the handle when a speech bubble (and only a speech bubble) is selected
• when someone interacts with the speech bubble, we block the event from reaching tldraw's normal state chart, and instead add our own transition into the new state node

This works pretty well! There are some big drawbacks though:

• blocking the event from reaching our state chart means we don't get things like pointer capture, updates to inputs, gesture recognition, etc
• requiring users to pass this in to OnTopOfCanvas is a pain, and wouldn't scale to doing this for every single shape
• the state tree is conditional on react - so we can't test easily
• imo our state tree is pretty cumbersome to work with - it's one of the oldest parts of this codebase, has a bunch of weird quirks where the abstraction doesn't quite fit the use case (e.g. gesture recognition and tool masks), and I think could do with the same treatment that selection & ui composition have received

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
examples	✅ Ready (Inspect)	Visit Preview	Feb 26, 2024 2:53pm

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
tldraw-docs	⬜️ Ignored (Inspect)		Feb 26, 2024 2:53pm

[steveruizok]

Which tool should be shown as selected when this state is active? For example, creating an arrow technically goes to the select.dragging_handle, but we display the arrow tool as active.