Commit graph

2509 commits

Author SHA1 Message Date
Steve Ruiz
24bf2cd581
Update README.md (#2464)
### Change Type

- [x] `patch` — Bug fix
2024-01-12 18:10:14 +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
David Sheldrick
8769afb7e1
delete unused duplicated DraggingHandle.ts (#2463)
this PR removes an unused file that was created while renaming a
directory a while ago.

### 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
2024-01-12 16:13:56 +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
Mime Čuvalo
dca7883f89
[fix] disable vertical edge resizing for text on mobile (#2456)
This is a followup to PR #2347 which was addressing #2349.
This makes sure that vertical resizing is disabled still for the text
shapes because they get in the way of rotation.

Fixes #2455 

### 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

- Add a brief release note for your PR here.
2024-01-12 09:40:42 +00:00
Lu Wilson
f5b95d5df2
Don't bother measuring canvas max size for small images (#2442)
This PR makes it so we don't bother measuring the max size of your
browser canvas - if you're manipulating an image that is relatively
small (ie: less than 8K resolution).

Closes #2433 

@SomeHats I reckon this has some conflicts with your PR, #2441 

## Why?

Calculating the max canvas size... takes a long time on some devices,
eg: Android Chrome.

Most of the time, you don't need such a big canvas anyway. When you're
exporting/importing a small image, we can assume that the max size will
be big enough (based on some testing
[here](https://github.com/jhildenbiddle/canvas-size?tab=readme-ov-file#test-results)).
So we don't need to bother in those cases - speeding up the operation.

If you're manipulating a larger image, we measure the max canvas size -
as before.

## Anything else?

This PR also moves the 'clamping' code to one place. Previously, it was
repeated in three places, and it was annoying having to update them all
at the same time.

## What's next?

Measuring for large images is still slow. We should look at how to make
that experience better. eg: Visual feedback that it's happening. eg: Try
not to block the main UI thread. eg: Can we do anything in parallel?

### 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. Draw some shapes.
2. Select them.
3. Copy/export as png.
4. Repeat with various sizes of shapes. eg: Select shapes over a large
area, so that your exported image is larger than 8K resolution.

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

### Release Notes

- Android: Sped up exporting and importing images.
2024-01-10 17:58:18 +00:00
Peiling Jiang
d09d67d037
[Minor] change Simplified Chinese label to Chinese (#2434)
Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### 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

- Changed the label for the Simplified Chinese language from `Chinese -
Simplified` to `简体中文`, following the convention of other languages.
- Updated the API and relevant documentation through build scripts.
2024-01-10 15:30:25 +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
Steve Ruiz
1fa8462fc9
Update README (#2444)
Update the readme ahead of 2.0 release.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
2024-01-10 14:58:44 +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
Mitja Bezenšek
7902dc65c3
Fix the publish script (#2440)
Follow up to https://github.com/tldraw/tldraw/pull/2439. Should fix the
publishing script so that the next time we run it we don't run in the
the same issue.

We could also move the file directly to the `src` dir, but it seems
since only `ui` uses the version it was nested under the `ui` dir 🤷

### 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

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2024-01-10 14:40:06 +00:00
Lu Wilson
aaec2b69ec
Lokalise: Translations update (#2418)
This pull request was initiated by Lokalise (user Lu) at 2024-01-08
10:52:11

## Release notes

- Added Hungarian translations.
- Updated Turkish translations.
2024-01-10 14:37:33 +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
Steve Ruiz
219e2f63dd
[improvement] account for coarse pointers / insets in edge scrolling (#2401)
This PR:
- shrinks the distance for edge scrolling and insets the distance for
coarse pointers
- adds edge inset tracking

## Scroll distances

Rather than increasing the distance, we move the "zero" in from the
edges, so that the middle of a honkin' fat finger would be at "zero"
when the edge of the finger is touching the edge of the screen. This is
a bit more reliable than looking at just the component size.

## Inset tracking

We now track whether a shape's edges are identical to the edges of the
document body. When an edge is inset, we extend the edge scrolling
distance outside of the component, so that dragging PAST the edge of the
component will scroll. When an edge is NOT inset, we bring that distance
into the component's bounds, so that dragging NEAR TO the edge will
begin to scroll.


![image](https://github.com/tldraw/tldraw/assets/23072548/bb216c98-3dd0-4e2e-a635-4c4f339d5117)


![image](https://github.com/tldraw/tldraw/assets/23072548/75e83c81-1ca9-40a9-8edc-72851d3b1411)


![image](https://github.com/tldraw/tldraw/assets/23072548/6cda7bda-2935-4ded-821c-e7bf78833a1c)

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Use edge scrolling on mobile
2. Use edge scrolling on desktop
3. Use edge scrolling in the "scrolling example"

- [x] Unit Tests

### Release Notes

- Add `instanceState.insets` to track which edges of the component are
inset from the edges of the document body.
- Improve behavior around edge scrolling
2024-01-10 14:29:32 +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
Mitja Bezenšek
3eaa5810fe
Fix main. (#2439)
Looks like tests fail on `main` ([example of a
PR](https://github.com/tldraw/tldraw/actions/runs/7475025477/job/20342349739?pr=2438)
that should not be failing). This fixes them.

For some reason this [line didn't update
it](https://github.com/tldraw/tldraw/blob/main/scripts/lib/publishing.ts#L61).
Will look into it, but I guess we can merge this to unblock stuff.

### 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:31:33 +00:00
huppy-bot[bot]
35e74fdb12 Update CHANGELOG.md [skip ci] 2024-01-10 12:03:59 +00:00
Mitja Bezenšek
ca9ae8e3a3
Fix validation when pasting images. (#2436)
Before introducing url / src validation [we allowed
nulls](https://github.com/tldraw/tldraw/pull/2428/files#diff-28a9f0a3d4797d7addd1d61d336fc00acdec878273ac09f048e2e2dfaf77a037L30)
for src so I updated validations to reflect that.

Fixes [#2437](https://github.com/tldraw/tldraw/issues/2437)

### 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. Copy an image in tldraw in one browser (`cmd + c`)
2. Paste it to a different browser (or at least private mode of the same
browser)
3. Paste should work and you should not see any errors in the console.

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

### Release Notes

- Fixes url validations.

---------

Co-authored-by: alex <alex@dytry.ch>
2024-01-10 10:45:19 +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
Mitja Bezenšek
6e9fe0c8be
Add url validation (#2428)
Adds validation for urls we use for our shapes and assets. This PR
includes a migration so we should check that existing rooms still load
correctly. There might be some that won't, but that means that they had
invalid url set.

### 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. Existing rooms should still load correctly (there should be no
validation errors).
2. Adding new images and videos should also work (test both local and
multiplayer rooms as they handle assets differently).

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

### Release Notes

- Add validation to urls.

---------

Co-authored-by: alex <alex@dytry.ch>
2024-01-09 10:49:57 +00:00
Taha
4821ba0ba3
[fix] next selected shapes comment (#2427)
setStyleForNextShapes had a comment describing how
setStyleForSelectedShapes worked. This PR fixes that.

### 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 error in setStyleForNextSelectedShapes comment
2024-01-09 10:16:16 +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
Mitja Bezenšek
466a9a2088
Fix issues with clip paths for frames (#2406)
Fixes an issue with frame clipping paths. In fact, this should also
solve other issues we might have with intersect. Seems like our
`pointInPolygon` did not correctly detect that points in the corners or
on the edges of the polygon are in fact part of the polygon.

When calculating the intersection of two regular, intersecting
rectangles the`intersectPolygonPolygon` was returning a polygon with 2,
3, or sometimes even 0 points, which also could result in an error when
dragging one frame out of another frame.

It seems that for all intents and purposes the `pointInPolygon` function
should also consider corners and edges, but maybe we might want to
rename it?

Before:


https://github.com/tldraw/tldraw/assets/2523721/155d351d-8ceb-47c3-a263-024cab487d03

After:


https://github.com/tldraw/tldraw/assets/2523721/338b923a-f902-4dc4-a1b7-e954f906fb8d




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

### 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

- Add a brief release note for your PR here.
2024-01-05 07:55:38 +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