Commit graph

2208 commits

Author SHA1 Message Date
Lu Wilson
de2bf5419f
[fix] Right click groups (#1975)
@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>
2023-10-02 14:43:41 +00:00
Taha
512696c1ab
Fix style panel opening when disabled (#1983)
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>
2023-10-02 14:23:51 +00:00
Steve Ruiz
f2833b52c9
Sliiiightly darken muted-2 color. (#1981)
This PR slightly darkens the muted-2 color, shown when hovering menu
items.

<img width="881" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/ffe5f0c6-323e-4e78-a4eb-0a28a4b026c0">


### Change Type

- [x] `patch` — Bug fix
2023-10-02 11:48:34 +00:00
Steve Ruiz
401075d719
[fix] pinch events (#1979)
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.
2023-10-02 11:31:46 +00:00
Taha
f73bf9a7fe
Fix text-wrapping on Safari (#1980)
Co-authored-by: Alex Alex@dytry.ch

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

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

### Change Type

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

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

### Test Plan

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


### Release Notes

- Fix text wrapping differently on Safari and Chrome/Firefox

Before/After

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

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

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

### Change Type

- [x] `major` — Breaking change

### Test Plan

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

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

### Release Notes

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

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-10-02 11:29:54 +00:00
Steve Ruiz
3fa7dd359d
[fix] text shape outline (#1974)
This PR fixes the text shape outline.

### Change Type

- [x] `patch` — Bug fix
2023-10-02 11:14:37 +00:00
Steve Ruiz
852187058a
[fix] Drawing tool touch for first pen mark (#1977)
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
2023-10-02 09:46:59 +00:00
Steve Ruiz
0d21e8aad2
[fix] Screen bounds offset after editing text (#1976)
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.
2023-09-30 21:39:09 +00:00
Lu Wilson
b149fe7e98
Remove targeted editing from text (#1962)
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... 🤔💭 


![2023-09-28 at 15 36 15 - Beige
Parrotfish](https://github.com/tldraw/tldraw/assets/15892272/955e80b7-71d4-4f5d-9647-423dde5f279b)



### 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>
2023-09-29 15:59:33 +00:00
Steve Ruiz
5668209b01
Make state node methods arrow functions (#1973)
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
2023-09-29 15:29:02 +00:00
David Sheldrick
3d30f77ac1
Make user preferences optional (#1963)
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
2023-09-29 15:20:39 +00:00
Steve Ruiz
9dac6862bf
Arrows followup (#1972)
This PR includes a few followup small fixes for arrows.

### Change Type

- [x] `patch` — Bug fix
2023-09-29 15:14:50 +00:00
Taha
73e61727cc
fix line bugs (#1936)
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>
2023-09-29 15:07:14 +00:00
Lu Wilson
a176522c57
Allow right clicking selection backgrounds (#1968)
This PR fixes not being able to right-click the selection background of
shapes.
* It still lets you right-click outside of a selection to deselect.
* It still lets you right-click a different shape inside the selection
bounds.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Draw a squiggle.
2. Select it.
3. Right-click somewhere inside the selection bounds (but NOT on the
squiggle itself).
4. The context menu should open.

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

### Release Notes

- Improved right click behaviour.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-09-29 12:31:43 +00:00
Steve Ruiz
230212028f
Mark an undo before toggling lock (#1969)
This PR adds a history mark before toggling locked.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create a shape.
2. Use the menu or a shortcut to toggle locked.
3. Undo.
4. The locked should undo but the shape should still be there.

### Release Notes

- Mark an undo before toggling locked.
2023-09-29 11:04:06 +00:00
Mitja Bezenšek
56e5bfdd71
Stop editing frame headers when clicking inside a frame. (#1955)
Before (notice how we stay in `editing_shape`:


https://github.com/tldraw/tldraw/assets/2523721/d4553675-8412-41d9-b300-bbe87b719caa

After:



https://github.com/tldraw/tldraw/assets/2523721/e9788b1c-f2d9-473d-ba4c-cec7f822547a

It selects the shape, similar to what we do with geo shapes:



https://github.com/tldraw/tldraw/assets/2523721/a6210577-aec0-4fc0-892a-eedfed6f737b


The only downside is that we also stop editing shape if we click on the
frame header. That said that case is currently a bit broken. We'd
probably want to insert caret at the clicked position (which we
currently don't do).

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Insert a frame.
2. Double click the frame header to edit it.
3. Click inside the frame. 
4. This should now stop editing the header.

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

Closes #1965 

### Release Notes

- Stop editing frame headers when clicking inside of a frame.

---------

Co-authored-by: Lu[ke] Wilson <l2wilson94@gmail.com>
2023-09-29 09:27:45 +00:00
Lu Wilson
8c0e6abbeb
Lokalise: Translations update (#1964)
This pull request was initiated by Lokalise (user Lu) at 2023-09-28
17:27:27

## Release notes

* Updated community translations for German and Galician
2023-09-28 17:52:47 +00:00
Steve Ruiz
fbf9469b46
[improvement] improve arrows (for real) (#1957)
This PR improves handling of edge cases in arrows.
![Kapture 2023-09-27 at 21 59
25](https://github.com/tldraw/tldraw/assets/23072548/ff761ed5-14cd-4a0e-af0b-6490f3198217)
![Kapture 2023-09-27 at 22 09
23](https://github.com/tldraw/tldraw/assets/23072548/42ddaaf5-5b09-466f-a77b-6f3b51af0fb7)


### Change Type

- [x] `patch` — Bug fix

### Test Plan

Make arrows short, overlapping, etc. There should be no "flipped" arrows
or wrong arrows.

- [x] Unit Tests

### Release Notes

- Improve arrows.
2023-09-28 16:13:14 +00:00
David Sheldrick
84788cded6
[infra] missing await (#1951)
follow up to #1950 

### Change Type

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

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
2023-09-26 16:44:47 +00:00
David Sheldrick
0556b140de
[infra] maybe fix canary publish (#1950)
This last day or two our npm publish script has been randomly failing
due to npm flakiness. I'm seeing the following error:

Failed to save packument. A common cause is if you try to publish a new
package before the previous package has been fully processed.

This doesn't seem to be our fault since we're publishing things in the
right order, the version numbers and package.json files are all correct,
and we're waiting for things to appear in the registry after publishing
before moving on to the next package.

So I'm thinking maybe npm is a little tired right now or something and
needs a little extra time to handle things.

So I've wrapped our publish command inside a retry block.

At the same time I noticed that the `--tolerate-republish` flag does not
seem to be working for canary version numbers, so I've added some extra
logic for that too. Hopefully this means if things fail due to
persistent npm flake we can just run the action again.

### Change Type

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

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
2023-09-26 15:36:32 +00:00
Steve Ruiz
9e4dbd1901
[fix] geo shape text label placement (#1927)
This PR fixes the text label placement for geo shapes. (It also fixes
the way an ellipse renders when set to dash or dotted).

There's still the slightest offset of the text label's outline when you
begin editing. Maybe we should keep the indicator instead?

### Change Type

- [x] `patch` — Bug fix

### Test Plan

Create a hexagon shape
hit enter to type
indicator is offset, text label is no longer offset

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-09-26 14:05:05 +00:00
alex
398bd352ae
fix clipping on nested non-intersecting frames (#1934)
Previously, if a shape had two frame parents and those frames didn't
intersect, we'd render the shape without any clipping. This is because
in the case that we don't find an intersection we were returning
undefined (meaning nothing is masked out) instead of an empty array
(meaning everything is masked out)

![Kapture 2023-09-19 at 16 34
08](https://github.com/tldraw/tldraw/assets/1489520/3192c3df-5a71-4dea-a720-6319a803cd1c)

Fixes #1933 

### Change Type

- [x] `patch` — Bug fix


### Test Plan

1. create a frame (A)
2. create a shape (B) to the left of frame A
3. create a frame (C) with another shape (D) inside to the left of shape
B
4. select shape B and frame C
5. drag shape B into frame A
6. make sure both frame C and shape D are completely clipped
2023-09-26 12:58:39 +00:00
alex
79f46da199
expanded highlighter geometry (#1929)
Currently, the highlighter shape uses a single 0-width line for its
geometry, same as the draw tool. For the draw tool this works ok - the
visual line is thin enough that unless you zoom right in, it's hard to
find areas where the hover should trigger but isn't. As the highlighter
tool is much thicker though, it's relatively easy to find those areas.

The fix is for the geometry to represent the line including its thick
stroke, instead of at 0-width. There are two possible approaches here:
1. Update the polyline geometry to allow passing a stroke width.
2. Instead of a polyline, make the highlighter shape be a polygon that
traces _around_ the stroke

1 is the more accurate approach, but is hard to fit into our geometry
system. Our geometry is based around two primitives: `getVertices` which
returns an array of points around the shape, and `nearestPoint` which
returns the nearest point on the geometry to a vector we pass in. We can
account for a stroke in `nearestPoint` pretty easily, including it in
`getVertices` is hard - we'd have to expand the vertices and handle line
join/caps etc. Just making the change in `nearestPoint` does fix the
issue here, but i'm not sure about the knock-on effect elsewhere and
don't really want to introduce 1-off hacks into the core geometry
system.

2 actually means addressing the same hard problem around outlining
strokes as 1, but it lets us do it in a more tightly-scoped one-off
change just to the highlighter shape, instead of trying to come up with
a generic solution for the whole geometry system. This is the approach
I've taken in this diff. We outline the stroke using perfect-freehand,
which works pretty well but produces inaccurate results at edge-cases,
particularly when a line rapidly changes direction:

![Kapture 2023-09-19 at 13 45
01](https://github.com/tldraw/tldraw/assets/1489520/1593ac5c-e7db-4360-b97d-ba66cdfb5498)

I think that given this is scoped to just the highlighter shape and is
imo an improvement over the stroke issue from before, it's a reasonable
solution for now. If we want to in the future we could implement real
non-freehand-based outlining.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create a highlight shape
2. Zoom in
3. Make sure you can interact with the shape at its edges instead of
right in the center
2023-09-26 11:21:37 +00:00
Steve Ruiz
5cd74f4bd6
[feature] Include sources in TLExternalContent (#1925)
This PR adds the source items from a paste event to the data shared with
external content handlers. This allows developers to customize the way
certain content is handled.

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

### Change Type

- [x] `minor` — New feature

### Test Plan

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

### Release Notes

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

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

### Change Type

- [x] `major`

### Test Plan

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

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

### Release Notes

- Improve the menu / kbds behavior when select tool is not active
2023-09-19 15:33:39 +00:00
David Sheldrick
386a2396d1
Fix shape drag perf (#1932)
This prevents geometry from being recalculated when dragging shapes
around. It uses an equality check on the shape props to opt out of
recalculations. This still allows bounds to be calculated based on other
reactive values, so if folks really want to use x,y values or opacity or
whatever, they can call editor.getShape(id) when making their
calculation.

### 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 perf regression for dragging shapes around
2023-09-19 15:29:13 +00:00
Lu Wilson
db58d9c54f
Firefox: Fix dropdowns not opening with touch (#1923)
Fixes #1921

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. On firefox...
2. Use a touch device (or devtools)...
3. Try to open a dropdown menu, eg: main menu, styles menu, more tools
menu.
4. Make sure the menu opens correctly.

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

### Release Notes

- Firefox: Fixed dropdown menus not opening with touch.
2023-09-19 14:58:10 +00:00
David Sheldrick
0e621e3de1
Use smarter rounding for shape container div width/height (#1930)
This is a follow up to #1915 which caused the shape container div
dimensions to be wildly inaccurate. We thought it wouldn't matter but we
had a note on discord from someone who was relying on the div container
being accurate.

This rounds the shape dimensions to the nearest integer that is
compatible with the user's device pixel ratio, using the method
pioneered in #1858 (thanks @BrianHung)

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

- Improves the precision of the shape dimensions rounding logic
2023-09-19 13:14:51 +00:00
Lu Wilson
5dc1436d80
Fix lines being draggable via their background (#1920)
Fixes #1914 

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Draw a line shape at a 45 degree angle.
2. Select the line.
3. Click and drag the empty space next to the line.
4. It should select the canvas.

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

### Release Notes

- None - unreleased bug
2023-09-19 12:16:38 +00:00
Lu Wilson
52a838f3ff
Fix first handle of line snapping to itself (#1912)
This PR stops the first handle of a line snapping to itself.

This is an extra fix that I noticed while testing #1910
![2023-09-18 at 16 00 56 - Maroon
Crab](https://github.com/tldraw/tldraw/assets/15892272/f09e18f7-efdd-4b6d-acaf-272f44b98644)


### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Draw a line.
2. Switch to the select tool.
3. Create another segment in the line by dragging out its 'middle'
handle.
4. Move the **first** handle of the line.
5. ... while holding ctrl/cmd.
6. Make sure the handle doesn't try to snap to itself.

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

### Release Notes

- Fixed a bug where the first handle of a line shape could snap to
itself.
2023-09-19 12:16:22 +00:00
Takuto Mori Gump
f510dc2452
[fix] Moving group items inside of a frame (dropping) (#1886)
closes: #1884 

Fix bug: ungroup when moving a shape in a group in a frame.

### before 


https://github.com/tldraw/tldraw/assets/24749358/994a871a-5da2-4d8b-b80e-a4db43e66142


### after

https://github.com/tldraw/tldraw/assets/24749358/4395d416-b7f6-4af0-a4c2-0bf77c29d7e2



### 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 bug: ungroup when moving a shape in a group in a frame.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-09-19 13:14:04 +01:00
Hana
b22c68be54
[fix] id properties of undefined (#1730) (#1919)
This PR fixes id properties of undefined.

```js
PageMenu.mjs:89 Uncaught TypeError: Cannot read properties of undefined (reading 'id')
    at PageMenu2 (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/@tldraw+tldraw@2.0.0-canary.c52ba35ee89f_@types+react-dom@18.2.7_@types+react@18.2.21_react-dom@18.2.0_react@18.2.0/node_modules/@tldraw/tldraw/dist-esm/lib/ui/components/PageMenu/PageMenu.mjs:99:32)
    at renderWithHooks (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@opentelemetry+api@1.4.1_react-dom@18.2.0_react@18.2.0_sass@1.66.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:10697:18)
    at updateFunctionComponent (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@13.4.19_@opentelemetry+api@1.4.1_react-dom@18.2.0_react@18.2.0_sass@1.66.1/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:15180:20)
```

![스크린샷 2023-09-19 오후 6 06
26](https://github.com/tldraw/tldraw/assets/59823089/8161c599-3554-4671-86fb-cf303bf60311)


### Change Type

- [x] `patch` — Bug fix

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


### Test Plan
- [x] Use google chrome force reload

![hard-refresh-browser-chrome](https://github.com/tldraw/tldraw/assets/59823089/0d0cf030-92b3-48db-bbef-252fc813ea03)

- [x] 2\~3 Tldraw pages, 2\~3 peers

1. [tldraw-yjs-example](https://github.com/tldraw/tldraw-yjs-example)
quickly reload
2. Apply it to
[tldraw-yjs-example](https://github.com/tldraw/tldraw-yjs-example) and
then quickly reload
3. Compare the two versions

### Release Notes

- Fixed a bug similar #1730
2023-09-19 10:02:01 +00:00
Takuto Mori Gump
cc3bd1d114
♻️ fix: editing is not terminated after the conversion is confirmed. (#1885)
closes: #1883 

Fix bug: editing is not terminated after the conversion is confirmed.

### before 


https://github.com/tldraw/tldraw/assets/24749358/7821a8b1-70a8-448f-802b-2a791c2fe159


### after


https://github.com/tldraw/tldraw/assets/24749358/2104f3bd-75c5-4551-bd41-315957d1a533


### 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: editing is not terminated after the conversion is confirmed.

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-09-18 16:54:22 +00:00
Lu Wilson
3b3a0b29fe
Update community translations (#1889)
This PR updates some of our community-contributed translations.

## Release notes

- Updated translations for Russian, Ukrainian, and Simplified Chinese
2023-09-18 16:50:43 +00:00
David Sheldrick
1b8c15316a
Fix line wobble (#1915)
Closes #1911 

### 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 an issue where lines would wobble as you dragged the handles
around
2023-09-18 16:17:49 +00:00
Taha
6b37e9d0f5
Fix selecting one shape from selection group (#1905)
relates [#1906](https://github.com/tldraw/tldraw/issues/1906)

When clicking a shape within a selection group, that shape should be
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. Add two shapes
2. Select both
3. Click on one to select it, it should deselect the other

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

### Release Notes

- Fix bug when selecting a single shape from a selection group

Before


https://github.com/tldraw/tldraw/assets/98838967/1412f9c6-d466-42b3-af94-d08cbc1656be

After
![Kapture 2023-09-18 at 14 15
10](https://github.com/tldraw/tldraw/assets/98838967/70a7336d-7905-4b4c-b684-d5d62f2383b3)
2023-09-18 15:03:01 +00:00
Steve Ruiz
7fecf82423
[fix] help menu css (#1888)
This PR fixes the help menu CSS in certain embedded views.

### Change Type

- [x] `patch` — Bug fix
2023-09-18 15:02:38 +00:00
Lu Wilson
f3af81bf34
Fix highlighter dots not being clickable (#1903)
This PR fixes highlighter shapes not having the correct geometry when
they're a dot. It uses the same approach as Draw shapes.

Closes #1901


![image](https://github.com/tldraw/tldraw/assets/15892272/4bd47bc8-6ee4-4ea4-8a07-099c96e325b9)


![2023-09-18 at 13 57 03 - Fuchsia
Cephalopod](https://github.com/tldraw/tldraw/assets/15892272/bf2d28d5-e09e-47f6-b754-969736e0a11a)

### 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. Click with the highlighter tool to draw a single dot.
2. With the select tool, try to click the dot to select it.

You should be able to select the dot by clicking it.

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

### Release Notes

- None - unreleased bug
2023-09-18 15:02:03 +00:00
Steve Ruiz
10f6818a79
[fix] right click (#1891)
This PR fixes right clicks.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Right click a shape. The context menu should show information
relevant to the shape.
2. Lock a shape.
3. Right click to get to the unlock from the context menu.
2023-09-18 15:00:38 +00:00
Steve Ruiz
beb9db8eb7
Fix arrow handle snapping, snapping to text labels, selection of text labels (#1910)
This PR:
- adds `canSnap` as a property to handle and ignores snapping when
dragging a handle that does not have `canSnap` set to true. Arrows no
longer snap.
- adds `isLabel` to Geometry2d
- fixes selection on empty text labels
- fixes vertices / snapping for empty text labels

### Change Type

- [x] `minor` — New feature

### Test Plan

- [x] Unit Tests
2023-09-18 14:59:27 +00:00
David Sheldrick
5458362829
Fix video shape controls (#1909)
The video shape was not interactive in it's editing mode, so I just
updated it to have `pointer-events: all` when editing.

closes #1908 

### 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 pointer events for editing video shapes.
2023-09-18 14:36:48 +00:00
David Sheldrick
d059183586
Fix line handles (#1904)
closes https://github.com/tldraw/brivate/issues/2876

### 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 an issue where line handles were slightly offset from the
indicator line.
2023-09-18 13:19:36 +00:00
David Sheldrick
d9ce936ed0
Fix pinch start with toolbar open (#1895)
closes #1893 

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

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

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

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

### Change Type

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

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

### Test Plan

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

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

### Release Notes

- Fixes a bug that could trigger undo by accident when closing the style
toolbar via a pinch gesture on mobile.
2023-09-18 10:50:15 +00:00
Taha
c52ba35ee8
[wip] Viewport focus of editing shapes (#1873)
When editing shapes the viewport would be reset to the shape whenever it
moved out of camera bounds, it looked kinda janky. We're now going to
let the user scroll away if they'd like.


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

Removed a feature to reset the viewport back to a shape that is being
edited.

(Before) Don't be held back by the past
![Kapture 2023-09-15 at 10 57
29](https://github.com/tldraw/tldraw/assets/98838967/d8891621-766e-46a2-b1ca-afa968b7f08c)

(After) You are free to find new avenues of exploration
![Kapture 2023-09-15 at 11 02
36](https://github.com/tldraw/tldraw/assets/98838967/82f318ab-944b-41bd-8297-a35467a15987)
2023-09-15 12:51:01 +00:00
Steve Ruiz
20704ea417
[fix] iframe losing focus on pointer down (#1848)
This PR fixes a bug that would cause an interactive iframe (e.g. a
youtube video) to lose its editing state once clicked.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create an interactive iframe.
2. Begin editing.
3. Click inside of the iframe
2023-09-09 09:41:06 +00:00
Steve Ruiz
48a1bb4d88
Migrate snapshot (#1843)
Add `Store.migrateSnapshot`, another surface API alongside getSnapshot
and loadSnapshot.

### Change Type

- [x] `minor` — New feature

### Release Notes

- [editor] add `Store.migrateSnapshot`
2023-09-08 17:04:53 +00:00
Steve Ruiz
0b3e83be52
Add snapshot prop, examples (#1856)
This PR:
- adds a `snapshot` prop to the <Tldraw> component. It does basically
the same thing as calling `loadSnapshot` after creating the store, but
happens before the editor actually loads.
- adds a largeish example (including a JSON snapshot) to the examples

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

The most common questions seem to be:

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

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

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

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

### Change Type

- [x] `minor` — New feature
2023-09-08 14:48:55 +00:00
Steve Ruiz
f21eaeb4d8
[fix] zero width / height bounds (#1840)
This PR fixes zero width or height on Geometry2d bounds. It adds the
`zeroFix` helper to the `Box2d` class.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create a straight line
2. Create a straight arrow that binds to the straight line

- [x] Unit Tests

### Release Notes

- Fix bug with straight lines / arrows
2023-09-08 14:45:30 +00:00
David Sheldrick
9d8a0b0a8d
clamp x-box and check-box lines to stay within box at small scales (#1860)
Closes [#2737](https://github.com/tldraw/brivate/issues/2737)

For the checkbox and x-box the inner lines are inset slightly from the
edges to account for the stroke width. Alas at tiny box sizes (the box
is creates as w:1,h:1 during a drag-to-create interaction) this was
ending up with the insets overflowing such that they left the box on the
other side, creating miscalculations during the initial resizing.

This PR clamps the positions of the x-box and checkbox inner lines so
they don't escape the bounds of the box.

### Change Type

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

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

### Test Plan

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

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

### Release Notes

- Fixes a regression introduced by the geometry refactor related to
x-box and checkbox resizing.
2023-09-08 11:37:50 +00:00