No description
Find a file
David Sheldrick f15a8797f0
Independent instance state persistence (#1493)
This PR 

- Removes UserDocumentRecordType
  - moving isSnapMode to user preferences
  - moving isGridMode and isPenMode to InstanceRecordType
  - deleting the other properties which are no longer needed.
 
- Creates a separate pipeline for persisting instance state.
  
Previously the instance state records were stored alongside the document
state records, and in order to load the state for a particular instance
(in our case, a particular tab) you needed to pass the 'instanceId'
prop. This prop ended up totally pervading the public API and people ran
into all kinds of issues with it, e.g. using the same instance id in
multiple editor instances.

There was also an issue whereby it was hard for us to clean up old
instance state so the idb table ended up bloating over time.
  
This PR makes it so that rather than passing an instanceId, you load the
instance state yourself while creating the store. It provides tools to
make that easy.

- Undoes the assumption that we might have more than one instance's
state in the store.

- Like `document`, `instance` now has a singleton id
`instance:instance`.
- Page state ids and camera ids are no longer random, but rather derive
from the page they belong to. This is like having a foreign primary key
in SQL databases. It's something i'd love to support fully as part of
the RecordType/Store api.

Tests to do

- [x] Test Migrations
- [x] Test Store.listen filtering
- [x] Make type sets in Store public and readonly
- [x] Test RecordType.createId
- [x] Test Instance state snapshot loading/exporting
- [x] Manual test File I/O
- [x] Manual test Vscode extension with multiple tabs
- [x] Audit usages of store.query
- [x] Audit usages of changed types: InstanceRecordType, 'instance',
InstancePageStateRecordType, 'instance_page_state', 'user_document',
'camera', CameraRecordType, InstancePresenceRecordType,
'instance_presence'
- [x] Test user preferences
- [x] Manual test isSnapMode and isGridMode and isPenMode
- [ ] Test indexedDb functions
- [x] Add instanceId stuff back


### Change Type

- [x] `major` — Breaking Change


### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] Webdriver tests

### Release Notes

- Add a brief release note for your PR here.
2023-06-05 14:11:07 +00:00
.github [chore] remove webdriver dependencies / scripts (#1488) 2023-05-30 15:23:28 +00:00
.husky [chore] remove yarnrc-private.yml (#1427) 2023-05-22 08:56:05 +00:00
.yarn transfer-out: transfer out 2023-04-25 12:01:25 +01:00
apps Independent instance state persistence (#1493) 2023-06-05 14:11:07 +00:00
assets Add support for project names (#1340) 2023-06-01 18:46:26 +00:00
config readmes 2023-05-04 13:47:56 +01:00
e2e/screenshots [1/3] initial highlighter shape/tool (#1401) 2023-06-01 12:46:13 +00:00
packages Independent instance state persistence (#1493) 2023-06-05 14:11:07 +00:00
scripts tlschema cleanup (#1509) 2023-06-03 20:46:53 +00:00
.eslintignore enable eslint for test files (#1363) 2023-05-12 13:19:39 +00:00
.eslintplugin.js transfer-out: transfer out 2023-04-25 12:01:25 +01:00
.eslintrc.js replace console.log with nicelog (#1496) 2023-06-01 18:01:49 +00:00
.gitignore Add playwright tests (#1484) 2023-05-30 15:28:56 +01:00
.ignore [feature] ui events (#1326) 2023-05-11 22:14:58 +00:00
.prettierignore Revert 09c36781 & tweak linting (#1501) 2023-06-02 10:45:51 +00:00
.prettierrc [fix] pick a better default language (#1201) 2023-04-29 23:06:02 +00:00
.yarnrc.yml lite: tweak lockfile name 2023-04-25 12:01:38 +01:00
CODE_OF_CONDUCT.md transfer-out: transfer out 2023-04-25 12:01:25 +01:00
CONTRIBUTING.md [improvement] readme / contributing (#1199) 2023-05-03 08:32:52 +00:00
lazy.config.ts [fix] Don't synchronize isReadOnly (#1396) 2023-05-17 10:45:43 +00:00
lerna.json transfer-out: transfer out 2023-04-25 12:01:25 +01:00
LICENSE transfer-out: transfer out 2023-04-25 12:01:25 +01:00
package.json [chore] remove webdriver dependencies / scripts (#1488) 2023-05-30 15:23:28 +00:00
public-yarn.lock Rename tlstore to store (#1507) 2023-06-03 08:59:04 +00:00
README.md Update docs links + guides + build (#1422) 2023-05-22 08:21:54 +00:00

tldraw

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 inifinite 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 this StackBlitz.

import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/editor.css'
import '@tldraw/tldraw/ui.css'

function TldrawExample() {
	return <Tldraw />
}

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/src folder.

  • eg: localhost:5420 for the basic example.
  • eg: localhost:5420/api for 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:

  • /apps contains the source for our applications
  • /packages contains the source for our public packages
  • /scripts contains scripts used for building and publishing
  • /assets contains icons and translations relied on by the app

Applications

Packages

  • editor: the tldraw editor
  • ui: the editor's user interface
  • tldraw: the main tldraw package containing both the editor and the UI
  • primitives: low-level primitives for working with vectors and geometry
  • tlschema: shape definitions and migrations
  • tlsync-client: a library for (locally) syncronizing editor instances
  • tlstore: an in-memory reactive database
  • tlvalidate: a validation library used for run-time validation
  • tlassets: a library for working with tldraw's fonts and translations
  • file-format: a library for working with tldraw's .tldr file format
  • utils: low-level data utilities shared by other libraries

Community

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

Distributions

You can find tldraw on npm here.

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.

Note: we are currently unable to accept contributions on the @tldraw/tldraw or @tldraw/editor packages while we work out our final licensing.

Contact

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