Commit graph

1575 commits

Author SHA1 Message Date
Mitja Bezenšek
ea83e45942
Fix the cleanup of event handlers (#2298)
We probably don't want to add the listener here.

### 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-06 16:19:31 +00:00
alex
7f48194c8f
fix new page naming (#2292)
When creating a new page from the "move to page" menu it would be
created as just "Page" instead of "page 1" etc.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Start from an empty canvas
2. Add some stuff to the canvas
3. Select it, right click, and choose "move to page" -> "new page"
4. The newly created page should be called "page 2"


### Release Notes

- Fix naming of pages created by the "move to page" action
2023-12-06 08:54:24 +00:00
Mitja Bezenšek
dcf2ad9820
Fix exporting of cropped images. (#2268)
Open this PR in different browsers, and you will see that the svg below
will render differently in different browsers. The svg was exported from
our staging.

Seems like Chrome handles `clip-path` when set via the style differently
than Safari and Firefox. I've reworked the logic so that it now uses a
`clip-path` definition and applies that to the image.


![shape_xPSLLIG9yQkqAACrv1OxE](https://github.com/tldraw/tldraw/assets/2523721/4d0baba3-f5bf-4e78-96fe-aaa91ead107f)

Also fixes a bunch of issues when copy pasting via the menu. It seems
like we can't store the write function to a variable:

![image](https://github.com/tldraw/tldraw/assets/2523721/8d38edaf-8d63-462b-9f1a-c38960add7d7)


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

### Before
![CleanShot 2023-11-30 at 09 30
24](https://github.com/tldraw/tldraw/assets/2523721/93c06d5f-bfb2-4d97-8819-a8560c770304)

### After
![CleanShot 2023-11-30 at 09 30
55](https://github.com/tldraw/tldraw/assets/2523721/29e0f699-d0e8-4fb2-b90e-1d14ee609e52)

### 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 an image, apply crop to it (best if you crop from all sides, just
to make sure)
2. Copy as png and make sure the image is correctly cropped in the
created image.


### Release Notes

- Fix exporting of cropped images.
2023-12-05 15:15:05 +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
Steve Ruiz
7d699a749f
[improvements] arrows x enclosing shapes x precision. (#2265)
This PR makes several improvements to the behavior of arrows as they
relate to precision and container relationships.

- an arrow's terminals are always "true" and are never snapped to { x:
.5, y: .5 } as they were previously when not precise
- instead, a new `isPrecise` boolean is added to the arrow terminal
- when an arrow terminal renders "imprecisely" it will be placed to the
center of the bound shape
- when an arrow terminal renders "precisely" it will be placed at the
normalized location within the bound shape

![Kapture 2023-11-29 at 23 12
12](https://github.com/tldraw/tldraw/assets/23072548/e94e1594-75fa-4c94-86f3-7d911bf25f7f)

The logic now is...
- if the user has indicated precision by "pausing" while drawing the
arrow, it will be precise
- otherwise...
- if both of an arrow's terminals are bound to the same shape, both will
be precise
- if a terminal is bound to a shape that contains the shape that its
opposite terminal is bound to, it will be precise
- if a terminal is bound to a shape that contains the shape that its
opposite terminal is bound to, it will be precise
- or else it will be imprecise

If the spatial relationships change, the precision may change as well.

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

Note: a previous version of this PR was based around ancestry but that's
not actually important.

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Draw an arrow between a frame and its descendant
2. Draw an arrow inside of a shape to another shape contained within the
bounds of the big shape
3. Vis versa
4. Vis versa

- [x] Unit Tests

### Release Notes

- Improves the logic about when to draw "precise" arrows between the
center of bound shapes.
2023-12-01 21:34:12 +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
Mitja Bezenšek
39a65b9c96
Add connecting screen override. (#2273)
Adds a `LoadingScreen` override option. 

Resolves https://github.com/tldraw/tldraw/issues/2269

### 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. Add a step-by-step description of how to test your PR here.
2.

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

### Release Notes

- Allow users to customize the connecting screen.
2023-12-01 11:56:08 +00:00
Mitja Bezenšek
e2ddbb16f6
Removing frames and adding elements to frames (#2219)
- Add simple frame removing - it just drops the frame and parent
children to frames parent.
- Select children after removing the frame.
- Add children to the frame if we resize the frame so that it encloses
them.

Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

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

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>
2023-11-29 12:01:57 +00:00
David Sheldrick
82b6287ab3
Hot elbows (#2258)
Our ink has kinda homely elbows sometimes. This PR believes elbows can
and should be beautiful.

The way this is achieved is by partitioning the points fed into
perfect-freehand at elbow points, and then rendering each partition
separately.

Doing this naively ballooned the size of the SVG path data so I also did
a tiny bit of refactoring to allow us to use the SVG arc command. At the
same time we are able to easily omit some of the points around the
beginnings and ends of segments thanks to the nature of the corners.

All of this results in an average 13% reduction in SVG path data size
over the current version.


![Kapture 2023-11-27 at 14 39
57](https://github.com/tldraw/tldraw/assets/1242537/44882d93-f06b-4956-af97-0113b2d8e8ef)


### Change Type

- [x] `patch` — Bug fix

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-11-29 11:56:47 +00:00
David Sheldrick
a55989f420
Replace getters in examples (#2261)
Follow up to #2189 

### 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
2023-11-28 17:33:10 +00:00
Ikko Eltociear Ashimine
263c04e6bf
fix typo in useFixSafariDoubleTapZoomPencilEvents.ts (#2242)
occuring -> occurring



### 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.
2023-11-27 16:02:58 +00:00
ByMykel
932ec4cdd6
Fix missing padding-right in toast (#2251)
Before:
<img width="699" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/8b974a6d-aa1d-4f5b-8cf5-c508ddd64f9f">

After:
<img width="702" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/67abb0e6-1915-4a77-9c09-c5f6cb51d202">


It seems like the padding-right is missing.


![image](https://github.com/tldraw/tldraw/assets/38622893/6751f5d0-449c-48da-9e01-e0dd46889d27)


### 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. Go to https://makereal.tldraw.com/.
2. Click 'Make real' without having any changes.

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

### Release Notes

- Fox padding-right in toast content.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-11-25 14:17:16 +00:00
Mitja Bezenšek
ba4091c594
Also export TLUiEventMap (#2234)
Export `TLUiEventMap` since other exports depend on it.

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

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

- Export `TLUiEventMap` type.
2023-11-17 09:25:57 +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
David Sheldrick
431ce73476
No impure getters pt10 (#2235)
Follow up to #2189 

### Change Type

- [x] `patch` — Bug fix
2023-11-16 12:07:33 +00:00
Steve Ruiz
81f6fae070
Add getSvgAsImage to exports. (#2229)
This PR adds `getSvgAsImage` to the package's exports.

### Change Type

- [x] `minor` — New feature
2023-11-15 18:40:20 +00:00
Mitja Bezenšek
c4564dc2be
Fix the tool lock button. (#2225)
Adds the missing tool lock button.

Fixes #2224 

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

- Adds the missing tool lock button.
2023-11-15 18:06:29 +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
David Sheldrick
464ba43b51
No impure getters pt7 (#2220)
follow up to #2189 

### Change Type

- [x] `patch` — Bug fix
2023-11-14 15:20:59 +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
David Sheldrick
6f872c796a
No impure getters pt6 (#2218)
follow up to #2189 

### Change Type

- [x] `patch` — Bug fix
2023-11-14 11:57:43 +00:00
David Sheldrick
898feb6650
don't overwrite bookmark position if it changed before metadata arrives (#2215)
Fixes issue when creating new bookmark shape where the position would be
reset if you moved it before the bookmark metadata was fetched

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Fixes issue when creating new bookmark shape where the position would
be reset if you moved it before the bookmark metadata was fetched.
2023-11-14 10:33:43 +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
Mitja Bezenšek
9e7d258b5f
Add prettier caching (#2212)
Adds `--cache` flag to prettier which significantly speeds up `yarn
format`:
https://prettier.io/docs/en/cli#--cache

One downside is that changing the plugins we use with prettier will not
cause the cache to invalidate. Stills seems worth it though.

> Plugins version and implementation are not used as cache keys. We
recommend that you delete the cache when updating plugins.

### 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. Run `yarn format`
2. Run `yarn format` again, this time it should be significantly faster.

### Release Notes

- Speed up formatting of files via `yarn format`.
2023-11-14 09:06:52 +00:00
Steve Ruiz
65bdafa0ba
[fix] huge images, use downscale for image scaling (#2207)
This PR improves our method for handling images, which is especially
useful when using a local tldraw editor. Previously, we were only
downsample images that were above the browser's maximum size. We now
downsample all images. This will result in smaller images in almost all
cases. It will also prevent very large jpeg images from being converted
to png images, which could often lead to an increase in file size!

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Add some images (jpegs or pngs) to the canvas.

### Release Notes

- Improved image rescaling.
2023-11-14 08:21:32 +00:00
Mitja Bezenšek
6f12eaefa2
Revert back to the previous color. (#2210)
Fixes the color of culled shapes when using dark mode. Reverted to the
color that was set before the blue test color.


### 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 the color of culled shapes when using dark mode.
2023-11-14 08:21:24 +00:00
Mitja Bezenšek
04e08b1871
Fix an issue with not being able to group a shape an an arrow. (#2205)
There was an issue with preventing grouping of a shape and an arrow
bound to it.

There was another issue where you had a shape and an unbound arrow
grouped. If you then tried to bind the arrow to the shape it would
ungroup the two.

The underlying issue for both was the same and it goes something like
this:
1. We group the shape and the bound arrow.
2. This reparents both of them to the group.
3. This triggers `registerAfterChangeHandler` cb.
4. This reparents the arrow and it reparents it to the page since we
only have one binding.
5. This then triggers `onChildrenChange` in `GroupShapeUtil` which
removes the group.

## Before

**Cant create the group**


https://github.com/tldraw/tldraw/assets/2523721/d6717b8a-9a68-484b-bf2d-969140a9bfc1


**Binding ungroups**


https://github.com/tldraw/tldraw/assets/2523721/c85f99d5-9343-454f-a934-85d7489dbc72

## After

**Can create the group**


https://github.com/tldraw/tldraw/assets/2523721/e6c026d8-6a42-413c-9471-30669610910b


**Does not ungroup**


https://github.com/tldraw/tldraw/assets/2523721/74e43741-31a9-42a2-b1e0-6dca2e678669



Fixes https://github.com/tldraw/tldraw/issues/2088
Fixes https://github.com/tldraw/tldraw/issues/2089

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

**Testing that you can correctly group a shape and an arrow bound to
it**
1. Insert a shape
7. Insert an arrow and bind it to the shape
8. Select both and group them (use the keyboard shortcut, seems like we
disable the UI for this case).
9. This should create a group.

**Testing that you don't ungroup an arrow when you unbind it from a
shape**
1. Start with a group that contains a shape and an arrow.
2. Bind the arrow to the shape and then unbind it.
3. The group should still be there.



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

### Release Notes

- Add a brief release note for your PR here.

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-11-14 07:14:51 +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
Steve Ruiz
3c768867f2
[fix] masked bounds calculation (#2197)
This PR fixes a bug where frames with children that have identical
dimensions would not be able to export as images.

When calculating masked page bounds, identical shapes would produce a
zero width/height masked page bounds.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create a frame.
2. Create an image that is a child of the frame and the exact dimensions
of the frame (possibly using the console)
3. Export the image

### Release Notes

- Fix bug with getmaskedpagebounds calculation for identical parent /
child sizes
2023-11-11 13:50:48 +00:00
huppy-bot[bot]
56ada41ae7 Update CHANGELOG.md [skip ci] 2023-11-10 10:49:37 +00:00
David Sheldrick
037246e267
Revert "bump prerelease from alpha to beta" (#2192)
Reverts tldraw/tldraw#2148
2023-11-10 10:41:31 +00:00
Steve Ruiz
3e78b18f72
Add tldraw component exports (#2188)
This PR adds the default tldraw components to the library's exports.

### Change Type

- [x] `patch` — Bug fix
2023-11-09 16:46:52 +00:00
Mitja Bezenšek
b232ac0c45
Fix an error when using context menu. (#2186)
Fixes the console error when using the context menu.

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

### 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.  Start the app.
2. Right click to open the context menu.
3. You should not see the "Warning: Function components cannot be given
refs. Attempts to access this ref will fail. Did you mean to use
React.forwardRef()?" error in the console. The error only happens on
first right click, so make sure to refresh the page before trying.

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

### Release Notes

- Fixes the console error when opening the context menu for the first
time.
2023-11-09 16:28:39 +00:00
Steve Ruiz
185a0ae658
[fix] actions menu freezing ui (#2187)
This PR fixes a bug where a render to the popover component would cause
the menu to never close.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Open the quick actions menu with two shapes selected
2. Click the group button
3. Click on the canvas

The menu should close.

### Release Notes

- Fix actions menu not closing when clicking the canvas after grouping
items via the actions menu.
2023-11-09 16:21:46 +00:00
Mitja Bezenšek
9b2b1411aa
Fix an issue with edit link. (#2184)
After the dialog is closed the `body` still has `pointer-events: none`
applied to it. Looks like a radix issue in an older version:
https://github.com/radix-ui/primitives/issues/1241

To test this in our private repo you also need to run `yarn dedupe` to
make this work. Otherwise some old dependencies are kept and make this
not work.

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

### 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 geo shape, right click it, Edit link, add a link or cancel the
dialog.
2. You should be able to deselect the shape after the dialog is closed.


### Release Notes

- Fixes an issue with using the Edit link dialog.
2023-11-09 15:55:29 +00:00
Taha
1cf4e69c47
add missing semicolon (#2182)
Fixes #2152

A semicolon was missing from the editor.css file

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


### Release Notes

- Fix typo in CSS file
2023-11-09 14:15:28 +00:00
Mitja Bezenšek
70a1103107
Only use the hack if we are in safari. (#2185)
Only use the hack if we are in safari. Should make it faster for other
browsers.

Based on the suggestion from
https://github.com/tldraw/tldraw/issues/2183

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

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

- Improve the speed of exporting to png for non Safari browsers.
2023-11-09 14:02:52 +00:00
Mitja Bezenšek
1f47a5aef4
Fix keyboard shortcuts for vscode. (#2181)
It looks like loading the file unfocused the editor. And since it
[wasn't focused we didn't register keyboard
shortcuts](https://github.com/tldraw/tldraw/blob/mitja/fix-keyboardshortcuts/packages/tldraw/src/lib/ui/hooks/useKeyboardShortcuts.ts#L27).

This makes sure that the focus after loading the file stays the same as
it was before loading it.

Fixes: #2028
Fixes: #2116

### 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. Open a new file with the `tldraw: New project` command.
3. Make sure keyboard shortcuts are working.

### Release Notes

- Fixes keyboard shortcuts for VS Code extension.
2023-11-09 11:17:01 +00:00
David Sheldrick
ba4664d279
fix scroll event coords (#2180)
Follow up to #2149 to make sure it works when tldraw is not mounted at
0,0 in document space. Try it out in the 'multiple' examples

### Change Type

- [x] `patch` — Bug fix
2023-11-08 14:34:26 +00:00
Mitja Bezenšek
0e39c31c6e
Fix printing. (#2177)
Fixes printing. The issue is that SPA added an additional `root` div to
the body and all our elements now live inside of that. The following css
stopped working because of that.
```css
body > * {
   display: none;
}
```

For now I just added a rule to hide the `tldraw__editor`, which should
be a relatively safe thing to do.

We should think about improving this down the line:
1. We should allow the user to tell us about the root of where the
tldraw lives and then target elements based on that (or allow users to
customize the `usePrint` and other similar features)
2. We probably should not append stuff directly to the `body` as we
currently do.

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

### 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 some shapes to the doc.
2. Use print and check that we only show the shapes / frames in the
print preview. There should be no UI visible.

### Release Notes

- Fixes printing of shapes.
2023-11-08 11:47:00 +00:00
Taha
a771b05bf2
[fix] Frame label not following staying aligned correctly on rotation (#2172)
closes #2157 
@ds300 fixed this

The Frame shape component now re-renders on rotation, ensuring that the
label position is always correct.

### 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. Make a frame shape
2. rotate it 90 degrees
before: it would stay where it was until the props of the shape changed
i.e on resize
now: it updates immediately

### Release Notes

- Frame labels immediately update their position on rotation.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-11-08 11:36:35 +00:00
Mitja Bezenšek
898d18b31b
Don't show scrollbars. (#2171)
Fixes [#2159](https://github.com/tldraw/tldraw/issues/2159)

### 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. Probably best to test the whole UI to make sure things with
`.tlui-buttons__grid` still render correctly. Things that are affected
by this: UserPresencePicker, ActionsMenu, ButtonPicker (used in style
panel), DoubleDropdown (arrowheads picker), DropdownPicker (Style
panel), Toolbar (overflowing tools).

### Release Notes

- Hide the horizontal scrollbar in the vertical alignment for Firefox.
2023-11-08 11:35:25 +00:00
David Sheldrick
133b8fbdc0
instant bookmarks (#2176)
this PR does a couple of things when creating bookmarks

- any time a url was pasted it was previously calling `fetch` on the url
to check whether the url is an image that we have cors access to. In
that case we can paste the image itself rather than a bookmark. But
that's gonna be a relatively rare use case, and the check itself seemed
to cost anywhere from 200ms to +1s which is certainly not worth it when
the fallback behaviour (create a regular bookmark) is fine. So i moved
that check behind a url pathname extension check. i.e. if the url
pathname ends with .gif, .jpg, .jpeg, .svg, or .png, then it will check
whether we can paste the image directly, otherwise it will always do a
regular bookmark.
- we create an asset-less bookmark shape on the canvas while we wait for
the asset to load if it is not already available. This means the user
gets immediate feedback that their paste succeeded, but they won't see
the actual bookmark details for a little bit.

It looks like this

![Kapture 2023-11-08 at 10 34
35](https://github.com/tldraw/tldraw/assets/1242537/89c93612-a794-419f-aa68-1efdb82bfbf2)

### Change Type

- [x] `minor` — New feature


### Release Notes

- Improves ux around pasting bookmarks
2023-11-08 11:08:03 +00:00
Mitja Bezenšek
8dceb5ee31
Fix arrow dropdown localizations. (#2174)
**Before**


![image](https://github.com/tldraw/tldraw/assets/2523721/161bc39b-f657-4983-8eaa-7de61c87b3bb)

**After**


![image](https://github.com/tldraw/tldraw/assets/2523721/f75794ce-96a1-4a9e-914d-cc9664702b6b)



### 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. Create an arrow.
2. Hover over the arrow head style dropdowns. They should be correctly
translated.
3. Also test it for when you have arrows with different styles selected.
This should show the `mixed` option.

### Release Notes

- Fix arrow headstyle dropdown translations.
2023-11-07 15:57:26 +00:00
Lu Wilson
07ec1e6ea1
Fix crash with zero length arrow (#2173)
This PR fixes a bug with zero length arrows.

Before:

![2023-11-07 at 15 17 47 - Harlequin
Mouse](https://github.com/tldraw/tldraw/assets/15892272/4c0b9609-f4f0-49cc-8575-ffd58973e81f)

After:

![2023-11-07 at 15 30 07 - Scarlet
Dinosaur](https://github.com/tldraw/tldraw/assets/15892272/af3188f1-c996-46e1-a2ff-48de31e0fc05)

Fixes #2166

### 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. Draw a rectangle.
2. Clone it.
3. Connect their centers with an arrow.
4. Hold control/command.
5. Drag one rectangle onto the other so they're in the exact same place.
6. Erase both rectangles (but NOT the invisible arrow).
7. Select all.
8. Hover the minimap.
9. Repeat but curve the arrow slightly before moving the rectangles
together.

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

### Release Notes

- Fix a hyper niche arrow crash with zero length arrows.
2023-11-07 15:53:16 +00:00
Mitja Bezenšek
cb6031f245
Allow users to select shapes when drag starts on top of a locked shape. (#2169)
Allows you to start brush selecting shapes on top of a locked shapes. In
this case we treat the click on top of the locked shape as if we clicked
on the canvas (we transition from `idle` -> `pointing_canvas`).

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

Before:


https://github.com/tldraw/tldraw/assets/2523721/7d6eb237-e084-4c40-b777-21d4a67fc796

After:


https://github.com/tldraw/tldraw/assets/2523721/0a73d1da-8250-4ba0-90ee-47d3e794a813

### 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 locked shape (for geo shape it should have some background)
2. Add a few shapes on top of that shape.
3. Start draging on top of the locked shape. You should be able to brush
select other shapes.

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

### Release Notes

- Allows brush selecting when you start it on top of a locked shape.
2023-11-07 13:55:27 +00:00
Mitja Bezenšek
bc24c0cc15
Fix the problem with text not being correctly aligned in small geo shapes. (#2168)
Seems like the `HTMLContainer` didn't have the correct size, so text
label was positioned a bit further up than it should be.

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

### 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. Create a small geo shape
2. Add some text to it. Test it with text that wraps to new lines.
3. Make sure text is centred.


### Release Notes

- Fixes position of Text labels in geo shapes.
2023-11-07 13:52:19 +00:00
Mitja Bezenšek
4af92421b3
Zooming improvement (#2149)
This improves how zooming works when we zoom in an inactive window. With
this change you should zoom towards the pointer position, while before
it zoomed towards the last known pointer position before the window
became inactive.

Fixes #2165 

Before


https://github.com/tldraw/tldraw/assets/2523721/50018782-533a-43bb-88a5-21fc4419b723

After


https://github.com/tldraw/tldraw/assets/2523721/c3859f84-ef56-4db8-96b9-50a2de060507



### 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. Open the tldraw editor.
2. Click away from the browser window so that it's not longer active.
3. Hover over the browser window and start zooming. 

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

### Release Notes

- Improves zooming for inactive windows.
2023-11-07 13:51:28 +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
David Sheldrick
b9d8246629
bump prerelease from alpha to beta (#2148)
This switches us from the 'alpha' to 'beta' prerelease tag. After we
make our first deploy folks will be able to install the latest version
by doing `npm install @tldraw/tldraw@beta`.

### 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-11-06 11:57:12 +00:00
David Sheldrick
8a1b014b02
Fix cleanupText (#2138)
Fixes a bug with our cleanupText helper where it fails on the empty
string or string with only space character(s).

Fixes https://tldraw.sentry.io/issues/4593272987

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

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

### Release Notes

- Fixes a minor bug where cleaning up text would fail.
2023-11-01 16:02:42 +00:00
Lu Wilson
5719cc76c1
[android] Fix text labels and link button getting misaligned (#2132)
Fixes https://github.com/tldraw/tldraw/issues/2131

Before: 


https://github.com/tldraw/tldraw/assets/15892272/c64d4ac5-6665-4c41-bf20-a5dbecdf4e1f

After:

![2023-10-31 at 12 20 21 - Chocolate
Dragonfly](https://github.com/tldraw/tldraw/assets/15892272/2b8ec620-8602-48ec-a0c1-e203b7eb1f38)


### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. On android, make a geo shape.
2. Add a text label to it.
3. Add a link to it.
4. Resize it.
5. Make sure the label and link don't wiggle around.
6. Repeat with a link on an image shape.

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

### Release Notes

- Fixed a bug where labels and links could lose alignment on android.
2023-10-31 13:34:23 +00:00
Steve Ruiz
e0e410ab5d
[fix] button gaps (#2130)
This PR fixes an issue with gaps in our buttons introduced by #2102. 

It also adjusts the spacing for the people menu items.

Before:
<img width="263" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/204f5879-d337-4eca-921d-e052ec352d06">
<img width="274" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/0fe3a59f-9b2a-4af9-a12f-358682e31c19">
<img width="262" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/cba016ad-23a4-4550-896c-5485593c1aae">

After:
<img width="253" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/d88d0da2-e48d-42af-a6ec-050abad0be31">
<img width="262" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/c3b9602a-1f4b-494b-80c6-7a0ff60876ed">
<img width="239" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/464e1c67-65bc-4b00-9a36-224dc3de0d8d">

Closes https://github.com/tldraw/brivate/issues/3123

### Change Type

- [x] `patch` — Bug fix
2023-10-31 11:32:14 +00:00
Steve Ruiz
7e587b0613
[fix] Move to page button / toasts styling (#2126)
This PR fixes the alignment in the Move to Page menu buttons.

Before:
<img width="502" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/55529136-6572-4354-be7d-472119cbe589">

After:
<img width="429" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/8fe473ab-23f7-4bcd-9ee8-5b71a3dcc8fc">

It also fixes an alignment issue in the toast component.

Before:
<img width="223" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/0fc3bb05-5f05-4e1a-b887-ea2e97f09f20">
After:
<img width="329" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/498eac3c-7651-40a7-b05c-1f45a09fc6b3">

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Move a shape to a page.
2023-10-29 14:40:42 +00:00
Steve Ruiz
19645b771d
[feature] multi-scribbles (#2125)
This PR adds support for multiple scribbles at the same time. It
prevents the sudden disappearance of existing scribbles when new ones
are added. It simplifies the management of scribbles by moving the
scribble manager to the editor.

![Kapture 2023-10-29 at 10 17
48](https://github.com/tldraw/tldraw/assets/23072548/23089047-6247-4714-bb79-c4972370140f)

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Use the eraser, scribble select, and laser pointer tools

- [x] Unit Tests

### Release Notes

- [feature] multi scribbles
2023-10-29 14:37:36 +00:00
Steve Ruiz
1c2611aab6
[fix] css for editing page title (#2124)
This PR fixes the CSS styling for the editing page title on mobile.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. View the page menu on mobile.
2. Start editing the pages.
3. The page title should not move.
2023-10-29 10:09:39 +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
Lu Wilson
d018cb9877
Remove indicator for autosize text shapes while editing (#2120)
This PR is a fork of #2119

It only has one of the two changes:

* Remove indicator for autosize text shapes while editing.

![2023-10-26 at 13 55 56 - Chocolate
Anaconda](https://github.com/tldraw/tldraw/assets/15892272/ee54db05-e96d-40e6-8003-cc013894f6f9)

I think we should merge this one, and continue discussion of the other
one (alignment).


### Change Type

- [x] `minor` — New feature

### Test Plan

1. Click to draw a text shape.
2. You shouldn't see the shape's indicator while editing it.
3. Drag to draw a text shape.
4. You *should* see the shape's indicator while editing it.

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

### Release Notes

- Removed the indicator from autosize text shapes.
2023-10-28 08:32:31 +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
Taha
2360a01e90
Taha/initial shape in handle change (#2117)
This PR passes the initial shape to the onHandleChange method. It makes
it a bit easier to work with handles in custom shapes.

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



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

### Release Notes

- Add a brief release note for your PR here.
2023-10-27 13:33:50 +00:00
Mitja Bezenšek
bc832bae6f
Fix an issue with addEventListener in old Safari (pre v14) (#2114)
Seems Safari only added `MediaQueryList: change event` in version 14.
This is a workaround for older versions.

https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event

Reported here

https://discord.com/channels/859816885297741824/926464446694580275/1166028196832092282

### 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 an issue with `addEventListener` on MediaQueryList object in old
versions of Safari.
2023-10-24 19:47:12 +00:00
David Sheldrick
94f78652cc
fix selection fg transform (#2113)
Uses the dpr trick on the selection foreground. Looks like the
background doesn't need this.

### 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 a small issue causing the selection foreground to be offset when
the browser is at particular zoom levels.
2023-10-23 12:32:10 +00:00
Lu Wilson
828848f8af
Remove (optional) from jsdocs (#2109)
This PR removes all mentions of "(optional)" from our jsdocs. This is
for:

* consistency — many of our jsdocs don't mention "(optional)" for
optional parameters. The developer is expected to use the type
definition to find this out. But it's a bit unclear because we use
"(optional)" in many places too.
* docs site — on our docs site, we use type definitions to figure out
what is optional, and what isn't. We use that info to denote optional
parameters. It looks funny having two "(optional)"s on a page. We
*could* strip them, but it's probably better to just remove them at the
source.

<img width="526" alt="image"
src="https://github.com/tldraw/tldraw/assets/15892272/b5b65a2b-2923-42a9-a2d3-9b1d9d55cd3d">


### Change Type

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

### Release Notes

- dev: Removed duplicate/inconsistent `(optional)`s from docs
2023-10-20 15:31:50 +00:00
Steve Ruiz
23ab6ff870
[fix] mobile style panel switching open / closed (#2101)
This PR fixes a bug where the mobile style panel would be immediately
re-opened when clicking on the style panel icon on mobile.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. On mobile, tap the style panel to open it
2. Tap again to close it.

### Release Notes

- Fix bug with style panel
2023-10-17 16:02:34 +00:00
huppy-bot[bot]
9c3b3ddbe0 Update CHANGELOG.md [skip ci] 2023-10-17 14:39:34 +00:00
Lu Wilson
5feccecb56
Firefox, Touch: Fix not being able to open style dropdowns (#2092)
This PR places a bandaid over a radix issue.

On firefox, when using a touch screen, certain dropdowns in the style
menu would immediately close after opening. This is because the
'touchup' event was closing them.

We can do a dodgy fix by preventing the touch up event.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. On firefox, use a touch device (this can be firefox devtools on a
mac)
2. Draw an arrow and a geo shape.
3. Select both of them.
4. Open the style menu.
5. Make sure you can open the arrowhead dropdown.
6. Make sure you can open the geo shape type dropdown.

### Release Notes

- Firefox Mobile: Fixed a bug where you couldn't open some style
dropdown options.
2023-10-17 13:19:05 +00:00
Taha
ad956865ec
Add timestamp to file names (#2096)
closes #2091
Added a little timestamp to filenames so that you don't get asked if you
want to download them again on android devices.

### 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. export as png
2. export again
3. the two files now have different names, wow!

### Release Notes

- Add timestamp to exported image file names
2023-10-17 13:15:00 +00:00
alex
4ab0a9d351
move imports (#2099)
These got moved in another diff and it broke our build for the dotcom
app.

### Change Type

- [x] `patch` — Bug fix
2023-10-17 13:09:39 +00:00
Steve Ruiz
3b7acb8997
[fix] Context menu + menus not closing correctly (#2086)
This PR fixes a bug that causes menus not to close correctly when open.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. On mobile, open the menu.
2. Tap the canvas—it should close the panel.
3. Open the mobile style panel.
4. Tap the canvas—it should close the panel.
5. Open the mobile style panel.
6. Tap the mobile style panel button—it should close the panel.
7. On mobile, long press to open the context menu

### Release Notes

- [fix] bug with menus
2023-10-17 13:06:53 +00:00
Lu Wilson
ca609a0fa5
Fix not being able to upload massive images (#2095)
This PR fixes a case where you couldn't upload images that are bigger
than the browser's max canvas size.
It does this by resizing them down if they're too big.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

Easiest to test on one of our iPads.

1. Take a photo with the iPad camera. (they're big photos)
2. Insert the photo to the canvas with the 'insert media' tool.
3. It should appear on the canvas!

(You might want to double check that your photo *doesn't* successfully
upload on staging, to make sure it's big enough)

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

### Release Notes

- Fixed big images being too big to get added to the canvas.
2023-10-17 12:54:40 +00:00
David Sheldrick
21ac5749d0
fix cropped image size (#2097)
closes #2080 

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Fixes a rendering issue where cropped images were sometimes bleeding
outside their bounds.
2023-10-17 12:17:12 +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
Kewell
47e6e4c25a
Fixed a bug checking translated string keys (#2082)
Fixed a bug checking translated string keys

Suppress the following warning message in your browser.
```
Language zh-cn: missing messages for keys:
locale
label
messages
```

### 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-10-17 08:29:43 +00:00
Steve Ruiz
59129e269d
[fix] remove findLast calls (#2081)
This PR removes some calls to `findLast`, as this is not in all browsers
yet.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Drag and drop.
2. Create a shape inside of a frame

- [x] Unit Tests
2023-10-17 08:23:59 +00:00
David Sheldrick
c377c98902
bump nanoid (#2078)
Bumps nanoid to bring in line with brivate to make sure our nanoid mock
in our fuzz test works. Supersedes
https://github.com/tldraw/brivate/pull/3027#pullrequestreview-1676280991

### 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
2023-10-16 08:44:12 +00:00
Steve Ruiz
a7c421ce9e
Add data breakpoint to layout css (#2076)
This PR adds `data-breakpoint` to the `tlui-layout`.

### Change Type

- [x] `minor` — New feature
2023-10-14 09:04:23 +00:00
Steve Ruiz
ff9c1655f9
[fix] missing border on group shape when unlocked (#2075)
This PR fixes a bug where the indicator on a locked group (or any
shape!) would not appear when the shape was unlocked. This happens
because the `memo` equality checker filtered out changes to the shape's
locked property if they did not effect any other properties.

![Kapture 2023-10-13 at 14 44
31](https://github.com/tldraw/tldraw/assets/23072548/c40442e0-8d18-4ed0-863c-c2b73da81f28)

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Fix case where indicator was not shown when unlocking groups
2023-10-13 15:13:47 +00:00
Steve Ruiz
1f4df14d4f
Compact children when updating parents to children. (#2072)
This PR fixes (or rather buries) a bug that could occur when the parents
to children array includes shapes that no longer exist.

### Change Type

- [x] `patch` — Bug fix
2023-10-13 12:12:05 +00:00
Steve Ruiz
bfb61b12ad
[fix] reparenting locked shapes (#2070)
This PR allows locked shapes to be reparented. This fixes a bug where
grouped and locked shapes would disappear when their parent group would
be ungrouped.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create two shapes.
2. Group the shapes.
3. Lock one shape.
4. Ungroup the group

- [x] Unit Tests

### Release Notes

- Fix a bug where grouped locked shapes would be deleted when ungrouped.
2023-10-13 11:18:26 +00:00
Steve Ruiz
01d46bbe22
[fix] Don't select locked shapes on pointer up (#2069)
This PR fixes a bug where a locked shape could be selected when clicking
the shape's label.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Place a no-fill geo shape
2. Lock the shape
3. Click on the middle of the shape (its label)
4. It should not be selected (previously it would be)

1. Place a no-fill shape in a frame
2. Lock the shape
3. Click on the middle of the shape or the edge of the shape
4. It should not be selected (previously it would be)

- [x] Unit Tests

### Release Notes

- Fix bug where locked shape could be selected by clicking on its label
2023-10-13 11:18:15 +00:00
Steve Ruiz
3a2598748c
Same first page id for all editors (#2071)
This PR changes the default state of the editor to use `page:page` as
its first page's id. This removes some randomness that makes certain
seed-based tests impossible. It should have no effect on the way that
the app works.

### Change Type

- [x] `minor` — New feature
2023-10-13 11:18:07 +00:00
Hana
eb041d516f
[fix] locked shape of opacity problem with eraser.pointing (#2073)
locked shape of opacity problem with the pointing state of the eraser
tool
this is only in the pointing (clicking) state.
I don't know if this is intended or a bug, but it's true that it's a
little uncomfortable.


![blinks](https://github.com/tldraw/tldraw/assets/59823089/6292aa54-120d-4cbc-b712-a78f408d248b)
blinks when the user starts to remove the handwriting on locked content.

Defs https://github.com/tldraw/tldraw/pull/2061

### 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. Make a locked shape
2. Click erase over the shape
3. The shape shouldn't change opacity

### Release Notes

- locked shape of opacity problem with eraser.pointing
Before/after:

![A](https://github.com/tldraw/tldraw/assets/59823089/7483506c-72ac-45cc-93aa-f2a794ea8ff0)
![B](https://github.com/tldraw/tldraw/assets/59823089/ef0f988c-83f5-46a2-b891-0a391bca2f87)
2023-10-13 11:17:42 +00:00
huppy-bot[bot]
ed5df33244 Update CHANGELOG.md [skip ci] 2023-10-11 10:42:50 +00:00
David Sheldrick
f118430afe
Fix shape opacity when erasing (#2055)
Closes #2051 

This was another bug related to the usage of parent-scope `let`
assignments to avoid stack allocations in a hot code path, so I switched
to `const`s and local `let`s which we really should have done last week.
I think the compiler should be able to optimize this well enough.

### 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 opacity of shapes while erasing in a group or frame.
2023-10-10 15:58:18 +00:00
Steve Ruiz
e77005e507
[fix] Hit testing against zero width / height lines (#2060)
This PR fixes a bug where certain hit tests would always miss straight
lines.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create a straight line.
2. Try to bind an arrow to it.

- [x] Unit Tests

### Release Notes

- [fix] Bug where arrows would not bind to straight lines
2023-10-10 15:58:02 +00:00
Taha
8015a7e3d8
Fix opacity lowering on shapes that cannot be deleted (#2061)
Opacity used to lower on locked shapes, now it doesn't

### 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. Make a locked shape
2. Scribble erase over the shape
3. The shape shouldn't change opacity

### Release Notes

- Locked shapes don't change opacity when scribble erasing.

Before/after:

<image width="250"
src="https://github.com/tldraw/tldraw/assets/98838967/763a93eb-ffaa-405c-9255-e68ba88ed9a2"
/>

<image width="250"
src="https://github.com/tldraw/tldraw/assets/98838967/dc9d3f77-c1c5-40f2-a9fe-10c723b6a21c"
/>
2023-10-10 13:27:42 +00:00
Steve Ruiz
544c61568c
[fix] broken docs link (#2062)
This PR fixes a broken link in the StyleProp docs.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
2023-10-10 13:23:49 +00:00
Prince Mendiratta
135af4533a
fix: proper label for opacity tooltip on hover (#2044)
Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.
There was a bug where hovering over the slider for opacity didn't
resolve the tooltip properly, due to accessing object property
incorrectly. This PR fixes this bug. The bug's reproduction video has
been attached below.

Thank you for this project, grateful!

<details>
<summary>Bug Reproduction Video</summary>


https://github.com/tldraw/tldraw/assets/54077356/f313fe1e-6d83-43f7-b101-2818719649bd

</details>

### 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. Open the app.
2. Hover above the opacity slider.
3. Ensure that the opacity value is shown properly.

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

### Release Notes

- Add a brief release note for your PR here.

Signed-off-by: Prince Mendiratta <prince.mendi@gmail.com>
2023-10-10 13:03:12 +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
Mitja Bezenšek
f16bad666a
Fix alt + shift keyboard shortcuts (#2053)
Fixes keyboard shortcuts that use `alt + shift` modifier (distribute
horizontally and vertically fall into this category).

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

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create multiple shapes
2. Use `alt + shift + v / h` to distribute vertically or horizontally.

### Release Notes

- Fixes keyboard shortcuts that use `alt` and `shift` modifiers.
2023-10-10 11:22:36 +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
2a8987d8b9
fix standalone examples (#2042)
The trigger for the generating the standalone examples was accidentally
pointing at the wrong domain
2023-10-09 10:55:16 +00:00
Steve Ruiz
863edc9b56
Remove fixup script (#2041)
This PR removes an unused "fixup" script.

### Change Type

- [x] `internal`
2023-10-09 10:23:01 +00:00