History

Steve Ruiz 79460cbf3a Use canvas bounds for viewport bounds (#2798 ) This PR changes the way that viewport bounds are calculated by using the canvas element as the source of truth, rather than the container. This allows for cases where the canvas is not the same dimensions as the component. (Given the way our UI and context works, there are cases where this is desired, i.e. toolbars and other items overlaid on top of the canvas area). The editor's `getContainer` is now only used for the text measurement. It would be good to get that out somehow. # Pros We can inset the canvas # Cons We can no longer imperatively call `updateScreenBounds`, as we need to provide those bounds externally. ### Change Type - [x] `major` — Breaking change ### Test Plan 1. Use the examples, including the new inset canvas example. - [x] Unit Tests ### Release Notes - Changes the source of truth for the viewport page bounds to be the canvas instead.		2024-02-12 15:03:25 +00:00
..
api	examples: clean up Canvas/Store events and make UiEvents have code snippets (#2770 )	2024-02-07 16:51:04 +00:00
scripts	tldraw zero - package shuffle (#1710 )	2023-07-17 21:22:34 +00:00
src	Use canvas bounds for viewport bounds (#2798 )	2024-02-12 15:03:25 +00:00
api-extractor.json	transfer-out: transfer out	2023-04-25 12:01:25 +01:00
api-report.md	examples: clean up Canvas/Store events and make UiEvents have code snippets (#2770 )	2024-02-07 16:51:04 +00:00
CHANGELOG.md	Update CHANGELOG.md [skip ci]	2024-01-10 12:03:59 +00:00
LICENSE.md	Change licenses to tldraw (#2167 )	2023-12-19 10:41:01 +00:00
package.json	Examples tweaks (#2681 )	2024-02-02 17:36:30 +00:00
README.md	add descriptions to examples (#2375 )	2023-12-27 17:17:18 +00:00
setupTests.js	reactive context menu overrides (#2697 )	2024-01-31 16:35:49 +00:00
tsconfig.json	tldraw zero - package shuffle (#1710 )	2023-07-17 21:22:34 +00:00

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

Contact

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