Tldraw/packages/tldraw
Steve Ruiz b9b5bd5b81
[fix] Batch tick events (#3181)
This PR fixes an issue where events happening on tick were not batched. 

![Kapture 2024-03-17 at 22 49
52](https://github.com/tldraw/tldraw/assets/23072548/2bcfa335-a38f-46c4-a3f3-434cac61b6ce)

We were listening to the `tick` event directly from the state node,
rather than passing the event into the state chart at the top. This
meant that it was bypassing the regular state chart rules, which was
what got me looking at this; but then I noticed that we also weren't
batching the changes, either. This causes computed stuff to re-compute
after each atom is updated within the `onTick` handler, which can be a
LOT.

Before:
<img width="1557" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/ba8791f2-faec-463d-945a-9f5920826aab">

After:
<img width="1204" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/a00f8e4a-caca-406a-89a2-8cff0e01b642">

It's not game breaking but it's important enough to hotfix at least in
the dot com.

### 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 ️ -->

- [x] `bugfix` — Bug fix
- [ ] `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. Select many shapes.
2. Resize them.

### Release Notes

- Fix a performance issue effecting resizing multiple shapes.
2024-03-18 14:33:36 +00:00
..
api
scripts
src [fix] Batch tick events (#3181) 2024-03-18 14:33:36 +00:00
CHANGELOG.md
LICENSE.md
README.md
api-extractor.json
api-report.md [fix] Batch tick events (#3181) 2024-03-18 14:33:36 +00:00
package.json
setupTests.js
tsconfig.json

README.md

tldraw

tldraw

This package contains the source code for the tldraw library. Learn more at our docs site: tldraw.dev.

Installation

Install the tldraw package.

npm i tldraw

Then start the local development server.

npm run dev

Usage

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function () {
	return <Tldraw />
}

Visit or docs site to learn more. See our examples folder for more examples.

Community

Have questions, comments or feedback? Join our discord or start a discussion.

Distributions

You can find tldraw on npm here.

Contribution

Please see our contributing guide. Found a bug? Please submit an issue.

License

The tldraw source code and its distributions are provided under the tldraw license. This license does not permit commercial use.

If you wish to use this project in commercial product, you need to purchase a commercial license. Please contact us at sales@tldraw.com for more inforion about obtaining a commercial license.

Trademarks

Copyright (c) 2024-present tldraw Inc. The tldraw name and logo are trademarks of tldraw. Please see our trademark guidelines for info on acceptable usage.

Contact

Find us on Twitter at @tldraw or email sales@tldraw.com. You can also join our discord for quick help and support.