Commit graph

554 commits

Author SHA1 Message Date
Taha
234ac05d10
Add button to Examples to request an example (#2597)
This PR adds an issue template to request an example on the repo. And
adds a button to the examples app to request an example.

I've added a blue background to the view code button to distinguish it
from the request example. I think it makes the most sense as our primary
button for the page.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Add a button to request an example to the examples app

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-26 14:44:19 +00:00
Taha
9a986ff05e
Update README and examples copy in the docs (#2594)
This PR should make the examples page copy clearer:

1. Moved the examples app copy above the framework specific and yjs
copy, as it's more likely to be what the user is looking for.
2. Moved the codesandbox below the copy, user no longer needs to scroll
to see most of the text.
3. Gives more hints about what can be found in the examples app and also
highlights that running it locally is the better experience.
4. Added some clarification on the relationship between the
framework-specific examples/yjs example and the examples app
5. Updates the tldraw repo README accordingly.
6. Removes (development) from the Basic example.

Next steps:
- The codesandbox
   - quite noisy, would be good to hide the navigation
   - doesn't reliably show the code and implementation at the same time
   - Should stack vertically on small screens

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Update examples copy and tldraw README
2024-01-26 14:00:51 +00:00
Steve Ruiz
0d2fa6ae24
Restore vercel.jsons (#2650)
This PR restores the vercel.json files in the examples/dotcom
directories.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
2024-01-25 23:24:22 +00:00
Steve Ruiz
327255bd5a
Update layout.tsx (#2619)
Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Add a brief release note for your PR here.
2024-01-25 23:05:49 +00:00
Mime Čuvalo
2330effea9
[Improvement] Share zone styling (#2628)
### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Tweaked user avatar size.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-25 20:29:25 +00:00
Dan Groshev
8fffd87a4f
remove erroneous mount entry from fly.toml (#2644)
Fly CLI complains about the duplicate `mount` entry to `fly.toml`,
failing the build

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package
2024-01-25 16:49:57 +00:00
Dan Groshev
5953b1cdd4
make Huppy deployable (again) (#2632)
New Next requires a minor Node update. Bumped it _just for this
container_ (ugh), and between the update and new Yarn `yarn workspaces
focus` works and the container builds just fine with Fly CLI. The
Dockerfile hack is now removed.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package
2024-01-25 12:33:03 +00:00
Mime Čuvalo
014a95cf51
debug: add FPS counter (#2558)
Adds an FPS counter to detect when there's a UI slowdown.
(btw, drive-by typo fix for a file)


https://github.com/tldraw/tldraw/assets/469604/b83d4b10-35d9-4584-af46-c63b5cc107ac

### Change Type

- [ ] `patch` — Bug fix
- [x] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. 

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Adds FPS counter to debug panel.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-24 12:23:26 +00:00
Mime Čuvalo
07cda7ef9f
arrows: add ability to change label placement (#2557)
This adds the ability to drag the label on an arrow to a different
location within the line segment/arc.


https://github.com/tldraw/tldraw/assets/469604/dbd2ee35-bebc-48d6-b8ee-fcf12ce91fa5

- A lot of the complexity lay in ensuring a fixed distance from the ends
of the arrowheads.
- I added a new type of handle `text-adjust` that makes the text box the
very handle itself.
- I added a `ARROW_HANDLES` enum - we should use more enums!
- The bulk of the changes are in ArrowShapeUtil — check that out in
particular obviously :)

Along the way, I tried to improve a couple spots as I touched them:
- added some more documentation to Vec.ts because some of the functions
in there were obscure/new to me. (at least the naming, hah)
- added `getPointOnCircle` which was being done in a couple places
independently and refactored those places.

### Questions
- the `getPointOnCircle` API changed. Is this considered breaking and/or
should I leave the signature the same? Wasn't sure if it was a big deal
or not.
- I made `labelPosition` in the schema always but I guess it could have
been optional? Lemme know if there's a preference.
- Any feedback on tests? Happy to expand those if necessary.

### Change Type

- [ ] `patch` — Bug fix
- [x] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. For arrow in [straightArrow, curvedArrow] test the following:
   a. Label in the middle
   b. Label at both ends of the arrow
   c. Test arrows in different directions
d. Rotating the endpoints and seeing that the label stays at the end of
the arrow at a fixed width.
   e. Test different stroke widths.
   f. Test with different arrowheads.
2. Also, test arcs that are more circle like than arc-like.

- [x] Unit Tests
- [ ] End to end tests

### Release Notes

- Adds ability to change label position on arrows.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
Co-authored-by: alex <alex@dytry.ch>
2024-01-24 10:19:20 +00:00
Mitja Bezenšek
d1bc456162
Add context toolbar example. (#2596)
Adds a context toolbar example which allows you to change shape's size.


https://github.com/tldraw/tldraw/assets/2523721/527af280-af19-4142-ac2e-46dd07559d14

Works when one or more shapes (which support size property) are
selected.

Solves #2549

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Add context toolbar example.

---------

Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>
2024-01-24 09:38:35 +00:00
Steve Ruiz
fe254c605b
Use simple example (#2561)
This PR replaces the stackblitz embed with a simple codesandbox embed on
our docs site.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
2024-01-21 14:55:29 +00:00
Alex
e848768e18
fix: replaced dead links (#2567)
Fixes dead links in the Assets documentation page and replaces with
working links. Fixes #2566 .

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

None required. 

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- N/A

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-21 13:38:16 +00:00
David Sheldrick
ade38247d8
[dotcom] Delete service worker, cache tldraw assets (#2552)
A few things happening here

- Delete our service worker. Turns out that a couple of years back
browsers decided that a service worker is no longer required for a PWA
so you can just have the manifest and still install on the user's
device.
- Cache tldraw's assets as part of the dotcom vite asset pipeline. This
allows them to participate in the asset coalescing (preserving old
versions of asset files so old clients don't stop working when you
deploy new versions of things, see
https://github.com/tldraw/brivate/pull/3132 for more context).
- Add a new 'imports.vite.js' file to the assets package, because we
import a bunch of json translation files, and vite imports .json files
as parsed json objects instead of string urls, and there's no good way
to tell it not to. Even if there was we wouldn't want to impose that
config on our users. So another way to tell vite to load any asset as a
url string is to append `?url` to the end of the import path. That's
what this file does.

closes [#2486](https://github.com/tldraw/tldraw/issues/2486)

### Change Type

- [x] `minor` — New feature


[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Fix 'could not load assets' error that we often see on tldraw.com
after a deploy
2024-01-19 15:31:01 +00:00
Dan Groshev
5ce38563e9
Bump Yarn to 4.0.2 and add version constraints (#2481)
This PR bumps Yarn to 4.0.2, adds version constraints and fixes reported
problems.

Current constraints (per @ds300):

1. all dependencies (both prod and dev) should have consistent versions
across the project
2. only the root `package.json` should have `packageManager` set

Removed 54 packages due to deduplication.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [x] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

<details>

<summary>An example of a report with a bunch of problems</summary>

```
❯ yarn constraints
➤ Errors prefixed by '⚙' can be fixed by running yarn constraints --fix

├─ @tldraw/monorepo@workspace:.
│  ├─ Conflict detected in constraint targeting devDependencies["@types/react"]; conflicting values are:
│  │  ├─ '^18.2.47' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^18.2.33' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["@typescript-eslint/eslint-plugin"]; conflicting values are:
│  │  ├─ '^5.57.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^5.10.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["@typescript-eslint/parser"]; conflicting values are:
│  │  ├─ '^5.57.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^5.10.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["eslint"]; conflicting values are:
│  │  ├─ '^8.37.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '8.36.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["eslint-config-prettier"]; conflicting values are:
│  │  ├─ '^8.8.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^8.3.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["eslint-plugin-react"]; conflicting values are:
│  │  ├─ '^7.32.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '7.28.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["prettier-plugin-organize-imports"]; conflicting values are:
│  │  ├─ '^3.2.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^3.2.3' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["tsx"]; conflicting values are:
│  │  ├─ '^3.12.7' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^4.0.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ Conflict detected in constraint targeting devDependencies["typescript"]; conflicting values are:
│     ├─ '^5.2.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│     └─ '^5.0.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│
├─ @tldraw/docs@workspace:apps/docs
│  ├─ Conflict detected in constraint targeting dependencies["@types/ws"]; conflicting values are:
│  │  ├─ '^8.5.9' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^8.5.3' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["@vercel/analytics"]; conflicting values are:
│  │  ├─ '^1.1.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^1.0.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["concurrently"]; conflicting values are:
│  │  ├─ '^8.2.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  ├─ '^8.2.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '7.0.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["dotenv"]; conflicting values are:
│  │  ├─ '^16.3.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^16.0.3' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["eslint"]; conflicting values are:
│  │  ├─ '^8.37.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '8.36.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["eslint-config-next"]; conflicting values are:
│  │  ├─ '13.2.4' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '12.2.5' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["next"]; conflicting values are:
│  │  ├─ '^14.0.4' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^13.2.3' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["prettier-plugin-organize-imports"]; conflicting values are:
│  │  ├─ '^3.2.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^3.2.3' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["react"]; conflicting values are:
│  │  ├─ '18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["react-dom"]; conflicting values are:
│  │  ├─ '18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["tsx"]; conflicting values are:
│  │  ├─ '^3.12.7' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^4.0.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["typescript"]; conflicting values are:
│  │  ├─ '^5.2.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^5.0.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["ws"]; conflicting values are:
│  │  ├─ '^8.14.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  ├─ '^8.13.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^8.16.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ dotcom@workspace:apps/dotcom
│  ├─ Conflict detected in constraint targeting dependencies["@radix-ui/react-popover"]; conflicting values are:
│  │  ├─ '1.0.6-rc.5' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^1.0.7' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["@vercel/analytics"]; conflicting values are:
│  │  ├─ '^1.1.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^1.0.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["react"]; conflicting values are:
│  │  ├─ '18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["react-dom"]; conflicting values are:
│  │  ├─ '18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["react-router-dom"]; conflicting values are:
│  │  ├─ '^6.17.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^6.9.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["@types/react"]; conflicting values are:
│  │  ├─ '^18.2.47' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^18.2.33' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["dotenv"]; conflicting values are:
│  │  ├─ '^16.3.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^16.0.3' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["vite"]; conflicting values are:
│  │  ├─ '^5.0.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^4.3.4' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["ws"]; conflicting values are:
│  │  ├─ '^8.14.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  ├─ '^8.13.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^8.16.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ dotcom-asset-upload@workspace:apps/dotcom-asset-upload
│  ├─ Conflict detected in constraint targeting dependencies["itty-router"]; conflicting values are:
│  │  ├─ '^2.6.6' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^4.0.13' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["@types/ws"]; conflicting values are:
│  │  ├─ '^8.5.9' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^8.5.3' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ @tldraw/bookmark-extractor@workspace:apps/dotcom-bookmark-extractor
│  ├─ Conflict detected in constraint targeting dependencies["tslib"]; conflicting values are:
│  │  ├─ '^2.6.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^2.4.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["typescript"]; conflicting values are:
│  │  ├─ '^5.2.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^5.0.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ @tldraw/dotcom-worker@workspace:apps/dotcom-worker
│  ├─ Conflict detected in constraint targeting dependencies["itty-router"]; conflicting values are:
│  │  ├─ '^2.6.6' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^4.0.13' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["concurrently"]; conflicting values are:
│  │  ├─ '^8.2.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  ├─ '^8.2.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '7.0.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["typescript"]; conflicting values are:
│  │  ├─ '^5.2.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^5.0.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ examples.tldraw.com@workspace:apps/examples
│  ├─ Conflict detected in constraint targeting dependencies["@vercel/analytics"]; conflicting values are:
│  │  ├─ '^1.1.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^1.0.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["react"]; conflicting values are:
│  │  ├─ '18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["react-dom"]; conflicting values are:
│  │  ├─ '18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["react-router-dom"]; conflicting values are:
│  │  ├─ '^6.17.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^6.9.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["vite"]; conflicting values are:
│  │  ├─ '^5.0.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^4.3.4' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["dotenv"]; conflicting values are:
│  │  ├─ '^16.3.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^16.0.3' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ huppy@workspace:apps/huppy
│  ├─ Conflict detected in constraint targeting dependencies["next"]; conflicting values are:
│  │  ├─ '^14.0.4' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^13.2.3' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["react"]; conflicting values are:
│  │  ├─ '18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["react-dom"]; conflicting values are:
│  │  ├─ '18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["eslint-config-next"]; conflicting values are:
│  │  ├─ '13.2.4' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '12.2.5' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ @tldraw/vscode-editor@workspace:apps/vscode/editor
│  ├─ Conflict detected in constraint targeting devDependencies["@types/react"]; conflicting values are:
│  │  ├─ '^18.2.47' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^18.2.33' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["concurrently"]; conflicting values are:
│  │  ├─ '^8.2.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  ├─ '^8.2.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '7.0.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["dotenv"]; conflicting values are:
│  │  ├─ '^16.3.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^16.0.3' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["react"]; conflicting values are:
│  │  ├─ '18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["react-dom"]; conflicting values are:
│  │  ├─ '18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^18.2.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["tslib"]; conflicting values are:
│  │  ├─ '^2.6.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^2.4.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ tldraw-vscode@workspace:apps/vscode/extension
│  ├─ Conflict detected in constraint targeting devDependencies["@typescript-eslint/eslint-plugin"]; conflicting values are:
│  │  ├─ '^5.57.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^5.10.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["@typescript-eslint/parser"]; conflicting values are:
│  │  ├─ '^5.57.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^5.10.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["tslib"]; conflicting values are:
│  │  ├─ '^2.6.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^2.4.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["tsx"]; conflicting values are:
│  │  ├─ '^3.12.7' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^4.0.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ config@workspace:config
│  ├─ Conflict detected in constraint targeting dependencies["eslint-config-prettier"]; conflicting values are:
│  │  ├─ '^8.8.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^8.3.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting dependencies["eslint-plugin-react"]; conflicting values are:
│  │  ├─ '^7.32.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '7.28.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ ⚙ Missing field packageManager; expected null
│
├─ @tldraw/assets@workspace:packages/assets
│  └─ ⚙ Missing field packageManager; expected null
│
├─ @tldraw/editor@workspace:packages/editor
│  ├─ Conflict detected in constraint targeting devDependencies["@testing-library/jest-dom"]; conflicting values are:
│  │  ├─ '^5.16.5' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^5.14.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["jest-canvas-mock"]; conflicting values are:
│  │  ├─ '^2.5.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^2.5.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["jest-environment-jsdom"]; conflicting values are:
│  │  ├─ '^29.4.3' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^28.1.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ @tldraw/state@workspace:packages/state
│  ├─ Conflict detected in constraint targeting devDependencies["@types/react"]; conflicting values are:
│  │  ├─ '^18.2.47' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^18.2.33' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ @tldraw/store@workspace:packages/store
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ @tldraw/tldraw@workspace:packages/tldraw
│  ├─ Conflict detected in constraint targeting dependencies["@radix-ui/react-popover"]; conflicting values are:
│  │  ├─ '1.0.6-rc.5' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^1.0.7' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["@testing-library/jest-dom"]; conflicting values are:
│  │  ├─ '^5.16.5' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^5.14.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["jest-canvas-mock"]; conflicting values are:
│  │  ├─ '^2.5.1' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^2.5.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["jest-environment-jsdom"]; conflicting values are:
│  │  ├─ '^29.4.3' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^28.1.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ @tldraw/tlschema@workspace:packages/tlschema
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ @tldraw/tlsync@workspace:packages/tlsync
│  ├─ Conflict detected in constraint targeting dependencies["ws"]; conflicting values are:
│  │  ├─ '^8.14.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  ├─ '^8.13.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^8.16.0' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  ├─ Conflict detected in constraint targeting devDependencies["typescript"]; conflicting values are:
│  │  ├─ '^5.2.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  │  └─ '^5.0.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ @tldraw/utils@workspace:packages/utils
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
├─ @tldraw/validate@workspace:packages/validate
│  └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
│
└─ @tldraw/scripts@workspace:scripts
   ├─ Conflict detected in constraint targeting devDependencies["typescript"]; conflicting values are:
   │  ├─ '^5.2.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
   │  └─ '^5.0.2' at enforceConsistentDependenciesAcrossTheProject (…/tldraw/yarn.config.cjs:14:15)
   └─ ⚙ Invalid field packageManager; expected null, found 'yarn@3.5.0'
```

</details>
2024-01-18 11:09:17 +00:00
Mitja Bezenšek
e5c1b9a4a6
VS Code 2.0.22 (#2500)
VS Code version bump.

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
2024-01-18 08:42:05 +00:00
alex
cff5be4605
Make sure correct dark mode colours get used in exports (#2492)
Also tweaks the colours of menus in dark mode to have a little higher
contrast. Fixed #2493

### Change Type

- [x] `patch` — Bug fix


[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2024-01-17 14:31:38 +00:00
Taha
eee6c4fe7b
add keyboard shortcuts example (#2474)
This PR adds an example for overriding and adding keyboard shortcuts.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Add keyboard shortcuts example
2024-01-17 10:13:12 +00:00
Steve Ruiz
5f0994192c
Fix translations link (#2477)
This PR fixes a bug in the docs!

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
2024-01-17 10:10:44 +00:00
Lu Wilson
ab560d70a7
[hot take] Make dark mode colours pop more (#2478)
This PR makes dark mode colours pop more.
It uses the light mode colours as a starting point, with a few tweaks.

We could tweak these more, and bikeshed these to death. The goal of this
PR is to get us into a *brighter* ballpark.

If you don't want to recreate the following examples, copy paste them
from
[staging.tldraw.com/r/palette](https://staging.tldraw.com/r/palette)


![image](https://github.com/tldraw/tldraw/assets/15892272/d8e1302e-5fd1-40f3-bbaf-b4a6bdd77741)


![image](https://github.com/tldraw/tldraw/assets/15892272/4895c06b-da61-445a-9041-bc80d6fc6d91)


![image](https://github.com/tldraw/tldraw/assets/15892272/d90474ea-9b71-4c33-b8c7-28562ff4ee32)


![image](https://github.com/tldraw/tldraw/assets/15892272/21077583-6135-4b67-8c4b-bb6ac037a02d)


![image](https://github.com/tldraw/tldraw/assets/15892272/c0ac91f7-2703-4df9-bf3b-1356b7000401)


### Change Type

- [x] `patch` — Bug fix


### Test Plan


- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Tweaked dark mode colour styles to make them pop more.

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2024-01-16 17:03:58 +00:00
Steve Ruiz
d7002057d7
unbrivate, dot com in (#2475)
This PR moves the tldraw.com app into the public repo.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]

---------

Co-authored-by: Dan Groshev <git@dgroshev.com>
Co-authored-by: alex <alex@dytry.ch>
2024-01-16 14:38:05 +00:00
Steve Ruiz
29044867dd
Add docs (#2470)
This PR adds the docs app back into the tldraw monorepo.

## Deploying

We'll want to update our deploy script to update the SOURCE_SHA to the
newest release sha... and then deploy the docs pulling api.json files
from that release. We _could_ update the docs on every push to main, but
we don't have to unless something has changed. Right now there's no
automated deployments from this repo.

## Side effects

To make this one work, I needed to update the lock file. This might be
ok (new year new lock file), and everything builds as expected, though
we may want to spend some time with our scripts to be sure that things
are all good.

I also updated our prettier installation, which decided to add trailing
commas to every generic type. Which is, I suppose, [correct
behavior](https://github.com/prettier/prettier-vscode/issues/955)? But
that caused diffs in every file, which is unfortunate.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
2024-01-15 12:33:15 +00:00
Taha
923cddb838
rename and annotate user presence example (#2462)
Mildly spicy take, should we call this the user presence example if it
isn't an example of how to implement user presence? Presence record
example is closer to what it is.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- annotate user presence example and rename to presence-record

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-12 18:03:36 +00:00
Taha
1cf6b4ff51
annotate onthecanvas example (#2459)
I've changed this example a little bit to add some hints to the user,
similar to the only-editor example. I also removed snaplines: null from
the components object because it seemed a bit unnecessary.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- annotate onthecanvas example
2024-01-12 15:56:37 +00:00
Taha
6fdd0987b0
annotate snapshot example (#2454)
annotate snapshot example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- annotate snapshot example
2024-01-12 15:52:47 +00:00
Taha
6c5dd85feb
Fix and annotate minimal example (#2448)
The minimal example code made reference to a delete functionality that
wasn't working. I managed to get it working again and updated the
background component accordingly. I'm not sure of the reason to check
for a hovered shape before checking if you hit a shape, so I took that
part out.

There was also a check to see if the target was a 'selection' that
didn't seem to ever fire, so I removed that as the selection behaviour
worked fine.

The main thing is the annotations though.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Fix and annotate minimal example
2024-01-12 15:52:28 +00:00
Taha
b4d343d784
annotate zones example (#2461)
Annotate zones example. I changed this one a little bit, I thought it
made more sense for both the sharezone and topzone to look similar to
each other, rather than importing the offline indicator.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- annotate zones example
2024-01-12 15:52:25 +00:00
Taha
58ec3145a8
annotate ui events example (#2460)
annotate ui events example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- annotate ui events example
2024-01-12 15:52:21 +00:00
Taha
8029bf1d29
Annotate shape meta data example (#2453)
Annotate shape meta data example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Annotate shape meta data example

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-12 15:51:00 +00:00
Taha
78b8b4a7cc
Annotate example for using Tldraw component in a scrollable container (#2452)
Annotate example for using Tldraw component in a scrollable container

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Annotate example for using Tldraw component in a scrollable container
2024-01-12 11:22:18 +00:00
Taha
4bd921f617
Annotate example for making editor read-only (#2451)
Annotate example for making editor read-only

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Annotate example for making editor read-only
2024-01-12 11:22:02 +00:00
Taha
445f799a94
Fix typos and add comments for persistence example (#2450)
Fix typos and add comments for persistence example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Fix typos and add comments for persistence example
2024-01-12 11:21:41 +00:00
Mitja Bezenšek
fa9876587d
Fix bookmark info for VS Code (#2449)
During the SPA spike we replaced our bookmark API endpoint with a
completely new service just for bookmarks, but we forgot to update the
URL in the vs code extension. This should now make the bookmark images
and descriptions work again in VS Code.

Fixes https://github.com/tldraw/tldraw/issues/2363

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Run the VS Code extension.
2. Paste a link (like https://github.com/tldraw/tldraw)
3. The bookmark should have an image and description.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Fix bookmark image and description for VS code extension.
2024-01-12 10:54:30 +00:00
Taha
9ef2a74c39
annotate external sources example (#2414)
Annotates the external sources example with extra info

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Adds annotation to the external sources example.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-10 15:00:43 +00:00
Taha
30d2dba307
annotate multiple example (#2431)
annotate multiple example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- annotate multiple example

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-10 14:55:49 +00:00
Taha
e3290f5780
annotate force mobile example (#2421)
annotate force mobile example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- annotate force mobile example
2024-01-10 14:41:40 +00:00
Taha
346be6d505
annotate hosted images example (#2422)
annotate hosted images example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- annotate hosted images example
2024-01-10 14:41:34 +00:00
Taha
ceec4a04d5
annotate local images example (#2423)
annotate local images example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- annotate local images example
2024-01-10 14:41:30 +00:00
alex
3c1aee492a
faster image processing in default asset handler (#2441)
![Kapture 2024-01-10 at 13 42
06](https://github.com/tldraw/tldraw/assets/1489520/616bcda7-c05b-46f1-b985-3a36bb5c9476)
(gif is with 6x CPU throttling to make the effect more visible)

This is the first of a few diffs I'm working on to make dropping images
onto the canvas feel a lot faster.

There are three main changes here:
1. We operate on `Blob`s and `File`s rather than data urls. This saves a
fair bit on converting to/from base64 all the time. I've updated our
`MediaHelper` APIs to encourage the same in consumers.
2. We only check the max canvas size (slow) if images are above a
certain dimension that we consider "safe" (8k x 8k)
3. Switching from the `downscale` npm library to canvas native
downscaling. that library claims to give better results than the
browser, but hasn't been updated in ~7 years. in modern browsers, we can
opt-in to native high-quality image smoothing to achieve similar results
much faster than with an algorithm implemented in pure JS.

I want to follow this up with a system to show image placeholders whilst
we're waiting for long-running operations like resizing etc but i'm
going to split that out into its own diff as it'll involve some fairly
complex changes to the history management API.

### 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. Tested manually, unit tests & end-to-end tests pass
2024-01-10 14:41:18 +00:00
Taha
5e0d2feec8
annotate meta oncreate example (#2426)
annotate meta oncreate example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- annotate meta oncreate example
2024-01-10 14:35:33 +00:00
Taha
7f22183e24
Annotate exploded example (#2413)
Alters the exploded example so that it imports all the default
components and annotates with an explanation.

I felt like the purpose of the exploded example was to show everything
so that users could see what was available for them to customise. I
think this is a step further in that direction.

I found it tricky to work around the double meaning of components here,
I think that needs looking at. Components is a prop on the TldrawEditor,
but it also means something in React. Makes explaining certain things
difficult, e.g :

"Here we've passed the default components object to the TldrawEditor
component. Along
with default tools and shapeutils, You could input your own custom
shapes/tools here.
For help creating your own shapes/tools check out the custom config
example.

We also set the initial state to 'select' and render the UI, context
menu and canvas
components. You could add your own custom components here, omit these
ones, and/or
change the initial state of the application to whatever you want. "

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Adds annotation to exploded example
- imports all default components instead of just a few
2024-01-10 14:33:13 +00:00
Taha
f8c7a7f807
annotate hide-ui example (#2420)
Annotates the hide-ui example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Annotate hide ui example
2024-01-10 14:32:32 +00:00
Taha
e59049228a
Annotate custom ui example (#2408)
Adds annotation to the custom-ui example.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Adds annotation to the custom ui example
2024-01-10 14:29:54 +00:00
Taha
e291dda27f
Custom components annotation (#2403)
Annotate the custom components example with further explanation, fix a
typo

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Annotate the custom components example.
2024-01-10 14:29:17 +00:00
Taha
f7b612fa3d
annotate meta onchange (#2430)
annotate meta onchange

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- annotate meta onchange
2024-01-10 14:14:51 +00:00
Mitja Bezenšek
6f67449cd5
VS Code 2.0.21 (#2438)
VS code version bump.

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
2024-01-10 13:56:11 +00:00
Stan Flint
59465be84b
Fix decrement button label in OnTheCanvas example component (#2432)
| **Before** | **After** |
| - | - |
| <img width="325" alt="Screenshot 2024-01-09 at 15 34 29"
src="https://github.com/tldraw/tldraw/assets/38284426/2e97723a-787f-4eba-9000-c72eb94974f1">
| <img width="325" alt="Screenshot 2024-01-09 at 15 34 11"
src="https://github.com/tldraw/tldraw/assets/38284426/5f1171b4-2d02-4d90-95de-cb4e58d9de09">
|

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

### Release Notes

- tiny bug fix, simply changing a label to match behaviour
2024-01-09 17:08:25 +00:00
alex
25328f98d0
refactor copy/export, fix safari copy-as-image being broken (#2411)
In #2198, we introduced a regression on ios around image exports. ios
will block copys if they're not called syncronously in a UI event. It's
important to make ios copys like this:
```ts
navigator.clipboard.write(new ClipboardItem(getStuffToCopyAsAPromise())
```

instead of
```ts
getStuffToCopyAsAPromise().then(stuff => {
    navigator.clipboard.write(new ClipboardItem(stuff))
})
```

We've written and fixed this bug a few times, which i think is because
of how our export/copy code is written: the formatting is interspersed
with interacting with the browser APIs, which makes it hard to change
one without accidentally affecting the other.

This diff fixes the bug, but also restructures our export/copy code: all
the formatting is handled by `exportToBlob` and related which just
return `Blob`s. This leaves `copyAs`, `exportAs` etc. to just handle
interacting with the browser APIs.

Fixes #2312

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Test copy/export as on all browsers

### Release Notes

- Fix a bug preventing copying as an image on iOS

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2024-01-09 14:50:10 +00:00
Taha
0d755de41e
annotate error boundary example (#2410)
Annotates error boundary example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Add annotation to error boundary example

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-08 12:12:29 +00:00
alex
01ab3604d0
fix example scrolling on ios (#2412)
We were blocking scrolling on touch devices with `touch-action: none`.
This diff moves that from the `<body>` onto just the editor itself.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
2024-01-05 14:21:58 +00:00
alex
ddf8a2623c
Add descriptions to active examples (#2407)
Adds example descriptions to active examples. Some examples only have
descriptions and no details, so we should show both on the example
details

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
2024-01-05 11:08:36 +00:00
Taha
d66b4af69d
Annotate custom styles example (#2405)
Adds annotation to the custom styles example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Add annotation to the custom styles example

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-04 17:32:34 +00:00
Taha
c198283c78
annotate custom config example (#2404)
Annotates the custom config example with more detail

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Adds annotation to the custom config example with a bit more detail
2024-01-04 17:27:22 +00:00
Steve Ruiz
85c5210cd1
[example] Changing the default tldraw colors (#2402)
This PR adds an example that shows how a user could customize tldraw's
default color theme.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
2024-01-04 10:06:01 +00:00
Taha
85389551e6
annotate asset props, correct image/video confusion (#2399)
Annotates the asset props example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Annotates the asset props example and fixes a mistake in the existing
comments
2024-01-03 13:54:57 +00:00
Taha
918e735510
Annotate/refactor store events example (#2400)
This example refactors the store events example to use the store.listen
method and adds annotations to explain the code.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Update store events example to use store.listen method
- Annotate with explanations of the code
2024-01-03 13:54:36 +00:00
Taha
9f336c0128
annotate canvas events (#2397)
Adds annotation to the canvas events example

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Adds annotation to the canvas events example
2024-01-03 13:54:24 +00:00
Taha
05a2751eb6
Annotate api example (#2395)
Annotates the API example, updates from calling it app to calling it
editor.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Annotate API example
2024-01-03 12:25:09 +00:00
Steve Ruiz
6b1005ef71
[tech debt] Primitives renaming party / cleanup (#2396)
This PR:
- renames Vec2d to Vec
- renames Vec2dModel to VecModel
- renames Box2d to Box
- renames Box2dModel to BoxModel
- renames Matrix2d to Mat
- renames Matrix2dModel to MatModel
- removes unused primitive helpers
- removes unused exports
- removes a few redundant tests in dgreensp

### Change Type

- [x] `major` — Breaking change

### Release Notes

- renames Vec2d to Vec
- renames Vec2dModel to VecModel
- renames Box2d to Box
- renames Box2dModel to BoxModel
- renames Matrix2d to Mat
- renames Matrix2dModel to MatModel
- removes unused primitive helpers
2024-01-03 12:13:15 +00:00
Taha
afd5af1cb6
Refactor and document speech bubble example (#2392)
Adds comments to speech bubble example in a similar vein to the
screenshot tool example. it also refactors the code to make it easier to
parse.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Add annotations to the speech bubble example
- Refactor code for clarity

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-03 10:29:59 +00:00
Steve Ruiz
16316ac2a0
Fix meta examples (#2379)
This PR fixes a bug in our meta examples.

### Change Type

- [x] `patch` — Bug fix
2024-01-03 08:26:22 +00:00
alex
b373abf605
add descriptions to examples (#2375)
Adds descriptions to examples.

![Kapture 2023-12-22 at 17 08
32](https://github.com/tldraw/tldraw/assets/1489520/d78657cf-b3c3-4160-b58b-7c08ed27823d)

They show as a list on the index page, and on individual examples they
show in a three-js style sidebar. For now, this is disabled completely
on mobile. Examples can still be opened in 'standalone' mode to get rid
of the sidebar.

Note: the 'view code' link won't work until after these changes are
merged.

There's a small impact on authoring examples: each one needs to live in
a folder with a README.md. At a minimum, the readme needs to look like
this:
```md
---
title: My Example
component: ./MyExample.tsx
---

Here is a 1-liner about my example
```

Optionally, you can:
- Add `hide: true` to the frontmatter to remove the example from the
list (you can skip the description this way)
- Add `order: 3` to control the order in which the example appears.
They're alphabetical otherwise
- Add some more description or links to docs below a `---`. This won't
show in the listing, but will be visible on GitHub and on the example
page itself.

As a follow-up, I'd like to add an 'Open in CodeSandbox' link to each
example. These won't work until we've made a release with these examples
(as our special examples codesandbox is tied to our release process) but
the code is there & ready to go!

Have a play, let me know what you think!

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-12-27 17:17:18 +00:00
David @ HASH
ed37bcf541
Fix trademark links (#2380)
Changes `TRANDEMARK` -> `TRADEMARK` in docs links so they work.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

- Confirm the links now work.

### Release Notes

- Fixes broken links in a number of docs files.
2023-12-26 09:22:04 +00:00
Mitja Bezenšek
79196e9f2b
Avoid importing editor.css twice (#2373)
This PR prevents importing `editor.css` twice. Looks like we currently
import all the css files for all the routes in the examples app. This
means that we were importing both `tldraw.css` (which includes
`editor.css`) as well as `editor.css` directly (this last one we
imported from `OnlyEditor.tsx`).

This caused all the classes to be defined twice and it made it harder to
debug things - you might have disabled the styles in one of the
definitions but you didn't see any changes because the other definitions
still applied.


![image](https://github.com/tldraw/tldraw/assets/2523721/8d84a145-bfc6-49c1-af44-7f456510b884)

I don't think importing `editor.css` is needed as we do import the full
`tldraw.css` anyway.


![image](https://github.com/tldraw/tldraw/assets/2523721/ccc22af5-1c3a-4ac4-b24e-ee3959c99d3c)


### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Prevent importing `editor.css` twice which should help when debugging
the styles via developer console.
2023-12-22 13:26:30 +00:00
Mitja Bezenšek
fb0c16b448
Adding an image shape from a file the public folder (#2370)
Adds an example of adding an image shape from the public folder.

### Change Type

- [ ] `patch` — Bug fix
- [x] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Adds a simple image example.
2023-12-22 13:26:07 +00:00
Mitja Bezenšek
fbf15e8846
VS Code bump 2.0.20 (#2371)
VS Code version bump.

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
2023-12-21 09:46:32 +00:00
Steve Ruiz
d16d1af3c8
Another typo fix. (#2366)
This PR fixes a typo in the readme.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
2023-12-20 16:46:51 +00:00
Taha
1c954db90e
add speech bubble example (#2362)
Adds an example for making a custom shape with handles

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

### Release Notes

- Add an example for making a custom shape with handles, this one is a
speech bubble with a movable tail.
2023-12-20 14:40:23 +00:00
David Sheldrick
55f95bb666
Use custom font (#2343)
This PR adds our custom version of Shantell Sans. Not sure if we need to
keep the old file around for backwards compat?

### Change Type

- [x] `major` 

### Release Notes

- Add a brief release note for your PR here.

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2023-12-19 14:17:45 +00:00
Steve Ruiz
3cf4dae34d
Change licenses to tldraw (#2167)
This PR updates the licenses across tldraw to a bespoke tldraw license.

The idea here is leverage dual licensing for revenue from companies
using tldraw. The source code and its distributions are provided under a
non-commercial license (tldraw) while we offer to sell / give out an
alternative exclusive-use license for companies who wish to use the
product for commercial purposes.

- [x] Add new license
- [x] Change licenses in package.jsons
- [x] Update READMEs
- [x] Update docs (separate repo PR)
- [x] Have alternative license in hand (US)
- [ ] Have alternative license in hand (UK)
- [x] Have sales contract in hand (US)
- [ ] Have sales contract in hand (UK)

### Change Type

- [x] `major` — Breaking change
2023-12-19 10:41:01 +00:00
Mitja Bezenšek
e8761c8e51
VS Code 2.0.19 (#2324)
VS Code version bump.

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Version bump for VS Code.
2023-12-14 08:49:10 +00:00
Mitja Bezenšek
e3d21e0b2b
Fix hmr. (#2303)
Fixes HMR (keyboard shortcuts should be working after making changes
after this).

Looks like the issue was that we were recreating the root using the same
element. Used a solution similar to
[this](https://stackoverflow.com/a/72139826/1810018) to prevent that
from happening.


![image](https://github.com/tldraw/tldraw/assets/2523721/f684868e-fb0b-4882-bd66-6fa4ccd33edc)

It caused other issues as well

![image](https://github.com/tldraw/tldraw/assets/2523721/ac19582e-f043-4c01-823c-cc815a808894)

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Fixes HMR in local dev.
2023-12-08 10:30:34 +00:00
Mitja Bezenšek
49f0f7f200
VS Code version bump. (#2297)
Bumps the VS code version.

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
2023-12-06 13:42:39 +00:00
Mitja Bezenšek
6f59e54da6
Update the comment in the example. (#2272)
Update the External content sources example. The comment was misleading
as it mentioned dragging a file, but the example only works when you
paste the `text/html` content.


https://github.com/tldraw/tldraw/assets/2523721/7c4193ff-e2ba-417f-95c0-7da1f10b585b

Improves https://github.com/tldraw/tldraw/issues/2200

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Improve the comment for one of our examples.
2023-12-05 11:10:37 +00:00
alex
7c77944951
fix export snapshot race condition (#2280)
Fixes a race condition with our snapshot export tests that was causing
them to be flaky.

### Change Type

- [x] `tests` — Changes to any test code only[^2]

### Test Plan
- [x] End to end tests
2023-12-04 13:52:37 +00:00
alex
390c45c7eb
fix vite HMR issue (#2279)
This is an attempt at #1989. The big issue there is when `shapeUtils`
change when you're relying on tldraw to provide you with the store
instead of providing your own. Our `useTLStore` component had a bug
where it would rely on effects & a ref to detect when its options had
changed whilst still scheduling updates. Fresh opts would come in, but
they'd be different from the ones in the ref, so we'd schedule an
update, so the opts would come in again, but they'd still be different
as we hadn't run effects yet, and we'd schedule an update again (and so
on).

This diff fixes that by storing the previous opts in state instead of a
ref, so they're updating in lockstep with the store itself. this
prevents the update loop.

There are still situations where we can get into loops if the developer
is passing in custom tools, shapeUtils, or components but not memoising
them or defining them outside of react. As a DX improvement, we do some
auto-memoisation of these values using shallow equality to help with
this issue.

### Change Type

- [x] `patch` — Bug fix


### Test Plan

- [x] Unit Tests

### Release Notes

- Fixes a bug that could cause crashes due to a re-render loop with HMR
#1989
2023-12-01 16:48:30 +00:00
Gary Saunders
699502d8c4
Fixes #2246 Sublibraries example (ExplodedExample.tsx) (#2247)
Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Run the examples
2. [http://localhost:5420/exploded](http://localhost:5420/exploded)
Observe that shapes work and can be resized as expected

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Fixed Sublibraries (Exploded) example

Co-authored-by: Gary Saunders <gary.saunders@sportsengine.com>
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-11-25 14:18:31 +00:00
Ante Sepic
18cd0fd246
Fix "custom UI" example (#2253)
Remove unwanted `<Canvas>` which was resulting in duplicate rendering


### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [x] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Copy the "custom UI" example found
[here](https://github.com/tldraw/tldraw/blob/main/apps/examples/src/examples/CustomUiExample)
2. Run it
3. You will see two instances of canvas rendering (have to inspect the
DOM, it's not obvious visually :))
4. With my change the issue is gone

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Fixed double rendering of canvas in the "custom UI" example
2023-11-25 14:06:56 +00:00
Steve Ruiz
ed14e7e510
Add floaty window example (#2250)
This PR adds a floaty window example.


https://github.com/tldraw/tldraw/assets/23072548/0cb8439e-5615-421e-b16f-d137f71a4ac4

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package
2023-11-22 21:35:26 +00:00
David Sheldrick
34cfb85169
no impure getters pt 11 (#2236)
follow up to #2189 

adds runtime warnings for deprecated fields. cleans up remaining fields
and usages. Adds a lint rule to prevent access to deprecated fields.
Adds a lint rule to prevent using getters.

### Change Type

- [x] `patch` — Bug fix
2023-11-16 15:34:56 +00:00
Steve Ruiz
14e8d19a71
Custom Tools DX + screenshot example (#2198)
This PR adds a custom tool example, the `Screenshot Tool`.

It demonstrates how a user can create a custom tool together with custom
tool UI.

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Use the screenshot example

### Release Notes

- adds ScreenshotTool custom tool example
- improvements and new exports related to copying and exporting images /
files
- loosens up types around icons and translations
- moving `StateNode.isActive` into an atom
- adding `Editor.path`
2023-11-15 18:06:02 +00:00
David Sheldrick
d683cc0943
No impure getters pt9 (#2222)
follow up to #2189 

### Change Type

- [x] `patch` — Bug fix
2023-11-14 17:07:35 +00:00
David Sheldrick
dc0f6ae0f2
No impure getters pt8 (#2221)
follow up to #2189 
### Change Type

- [x] `patch` — Bug fix
2023-11-14 16:32:27 +00:00
Steve Ruiz
7186368f0d
StateNode atoms (#2213)
This PR extracts some improvements from #2198 into a separate PR.

### Release Notes
- adds computed `StateNode.getPath`
- adds computed StateNode.getCurrent`
- adds computed StateNode.getIsActive`
- adds computed `Editor.getPath()`
- makes transition's second property optional

### Change Type

- [x] `minor` — New feature

### Test Plan

- [x] Unit Tests
- [x] End to end tests
2023-11-14 13:02:50 +00:00
Mitja Bezenšek
25e7bf30c9
VS Code bump 2.0.17 (#2217)
Bumps VS Code extension version.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [x] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- VS code extension 2.0.17.
2023-11-14 11:55:50 +00:00
David Sheldrick
9d783f65cb
No impure getters pt5 (#2208)
Follow up to #2189 

### Change Type

- [x] `patch` — Bug fix
2023-11-14 10:23:03 +00:00
David Sheldrick
daf729d45c
No impure getters pt4 (#2206)
follow up to #2189 and #2203 

### Change Type

- [x] `patch` — Bug fix
2023-11-13 16:02:50 +00:00
David Sheldrick
7ffda2335c
No impure getters pt3 (#2203)
Follow up to #2189 and #2202 

### Change Type

- [x] `patch` — Bug fix

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
2023-11-13 14:31:27 +00:00
David Sheldrick
2ca2f81f2a
No impure getters pt2 (#2202)
follow up to #2189
2023-11-13 12:42:07 +00:00
Steve Ruiz
5db3c1553e
Replace Atom.value with Atom.get() (#2189)
This PR replaces the `.value` getter for the atom with `.get()`

### Change Type

- [x] `major` — Breaking change

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-11-13 11:51:22 +00:00
Gabriel Lee
260a31db81
feat: add new prop to force mobile mode layout (#1734)
Adds a new prop to force mobile mode layout, similar to how the
?layout=mobile query param works.

An alternative of having the prop accept a breakpoint number was
considered, but while that provides more flexibility, it's best if
usages of tldraw don't need to know about the internal workings of
tldraw. (e.g. someone might use breakpoint 7 to get the "desktop" mode,
but that won't be reliable when in the future more breakpoints are
added)


![licecap-output-1](https://github.com/tldraw/tldraw/assets/5616556/b08fa239-be4f-46c2-9a78-c53b453e4d1a)

![licecap-output-2](https://github.com/tldraw/tldraw/assets/5616556/9be55807-adc7-4253-8b20-757a07a8b157)

Closes #1709 

### Change Type

- [ ] `patch` — Bug fix
- [x] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. `<Tldraw persistenceKey="tldraw_example" autoFocus
forceMobileModeLayout />`
2. notice that the layout stays in mobile mode no matter the width of
the screen

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- add new prop to force mobile mode layout

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-11-11 14:11:59 +00:00
Mitja Bezenšek
957fced41d
VS code bump 2.0.16 (#2193)
Bumps the version for VS code extension.

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
2023-11-10 10:48:14 +00:00
Steve Ruiz
1367e4c500
[feature] Things on the canvas (#2150)
This PR adds two new component overrides to the editor's `components`
slot. They are:

- `<OnTheCanvas/>`, which renders inside of the html layer that scales
and translates with the camera
- `<InFrontOfTheCanvas/>`, which renders in front of the canvas but
behind any UI elements, and which does not scale / pan with the camera.

![Kapture 2023-11-06 at 12 19
15](https://github.com/tldraw/tldraw/assets/23072548/51c0421d-8b39-48b5-9b8a-c717253c3423)

### Change Type

- [x] `minor` — New feature

### Test Plan

1. See the "on the canvas" example.

### Release Notes

- [editor] Adds two new components, `OnTheCanvas` and
`InFrontOfTheCanvas`.
2023-11-07 09:27:20 +00:00
Mitja Bezenšek
dfcdac0d3a
Bump vs code extension. (#2142)
New VS Code extension release.

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Release Notes

- Release a new version of VS Code extension with all the latest
changes.
2023-11-03 09:10:19 +00:00
Steve Ruiz
ddb73cb6cf
Tighten up editor ui (#2102)
This PR tightens up the editor UI. It removes padding around the editor.

![Kapture 2023-10-28 at 18 27
15](https://github.com/tldraw/tldraw/assets/23072548/18075308-7b62-43a1-8c80-ff4e4136197b)

<img width="1196" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/a8205ef1-b142-4fdc-9745-e400c0c4939a">

<img width="1196" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/87e9dcd1-39f5-466a-a256-9cbd2ff2cf7e">

### Change Type

- [x] `minor` — New feature

### Release Notes

- Small adjustment to editor ui.
2023-10-28 21:58:32 +00:00
Steve Ruiz
d757e5a32a
Add meta example (#2122)
This PR adds a meta example, showing how to add meta properties to
shapes.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
2023-10-27 17:36:19 +00:00
Mitja Bezenšek
ed95b6252d
Bump VS Code (#2100)
VS Code extension version bump with the latest changes.

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
2023-10-17 14:45:11 +00:00
Steve Ruiz
aaf810b015
Add offline indicator (also to top zone example) (#2083)
This PR adds an offline indicator to the UI package. It's not used in
the default app but we'll use it on tldraw.com, and it makes sense to
include it here as it's generally useful.

### Change Type

- [x] `minor` — New feature

### Test Plan

1. See the zones example.

### Release Notes

- [@tldraw/tldraw] add offline indicator to ui components
2023-10-17 08:32:41 +00:00
alex
22955bb0ec
Only upload playwright to S3 if we have the right credentials (#2074)
These credentials aren't available to non-tldraw contributors which was
breaking uploads.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-10-13 13:42:41 +00:00
antonio moura
981ef61810
Fix ExplodedExample.tsx (#2068)
Previous implementation was incorrect, causing the following bug:


![image](https://github.com/tldraw/tldraw/assets/26308297/03f2a996-dd58-4864-8f89-8e7af2ecca69)


### Change Type

- [] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [x] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-10-13 08:28:59 +00:00
Mitja Bezenšek
ec97b740b4
Update VS Code extension 2.0.13 (#2066)
Update VS code extension version and changelog.
### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
2023-10-11 10:52:27 +00:00
Steve Ruiz
8a8b718e53
Move example into examples folder (#2064)
This PR moves an example into the examples folder.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
2023-10-11 09:54:26 +00:00
alex
421102282d
Fix newlines in text geo shapes (#2059)
Previously, entering a geo shape and adding a bunch of newlines wouldn't
correctly update the shape's height. This fixes that.

### Change Type

- [x] `patch` — Bug fix


### Test Plan

1. Create a geo shape
2. Enter text editing mode
3. Spam the enter key
4. See that the shape grows appropriately
5. Exit editing and check that the trailing newlines have been deleted.

- [ ] Unit Tests
- [x] End to end tests

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-10-10 12:58:28 +00:00
alex
4ccb6d8a50
re-enable visual regression tests (#2056)
Re-enable visual regression tests

### Change Type
- [x] `tests` — Changes to any test code only[^2]

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2023-10-10 12:33:16 +00:00
Steve Ruiz
8892176b1a
[improvement] Scope getShapeAtPoint to rendering shapes only (#2043)
This PR:

1. Adds a `renderingOnly` option to the `Editor.getShapeAtPoint` method.
When true, the method will only hit test against rendering shapes
(shapes that are inside of the current `renderingBounds`) rather than
all shapes on the canvas.
2. Includes some low level improvements to the way that edges find their
nearest point.
3. Includes a fix to circle geometry that could produce NaN values
 
### Change Type

- [x] `minor` — New feature

### Test Plan

1. Check whether hovering shapes still works as you would expect.

- [x] Unit Tests

### Release Notes

- Improve perf for hovering shapes / shape hit tests
2023-10-09 14:18:42 +00:00
alex
37f8a7a491
Remove topBar prop from <TldrawUi /> (#2018)
This diff removes the UI top center bar from the public API and tweaks
some of the styling around the top bar as a whole. Now, the left and
right bars shrink to fit their content, and the center bar is unstyled
by us. It's also marked `@internal`.

This also exposes `<Spinner />` for internal use.

### Change Type

- [x] `minor` — New feature

### Test Plan

-

### Release Notes

- [BREAKING] removed topBar prop
2023-10-09 06:02:43 +00:00
Steve Ruiz
53a8fd6c69
Update readme (#2027)
This PR updates the tldraw readme.

### Change Type

- [x] `patch` — Bug fix
2023-10-06 12:10:33 +00:00
Steve Ruiz
fa32173409
[fix] Multiple example (#2026)
This PR fixes the multiple example.

### Change Type

- [x] `patch` — Bug fix
2023-10-06 09:02:39 +00:00
Steve Ruiz
9c1dc00740
Debugging cleanup / misc cleanup (#2025)
This PR:
- removes feature flags for people menu, highlighter shape
- removes debugging for cursors
- adds a debug flag for hiding shapes
- changes Canvas to use `useValue` rather than `track`
- removes the default background color on `tl-background`
- in the editor components, makes `Background` null by default

### Change Type

- [x] `minor` — New feature
2023-10-06 08:57:46 +00:00
Steve Ruiz
d715fa3a2e
[fix] Focus events (actually) (#2015)
This PR restores the controlled nature of focus. Focus allows keyboard
shortcuts and other interactions to occur. The editor's focus should
always / entirely be controlled via the autoFocus prop or by manually
setting `editor.instanceState.isFocused`.

Design note: I'm starting to think that focus is the wrong abstraction,
and that we should instead use a kind of "disabled" state for editors
that the user isn't interacting with directly. In a page where multiple
editors exit (e.g. a notion page), a developer could switch from
disabled to enabled using a first interaction.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

- [x] End to end tests
2023-10-04 09:01:48 +00:00
Mitja Bezenšek
f3cecf5c55
Fix vs code extension. Prepare for new release. (#2011)
Fixes an issue with VS Code extension. Seem like we don't need to pass
in the tools and utils any longer.

Prepares the vs code extension for a new release (bumps version, updates
changelog).

### Change Type

- [x] `patch` — Bug fix

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-10-03 18:07:18 +00:00
alex
92886e1f40
fix text in geo shapes not causing its container to grow (#2003)
We got things sliggghhhtly wrong in #1980. That diff was attempting to
fix a bug where the text measurement element would refuse to go above
the viewport size in safari. This was most obvious in the case where
there was no fixed width on a text shape, and that diff fixed that case,
but it was also happening when a fixed width text shape was wider than
viewport - which wasn't covered by that fix. It turned out that that fix
also introduced a bug where shapes would no longer grow along the y-axis
- in part because the relationship between `width`, `maxWidth`, and
`minWidth` is very confusing.

The one-liner fix is to just use `max-content` instead of `fit-content`
- that way, the div ignores the size of its container. But I also
cleared up the API for text measurement to remove the `width` property
entirely in favour of `maxWidth`. I think this makes things much clearer
and as far as I can tell doesn't affect anything.

Closes #1998 

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create an arrow & geo shape with labels, plus a note and text shape
2. Try to break text measurement - overflow the bounds, make very wide
text, experiment with fixed/auto-size text, etc.
2023-10-03 14:26:13 +00:00
Steve Ruiz
fb2f515b74
[improvement] prevent editing in readonly (#1990)
This PR prevents certain shapes from being edited while in readonly
mode. It adds `ShapeUtil.canEditInReadOnly` to allow developers to opt
in to editing shapes. It's currently applied only to embed shapes.

### Change Type

- [x] `major`

### Test Plan

1. In a readonly mode, try to edit text / sticky notes / arrow labels
via double click / enter. You should not be able to edit them.
2. Try to edit an embed. You should be able to edit it.

### Release Notes

- Prevent editing text shapes in readonly mode.
2023-10-03 11:03:01 +00:00
Taha
f73bf9a7fe
Fix text-wrapping on Safari (#1980)
Co-authored-by: Alex Alex@dytry.ch

closes [#1978](https://github.com/tldraw/tldraw/issues/1978)

Text was wrapping on Safari because the measure text div was rendered
differently on different browsers. Interestingly, when forcing the
text-measure div to be visible and on-screen in Chrome, the same
text-wrapping behaviour was apparent. By setting white-space to 'pre'
when width hasn't been set by the user, we can ensure that only line
breaks the user has inputted are rendered by default on all browsers.

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. On Safari
2. Make a new text shape and start typing
3. At a certain point the text starts to wrap without the width having
been set


### Release Notes

- Fix text wrapping differently on Safari and Chrome/Firefox

Before/After

<image width="350"
src="https://github.com/tldraw/tldraw/assets/98838967/320171b4-61e0-4a41-b8d3-830bd90bea65">
<image width="350"
src="https://github.com/tldraw/tldraw/assets/98838967/b42d7156-0ce9-4894-9692-9338dc931b79">
2023-10-02 11:30:53 +00:00
Steve Ruiz
da33179a31
Remove focus management (#1953)
This PR removes the automatic focus events from the editor.

The `autoFocus` prop is now true by default. When true, the editor will
begin in a focused state (`editor.instanceState.isFocused` will be
`true`) and the component will respond to keyboard shortcuts and other
interactions. When false, the editor will begin in an unfocused state
and not respond to keyboard interactions.

**It's now up to the developer** using the component to update
`isFocused` themselves. There's no predictable way to do that on our
side, so we leave it to the developer to decide when to turn on or off
focus for a container (for example, using an intersection observer to
"unfocus" components that are off screen).

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Open the multiple editors example.
2. Click to focus each editor.
3. Use the keyboard shortcuts to check that the correct editor is
focused.
4. Start editing a shape, then select the other editor. The first
editing shape should complete.

- [x] Unit Tests
- [x] End to end tests

### Release Notes

- [editor] Make autofocus default, remove automatic blur / focus events.

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-10-02 11:29:54 +00:00
Steve Ruiz
5cd74f4bd6
[feature] Include sources in TLExternalContent (#1925)
This PR adds the source items from a paste event to the data shared with
external content handlers. This allows developers to customize the way
certain content is handled.

For example, pasting text sometimes incudes additional clipboard items,
such as the HTML representation of that text. We wouldn't want to create
two shapes—one for the text and one for the HTML—so we still treat this
as a single text paste. The `registerExternalContentHandler` API allows
a developer to change how that text is handled, and the new `sources`
API will now allow the developer to take into consideration all of the
items that were on the clipboard.
 
![Kapture 2023-09-19 at 12 25
52](https://github.com/tldraw/tldraw/assets/23072548/fa976320-cfec-4921-b481-10cae0d4043e)

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Try the external content source example.
2. Paste text that includes HTML (e.g. from VS Code)

### Release Notes

- [editor / tldraw] add `sources` to `TLExternalContent`
2023-09-19 15:33:54 +00:00
Steve Ruiz
b6ebe1e274
[improvement] quick actions (#1922)
This PR:

- improves the quick actions bar, enabling undo / redo actions when the
eraser is selected.
- for actions that effect selected shapes, calling the action when the
select tool is not selected will select the select tool and run the
action
- actions that effect selected shapes are hidden from the menu when the
select tool is not selected

### Change Type

- [x] `major`

### Test Plan

1. Select the eraser tool, the undo / redo buttons should still be
there.

1. Select two shapes
2. Select the draw tool
3. The menu should not display most options, e.g. cut or paste, but
should display undo / redo
4. Press Shift+H
5. The shapes should not move, but the select tool should be selected
again

### Release Notes

- Improve the menu / kbds behavior when select tool is not active
2023-09-19 15:33:39 +00:00
David Sheldrick
d9ce936ed0
Fix pinch start with toolbar open (#1895)
closes #1893 

Normally when you start a pinch it does the following within a few
frames:

- first finger goes down, begins a drawing gesture, adds a mark to the
undo stack
- second finger goes down, cancels the drawing gesture, bails to the
mark

but when the toolbar is open, it follows the same process without adding
a mark to the undo stack, so that when it bails it bails to the previous
mark.

This PR updates the logic to create a mark ID when setting the mark, and
only bail if the mark id was set on enter.

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Fixes a bug that could trigger undo by accident when closing the style
toolbar via a pinch gesture on mobile.
2023-09-18 10:50:15 +00:00
Steve Ruiz
0b3e83be52
Add snapshot prop, examples (#1856)
This PR:
- adds a `snapshot` prop to the <Tldraw> component. It does basically
the same thing as calling `loadSnapshot` after creating the store, but
happens before the editor actually loads.
- adds a largeish example (including a JSON snapshot) to the examples

We have some very complex ways of juggling serialized data between
multiplayer, file formats, and the snapshot APIs. I'd like to see these
simplified, or at least for our documentation to reflect a narrow subset
of all the options available.

The most common questions seem to be:

Q: How do I serialize data?
A: Via the `Editor.getSnapshot()` method

Q: How do I restore serialized data?
A: Via the `Editor.loadSnapshot()` method OR via the `<Tldraw>`
component's `snapshot` prop

The store has an `initialData` constructor prop, however this is quite
complex as the store also requires a schema class instance with which to
migrate the data. In our components (<Tldraw> and <TldrawEditor>) we
were also accepting `initialData`, however we weren't accepting a
schema, and either way I think it's unrealistic to also expect users to
create schemas themselves and pass those in.

AFAIK the `initialData` prop is only used in the file loading, which is
a good example of how complex it looks like to create a schema and
migrate data outside of the components.

### Change Type

- [x] `minor` — New feature
2023-09-08 14:48:55 +00:00
Steve Ruiz
81b8e65741
export asset stuff (#1829)
This PR adds several new exports related to assets.

### Change Type

- [x] `minor` — New feature
2023-08-26 08:30:29 +00:00
Steve Ruiz
57fcb3d07b
[feature] Asset props (#1824)
This PR adds additional props to the <Tldraw> component for setting the
maximum asset size, maximum image dimensions, accepted image types, and
accepted video types. It adds an example for using these properties and
for uploading image assets.

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Try (and fail) to upload image types other than the default types.
2. Try (and fail) to upload images / videos larger than 10mb.
3. Use the example to customize the properties.

### Release Notes

- [@tldraw/tldraw] add asset props
2023-08-25 17:30:09 +00:00
Steve Ruiz
2c7c97af9c
[fix] style changes (#1814)
This PR updates the way that styles are changed. It splits `setStyle`
and `setOpacity` into `setStyleForNext Shape` and
`setOpacityForNextShape` and `setStyleForSelectedShapes` and
`setOpacityForSelectedShapes`. It fixes the issue with setting one style
re-setting other styles.

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Set styles when shapes are not selected.
2. Set styles when shapes are selected.
3. Set styles when shapes are selected and the selected tool is not
select.

- [x] Unit Tests
2023-08-23 10:14:49 +00:00
Steve Ruiz
22329c51fc
[improvement] More selection logic (#1806)
This PR includes further UX improvements to selection.

- clicking inside of a hollow shape will no longer select it on pointer
up
- clicking a shape's filled label will select it on pointer down
- clicking a shape's empty label will select it on pointer up
- clicking and dragging a selected arrow is now better limited to its
body, not its bounds
- arrows will no longer bind to labels

### Text labels

A big change here relates to text labels. Previously, we had listeners
set on the text label elements; I've removed these and we now check the
actual label bounds geometry for a hit. For geo shapes, this geometry is
now placed correctly based on the alignment / vertical alignment of the
label.

- Clicking on a label with text in it will select the shape on pointer
down.
- Clicking on an empty text label will select the shape on pointer up.

## Hollow shapes

Previously, shapes with `fill: none` were also being selected on pointer
up. I've removed that logic because it was producing wrong-feeling
selections too often. We now select these shapes only when clicking on
the label (as mentioned above) or when clicking on the edges of the
shape. This is in line with the original behavior (currently on
tldraw.com, prior to the earlier PR that updated selection logic).

## Arrows

Arrows still hit the inside of hollow shapes, using the "smallest
hovered" logic previously used for pointer-up selection on hollow
shapes. They also now correctly do so while ignoring text labels.

### Change Type

- [x] `minor` — New feature

### Test Plan

1. try selecting geo shapes, nested geo shapes, arrows and shapes with
labels or without labels

- [x] Unit Tests
2023-08-13 15:55:24 +00:00
Steve Ruiz
8991468446
history options / markId / createPage (#1796)
This PR:

- adds history options to several commands in order to allow them to
support squashing and ephemeral data (previously, these commands had
boolean values for squashing / ephemeral)

It also:
- changes `markId` to return the editor instance rather than the mark id
passed into the command
- removes `focus` and `blur` commands
- changes `createPage` parameters
- unifies `animateShape` / `animateShapes` options

### Change Type

- [x] `major` — Breaking change

### Test Plan

- [x] Unit Tests
2023-08-05 11:21:07 +00:00
Steve Ruiz
ae56d975e0
remove yjs example (#1795)
This PR moves the yjs example into its own repository here:
https://github.com/tldraw/tldraw-yjs-example

### Change Type

- [x] `internal`
2023-08-04 16:23:38 +00:00
Steve Ruiz
bf27743595
Rename shapes apis (#1787)
This PR updates APIs related to shapes in the Editor.

- removes the requirement for an `id` when creating shapes
- `shapesOnCurrentPage` -> `currentPageShapes`
- `findAncestor` -> `findShapeAncestor`
- `findCommonAncestor` -> `findCommonShapeAncestor`
- Adds `getCurrentPageShapeIds`
- `getAncestors` -> `getShapeAncestors`
- `getClipPath` -> `getShapeClipPath`
- `getGeometry` -> `getShapeGeometry`
- `getHandles` -> `getShapeHandles`
- `getTransform` -> `getShapeLocalTransform`
- `getPageTransform` -> `getShapePageTransform`
- `getOutlineSegments` -> `getShapeOutlineSegments`
- `getPageBounds` -> `getShapePageBounds`
- `getPageTransform` -> `getShapePageTransform`
- `getParentTransform` -> `getShapeParentTransform`
- `selectionBounds` -> `selectionRotatedPageBounds`

### Change Type

- [x] `major` — Breaking change

### Test Plan

- [x] Unit Tests
2023-08-02 18:12:25 +00:00
Steve Ruiz
79fae186e4
Revert "Editor commands API / effects" (#1783)
Reverts tldraw/tldraw#1778.

Fuzz testing picked up errors related to deleting pages and undo/redo
which may doom this PR.

### Change Type

- [x] `major` — Breaking change
2023-08-01 17:03:31 +00:00
Steve Ruiz
e17074a8b3
Editor commands API / effects (#1778)
This PR shrinks the commands API surface and adds a manager
(`CleanupManager`) for side effects.

### Change Type

- [x] `major` — Breaking change

### Test Plan

Use the app! Especially undo and redo. Our tests are passing but I've
found more cases where our coverage fails to catch issues.

### Release Notes

- tbd
2023-08-01 13:21:14 +00:00
Steve Ruiz
d750da8f40
ShapeUtil.getGeometry, selection rewrite (#1751)
This PR is a significant rewrite of our selection / hit testing logic.

It
- replaces our current geometric helpers (`getBounds`, `getOutline`,
`hitTestPoint`, and `hitTestLineSegment`) with a new geometry API
- moves our hit testing entirely to JS using geometry
- improves selection logic, especially around editing shapes, groups and
frames
- fixes many minor selection bugs (e.g. shapes behind frames)
- removes hit-testing DOM elements from ShapeFill etc.
- adds many new tests around selection
- adds new tests around selection
- makes several superficial changes to surface editor APIs

This PR is hard to evaluate. The `selection-omnibus` test suite is
intended to describe all of the selection behavior, however all existing
tests are also either here preserved and passing or (in a few cases
around editing shapes) are modified to reflect the new behavior.

## Geometry

All `ShapeUtils` implement `getGeometry`, which returns a single
geometry primitive (`Geometry2d`). For example:

```ts
class BoxyShapeUtil {
  getGeometry(shape: BoxyShape) {
    return new Rectangle2d({
        width: shape.props.width, 
        height: shape.props.height, 
        isFilled: true,
        margin: shape.props.strokeWidth
      })
    }
}
```

This geometric primitive is used for all bounds calculation, hit
testing, intersection with arrows, etc.

There are several geometric primitives that extend `Geometry2d`:
- `Arc2d`
- `Circle2d`
- `CubicBezier2d`
- `CubicSpline2d`
- `Edge2d`
- `Ellipse2d`
- `Group2d`
- `Polygon2d`
- `Rectangle2d`
- `Stadium2d`

For shapes that have more complicated geometric representations, such as
an arrow with a label, the `Group2d` can accept other primitives as its
children.

## Hit testing

Previously, we did all hit testing via events set on shapes and other
elements. In this PR, I've replaced those hit tests with our own
calculation for hit tests in JavaScript. This removed the need for many
DOM elements, such as hit test area borders and fills which only existed
to trigger pointer events.

## Selection

We now support selecting "hollow" shapes by clicking inside of them.
This involves a lot of new logic but it should work intuitively. See
`Editor.getShapeAtPoint` for the (thoroughly commented) implementation.

![Kapture 2023-07-23 at 23 27
27](https://github.com/tldraw/tldraw/assets/23072548/a743275c-acdb-42d9-a3fe-b3e20dce86b6)

every sunset is actually the sun hiding in fear and respect of tldraw's
quality of interactions

This PR also fixes several bugs with scribble selection, in particular
around the shift key modifier.

![Kapture 2023-07-24 at 23 34
07](https://github.com/tldraw/tldraw/assets/23072548/871d67d0-8d06-42ae-a2b2-021effba37c5)

...as well as issues with labels and editing.

There are **over 100 new tests** for selection covering groups, frames,
brushing, scribbling, hovering, and editing. I'll add a few more before
I feel comfortable merging this PR.

## Arrow binding

Using the same "hollow shape" logic as selection, arrow binding is
significantly improved.

![Kapture 2023-07-22 at 07 46
25](https://github.com/tldraw/tldraw/assets/23072548/5aa724b3-b57d-4fb7-92d0-80e34246753c)

a thousand wise men could not improve on this

## Moving focus between editing shapes

Previously, this was handled in the `editing_shapes` state. This is
moved to `useEditableText`, and should generally be considered an
advanced implementation detail on a shape-by-shape basis. This addresses
a bug that I'd never noticed before, but which can be reproduced by
selecting an shape—but not focusing its input—while editing a different
shape. Previously, the new shape became the editing shape but its input
did not focus.

![Kapture 2023-07-23 at 23 19
09](https://github.com/tldraw/tldraw/assets/23072548/a5e157fb-24a8-42bd-a692-04ce769b1a9c)

In this PR, you can select a shape by clicking on its edge or body, or
select its input to transfer editing / focus.

![Kapture 2023-07-23 at 23 22
21](https://github.com/tldraw/tldraw/assets/23072548/7384e7ea-9777-4e1a-8f63-15de2166a53a)

tldraw, glorious tldraw

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Erase shapes
2. Select shapes
3. Calculate their bounding boxes

- [ ] Unit Tests // todo
- [ ] End to end tests // todo

### Release Notes

- [editor] Remove `ShapeUtil.getBounds`, `ShapeUtil.getOutline`,
`ShapeUtil.hitTestPoint`, `ShapeUtil.hitTestLineSegment`
- [editor] Add `ShapeUtil.getGeometry`
- [editor] Add `Editor.getShapeGeometry`
2023-07-25 16:10:15 +00:00
Steve Ruiz
0323ee1f6b
[fix] dark mode (#1754)
This PR fixes a bug where dark mode would not immediately cause shapes
to update their colors. Previously, we got the current theme during
render but not in a way that hooked into the change. In this update, we
hook into the change. We also pass the change down to shape fills as
props rather than getting the theme from deeper down.

### Change Type

- [x] `patch`

### Test Plan

1. Use dark mode.
2. Switch colors

### Release Notes

- [fix] dark mode colors not updating
2023-07-20 11:38:55 +00:00
Steve Ruiz
b22ea7cd4e
More cleanup, focus bug fixes (#1749)
This PR is another grab bag:
- renames `readOnly` to `readonly` throughout editor
- fixes a regression related to focus and keyboard shortcuts
- adds a small outline for focused editors

### Change Type

- [x] `major`

### Test Plan

- [x] End to end tests
2023-07-19 10:52:21 +00:00
Steve Ruiz
789b1d1ac6
Fix e2e test (#1748)
This PR fixes a failing end to end test that snuck in.

### Change Type

- [x] `tests` — Changes to any test code only[^2]

### Test Plan

- [x] End to end tests
2023-07-18 22:13:11 +00:00
Steve Ruiz
3e31ef2a7d
Remove helpers / extraneous API methods. (#1745)
This PR removes several extraneous computed values from the editor. It
adds some silly instance state onto the instance state record and
unifies a few methods which were inconsistent. This is fit and finish
work 🧽

## Computed Values

In general, where once we had a getter and setter for `isBlahMode`,
which really masked either an `_isBlahMode` atom on the editor or
`instanceState.isBlahMode`, these are merged into `instanceState`; they
can be accessed / updated via `editor.instanceState` /
`editor.updateInstanceState`.

## tldraw select tool specific things

This PR also removes some tldraw specific state checks and creates new
component overrides to allow us to include them in tldraw/tldraw.

### Change Type

- [x] `major` — Breaking change

### Test Plan

- [x] Unit Tests
- [x] End to end tests

### Release Notes

- [tldraw] rename `useReadonly` to `useReadOnly`
- [editor] remove `Editor.isDarkMode`
- [editor] remove `Editor.isChangingStyle`
- [editor] remove `Editor.isCoarsePointer`
- [editor] remove `Editor.isDarkMode`
- [editor] remove `Editor.isFocused`
- [editor] remove `Editor.isGridMode`
- [editor] remove `Editor.isPenMode`
- [editor] remove `Editor.isReadOnly`
- [editor] remove `Editor.isSnapMode`
- [editor] remove `Editor.isToolLocked`
- [editor] remove `Editor.locale`
- [editor] rename `Editor.pageState` to `Editor.currentPageState`
- [editor] add `Editor.pageStates`
- [editor] add `Editor.setErasingIds`
- [editor] add `Editor.setEditingId`
- [editor] add several new component overrides
2023-07-18 21:50:23 +00:00
Steve Ruiz
a7d3a77cb0
(chore) bump (#1744)
Bump deps to fix build

### Change Type

- [x] `dependencies`
2023-07-18 10:19:28 +00:00
Steve Ruiz
b7d9c8684c
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw

At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.

## Library changes

@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.

- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.

- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw

Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.

## API Changes

The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.

All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.

You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.

The `components` prop now also accepts `SelectionForeground`.

The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.

Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.

The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.

- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`

### Change Type

- [x] `major` — Breaking change

### Test Plan

- [x] Unit Tests
- [x] End to end tests

### Release Notes

- [@tldraw/editor] lots, wip
- [@tldraw/ui] gone, merged to tldraw/tldraw
- [@tldraw/polyfills] gone, merged to tldraw/editor
- [@tldraw/primitives] gone, merged to tldraw/editor / tldraw/tldraw
- [@tldraw/indices] gone, merged to tldraw/editor
- [@tldraw/file-format] gone, merged to tldraw/tldraw

---------

Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
Steve Ruiz
43a0dd83f8
support custom shapes in yjs example (#1737)
This PR adds support for custom shapes (`shapes`) to the y.js example. A
user should pass the same data to the `useYjsStore` hook as they pass to
the `<Tldraw>` component.

### Change Type

- [x] `internal`
2023-07-14 20:33:57 +00:00
Mitja Bezenšek
1e07ae51dc
Bump vs code version. (#1735)
Bumps the VS Code version.

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
2023-07-12 08:37:04 +00:00
David Sheldrick
83a391b46b
Add cloud shape (#1708)
![Kapture 2023-07-04 at 16 36
31](https://github.com/tldraw/tldraw/assets/1242537/bcb19959-ac66-46fa-92ea-50fe4692a96c)


### Change Type

- [x] `minor` — New feature


[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Make some cloud shapes, try different sizes, colors, fills.
2. Export cloud shapes to images.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Adds a cloud shape.
2023-07-07 15:32:08 +00:00
Steve Ruiz
910be6073f
[refactor] reduce dependencies on shape utils in editor (#1693)
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
2023-07-07 13:56:31 +00:00
Lu Wilson
f745781056
[hot take] remove tool from shape definition (#1691)
This PR removes the `tool` parameter from the `defineShape` function.
It's an opinionated change that I think we should at the very least
consider.

## What's the context?

Currently, you can add **tools** (aka state nodes) to your state chart
in two different ways:

1. Passing them to the `<Tldraw>` component with the `tools` attribute.
2. As part of a shape definition's `tool` property, which you then pass
to the `<Tldraw>` component with the `shapes` attribute.

This is what (1) looks like:

```jsx
import { MyTool } from "./MyTool"

function Example() {
  return <Tldraw tools={[MyTool]} />
}
```

This is what (2) looks like:

```jsx
import { MyTool } from "./MyTool"
import { MyShapeUtil, myShapeProps } from "./MyShape"

const MyShapeDefinition = defineShape("my-shape", {
  util: MyShapeUtil,
  props: myShapeProps,
  tool: MyTool,
})

function Example() {
  return <Tldraw shapes={[MyShapeDefinition]} />
}
```

Clearly, (1) is better for when you want to add *just a tool*, that
doesn't have an associated shape.
And (2) is better for when you want to add *both* a tool and an
associated shape.

## Why change it?

I think we should remove method (2). Because I think that it adds a few
complications.


#### Does it help?

I don't think that it helps to streamline the process of coupling shapes
and tools. You still need to remember to add your tool.

Seeing as `tool` is optional on the shape definition (rightly so), it
doesn't prompt you to do it.

#### What's easier to explain?

I think it's easier to just have to explain _one method_. It would take
longer to explain two methods, and it complicates the concepts involved.

Seeing as there's not a big benefit to one method over the other, the
added explanation wouldn't be a good trade-off.

#### What happens if I use both?

It's unclear to the user what would happen if they use both methods. Do
we know what the intended behaviour of this would be? I think this will
happen often.

```jsx
import { MyTool } from "./MyTool"
import { MyShapeUtil, myShapeProps } from "./MyShape"

const MyShapeDefinition = defineShape("my-shape", {
  util: MyShapeUtil,
  props: myShapeProps,
  tool: MyTool,
})

function Example() {
  return <Tldraw tools={[MyTool]} shapes={[MyShapeDefinition]} />
}
```

#### Does it fit my shape/tool?

Many shapes are coupled closely with one tool. But some shapes would
involve multiple tools. And some tools would involve multiple shapes.

For example, you might first add a tool and a shape that go nicely
together, so you use method (2). But two months later, you decide that
you want another tool to be able to make this shape too. Now you've
inserted your related tools in two different places, unless you
refactor.

Alternatively, you might want to add some more functionality to your
tool, so that it can make multiple types of shapes. Instead of
refactoring the existing shape, you want to create an entirely new
shape, to keep your new code separate. Should you add the `tool`
property to the new shape as well? What would happen if you did/didn't?
What happens if you later disable the original shape? Would you need to
move the `tool` property from there to the newer shape?

It would be a lot simpler to just have the tool in your list of tools,
instead of having them tangled up with shapes.

#### Plugins?

We've been considering moving towards some sort of 'plugins' system in
the future, that could collect together shapes, tools, and other stuff.

I think that a more complete concept of a 'plugin' would be the best
place to collect together shapes, and tools — not on the shape itself.

### 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. Try using all of the app's tools, making sure they still work.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- [dev] Removed the `tool` property from `defineShape`
2023-07-07 11:44:57 +00:00
Mitja Bezenšek
85db9ba469
Bump vs code version. (#1719)
Bump vs code version for a new version release.

### Change Type

- [x] `patch` — Bug fix
2023-07-07 10:47:15 +00:00
Steve Ruiz
80595232d2
[internal] Add basic list to examples (#1688)
This PR adds a basic list of all examples to the examples site

### Change Type

- [x] `internal`
2023-07-05 14:07:28 +00:00
alex
eba7b8c6a6
cleanup (#1711)
I accidentally checked in a bunch of stuff i shouldn't. oops.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [x] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
2023-07-05 08:55:56 +00:00
alex
c893a02878
remove lock option from highlighter (#1703)
Highlighter is autolocked, so we shouldn't show the lock icon 

### Change Type

- [x] `patch` — Bug fix


[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

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

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- We no longer show the tool lock option for highlighter - it didn't do
anything anyway
2023-07-04 10:41:14 +00:00
Steve Ruiz
b96d207f5f
[docs] Update multiple test (#1685)
This PR adds a bit of content to the multiple editor test so that we can
also test scrolling.

### Change Type

- [x] `documentation`
2023-06-30 13:30:06 +00:00
Steve Ruiz
91dfdecc93
[fix] Lock shortcut (#1677)
This PR fixes the shortcut for lock shapes, which may be blocked by
browser defaults. We now use Shift+L instead of Cmd+Shift+L. Closes
https://github.com/tldraw/tldraw/issues/1676.

### Change Type

- [x] `patch` 

### Test Plan

1. Try the lock tool shortcuts.

- [x] End to end tests

### Release Notes

- [@tldraw/editor] Fix lock tool shortcut
2023-06-29 21:43:28 +00:00
Steve Ruiz
fd29006538
[feature] add meta property to records (#1627)
This PR adds a `meta` property to shapes and other records.

It adds it to:
- asset
- camera
- document
- instance
- instancePageState
- instancePresence
- page
- pointer
- rootShape

## Setting meta

This data can generally be added wherever you would normally update the
corresponding record.

An exception exists for shapes, which can be updated using a partial of
the `meta` in the same way that we update shapes with a partial of
`props`.

```ts
this.updateShapes([{
    id: myShape.id,
    type: "geo",
    meta: { 
      nemesis: "steve",
      special: true
    }
])
```

## `Editor.getInitialMetaForShape`

The `Editor.getInitialMetaForShape` method is kind of a hack to set the
initial meta property for newly created shapes. You can set it
externally. Escape hatch!

### Change Type

- [x] `minor` — New feature

### Test Plan

todo

- [ ] Unit Tests (todo)

### Release Notes

- todo
2023-06-28 14:24:05 +00:00
Steve Ruiz
1dede56131
[chore] bump vscode extension to 2.0.9 (#1662)
Bump vscode to 2.0.9

### Change Type

- [x] `internal`
2023-06-28 10:35:55 +00:00
Steve Ruiz
7fd0ab75ed
[improvement] custom shapes example (#1660)
This PR fixes an import in the custom shapes example. It also tweaks the
example to show how buttons and other interactive content should work.

### Change Type

- [x] `documentation`
2023-06-27 14:51:35 +00:00
alex
aad5815a06
Styles API docs (#1641)
Adds some basic API docs for the new styles API.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]

### Test Plan

--

### Release Notes
 --

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 14:01:02 +00:00
alex
e8bc114bf3
Styles API follow-ups (#1636)
tldraw-zero themed follow-ups to the styles API added in #1580.

- Removed style related helpers from `ShapeUtil`
- `editor.css` no longer includes the tldraw default color palette.
Instead, a global `DefaultColorPalette` is defined as part of the color
style. If developers wish to cusomise the colors, they can mutate that
global.
- `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an
"svg export context" that can be used to add `<defs>` to the exported
SVG element. Converting e.g. fonts to inlined data urls is now the
responsibility of the shapes that use them rather than the Editor.
- `usePattern` is not longer a core part of the editor. Instead,
`ShapeUtil` has a `getCanvasSvgDefs` method for returning react
components representing anything a shape needs included in `<defs>` for
the canvas.
- The shape-specific cleanup logic in `setStyle` has been deleted. It
turned out that none of that logic has been running anyway, and instead
the relevant logic lives in shape `onBeforeChange` callbacks already.

### Change Type
- [x] `minor` — New feature

### Test Plan


- [x] Unit Tests
- [x] End to end tests

### Release Notes
 --

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00