Commit graph

2557 commits

Author SHA1 Message Date
Mitja Bezenšek
ec97b740b4
Update VS Code extension 2.0.13 (#2066)
Update VS code extension version and changelog.
### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
2023-10-11 10:52:27 +00:00
huppy-bot[bot]
ed5df33244 Update CHANGELOG.md [skip ci] 2023-10-11 10:42:50 +00:00
Steve Ruiz
8a8b718e53
Move example into examples folder (#2064)
This PR moves an example into the examples folder.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
2023-10-11 09:54:26 +00:00
David Sheldrick
f118430afe
Fix shape opacity when erasing (#2055)
Closes #2051 

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

### Change Type

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

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

### Test Plan

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

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

### Release Notes

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

### Change Type

- [x] `patch` — Bug fix

### Test Plan

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

- [x] Unit Tests

### Release Notes

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

### Change Type

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

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

### Test Plan

1. Make a locked shape
2. Scribble erase over the shape
3. The shape shouldn't change opacity

### Release Notes

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

Before/after:

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

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

### Change Type

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

Thank you for this project, grateful!

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


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

</details>

### Change Type

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

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

### Test Plan

1. Open the app.
2. Hover above the opacity slider.
3. Ensure that the opacity value is shown properly.

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

### Release Notes

- Add a brief release note for your PR here.

Signed-off-by: Prince Mendiratta <prince.mendi@gmail.com>
2023-10-10 13:03:12 +00:00
alex
421102282d
Fix newlines in text geo shapes (#2059)
Previously, entering a geo shape and adding a bunch of newlines wouldn't
correctly update the shape's height. This fixes that.

### Change Type

- [x] `patch` — Bug fix


### Test Plan

1. Create a geo shape
2. Enter text editing mode
3. Spam the enter key
4. See that the shape grows appropriately
5. Exit editing and check that the trailing newlines have been deleted.

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

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-10-10 12:58:28 +00:00
alex
4ccb6d8a50
re-enable visual regression tests (#2056)
Re-enable visual regression tests

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

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2023-10-10 12:33:16 +00:00
Mitja Bezenšek
f16bad666a
Fix alt + shift keyboard shortcuts (#2053)
Fixes keyboard shortcuts that use `alt + shift` modifier (distribute
horizontally and vertically fall into this category).

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

### Change Type

- [x] `patch` — Bug fix

### Test Plan

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

### Release Notes

- Fixes keyboard shortcuts that use `alt` and `shift` modifiers.
2023-10-10 11:22:36 +00:00
Steve Ruiz
8892176b1a
[improvement] Scope getShapeAtPoint to rendering shapes only (#2043)
This PR:

1. Adds a `renderingOnly` option to the `Editor.getShapeAtPoint` method.
When true, the method will only hit test against rendering shapes
(shapes that are inside of the current `renderingBounds`) rather than
all shapes on the canvas.
2. Includes some low level improvements to the way that edges find their
nearest point.
3. Includes a fix to circle geometry that could produce NaN values
 
### Change Type

- [x] `minor` — New feature

### Test Plan

1. Check whether hovering shapes still works as you would expect.

- [x] Unit Tests

### Release Notes

- Improve perf for hovering shapes / shape hit tests
2023-10-09 14:18:42 +00:00
alex
2a8987d8b9
fix standalone examples (#2042)
The trigger for the generating the standalone examples was accidentally
pointing at the wrong domain
2023-10-09 10:55:16 +00:00
Steve Ruiz
863edc9b56
Remove fixup script (#2041)
This PR removes an unused "fixup" script.

### Change Type

- [x] `internal`
2023-10-09 10:23:01 +00:00
Steve Ruiz
550b88be8f
[fix] Page state migration (#2040)
This PR is a follower fix for the page state migration.

### Change Type

- [x] `patch` — Bug fix
2023-10-09 08:20:55 +00:00
Steve Ruiz
a5d9012934
Remove dot com ui styles [1/2] (#2039)
This PR removes some ui styles that were only being used on tldraw.com

### Change Type

- [x] `minor` — New feature
2023-10-09 07:11:34 +00:00
Steve Ruiz
31b3ae2100
[fix] migrations for page state (#2038)
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
2023-10-09 06:36:38 +00:00
alex
a007c66b78
prevent hover indicator from showing when pointer isn't over the canvas (#2023)
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.

![Kapture 2023-10-05 at 12 00
00](https://github.com/tldraw/tldraw/assets/1489520/236b9459-878b-47e2-bcaa-10d245581347)


### 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
2023-10-09 06:34:48 +00:00
Steve Ruiz
e2a6f3ed40
Restore background (#2037)
This PR restores the missing background component (which includes the
background color).

### Change Type

- [x] `patch` — Bug fix
2023-10-09 06:19:41 +00:00
Steve Ruiz
cfb007599a
[fix] Stylepanel default spacing (#2036)
This PR fixes the uneven spacing around the style panel.

### Change Type

- [x] `patch` — Bug fix
2023-10-09 06:11:01 +00:00
alex
37f8a7a491
Remove topBar prop from <TldrawUi /> (#2018)
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
2023-10-09 06:02:43 +00:00
Steve Ruiz
edf79e56c0
Export tools (#2035)
This PR adds the tldraw tools to its exports.

### Change Type

- [x] `patch` — Bug fix
2023-10-08 22:31:16 +00:00
Steve Ruiz
b0851737ed
Publish api.json (#2034)
This PR publishes the api.json files created by the build-api scripts.

### Change Type

- [x] `internal`
2023-10-08 15:00:58 +00:00
huppy-bot[bot]
d38587d215 Update CHANGELOG.md [skip ci] 2023-10-06 15:18:15 +00:00
Steve Ruiz
68c52f0bfa
Remove docs source. (#2030)
The docs source is going back to the brivate secret sauce repo!

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
2023-10-06 13:44:15 +00:00
Steve Ruiz
53a8fd6c69
Update readme (#2027)
This PR updates the tldraw readme.

### Change Type

- [x] `patch` — Bug fix
2023-10-06 12:10:33 +00:00
Steve Ruiz
fa32173409
[fix] Multiple example (#2026)
This PR fixes the multiple example.

### Change Type

- [x] `patch` — Bug fix
2023-10-06 09:02:39 +00:00
Steve Ruiz
9c1dc00740
Debugging cleanup / misc cleanup (#2025)
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
2023-10-06 08:57:46 +00:00
alex
a9236bcbb0
fix screen bounds not updating (#2022)
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
2023-10-05 12:31:36 +00:00
David Sheldrick
647977ceec
frame label fix (#2016)
Frame labels lost their editing outline at some point. 🤷🏼 any idea how
this happened?

## Before
![Kapture 2023-10-04 at 13 47
28](https://github.com/tldraw/tldraw/assets/1242537/5da612e3-6456-493d-a4d7-4a5b953284bb)

## After
![Kapture 2023-10-04 at 13 49
55](https://github.com/tldraw/tldraw/assets/1242537/1608af3b-aac8-4f1c-8a9b-09aab19b07fb)


### 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.
2023-10-04 15:46:59 +00:00
Steve Ruiz
fcef86320e
[improvement] Refactor curved arrows (#2019)
This PR refactors our curved arrows to use a more reliable filter for
intersections. Its mostly visible on arrows that connect to draw shapes.

Before (tldraw and staging):
<img width="744" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/81903e53-ab23-4ea0-a849-fb396e490018">

After:
<img width="668" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/67e8615e-11f1-4207-96ad-b8cc8ff92c7b">


### Change Type

- [x] `patch` — Bug fix
2023-10-04 15:45:38 +00:00
Steve Ruiz
d715fa3a2e
[fix] Focus events (actually) (#2015)
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
2023-10-04 09:01:48 +00:00
Steve Ruiz
6b19d70a9e
[fix] Minimap interactions (#2012)
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.
2023-10-03 18:08:58 +00:00
Mitja Bezenšek
f3cecf5c55
Fix vs code extension. Prepare for new release. (#2011)
Fixes an issue with VS Code extension. Seem like we don't need to pass
in the tools and utils any longer.

Prepares the vs code extension for a new release (bumps version, updates
changelog).

### Change Type

- [x] `patch` — Bug fix

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-10-03 18:07:18 +00:00
Steve Ruiz
1f21f11886
[fix] focus events (#2013)
Somehow the previous focus PR snuck through with broken tests.

### Change Type

- [x] `patch` — Bug fix
2023-10-03 17:55:51 +00:00
Steve Ruiz
6ce1f8e66f
Re-focus on focus. (#2010)
This PR improves the focus handling (I think!) in the editor.

### Change Type

- [x] `patch` — Bug fix
2023-10-03 15:33:43 +00:00
Steve Ruiz
c63126ba5f
Contain all the things (#1999)
This PR adds some css containment where possible.

### Change Type

- [x] `patch` — minor
2023-10-03 14:26:36 +00:00
Steve Ruiz
7a8e47cf8c
[fix] Image size (#2002)
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.
2023-10-03 14:26:24 +00:00
alex
92886e1f40
fix text in geo shapes not causing its container to grow (#2003)
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.
2023-10-03 14:26:13 +00:00
Steve Ruiz
f414548347
[fix] tool lock button in toolbar (#2009)
This PR fixes a missing tool lock button in the toolbar.

### Change Type

- [x] `patch` — Bug fix
2023-10-03 14:23:45 +00:00
Mitja Bezenšek
f7b325c48c
Fix an issue with arrow creation. (#2004)
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>
2023-10-03 14:21:07 +00:00
David Sheldrick
4260f499c6
fix cloud rendering (#2008)
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
2023-10-03 13:52:26 +00:00
Mitja Bezenšek
4ca4aeebe4
Fix hooks error. (#2000)
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
2023-10-03 12:08:59 +00:00
Steve Ruiz
82d10d34a5
[fix] X box shape arrow intersections (#2006)
This PR fixes an issue with curved arrows binding to shapes with lines
(xbox, checkbox).

### Change Type

- [x] `patch` — Bug fix
2023-10-03 12:08:24 +00:00
Steve Ruiz
fb2f515b74
[improvement] prevent editing in readonly (#1990)
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.
2023-10-03 11:03:01 +00:00
David Sheldrick
a635145f2a
Fix group opacity (#1997)
@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.
2023-10-03 10:42:34 +00:00
Steve Ruiz
2694a7ab48
[fix] Escape key exiting full screen while editing shapes (#1986)
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.
2023-10-02 15:24:43 +00:00
Steve Ruiz
07fec633af
[fix] Hovered indicators shown when coarse pointer (#1985)
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.
2023-10-02 15:21:28 +00:00
Judicael
8166766c19
fix(docs): update shapes docs add the array of defined shapes (#1949)
### Change Type

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

### Release Notes

This pr add the custom defined shapes that's being passed to Tldraw

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-10-02 14:54:00 +00:00
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