This diff tries to maintain bindings whilst translating arrows. It looks
at where the terminal of the arrow ends up, and if it's still over the
same shape, it updates the binding to a precise one at that location
rather than removing the binding entirely.
### Change Type
- [x] `minor` — New feature
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Test Plan
1. Create an arrow with bindings
2. Move the arrow (translation, stacking, nudging, distribution, etc)
3. Make sure that the end point of the arrow remains bound if
appropriate
- [x] Unit Tests
### Release Notes
- You can now move arrows without them becoming unattached the shapes
they're pointing to
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
this PR removes an unused file that was created while renaming a
directory a while ago.
### Change Type
- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [x] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
This is a followup to PR #2347 which was addressing #2349.
This makes sure that vertical resizing is disabled still for the text
shapes because they get in the way of rotation.
Fixes#2455
### Change Type
- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Test Plan
1. Add a step-by-step description of how to test your PR here.
2.
- [ ] Unit Tests
- [ ] End to end tests
### Release Notes
- Add a brief release note for your PR here.
This PR makes it so we don't bother measuring the max size of your
browser canvas - if you're manipulating an image that is relatively
small (ie: less than 8K resolution).
Closes#2433
@SomeHats I reckon this has some conflicts with your PR, #2441
## Why?
Calculating the max canvas size... takes a long time on some devices,
eg: Android Chrome.
Most of the time, you don't need such a big canvas anyway. When you're
exporting/importing a small image, we can assume that the max size will
be big enough (based on some testing
[here](https://github.com/jhildenbiddle/canvas-size?tab=readme-ov-file#test-results)).
So we don't need to bother in those cases - speeding up the operation.
If you're manipulating a larger image, we measure the max canvas size -
as before.
## Anything else?
This PR also moves the 'clamping' code to one place. Previously, it was
repeated in three places, and it was annoying having to update them all
at the same time.
## What's next?
Measuring for large images is still slow. We should look at how to make
that experience better. eg: Visual feedback that it's happening. eg: Try
not to block the main UI thread. eg: Can we do anything in parallel?
### Change Type
- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Test Plan
1. Draw some shapes.
2. Select them.
3. Copy/export as png.
4. Repeat with various sizes of shapes. eg: Select shapes over a large
area, so that your exported image is larger than 8K resolution.
- [ ] Unit Tests
- [ ] End to end tests
### Release Notes
- Android: Sped up exporting and importing images.
Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.
### Change Type
- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Release Notes
- Changed the label for the Simplified Chinese language from `Chinese -
Simplified` to `简体中文`, following the convention of other languages.
- Updated the API and relevant documentation through build scripts.
(gif is with 6x CPU throttling to make the effect more visible)
This is the first of a few diffs I'm working on to make dropping images
onto the canvas feel a lot faster.
There are three main changes here:
1. We operate on `Blob`s and `File`s rather than data urls. This saves a
fair bit on converting to/from base64 all the time. I've updated our
`MediaHelper` APIs to encourage the same in consumers.
2. We only check the max canvas size (slow) if images are above a
certain dimension that we consider "safe" (8k x 8k)
3. Switching from the `downscale` npm library to canvas native
downscaling. that library claims to give better results than the
browser, but hasn't been updated in ~7 years. in modern browsers, we can
opt-in to native high-quality image smoothing to achieve similar results
much faster than with an algorithm implemented in pure JS.
I want to follow this up with a system to show image placeholders whilst
we're waiting for long-running operations like resizing etc but i'm
going to split that out into its own diff as it'll involve some fairly
complex changes to the history management API.
### Change Type
- [x] `major` — Breaking change
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Test Plan
1. Tested manually, unit tests & end-to-end tests pass
This PR:
- shrinks the distance for edge scrolling and insets the distance for
coarse pointers
- adds edge inset tracking
## Scroll distances
Rather than increasing the distance, we move the "zero" in from the
edges, so that the middle of a honkin' fat finger would be at "zero"
when the edge of the finger is touching the edge of the screen. This is
a bit more reliable than looking at just the component size.
## Inset tracking
We now track whether a shape's edges are identical to the edges of the
document body. When an edge is inset, we extend the edge scrolling
distance outside of the component, so that dragging PAST the edge of the
component will scroll. When an edge is NOT inset, we bring that distance
into the component's bounds, so that dragging NEAR TO the edge will
begin to scroll.
### Change Type
- [x] `minor` — New feature
### Test Plan
1. Use edge scrolling on mobile
2. Use edge scrolling on desktop
3. Use edge scrolling in the "scrolling example"
- [x] Unit Tests
### Release Notes
- Add `instanceState.insets` to track which edges of the component are
inset from the edges of the document body.
- Improve behavior around edge scrolling
Looks like tests fail on `main` ([example of a
PR](https://github.com/tldraw/tldraw/actions/runs/7475025477/job/20342349739?pr=2438)
that should not be failing). This fixes them.
For some reason this [line didn't update
it](https://github.com/tldraw/tldraw/blob/main/scripts/lib/publishing.ts#L61).
Will look into it, but I guess we can merge this to unblock stuff.
### Change Type
- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
Before introducing url / src validation [we allowed
nulls](https://github.com/tldraw/tldraw/pull/2428/files#diff-28a9f0a3d4797d7addd1d61d336fc00acdec878273ac09f048e2e2dfaf77a037L30)
for src so I updated validations to reflect that.
Fixes [#2437](https://github.com/tldraw/tldraw/issues/2437)
### Change Type
- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Test Plan
1. Copy an image in tldraw in one browser (`cmd + c`)
2. Paste it to a different browser (or at least private mode of the same
browser)
3. Paste should work and you should not see any errors in the console.
- [ ] Unit Tests
- [ ] End to end tests
### Release Notes
- Fixes url validations.
---------
Co-authored-by: alex <alex@dytry.ch>
In #2198, we introduced a regression on ios around image exports. ios
will block copys if they're not called syncronously in a UI event. It's
important to make ios copys like this:
```ts
navigator.clipboard.write(new ClipboardItem(getStuffToCopyAsAPromise())
```
instead of
```ts
getStuffToCopyAsAPromise().then(stuff => {
navigator.clipboard.write(new ClipboardItem(stuff))
})
```
We've written and fixed this bug a few times, which i think is because
of how our export/copy code is written: the formatting is interspersed
with interacting with the browser APIs, which makes it hard to change
one without accidentally affecting the other.
This diff fixes the bug, but also restructures our export/copy code: all
the formatting is handled by `exportToBlob` and related which just
return `Blob`s. This leaves `copyAs`, `exportAs` etc. to just handle
interacting with the browser APIs.
Fixes#2312
### Change Type
- [x] `patch` — Bug fix
### Test Plan
1. Test copy/export as on all browsers
### Release Notes
- Fix a bug preventing copying as an image on iOS
---------
Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
Adds validation for urls we use for our shapes and assets. This PR
includes a migration so we should check that existing rooms still load
correctly. There might be some that won't, but that means that they had
invalid url set.
### Change Type
- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Test Plan
1. Existing rooms should still load correctly (there should be no
validation errors).
2. Adding new images and videos should also work (test both local and
multiplayer rooms as they handle assets differently).
- [x] Unit Tests
- [ ] End to end tests
### Release Notes
- Add validation to urls.
---------
Co-authored-by: alex <alex@dytry.ch>
setStyleForNextShapes had a comment describing how
setStyleForSelectedShapes worked. This PR fixes that.
### Change Type
- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Test Plan
1. Add a step-by-step description of how to test your PR here.
2.
- [ ] Unit Tests
- [ ] End to end tests
### Release Notes
- Fix error in setStyleForNextSelectedShapes comment
Fixes an issue with frame clipping paths. In fact, this should also
solve other issues we might have with intersect. Seems like our
`pointInPolygon` did not correctly detect that points in the corners or
on the edges of the polygon are in fact part of the polygon.
When calculating the intersection of two regular, intersecting
rectangles the`intersectPolygonPolygon` was returning a polygon with 2,
3, or sometimes even 0 points, which also could result in an error when
dragging one frame out of another frame.
It seems that for all intents and purposes the `pointInPolygon` function
should also consider corners and edges, but maybe we might want to
rename it?
Before:
https://github.com/tldraw/tldraw/assets/2523721/155d351d-8ceb-47c3-a263-024cab487d03
After:
https://github.com/tldraw/tldraw/assets/2523721/338b923a-f902-4dc4-a1b7-e954f906fb8d
Fixes https://github.com/tldraw/tldraw/issues/2387
### Change Type
- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Test Plan
1. Add a step-by-step description of how to test your PR here.
2.
- [ ] Unit Tests
- [ ] End to end tests
### Release Notes
- Add a brief release note for your PR here.
This PR adds an example that shows how a user could customize tldraw's
default color theme.
### Change Type
- [x] `documentation` — Changes to the documentation only[^2]
This PR updates edge scrolling to take into account situations where the
component's top left corner is not 0,0.
### Change Type
- [x] `patch` — Bug fix
### Test Plan
1. Open up the scrolling container example
2. Edge scroll on the left near the sidebar
- [x] Unit Tests
### Release Notes
- Add a brief release note for your PR here.
This PR fixes a bug where the `version` was not updated during our last
release. This causes the assets not to load.
### Change Type
- [x] `patch` — Bug fix
Adds descriptions to examples.
They show as a list on the index page, and on individual examples they
show in a three-js style sidebar. For now, this is disabled completely
on mobile. Examples can still be opened in 'standalone' mode to get rid
of the sidebar.
Note: the 'view code' link won't work until after these changes are
merged.
There's a small impact on authoring examples: each one needs to live in
a folder with a README.md. At a minimum, the readme needs to look like
this:
```md
---
title: My Example
component: ./MyExample.tsx
---
Here is a 1-liner about my example
```
Optionally, you can:
- Add `hide: true` to the frontmatter to remove the example from the
list (you can skip the description this way)
- Add `order: 3` to control the order in which the example appears.
They're alphabetical otherwise
- Add some more description or links to docs below a `---`. This won't
show in the listing, but will be visible on GitHub and on the example
page itself.
As a follow-up, I'd like to add an 'Open in CodeSandbox' link to each
example. These won't work until we've made a release with these examples
(as our special examples codesandbox is tied to our release process) but
the code is there & ready to go!
Have a play, let me know what you think!
### Change Type
- [x] `documentation` — Changes to the documentation only[^2]
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
Changes `TRANDEMARK` -> `TRADEMARK` in docs links so they work.
### Change Type
- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Test Plan
- Confirm the links now work.
### Release Notes
- Fixes broken links in a number of docs files.
This PR fixes the bounds calculation for polygons. It solves the bug
reported here: https://github.com/tldraw/tldraw/issues/2309 . Note that
this may produce visual changes for hexagons and other shapes.
### Change Type
- [x] `patch` — Bug fix
### Test Plan
1. Create a hexagon shape with a label.
2. The label should be correctly centered.
### Release Notes
- Fixed a bug with the bounds calculation for polygons.
Fixes https://github.com/tldraw/tldraw/issues/2357
This PR fixes not being able to close the context menu by clicking
- your selected shape
- the ui
It seems like the Radix's `modal` setting causes trouble for us. I think
we're better off turning it off.
We now show an indicator on hovered shapes when the context menu. This
is consistent with how our other menus currently work.
### 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
- Fix not being able to close the context menu by clicking on the UI or
your selected shape.
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This PR fixes pages in the pages menu being squished in read only rooms
### Change Type
- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Test Plan
1. Add a step-by-step description of how to test your PR here.
2.
- [ ] Unit Tests
- [ ] End to end tests
### Release Notes
- Add a brief release note for your PR here.
---------
Co-authored-by: Lu[ke] Wilson <l2wilson94@gmail.com>
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.
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
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.
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>
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.
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:
2. Check the app doesn't crash
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
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
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.
Finally removing all these deprecated getters ahead of the full release.
### Change Type
- [x] `major` — Breaking change
### Release Notes
- (Breaking) Removed deprecated getters.
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.
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
Fixes the border radius for the bookmark shape indicator. The shape
itself used 6px (`--radius-2` variable), while the indicator used 8px.
Before
After
### Change Type
- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Release Notes
- Fix the indicator for the bookmark shape. The radius now matches the
shape's radius.
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
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>
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:
The difference I saw in testing:
@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.
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.
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
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`.
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-f1e0125e0af1https://github.com/tldraw/tldraw/assets/2523721/e0a73d25-ac9f-4a35-a1fd-4aed7a5b151cFixes#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>
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.
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
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
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.
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:
Fixes https://github.com/tldraw/tldraw/issues/2254
### Before
### After
### Change Type
- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### 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.
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
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
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.
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
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.
- 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>
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.
### Change Type
- [x] `patch` — Bug fix
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
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
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.
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.
### 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>
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.
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
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.
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`
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
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.
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`.
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.
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.
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>
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
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>
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)
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>
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
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.
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.
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.
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
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.
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: #2028Fixes: #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.
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
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.
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>
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.
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
### Change Type
- [x] `minor` — New feature
### Release Notes
- Improves ux around pasting bookmarks
**Before**
**After**
### Change Type
- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### 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.
This PR fixes a bug with zero length arrows.
Before:
After:
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.
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.
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.
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.
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.
### 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`.
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
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.
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.
### 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
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.
This PR is a fork of #2119
It only has one of the two changes:
* Remove indicator for autosize text shapes while editing.
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.
This PR adds a meta example, showing how to add meta properties to
shapes.
### Change Type
- [x] `documentation` — Changes to the documentation only[^2]
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.
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.
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.
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
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
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.
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
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
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.
closes#2080
### Change Type
- [x] `patch` — Bug fix
### Release Notes
- Fixes a rendering issue where cropped images were sometimes bleeding
outside their bounds.
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
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
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
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
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.
### Change Type
- [x] `patch` — Bug fix
### Release Notes
- Fix case where indicator was not shown when unlocking groups
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
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.
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
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
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 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:
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.
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
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"
/>
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>
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>
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.
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
This PR adds an additional migration that fixes a bad (a->a) migration
that I added in the previous version.
### Change Type
- [x] `patch` — Bug fix
### Test Plan
1. On the tldraw app, open a file.
- [x] Unit Tests
Before the geometry change, we'd rely on the browser to tell us which
element was hovered, which meant that when the pointer left the canvas
we'd automatically clear the hovered shape.
Currently, we don't know whether the pointer is over the canvas or not -
so we keep showing the hover indicator for the last shape you had your
pointer over.
This diff adds an `isHoveringCanvas` prop to the instance state (true,
false, or null if the current pointer doesn't support hovering) that we
can use to track this and disable the hover indicator appropriately.
### Change Type
- [x] `minor` — New feature
### Test Plan
1. Create some shapes that go below the UI
2. Move the mouse from the shape to the UI
3. Hover indicator should disappear
This diff removes the UI top center bar from the public API and tweaks
some of the styling around the top bar as a whole. Now, the left and
right bars shrink to fit their content, and the center bar is unstyled
by us. It's also marked `@internal`.
This also exposes `<Spinner />` for internal use.
### Change Type
- [x] `minor` — New feature
### Test Plan
-
### Release Notes
- [BREAKING] removed topBar prop
This PR:
- removes feature flags for people menu, highlighter shape
- removes debugging for cursors
- adds a debug flag for hiding shapes
- changes Canvas to use `useValue` rather than `track`
- removes the default background color on `tl-background`
- in the editor components, makes `Background` null by default
### Change Type
- [x] `minor` — New feature
There are a lot of cases (eg when interacting with the ui) where the
editor loses focus. This check was preventing us from updating the
viewport screen bounds when appropriate. This function is throttled and
pretty cheap anyway (if the viewport is equal its a no-op) so let's just
remove the condition
### Change Type
- [x] `patch` — Bug fix
Frame labels lost their editing outline at some point. 🤷🏼 any idea how
this happened?
## Before
## After
### Change Type
- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### 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.
This PR restores the controlled nature of focus. Focus allows keyboard
shortcuts and other interactions to occur. The editor's focus should
always / entirely be controlled via the autoFocus prop or by manually
setting `editor.instanceState.isFocused`.
Design note: I'm starting to think that focus is the wrong abstraction,
and that we should instead use a kind of "disabled" state for editors
that the user isn't interacting with directly. In a page where multiple
editors exit (e.g. a notion page), a developer could switch from
disabled to enabled using a first interaction.
### Change Type
- [x] `patch` — Bug fix
### Test Plan
- [x] End to end tests
This PR improves the dragging interactions on the minimap.
### Change Type
- [x] `patch` — Bug fix
### Test Plan
1. Click and drag the minimap.
2. Click outside of the viewport bounds.
3. Click inside of the viewport bounds.
This PR fixes an issue where images would overflow the shape's true
height or width.
### Change Type
- [x] `patch` — Bug fix
### Test Plan
1. Create an image shape.
2. Resize the image shape and look at the edges.
We got things sliggghhhtly wrong in #1980. That diff was attempting to
fix a bug where the text measurement element would refuse to go above
the viewport size in safari. This was most obvious in the case where
there was no fixed width on a text shape, and that diff fixed that case,
but it was also happening when a fixed width text shape was wider than
viewport - which wasn't covered by that fix. It turned out that that fix
also introduced a bug where shapes would no longer grow along the y-axis
- in part because the relationship between `width`, `maxWidth`, and
`minWidth` is very confusing.
The one-liner fix is to just use `max-content` instead of `fit-content`
- that way, the div ignores the size of its container. But I also
cleared up the API for text measurement to remove the `width` property
entirely in favour of `maxWidth`. I think this makes things much clearer
and as far as I can tell doesn't affect anything.
Closes#1998
### Change Type
- [x] `patch` — Bug fix
### Test Plan
1. Create an arrow & geo shape with labels, plus a note and text shape
2. Try to break text measurement - overflow the bounds, make very wide
text, experiment with fixed/auto-size text, etc.
Fixes an issue with creating arrows. Currently we create an arrow that
has both `start` and `end` handles set to the same point. This causes
`NaN` issues in some of our functions / svg rendering. After this change
we only create the arrow after we start dragging, which ensures the
start and the end handle won't have the same coordinates. This probably
feels the best way to approach it: arrow of length 0 doesn't really make
sense.
Resolves [#2005](https://github.com/tldraw/tldraw/issues/2005)
Before
https://github.com/tldraw/tldraw/assets/2523721/6e83c17e-21bd-4e0a-826b-02fad9c21ec6
After
https://github.com/tldraw/tldraw/assets/2523721/29359936-b673-4583-89c8-6d1728ab338c
### 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. You should not see any errors in the console.
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
Fixes#1996
This fixes a few issues with cloud rendering:
- At small sizes the arcs could get kind of inverted after being
mutated, so you'd end calculating the outline using the large arc
instead of the small arc and it would balloon the size of the bounds
(that was what Mitja was seeing in #1996
- While working on the above I noticed that there are some situations
where we were actually supposed to be using the large arc for rendering
the svg paths but we were using the small arcs instead, making the
bounds appear larger than the cloud shape when in fact the cloud shape
was too small.
- I also fixed some other issues related to rendering clouds with tiny
width/height. It now draws straight lines instead of arcs if the arcs
are essentially flat, and it increases the number of lumps when width or
height are very small to avoid certain kinds of weirdness.
### 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
- Improves cloud shape rendering
We were conditionally using hooks, which caused the minified error when
running the prod build of React. We now use hooks before the early
returns.
Fixes [#2001](https://github.com/tldraw/tldraw/issues/2001)
### 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
This PR prevents certain shapes from being edited while in readonly
mode. It adds `ShapeUtil.canEditInReadOnly` to allow developers to opt
in to editing shapes. It's currently applied only to embed shapes.
### Change Type
- [x] `major`
### Test Plan
1. In a readonly mode, try to edit text / sticky notes / arrow labels
via double click / enter. You should not be able to edit them.
2. Try to edit an embed. You should be able to edit it.
### Release Notes
- Prevent editing text shapes in readonly mode.
@SomeHats I'll leave this assigned to you in case you want to compare
the perf of using consts/lets scoped to the visitor function. Or just do
that anyway regardless of microperf. Either is fine with me.
This PR prevents the escape key from exiting full screen when a shape is
being edited or when shapes are selected. Basically, if the select tool
is going to use the escape key, then don't let it be used for its normal
purpose.
### Change Type
- [x] `patch` — Bug fix
### Test Plan
1. Open a firefox full screen tab.
2. Start editing a text shape.
3. Press escape. It should stop editing.
4. Press escape again. It should deselect the shape.
5. Press escape again. It should exit full screen mode.
This PR hides hovered indicators when using a coarse pointer.
### Change Type
- [x] `patch` — Bug fix
### Test Plan
1. On an iPad or touch device, use the draw tool.
2. Select the select tool.
3. You should not see the hovered indicator on the drawn shape.
### Release Notes
- Hide hovered indicators on mobile / coarse pointer devices.
@steveruizok
I only added one test in the end and then I got distracted by chatting
text stuff
### Change Type
- [x] `tests` — Changes to any test code only[^2]
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
Closes#1982
When choosing whether to disable the mobile style menu, we now also
check if the select tool is active and whether any shapes have been
selected.
### Change Type
- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Test Plan
1. On a small screen
2. Choose the select tool
3. Deselect all shapes
4. Click on the disabled style menu button
Expected: Nothing should happen
Actual: The style menu opens
### Release Notes
- When select tool is active, the style menu shouldn't be openable
unless a shape is also selected.
Before/After
<img width="300"
src="https://github.com/tldraw/tldraw/assets/98838967/91ea55c8-0fcc-4f73-b61e-565829a5f25e"
/>
<img width="300"
src="https://github.com/tldraw/tldraw/assets/98838967/ee4070fe-e236-4818-8fb4-43520210102b"
/>
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This PR improves pinch events on touch screens.
It tries to avoid zooming unless we're sure that the user is zooming (or
at least, that they've started zooming). It removes behavior that snaps
the pinch to a certain zoom (e.g. 100%, 50%).
### Change Type
- [x] `patch` — Bug fix
### Test Plan
1. On iPad, try to two-finger pan without zooming.
2. Perform a zoom.
3. Perform a two-finger pan, then a zoom.
### Release Notes
- Improve pinch gesture events.
Co-authored-by: Alex Alex@dytry.ch
closes [#1978](https://github.com/tldraw/tldraw/issues/1978)
Text was wrapping on Safari because the measure text div was rendered
differently on different browsers. Interestingly, when forcing the
text-measure div to be visible and on-screen in Chrome, the same
text-wrapping behaviour was apparent. By setting white-space to 'pre'
when width hasn't been set by the user, we can ensure that only line
breaks the user has inputted are rendered by default on all browsers.
### Change Type
- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
### Test Plan
1. On Safari
2. Make a new text shape and start typing
3. At a certain point the text starts to wrap without the width having
been set
### Release Notes
- Fix text wrapping differently on Safari and Chrome/Firefox
Before/After
<image width="350"
src="https://github.com/tldraw/tldraw/assets/98838967/320171b4-61e0-4a41-b8d3-830bd90bea65">
<image width="350"
src="https://github.com/tldraw/tldraw/assets/98838967/b42d7156-0ce9-4894-9692-9338dc931b79">
This PR removes the automatic focus events from the editor.
The `autoFocus` prop is now true by default. When true, the editor will
begin in a focused state (`editor.instanceState.isFocused` will be
`true`) and the component will respond to keyboard shortcuts and other
interactions. When false, the editor will begin in an unfocused state
and not respond to keyboard interactions.
**It's now up to the developer** using the component to update
`isFocused` themselves. There's no predictable way to do that on our
side, so we leave it to the developer to decide when to turn on or off
focus for a container (for example, using an intersection observer to
"unfocus" components that are off screen).
### Change Type
- [x] `major` — Breaking change
### Test Plan
1. Open the multiple editors example.
2. Click to focus each editor.
3. Use the keyboard shortcuts to check that the correct editor is
focused.
4. Start editing a shape, then select the other editor. The first
editing shape should complete.
- [x] Unit Tests
- [x] End to end tests
### Release Notes
- [editor] Make autofocus default, remove automatic blur / focus events.
---------
Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
This PR fixes a bug where a touch from a palm received at the start of a
drawing operation, when that operation was the first entry into pen
mode, would cause the line to fail.
### Change Type
- [x] `patch` — Bug fix
### Test Plan
1. On an iPad with a pencil, select the draw tool. Ensure that you're
not yet in pen mode.
2. Place your palm on the iPad and immediately place the pencil on the
screen.
3. Previously, you would get a line between your palm and the pencil
point. Now, you should get only the pencil point.
### Release Notes
- [fix] Accidental palm inputs when using iPad pencil
This PR fixes an issue where the screen bounds could be wrong after
editing text on iOS / mobile.
### Change Type
- [x] `patch` — Bug fix
### Test Plan
1. On iOS, create a text shape at the bottom of the screen.
2. Edit the text shape.
3. Stop editing.
4. Drag a selection box to confirm that the page bounds is still
correct.
This PR has been tested on Mac Chrome, iOS Safari, and Android Chrome.
---
This PR removes 'targeted editing' from text.
This affects when you're:
* using the text tool
* editing a text shape
* editing a text label
* editing an arrow label
When in one of these modes, you were able to click on some other text to
immediately start editing it (as long as that text is the same type).
It was a bit broken with some of the newer changes, so this PR removes
it. The issues included:
* selected text 'flashing'
* caret going to the start of the text
* empty text shapes not disappearing
* inconsistent behaviour when clicking near a shape VS on a shape
It feels a bit simpler now too, I like it... 🤔💭
### Change Type
- [x] `patch` — Bug fix
### Test Plan
- [ ] Unit Tests
- [ ] End to end tests
### Release Notes
- Fixed some cases where text would get selected in the wrong place.
- Changed the behaviour of text selection. Removed 'deep editing'.
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This PR fixes some cases where, if a member function (like `onEnter`)
was not an arrow function, it would not run.
### Change Type
- [x] `patch` — Bug fix
This PR makes it so that user preferences can be in a 'null' state,
where we use the default values and/or infer from the system
preferences.
Before this PR it was impossible to allow a user to change their locale
via their system config rather than selecting an explicit value in the
tldraw editor menu. Similarly, it was impossible to adapt to changes in
the user's system preferences for dark/light mode.
That's because we saved the full user preference values the first time
the user loaded tldraw, and the only way for them to change after that
is by saving new values.
After this PR, if a value is `null` we will use the 'default' version of
it, which can be inferred based on the user's system preferences in the
case of dark mode, locale, and animation speed. Then if the user changes
their system config and refreshes the page their changes should be
picked up by tldraw where they previously wouldn't have been.
Dark mode inference is opt-in by setting a prop `inferDarkMode: true` on
the `Editor` instance (and the `<Tldraw />` components), because we
don't want it to be a surprise for existing library users.
### Change Type
- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [x] `major` — Breaking change
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
closes#1913
Some lines aren't rendering:
<img width="500" alt="shapes"
src="https://github.com/tldraw/tldraw/assets/98838967/bd01bb0f-a967-46ce-9056-a81421224931">
When we begin drawing a line it's nice for the user to be able to see a
dot, so we put down two points. The end point for a new line was set to
the same position as the first point, which was causing a bunch of
divide by zero errors. Offsetting it slightly fixes that.
Now when two handles are too close together we extend the second one
instead of drawing a third. This will probably only ever happen with the
first two points of a line.
### 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. Select the Line tool and set spline to line and dash to draw
2. Click around the canvas
3. You should now be able to actually see a line
4. Now set spline to cubic and dash to solid
5. shift click around the canvas
6. You should be able to see a line!
### Release Notes
- This PR patches a couple of bugs which led to straight draw lines and
beziered dash lines not rendering on the canvas
Before & After:
<image width="250"
src="https://github.com/tldraw/tldraw/assets/98838967/e0ca7d54-506f-4014-b65a-6b61a98e3665"
/>
<image width="250"
src="https://github.com/tldraw/tldraw/assets/98838967/90c9fa12-1bcb-430d-80c7-97e1faacea16"
/>
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
