910be6073f
We'd like to make the @tldraw/editor layer more independent of specific shapes. Unfortunately there are many places where shape types and certain shape behavior is deeply embedded in the Editor. This PR begins to refactor out dependencies between the editor library and shape utils. It does this in two ways: - removing shape utils from the arguments of `isShapeOfType`, replacing with a generic - removing shape utils from the arguments of `getShapeUtil`, replacing with a generic - moving custom arrow info cache out of the util and into the editor class - changing the a tool's `shapeType` to be a string instead of a shape util We're here trading type safety based on inferred types—"hey editor, give me your instance of this shape util class"—for knowledge at the point of call—"hey editor, give me a shape util class of this type; and trust me it'll be an instance this shape util class". Likewise for shapes. ### A note on style We haven't really established our conventions or style when it comes to types, but I'm increasingly of the opinion that we should defer to the point of call to narrow a type based on generics (keeping the types in typescript land) rather than using arguments, which blur into JavaScript land. ### Change Type - [x] `major` — Breaking change ### Test Plan - [x] Unit Tests ### Release Notes - removes shape utils from the arguments of `isShapeOfType`, replacing with a generic - removes shape utils from the arguments of `getShapeUtil`, replacing with a generic - moves custom arrow info cache out of the util and into the editor class - changes the a tool's `shapeType` to be a string instead of a shape util |
||
|---|---|---|
| .github | ||
| .husky | ||
| .yarn | ||
| apps | ||
| assets | ||
| config | ||
| docs | ||
| packages | ||
| scripts | ||
| .eslintignore | ||
| .eslintplugin.js | ||
| .eslintrc.js | ||
| .gitignore | ||
| .ignore | ||
| .prettierignore | ||
| .prettierrc | ||
| .yarnrc.yml | ||
| CHANGELOG.md | ||
| CODE_OF_CONDUCT.md | ||
| CONTRIBUTING.md | ||
| lazy.config.ts | ||
| lerna.json | ||
| LICENSE | ||
| package.json | ||
| public-yarn.lock | ||
| README.md | ||
tldraw
Welcome to the public monorepo for tldraw.
What is tldraw?
tldraw is a collaborative digital whiteboard available at tldraw.com. Its editor, user interface, and other underlying libraries are open source and available in this repository. They are also distributed on npm. You can use tldraw to create a drop-in whiteboard for your product or as the foundation on which to build your own infinite canvas applications.
Learn more at tldraw.dev.
Note
This repo contains source code for the current version of tldraw. You can find the source for the original version here.
Installation & Usage
To learn more about using tldraw in your React application, follow our guide here or see the examples sandbox.
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
export default function () {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
)
}
Local development
To run the local development server, first clone this repo.
Install dependencies:
yarn
Start the local development server:
yarn dev
Open the example project at localhost:5420.
Examples
Our development server contains several examples that demonstrates different ways that you can customize tldraw or use its APIs. Each example is found in the apps/examples folder.
- eg:
localhost:5420for the basic example. - eg:
localhost:5420/apifor the API example.
To learn more about using tldraw, visit our docs.
About this repository
Top-level layout
This repository's contents is divided across four primary sections:
/appscontains the source for our applications/packagescontains the source for our public packages/scriptscontains scripts used for building and publishing/assetscontains icons and translations relied on by the app/docscontains the content for our docs site at tldraw.dev
Applications
examples: our local development / examples projectvscode: our Visual Studio Code extension
Packages
assets: a library for working with tldraw's fonts and translationseditor: the tldraw editorfile-format: a library for working with tldraw's.tldrfile formatindices: a library for working with tldraw's indicespolyfills: a collection of polyfills used by tldrawprimitives: low-level primitives for working with vectors and geometrystate: a signals library, also known as signiastore: an in-memory reactive databasetldraw: the main tldraw package containing both the editor and the UItlschema: shape definitions and migrationsui: the editor's user interfaceutils: low-level data utilities shared by other librariesvalidate: a validation library used for run-time validation
Community
Have questions, comments or feedback? Join our discord or start a discussion.
Distributions
You can find tldraw on npm here.
At the moment the tldraw package is in alpha. We also ship a canary version which is always up to date with the main branch of this repo.
License
The source code for various apps and packages in this repository (as well as our 2.0+ distributions and releases) are currently licensed under Apache-2.0. These licenses are subject to change in our upcoming 2.0 release. If you are planning to use tldraw in a commercial product, please reach out at hello@tldraw.com.
Contribution
Please see our contributing guide. Found a bug? Please submit an issue.
Contact
Find us on Twitter at @tldraw or email hello@tldraw.com. You can also join our discord for quick help and support.