4bfea7649d
Currently, only the end handles of the line tool snap. It should be all of them. Line handles work kind of weirdly at the moment: instead of just storing the positions, we store full `TLHandle` objects complete with IDs, `canSnap`/`canBind` properties, etc. Currently, all the handles get written to the store with `canSnap: false`, when really it should be up to the shape util to decide which handles are snappable. This diff replaces the current handles map (from arbitrary ID to `TLHandle`) with just the data we need: a map from index to x/y. The extra information that the `Editor` needs for `TLHandle` is hydrated at runtime (with `canSnap` set to `true` this time!) Fixes TLD-2200 This PR is part of a series - please don't merge it until the things before it have landed! 1. #2827 2. #2831 (you are here) 3. #2793 4. #2841 5. #2845 ### Change Type - [x] `major` — Breaking change [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Create a funky line shape on tldraw.com 2. Paste it into staging and make sure it comes across ok 3. Make some funky line shape in staging - make sure you use dragging, mid-point creation, and shift-clicking - [x] Unit Tests ### Release Notes - Simplify the contents of `TLLineShape.props.handles` |
||
|---|---|---|
| .. | ||
| api | ||
| scripts | ||
| src | ||
| CHANGELOG.md | ||
| LICENSE.md | ||
| README.md | ||
| api-extractor.json | ||
| api-report.md | ||
| 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/tldraw package using @canary for the latest canary release. (Or @alpha for the latest alpha release.)
yarn add @tldraw/tldraw@canary
# or
npm install @tldraw/tldraw@canary
# or
pnpm i @tldraw/tldraw@canary
Then start the local development server.
yarn dev
# or
npm run dev
# or
pnpm dev
Usage
An extremely minimal usage (without our UI) might look like this:
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
export default function () {
return <Tldraw/>
}
See the 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 hello@tldraw.com for more inforion about obtaining a commercial license.
Trademarks
Copyright (c) 2023-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 hello@tldraw.com. You can also join our discord for quick help and support.