A few updates to tldraw.com. First off, lots of perf improvements, even when lots of shapes are on the screen. Slickest SVG canvas on the web.
Slick when creating shapes, too.
I'm also handling window resize events much better. There's a slight debounce before showing shapes that had previously fallen outside of the viewport.
(The gifs so far were all at regular speed, btw)
I've also added a Text and Arrows to the classes that can be used in the code editor, along with a new TextControl for setting text.
We've also got a good start on the code editor's docs.
There's been plenty of under-the-hood work on the code editor (essentially building a public object-oriented API around the private functional one).
And even further under the hood, you'll find a few dozen new tests. Already finding and fixing plenty of bugs, and now that I've got the framework all set up, I'm on my way to total coverage for user actions. Pretty wild to see how many things you can do in this app.
Thanks again to the 92(!) of you who have sponsored me and this project. Check it out for yourself at tldraw.com.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
Figma has a “wireframe view” that might help here as a fallback, if it means keeping images etc out of memory, though it would be up to the app to switch into that. (And actually I’m not even sure if that would work)
For tldraw we have a limit of shapes per page and pages per project but it’s still theoretically possible to crash it out via memory depending on your browser.
Here's the full interaction, complete with hover indicators.
|
Note that you can interact with text directly either: a) when editing text or b) when the text tool is selected. This will mean you can't create text on top of other text, but I'm guessing this is okay.
In @figma, holding shift while drawing a selection box over items will: 1. select deselected items 2. deselect selected items
Is this the right behavior? Have you ever accidentally selected / deselected items while shift-selecting?
@figma I remember working out some more complicated logic here with a rule like "if any new items are being added to the selection, don't deselect any other items"
Remind me next time to migrate the database before shipping runtime validation 💀
In tldraw’s beta db, there were lots of different versions of our data scattered around, including some from the wild times before we wrote client-side migrations, and some that just included broken data, x = NaN etc.
We’d written validation in order to catch this type of bad data when it came into the app. We didn’t write any recovery from the bad data, the app would just throw as soon as it ran into it.
The ChatGPT thing really made me appreciate how quickly AI goes from novelty to expectation. Airplane Wi-Fi phenomenon
The bar just keeps getting higher, meaning a lot of cool stuff is going to fall into the “neat? I guess?” range
Also any time that AI creates an aesthetic then the fashion demon is in the room. Those AI avatars are going to look extremely 2022, which is fine for now but not for 2023.
Another canvas battle: what happens if you start drawing a selection box and then scroll using your mouse wheel / trackpad?
Most apps only update the selection box when you move your cursor. The correct behavior (imo) is to update that selection box whenever your cursor's position in the document changes.
An app translates the cursor's screen position into document position based on where the camera is. If the camera changes (e.g. due to a scroll or zoom) then the cursor position should change too—and update that selection box!