Commit graph

2339 commits

Author SHA1 Message Date
MinhoPark
3ffcd1601d
refactor: Keep hook function convention the same (#2358)
I standardized the definition of the `useEditor hook` by changing it
from an `arrow function` to a `regular function`, in line with other
editor-related hooks.


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

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

### Release Notes

- Add a brief release note for your PR here.
2023-12-20 09:06:20 +00:00
David Sheldrick
f6e7793f49
focus on container before deleting to avoid losing focus (#2354)
Fixes #2353 

so it turns out

- when you click a button that becomes the active element
- when you disable a button which is the active element, the button
blurs and the active element becomes document.body

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Prevents losing focus when clicking the trash button
2023-12-19 15:39:44 +00:00
Lu Wilson
4b4c258219
Stop shape text labels being hoverable when context menu is open (#2352)
Fixes https://github.com/tldraw/tldraw/issues/2351

This css change shouldn't affect any other interactions.

Tested on:
- Mac Chrome
- Mac Chrome with touch
- Mac Safari
- Mac Firefox

### 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. Right click to open context menu.
2. Click on a filled shape's text label.
3. Make sure the context menu has closed.

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

### Release Notes

- Add a brief release note for your PR here.
2023-12-19 14:26:10 +00:00
David Sheldrick
55f95bb666
Use custom font (#2343)
This PR adds our custom version of Shantell Sans. Not sure if we need to
keep the old file around for backwards compat?

### Change Type

- [x] `major` 

### Release Notes

- Add a brief release note for your PR here.

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2023-12-19 14:17:45 +00:00
Mitja Bezenšek
2a026504fe
Only allow side resizing when we have some shapes that are not aspect ratio locked (#2347)
Only allow edges resizing on mobile when a single text shape is
selected. Disabled it for all other cases.

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

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

- Don't allow edges resizing on mobile. The only exception is a single
text shape.
2023-12-19 13:45:19 +00:00
alex
39cb6bf49b
fix png images with pixel ratios <0.5 crashing the app (#2350)
When we handle pixel ratios in .png files, we were rounding the pixel
ratio to the nearest integer. This mean that if an image had a pixel
ration less than 0.5, it would get rounded to zero. This would cause a
divide-by-zero on the width & height of the image which would crash the
app.

This has a couple fixes:
- we ignore pixel ratios less that 1
- we perform rounding _after_ we apply the pixel ratio to the
width/height

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Upload this funky image:
![shapes_5](https://github.com/tldraw/tldraw/assets/1489520/80fb41fa-3be1-4dbd-8e2f-d81013b09780)
2. Check the app doesn't crash
2023-12-19 12:35:42 +00:00
Steve Ruiz
b58274ced2
Drop edge scrolling adjustment for mobile (#2346)
This PR makes all edge scrolling distances 32px.

### Change Type

- [x] `patch` — Bug fix
2023-12-19 11:47:40 +00:00
Steve Ruiz
5f9ab64838
Fix iconleft padding (#2345)
This PR fixes the icon padding (or margin) for helper buttons like Back
to Content.

Before:
<img width="393" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/c584901c-e826-433a-b76c-08f67a13807c">

After:
<img width="446" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/ed9aeb3b-70df-43a0-9241-c329093c5cf5">


### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Fixes the icon padding in back to content / pen mode buttons.
2023-12-19 11:24:52 +00:00
zfedoran
80f8c98754
[bug] Fix for issue #2329 (#2330)
This PR fixes the issue outlined in issue #2329

### Change Type

- [x] `patch` — Bug fix


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

### Release Notes

- Fix for `Matrix2d.Scale` function
2023-12-19 10:41:23 +00:00
Steve Ruiz
3cf4dae34d
Change licenses to tldraw (#2167)
This PR updates the licenses across tldraw to a bespoke tldraw license.

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

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

### Change Type

- [x] `major` — Breaking change
2023-12-19 10:41:01 +00:00
Mitja Bezenšek
6bd7f4fcc9
Allow dragging on top of locked shapes. (#2337)
This PR allows dragging a selection on top of a locked shape. This
should work when clicking inside of the selection, but not directly on a
shape.

Before:


https://github.com/tldraw/tldraw/assets/2523721/53583ae9-9ed7-455e-bdc4-ba13804dd8a3

After:


https://github.com/tldraw/tldraw/assets/2523721/81d8f8bf-5474-4a09-abac-75059a089851



Fixes https://github.com/tldraw/tldraw/issues/2316
Fixes https://github.com/tldraw/tldraw/issues/2315

### 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 big shape and lock it.
2. Create two shapes on top of the locked shape and select them.
3. Start dragging the selected shapes by clicking inside the selection
(but not directly on any of the shapes). This should allow you to
translate the selection.
4. Should also work if the shapes are behind the locked shape.

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

### Release Notes

- Allow translating of shapes on top of a locked shape by clicking
inside of selection and moving the mouse.
2023-12-19 10:40:50 +00:00
David Sheldrick
ded56e953a
Remove deprecated getters (#2333)
Finally removing all these deprecated getters ahead of the full release.

### Change Type

- [x] `major` — Breaking change

### Release Notes

- (Breaking) Removed deprecated getters.
2023-12-19 10:39:58 +00:00
Lu Wilson
1712d96daa
Lokalise: Translations update (#2342)
This pull request was initiated by Lokalise (user Lu) at 2023-12-19
10:48:13

## Release Notes

Added Czech translations.
Updated translations for German, Korean, Russian, Ukrainian, Traditional
Chinese.
2023-12-19 10:33:17 +00:00
David Sheldrick
1d29ac3c42
Prevent diff mutation (#2336)
We had a bug in `squashRecordDiffs` where it could potentially mutate
'updated' entries.

### Change Type

- [x] `patch` — Bug fix


### Release Notes

- Fix `squashRecordDiffs` to prevent a bug where it mutates the
'updated' entires
2023-12-18 20:18:31 +00:00
David Sheldrick
509ee3a6e4
Call devFreeze on initialData (#2332)
I noticed we weren't freezing the initialData passed into the store.

### Change Type

- [x] `patch` — Bug fix
2023-12-18 15:45:52 +00:00
Mitja Bezenšek
ed153a4180
Fix indicator radius for bookmarks. (#2335)
Fixes the border radius for the bookmark shape indicator. The shape
itself used 6px (`--radius-2` variable), while the indicator used 8px.

Before

![image](https://github.com/tldraw/tldraw/assets/2523721/c0f6f9b7-6814-4674-bb79-2fca809c199e)

After

![image](https://github.com/tldraw/tldraw/assets/2523721/67ae4fd4-f572-4477-9582-a9dd775022b3)


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

- Fix the indicator for the bookmark shape. The radius now matches the
shape's radius.
2023-12-18 15:26:14 +00:00
David Sheldrick
0b434d61f0
Fix TSDoc for @tldraw/state (#2327)
This PR opts to split the big singleton out into other smaller
singletons so that we can revert the moving of the tsdoc comments that
happened in #2322

### Change Type

- [x] `patch` — Bug fix


[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
2023-12-18 10:57:37 +00:00
Mitja Bezenšek
4e50c9c162
Start scrolling if we are dragging close to the window edges. (#2299)
Start scrolling when we get close to the edges of the window. This works
for brush selecting, translating, and resizing.


https://github.com/tldraw/tldraw/assets/2523721/4a5effc8-5445-411b-b317-36097233d36c


### 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. Select a shape.
2. Move it towards the edge of the window. The camera position should
change.
3. Also try resizing, brush selecting.

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

### Release Notes

- Adds the logic to change the camera position when you get close to the
edges of the window. This allows you to drag, resize, brush select past
the edges of the current viewport.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-12-15 23:37:03 +00:00
Mitja Bezenšek
0171d1498d
Fix downscaling (#2325)
Fixes an issue where uploaded images could significantly increase the
document size. The problem was with calling `downscale` library, which
expect the type to be one of: `jpg`, `png`, `webp`. We were sending the
type with the `image/` prefix. Thanks to @irg1008 for pointing that out.

Test image:

![testImage](https://github.com/tldraw/tldraw/assets/2523721/b8df54ca-60f4-47a4-8b71-ca6ba6ca1935)

The difference I saw in testing:
![CleanShot 2023-12-15 at 10 34
56](https://github.com/tldraw/tldraw/assets/2523721/cf571ac9-4af0-4ac0-af3f-3dfbbe5cdd85)

@steveruizok why are we[ doubling the size
here](https://github.com/tldraw/tldraw/blob/main/packages/tldraw/src/lib/utils/assets/assets.ts#L61-L62)?
For retina quality?

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

### 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. Use the supplied test image.
2. Add it to a tldraw document.
3. Save the file and check the file size. It should be significantly
lower than doing the same thing on tldraw.com

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

### Release Notes

- Decrease the size of uploaded assets.
2023-12-15 17:13:36 +00:00
David Sheldrick
b133c59391
Use a global singleton for tlstate (#2322)
One minor issue with signia is that it uses global state for
bookkeeping, so it is potentially disastrous if there is more than one
version of it included in a bundle.

To prevent that being an issue before we had a warning that would
trigger if signia detects multiple initializations.

> Multiple versions of @tldraw/state detected. This will cause
unexpected behavior. Please add "resolutions" (yarn/pnpm) or "overrides"
(npm) in your package.json to ensure only one version of @tldraw/state
is loaded.

Alas I think this warning triggers too often in development
environments, e.g. during HMR or janky bundlers.


Something that can prevent the need for this particular warning is
having a global singleton version of signia that we only instantiate
once, and then re-use that one on subsequent module initializations. We
didn't do this before because it has a few downsides:

- breaks HMR if you are working on signia itself, since updated modules
won't be used and you'll need to do a full refresh.
- introduces the possibility of breakage if we remove or even add APIs
to signia. We can't rely on having the latest version of signia be the
first to instantiate, and we can't allow later instantiations to take
precedence since atoms n stuff may have already been created with the
prior version. To mitigate this I've introduced a `apiVersion` const
that we can increment when we make any kind of additions or removals. If
there is a mismatch between the `apiVersion` in the global singleton vs
the currently-initializing module, then it throws.

Ultimately i think the pros outweigh the cons here, i.e. far fewer
people will see and have to deal with the error message shown above, and
fewer people should encounter a situation where the editor appears to
load but nothing changes when you interact with it.


### Change Type

- [x] `patch` — Bug fix

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

### Release Notes

- Make a global singleton for tlstate.
2023-12-14 13:35:34 +00:00
Mitja Bezenšek
e8761c8e51
VS Code 2.0.19 (#2324)
VS Code version bump.

### Change Type

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

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

### Release Notes

- Version bump for VS Code.
2023-12-14 08:49:10 +00:00
huppy-bot[bot]
64dce02ba3 Update CHANGELOG.md [skip ci] 2023-12-12 14:50:43 +00:00
David Sheldrick
be93cc0eb6
Revert "zoom to affected shapes after undo/redo" (#2310)
Reverts tldraw/tldraw#2293
2023-12-12 11:36:52 +00:00
David Sheldrick
f7ae99dd1f
zoom to affected shapes after undo/redo (#2293)
This PR makes it so that any shapes affected by an undo/redo action,
along with any shapes that are selected after an undo/redo action, are
visible in the viewport.

### Change Type

- [x] `patch` — Bug fix


### Release Notes

- Make sure affected shapes are visible after undo/redo
2023-12-08 10:35:35 +00:00
Mitja Bezenšek
e3d21e0b2b
Fix hmr. (#2303)
Fixes HMR (keyboard shortcuts should be working after making changes
after this).

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


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

It caused other issues as well

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

### Change Type

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

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

### Release Notes

- Fixes HMR in local dev.
2023-12-08 10:30:34 +00:00
Mitja Bezenšek
9915f2b0f6
Fix migrations. (#2302)
Fix `instance_page_state` migrations. We discovered this in a file that
a user sent.

I updated the existing migration since it caused data loss. It looks
like we had a few migrations dealing with `croppingShapeId`:
- First we added the prop with the name `croppingShapeId` and value of
`null` (`AddCroppingId` migration)
- We then have a dummy migration, which doesn't change anything
(`RenameProperties` migration)
- We then override the existing value of `croppingShapeId` with an
non-existent property `croppingId`. This clears out the value and leads
to data loss. (`RenamePropertiesAgain` migration).

So we now avoid that by first looking at `croppingShapeId`, but we still
keep the `croppingId` as a fallback. Felt safer this way.


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

- Fix migrations of `instance_page_state`.
2023-12-07 13:23:22 +00:00
Mitja Bezenšek
300466f52a
Add fit to content for frames. (#2275)
Adds Fit to content option for frames. This resizes the frames so that
the whole content fits. It also adds 50px padding on all sides so that
the content does not touch the frame's borders.



https://github.com/tldraw/tldraw/assets/2523721/b2f86e31-7dfb-495f-ac31-f1e0125e0af1



https://github.com/tldraw/tldraw/assets/2523721/e0a73d25-ac9f-4a35-a1fd-4aed7a5b151c



Fixes #1407

### 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 some shapes.
2. Add a frame that encloses those shapes.
3. Right click on the frame and choose `Fit to content`
4. The frame should resize to fit all the children with some padding on
all sides of the frame.

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

### Release Notes

- Add Fit to content option to the context menu for frames. This resizes
the frames to correctly fit all their content.

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-12-07 12:57:56 +00:00
Mitja Bezenšek
0cf6a1e464
Fix an issue with a stale editor reference in shape utils (#2295)
Fixes an issue where the editor reference in shape utils was not up to
date with the editor returned from `useEditor`. Actually, the whole util
was the incorrect one and was holding a reference to the previous
instantiation of the editor.

This only occurred in dev mode, but could also happen in other cases
where editor is created multiple times. To see the kinds of issues this
causes in dev mode you can do the following:
1. Create an image, crop it.
2. Refresh the page.
3. Select the image, then double click it to enter crop mode.
4. You will not see the cropped area of the image. You need to change
the crop slightly and then it suddenly appears. This is because this
changes props, which reruns the memoized function.

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

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

- Fix an issue where the shape utils could have a stale reference to the
editor.
2023-12-06 16:19:57 +00:00
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
Mitja Bezenšek
49f0f7f200
VS Code version bump. (#2297)
Bumps the VS code version.

### Change Type

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


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

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

### Change Type

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

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

### Release Notes

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

### Change Type

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

### Test Plan
- [x] End to end tests
2023-12-04 13:52:37 +00:00
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
Bruno
8c3383a9d5
improves translation into pt-br (#2231)
Improves the overall translation of the application into Portuguese
(pt-br), fix typos and adds new translations for new features.

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

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

### Release Notes

- Improves the overall translation into Portuguese (pt-br).
2023-11-27 13:45:25 +00:00
Gary Saunders
699502d8c4
Fixes #2246 Sublibraries example (ExplodedExample.tsx) (#2247)
Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type

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

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

### Test Plan

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

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

### Release Notes

- Fixed Sublibraries (Exploded) example

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


### Change Type

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

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

### Test Plan

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

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

### Release Notes

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


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

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package
2023-11-22 21:35:26 +00:00
Lu Wilson
52c3865420
Lokalise: Translations update (#2248)
## Release Notes

- Update Romanian translations.
2023-11-21 09:39:25 +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