Commit graph

1661 commits

Author SHA1 Message Date
Steve Ruiz
dd67577fea
[fix] pointer capture logging when debug flag is off (#2850)
This PR fixes a bug where pointer capture would log when the debug flag
was off.

### Change Type

- [x] `patch` — Bug fix
2024-02-16 10:41:27 +00:00
Steve Ruiz
7ece89a357
UI components round two (#2847)
This PR:
- replaces the `shareZone` prop with `SharePanel` component
- replaces the `topZone` prop with `TopPanel` components
- replaces the `Button` component with `TldrawUiButton` and
subcomponents
- adds `TldrawUi` prefix to our primitives
- fixes a couple of bugs with the components

### Change Type

- [x] `major` — Breaking change
2024-02-16 09:13:04 +00:00
Mime Čuvalo
5d87804a76
ui: refactor breakpoints to fit in an enum (#2843)
@SomeHats i feel like my naming sucks here. halp.

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Refactor breakpoints into an enum.
2024-02-15 17:39:17 +00:00
alex
31a2b2115f
[Snapping 5/5] Better handle snapping for geo shapes (#2845)
Currently, geo shapes have slightly janky handle-snapping: they snap to
label geometry (even though its invisible) and because they extend from
`BaseBoxShapeUtil` they snap to the corners of their bounding box (even
if that's not where the actual shape is).

With this PR, we no longer snap to labels, and we snap to the actual
vertices of the geo shape rather than its bounding points.

1. #2827
2. #2831
3. #2793
4. #2841
5. #2845 (you are here)

### Change Type

- [x] `minor` — New feature


### Test Plan
- [x] Unit Tests

### Release Notes

- You can now snap the handles of lines to the corners of rectangles,
stars, triangles, etc.
2024-02-15 15:53:28 +00:00
alex
89881397b5
[Snapping 4/5] Add handle-point snapping (#2841)
Currently, when dragging line handles they'll snap to the outlines of
other shapes, but not to their vertices. This can make it hard to snap
precisely to certain key places, like the handles of other lines, or the
corners of `geo` shapes.

This diff adds a new snap type for handles - snapping to points:

![Kapture 2024-02-14 at 16 30
41](https://github.com/tldraw/tldraw/assets/1489520/046109d3-2961-463f-bf71-9350ea1204bc)

This adds to the new snapping API so the snapping points can very easily
be customised on a shape-by-shape basis. Closes TLD-2198

This PR is part of a series - please don't merge it until the things
before it have landed!
1. #2827 
2. #2831
3. #2793 
4. #2841 (you are here)
5. #2845

### Change Type

- [x] `minor` — New feature

### Test Plan

1. create a line shape
2. drag its handles whilst holding command
3. it should snap to the outlines of other shapes, vertices of other
line shapes, and the bounding box corners/center of most 'boxy' shapes
(geo, embed, etc)

- [x] Unit Tests

### Release Notes

- Line handles
2024-02-15 15:22:48 +00:00
alex
77865d9f5e
[Snapping 3/5] Custom snapping API (#2793)
This diff adds an API for customising our existing snap types. These
are:
1. Bound snapping. When translating or resizing a shape, it'll snap to
certain key points on the bounds of particular shapes. Previously, these
were hard-coded to the corners and center of the bounding box of the
shape. Now, a shape can bring its own (e.g. a triangle may add snapping
for its 3 corners, and it's centroid rather than bounding box center.
2. Handle outline snapping. When dragging a handle, it'll snap to the
outline of other shapes geometry. Now, shapes can return different
geometry for this sort of snapping if they like.

Each of these is customised through a method on `ShapeUtil`:
`getBoundsSnapGeometry` and `getHandleSnapGeometry`. These return
interfaces describing the different geometry that can be snapped to in
both these cases. Currently, each returns an object with a single
property, but there are more types of snapping coming in follow-up PRs.
When reviewing this PR, start with the definitions of
`BoundsSnapGeometry` in `BoundsSnaps.ts` and `HandleSnapGeometry` in
`HandleSnaps.ts`

This doesn't add point snapping - i'll add that in a follow-up! It'll be
customisable with the `getHandleSnapGeometry` API.

Fixes TLD-2197

This PR is part of a series - please don't merge it until the things
before it have landed!
1. #2827 
4. #2831
5. #2793 (you are here)
6. #2841
7. #2845

### Change Type

- [x] `minor` — New feature

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

### Test Plan

- [x] Unit Tests

### Release Notes

- Add `ShapeUtil.getSnapInfo` for customising shape snaps.
2024-02-15 15:10:04 +00:00
Steve Ruiz
ac0259a6af
Composable custom UI (#2796)
This PR refactors our menu systems and provides an interface to hide or
replace individual user interface elements.

# Background

Previously, we've had two types of overrides:
- "schema" overrides that would allow insertion or replacement of items
in the different menus
- "component" overrides that would replace components in the editor's
user interface

This PR is an attempt to unify the two and to provide for additional
cases where the "schema-based" user interface had begun to break down.

# Approach

This PR makes no attempt to change the `actions` or `tools`
overrides—the current system seems to be correct for those because they
are not reactive. The challenge with the other ui schemas is that they
_are_ reactive, and thus the overrides both need to a) be fed in from
outside of the editor as props, and b) react to changes from the editor,
which is an impossible situation.

The new approach is to use React to declare menu items. (Surprise!) 

```tsx
function CustomHelpMenuContent() {
	return (
		<>
			<DefaultHelpMenuContent />
			<TldrawUiMenuGroup id="custom stuff">
				<TldrawUiMenuItem
					id="about"
					label="Like my posts"
					icon="external-link"
					readonlyOk
					onSelect={() => {
						window.open('https://x.com/tldraw', '_blank')
					}}
				/>
			</TldrawUiMenuGroup>
		</>
	)
}

const components: TLComponents = {
	HelpMenuContent: CustomHelpMenuContent,
}

export default function CustomHelpMenuContentExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw components={components} />
		</div>
	)
}
```

We use a `components` prop with the combined editor and ui components.

- [ ] Create a "layout" component?
- [ ] Make UI components more isolated? If possible, they shouldn't
depend on styles outside of themselves, so that they can be used in
other layouts. Maybe we wait on this because I'm feeling a slippery
slope toward presumptions about configurability.
- [ ] OTOH maybe we go hard and consider these things as separate
components, even packages, with their own interfaces for customizability
/ configurability, just go all the way with it, and see what that looks
like.

# Pros

Top line: you can customize tldraw's user interface in a MUCH more
granular / powerful way than before.

It solves a case where menu items could not be made stateful from
outside of the editor context, and provides the option to do things in
the menus that we couldn't allow previously with the "schema-based"
approach.

It also may (who knows) be more performant because we can locate the
state inside of the components for individual buttons and groups,
instead of all at the top level above the "schema". Because items /
groups decide their own state, we don't have to have big checks on how
many items are selected, or whether we have a flippable state. Items and
groups themselves are allowed to re-build as part of the regular React
lifecycle. Menus aren't constantly being rebuilt, if that were ever an
issue.

Menu items can be shared between different menu types. We'll are
sometimes able to re-use items between, for example, the menu and the
context menu and the actions menu.

Our overrides no longer mutate anything, so there's less weird searching
and finding.

# Cons

This approach can make customization menu contents significantly more
complex, as an end user would need to re-declare most of a menu in order
to make any change to it. Luckily a user can add things to the top or
bottom of the context menu fairly easily. (And who knows, folks may
actually want to do deep customization, and this allows for it.)

It's more code. We are shipping more react components, basically one for
each menu item / group.

Currently this PR does not export the subcomponents, i.e. menu items. If
we do want to export these, then heaven help us, it's going to be a
_lot_ of exports.

# Progress 

- [x] Context menu
- [x] Main menu
- [x] Zoom menu
- [x] Help menu
- [x] Actions menu
- [x] Keyboard shortcuts menu
- [x] Quick actions in main menu? (new)
- [x] Helper buttons? (new)
- [x] Debug Menu

And potentially
- [x] Toolbar
- [x] Style menu
- [ ] Share zone
- [x] Navigation zone
- [ ] Other zones

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. use the context menu
2. use the custom context menu example
3. use cursor chat in the context menu

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

### Release Notes

- Add a brief release note for your PR here.
2024-02-15 12:10:09 +00:00
Mime Čuvalo
5faac660bc
errors: improve msg in dialog when error happens (#2844)
Right now it's hard to parse the stack trace to see what the problem is.
This just raises the msg up to a first-class position to get the gist of
the problem.

<img width="631" alt="Screenshot 2024-02-14 at 17 09 55"
src="https://github.com/tldraw/tldraw/assets/469604/d40b8bb4-e752-48d3-946d-6377c08e66fc">


### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Improves error dialog messaging.
2024-02-15 11:35:42 +00:00
Mime Čuvalo
5bb60858b9
seo: take 2 (#2817)
(pending landing on: "Going to wait to land this one until the Google
SEO 'soft 404' validation finishes. I want to make sure we're testing
separate things.")

- removes Loading text
- adds sitemap to try to get Google to play nice

### Change Type

- [x] `patch` — Bug fix

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-02-15 11:28:43 +00:00
alex
4bfea7649d
[Snapping 2/5] Fix line-handle mid-point snapping (#2831)
Currently, only the end handles of the line tool snap. It should be all
of them.

Line handles work kind of weirdly at the moment: instead of just storing
the positions, we store full `TLHandle` objects complete with IDs,
`canSnap`/`canBind` properties, etc. Currently, all the handles get
written to the store with `canSnap: false`, when really it should be up
to the shape util to decide which handles are snappable.

This diff replaces the current handles map (from arbitrary ID to
`TLHandle`) with just the data we need: a map from index to x/y. The
extra information that the `Editor` needs for `TLHandle` is hydrated at
runtime (with `canSnap` set to `true` this time!)

Fixes TLD-2200

This PR is part of a series - please don't merge it until the things
before it have landed!
1. #2827 
2. #2831 (you are here)
3. #2793
4. #2841
5. #2845

### 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. Create a funky line shape on tldraw.com
2. Paste it into staging and make sure it comes across ok
3. Make some funky line shape in staging - make sure you use dragging,
mid-point creation, and shift-clicking

- [x] Unit Tests

### Release Notes

- Simplify the contents of `TLLineShape.props.handles`
2024-02-15 10:27:55 +00:00
alex
93c2ed615c
[Snapping 1/5] Validation & strict types for fractional indexes (#2827)
Currently, we type our fractional index keys as `string` and don't have
any validation for them. I'm touching some of this code for my work on
line handles and wanted to change that:
- fractional indexes are now `IndexKey`s, not `string`s. `IndexKey`s
have a brand property so can't be used interchangeably with strings
(like our IDs)
- There's a new `T.indexKey` validator which we can use in our
validations to make sure we don't end up with nonsense keys.

This PR is part of a series - please don't merge it until the things
before it have landed!
1. #2827 (you are here)
2. #2831
3. #2793
4. #2841
5. #2845

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Mostly relying on unit & end to end tests here - no user facing
changes.

- [x] Unit Tests
2024-02-14 17:53:30 +00:00
Mime Čuvalo
2ad47958bb
dev: swap yarn test and test-dev for better dx (#2773)
As discussed offline, just making `yarn test` do what we expect it to.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
2024-02-14 16:05:59 +00:00
David Sheldrick
f9f5c6afcb
Improve signia error handling (#2835)
This PR revamps how errors in signia are handled.

This was brought about by a situation that @MitjaBezensek encountered
where he added a reactor to a shape util class. During fuzz tests, that
reactor was being executed at times when the Editor was not in a usable
state (we had a minor hole in our sync rebase logic that allowed this,
fixed elsewhere) and the reactor was throwing errors because it
dereferenced a parent signal that relied on the page state
(getShapesInCurrentPage or whatever) when there were no page records in
the store.

The strange part was that even if we wrapped the body of the reactor
function in a try/catch, ignoring the error, we'd still see the error
bubble up somehow.

That was because the error was being thrown in a Computed derive
function, and those are evaluated independently (i.e. outside of the
reactor function) by signia as it traverses the dependency graph from
leaves to roots in the `haveParentsChanged()` internal function.

So the immediate fix was to make it so that `haveParentsChanged` ignores
errors somehow.

But the better fix involved completely revamping how signia handles
errors, and they work very much like how signia handles values now. i.e.

- signia still assumes that deriver functions are pure, and that if a
deriver function throws once it will throw again unless its parent
signals change value, so **it caches thrown errors for computed values**
and throws them again if .get() is called again before the parents
change
- it clears the history buffer if an error is thrown
- it does not allow errors to bubble during dirty checking i.e. inside
`haveParentsChanged` or while calculating diffs.

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

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

### Release Notes

- Add a brief release note for your PR here.
2024-02-14 13:32:15 +00:00
Steve Ruiz
27b75b2701
[fix] sticky note bug (#2836)
Fixes a bug with sticky notes.

### Change Type

- [x] `patch` — Bug fix
2024-02-14 12:41:30 +00:00
Lu Wilson
7ea54fe605
Lokalise: Translations update (#2830)
Adds Slovenian localization.

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

---------

Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com>
2024-02-14 08:59:41 +00:00
Steve Ruiz
ad5a61879a
Remove pointer check for arrow labels (#2824)
This PR removes a check for pointer changes over arrow labels. We don't
really have any other uses of the `pointer` in the canvas except for
buttons, so I'd rather keep the default cursor for arrow labels.

### Change Type

- [x] `minor` — New feature
2024-02-13 15:31:49 +00:00
Dan Groshev
5cf2fe9583
Revert "emojis! 🧑‍🎨 🎨 ✏️ (#2814)" (#2822)
Reverting accidental merge of #2814

### Change Type
- [x] `internal` — Any other changes that don't affect the published
package
2024-02-13 14:59:59 +00:00
Mime Čuvalo
32f641c1d7
emojis! 🧑‍🎨 🎨 ✏️ (#2814)
everyone ❤️'s emojis:
https://dropbox.tech/application/dropbox-paper-emojis-and-exformation


https://github.com/tldraw/tldraw/assets/469604/8f99f485-de98-44d1-93cb-6eb9c2d87d99




### Change Type

- [x] `minor` — New feature

### Test Plan

1. Test adding lots of emojis!

### Release Notes

- Adds emoji picker to text fields.
2024-02-13 14:46:55 +00:00
huppy-bot[bot]
c4ffa05b12 Update CHANGELOG.md [skip ci] 2024-02-13 14:27:20 +00:00
Mitja Bezenšek
e10c7cb8a9
Fix camera. (#2818)
Fixes a bug with zoom interactions not working correctly.

Before:


https://github.com/tldraw/tldraw/assets/2523721/125e9aaa-681c-4242-bb9e-298dd41b7a97

After:


https://github.com/tldraw/tldraw/assets/2523721/e59b950c-2c55-4663-91cc-fdc0c1403bb0

### 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. Zooming via the minimap should now correctly go through the zoom
steps.
2. Other zoom interactions should work correctly (things like zoom to
selection, zoom to 100%,...).

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

### Release Notes

- Fixes an issue with the camera and zooming.
2024-02-13 13:34:17 +00:00
Steve Ruiz
ad58bbb98b
[fix] overlays, custom brush example (#2806)
This PR fixes the overlays / custom brush example

### 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
2024-02-12 18:04:15 +00:00
Steve Ruiz
79460cbf3a
Use canvas bounds for viewport bounds (#2798)
This PR changes the way that viewport bounds are calculated by using the
canvas element as the source of truth, rather than the container. This
allows for cases where the canvas is not the same dimensions as the
component. (Given the way our UI and context works, there are cases
where this is desired, i.e. toolbars and other items overlaid on top of
the canvas area).

The editor's `getContainer` is now only used for the text measurement.
It would be good to get that out somehow.

# Pros

We can inset the canvas

# Cons

We can no longer imperatively call `updateScreenBounds`, as we need to
provide those bounds externally.

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Use the examples, including the new inset canvas example.

- [x] Unit Tests

### Release Notes

- Changes the source of truth for the viewport page bounds to be the
canvas instead.
2024-02-12 15:03:25 +00:00
alex
056481899c
Remove Geometry2d.isSnappable (#2768)
`Geometry2d.isSnappable` isn't used. There's some intended behaviour
here around making it so you can't snap handles to text labels, but it's
not actually working.

This is a breaking change, but given this property doesn't do anything I
don't think it's likely to be heavily depended upon

### Change Type
- [x] `major` — Breaking change
2024-02-08 17:08:57 +00:00
Lu Wilson
fdadaf6044
Style UI based on component size instead of window size (#2758)
Previously, our UI changed appearance based on your browser's **window
size**.
This PR makes it change appearance based on tldraw's **component size**
instead.

It makes the UI behave as we intend in small inline components.
See the **Inline component** example for a comparison of different
screen sizes.
See code comments for more info.

### 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. Open the inline component example.
2. Gradually change the width of the browser window.
3. The UI of the components shouldn't change when you do this. 

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

### Release Notes

- Dev: Fixed the default tldraw UI not matching the size of the
component.
2024-02-08 10:50:10 +00:00
Mime Čuvalo
f16e597761
examples: clean up Canvas/Store events and make UiEvents have code snippets (#2770)
Fixes https://linear.app/tldraw/issue/TLD-2059

<img width="1220" alt="Screenshot 2024-02-07 at 12 38 09"
src="https://github.com/tldraw/tldraw/assets/469604/15dc4298-670d-489b-8bee-810d34a0fbae">


### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]

### Release Notes

- Examples: add an interactive example that shows code snippets for the
SDK.
2024-02-07 16:51:04 +00:00
Lu Wilson
e2a03abf5c
Fixed actions menu opening in wrong direction on mobile (and add an inline layout example) (#2730)
This PR changes the direction of the actions menu popover when it's at
the bottom of the screen.
It's now consistent with all other menu dropdowns (or dropups?).

This PR also adds an example that demonstrates the Tldraw component at
various different size points. It was helpful when trying out this
change. And I'm using it to demonstrate more incoming changes.


![image](https://github.com/tldraw/tldraw/assets/15892272/bca34e47-9612-44f0-b432-e5e6dc4dda35)

### 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. Open the inline example.
2. Click the actions overflow button.
3. Make sure it appears above the button, instead of below.

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

### Release Notes

- Dev: Fixed the actions menu opening in the wrong direction.
2024-02-07 16:41:32 +00:00
Mime Čuvalo
a03edcff9d
error reporting: rm ids from msgs for better Sentry grouping (#2738)
This removes the ids from shape paths so that they can be grouped on our
error reporting tool.

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Error reporting: improve grouping for Sentry.
2024-02-07 16:30:46 +00:00
Mime Čuvalo
c823a44fd4
rearrange export / import from tldraw to help builds (#2739)
It seems like if the downstream build using tldraw has a different build
setup you can run into this issue where it complains that tldraw is
exporting before importing. Prettier tries to undo this so this
preserves the order of things.

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Build: Help with import/export error on some builds.
2024-02-07 16:30:29 +00:00
Mime Čuvalo
7ad9ee0a67
i18n: add HR 🇭🇷 (#2778)
### Change Type

- [x] `patch` — Bug fix

### Release Notes

- i18n: add Croatian / Hrvatski.
2024-02-07 16:27:27 +00:00
Dan Groshev
86cce6d161
Unbiome (#2776)
Biome as it is now didn't work out for us 😢 

Summary for posterity:

* it IS much, much faster, fast enough to skip any sort of caching
* we couldn't fully replace Prettier just yet. We use Prettier
programmatically to format code in docs, and Biome's JS interface is
officially alpha and [had legacy peer deps
set](https://github.com/biomejs/biome/pull/1756) (which would fail our
CI build as we don't allow installation warnings)
* ternary formatting differs from Prettier, leading to a large diff
https://github.com/biomejs/biome/issues/1661
* import sorting differs from Prettier's
`prettier-plugin-organize-imports`, making the diff even bigger
* the deal breaker is a multi-second delay on saving large files (for us
it's
[Editor.ts](https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/editor/Editor.ts))
in VSCode when import sorting is enabled. There is a seemingly relevant
Biome issue where I posted a small summary of our findings:
https://github.com/biomejs/biome/issues/1569#issuecomment-1930411623

Further actions:

* reevaluate in a few months as Biome matures

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package
2024-02-07 16:02:22 +00:00
alex
f185edcb76
Fix infinite cursor chat issue by partially reverting "reactive context menu overrides (#2697)" (#2775)
When we made context menu overrides, we introduced two new issues:
1. the context menu on the main app now updates much more frequently
than it should
2. every time it updates, it adds a new 'cursor chat' entry to the menu

This reverts the part of that change that made the context menu
reactive. This is the quick fix for us to hotfix, but i'm going to
follow this up by restoring that functionality without those issues.

### Change Type

- [x] `patch` — Bug fix


[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version
2024-02-07 15:57:10 +00:00
Mime Čuvalo
3b47a4574d
arrows: account for another NaN (#2753)
This would happen when trying to translate a zero-width bound arrow.

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Fixes zero-width arrow NaN computation when moving the label.
2024-02-07 15:11:10 +00:00
alex
4d0aff8f01
Split snap manager into ShapeBoundsSnaps and HandleSnaps (#2747)
Taking the opportunity for some last-minute low-consequence breaking
changes before 2.0, this diff does some prep work for adding a new
snapping API by making the distinction between the two types of snapping
a bit clearer and cleaning up some naming.

- `SnapManager` has had most of the actual snapping logic moved into two
properties: `shapeBounds` (for snapping shape bounds on translate and
resize) and `handles` (for snapping handles)
- `SnapLine`s are renamed to `SnapIndicator`s. The 'line' name was a bit
confusing because not all of these indicators are lines (the new vertex
snap type will be a single point)

I'm not too worried about this being a breaking change as it touches an
area of the API that I'd be very surprised if more than a couple of
people were using.

### Change Type

- [x] `major` — Breaking change

### Test Plan

- No user-facing changes.

### Release Notes

- `SnapLine`s are now called `SnapIndicator`s
- Snapping methods moved from `editor.snaps` to
`editor.snaps.shapeBounds` and `editor.snaps.handles` depending on the
type of snapping you're trying to do.
2024-02-07 10:40:01 +00:00
Mime Čuvalo
8cd8117acf
arrows: update cursor only when in Select mode (#2742)
The cursor was updating for the arrow label even when in other tools
(e.g. Draw) and it should only be updating when in Select mode. That
addresses this issue: https://github.com/tldraw/tldraw/issues/2750

Also, there was a problem with arrows and zero length arrows and labels.
The problem was actually in `Vec.ts` where we were dividing by zero.
Addresses this bug https://github.com/tldraw/tldraw/issues/2749

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Make sure that the cursor is only applicable to the Select tool.

### Release Notes

- Cursor tweak for arrow labels.
2024-02-06 14:42:35 +00:00
Lu Wilson
f2ec7be62e
Fix pinch zooming (#2748)
This PR fixes pinch zooming not working on touch screens.

Tested on android chrome, windows, ipad.

### 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. On a touch screen, try to pinch zoom in and out. Does it work?

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

### Release Notes

- None: Fixes an unreleased bug.
2024-02-06 12:28:26 +00:00
Dan Groshev
e6e4e7f6cb
[dx] use Biome instead of Prettier, part 2 (#2731)
Biome seems to be MUCH faster than Prettier. Unfortunately, it
introduces some formatting changes around the ternary operator, so we
have to update files in the repo. To make revert easier if we need it,
the change is split into two PRs. This PR introduces a Biome CI check
and reformats all files accordingly.

## Change Type
- [x] `minor` — New feature
2024-02-05 17:54:02 +00:00
Dan Groshev
826433751c
[dx] use Biome instead of Prettier, part 1 (#2729)
Biome seems to be MUCH faster than Prettier. Unfortunately, it
introduces some formatting changes around the ternary operator, so we
have to update files in the repo. To make revert easier if we need it,
the change is split into two PRs. This PR has only config/package
changes and is expected to fail the CI.

## Change Type
- [x] `minor` — New feature
2024-02-05 17:41:42 +00:00
Steve Ruiz
b379a7a47c
[dotcom] TLSyncRoom tidy (#2712)
I went through the sync room code today while thinking about syncing. As
I worked through it, I added some comments etc for my own readability.
There is no change in how the code works.

There are a few functions declared in the body of `handlePushRequest`.
We might want to re-arrange things so that we're not re-declaring those
on each push (there are a LOT of pushes, basically every mouse move from
every client). I did try that but reverted that change; it feels like a
proper solution would be bigger than what I wanted to do here.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
2024-02-05 17:25:07 +00:00
Steve Ruiz
591d3129c7
[fix] VSCode keyboard shortcuts while editing text (#2721)
This PR fixes a bug where keyboard shortcuts weren't working in the vs
code extension. We had taken some extra steps early on to prevent kbds
from running while an input was focused, but we've since solved this bug
in the kbd logic itself.

Closes #2717 

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Using the vs code extension, edit text and then use keyboard
shortcuts, e.g. for select all or copy / paste
2. Confirm that regular tldraw shortcuts don't fire when editing text

### Release Notes

- Fixed a bug in the VS Code that prevented keyboard shortcuts from
working in text labels.
2024-02-04 12:55:15 +00:00
Steve Ruiz
647d03a173
[Fix] Camera coordinate issues (#2719)
This PR fixes some bugs related to our coordinate systems. These bugs
would appear when the editor was not full screen.

![Kapture 2024-02-04 at 11 53
37](https://github.com/tldraw/tldraw/assets/23072548/9c2199f3-b34d-4fe1-a3e5-d0c65fe5a11e)

In short, we were being inconsistent with whether the
`currentScreenPoint` was relative to the top left corner of the
component or the top left corner of the page that contained the
component.

Here's the actual system:

<img width="898" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/c49b3686-aeb6-4164-a55d-8639d40290a1">

The `viewportPageBounds` describes the bounds of the component within
the browser's space. Its `x` and `y` describe the delta in browser space
between the top left corner of the **page** and the component. This is
not effected by scrolling.

The use's `screenPoint` describes the user's cursor's location relative
to the `viewportPageBounds`. Its `x` and `y` describe the delta in
browser space between the top left corner of the **component** and the
cursor.

While this is a bug fix, I'm marking it as major as apps may be
depending on the previous (broken) behavior.

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Zoom in, out, and pinch on an editor that isn't full screen.
2. Zoom in, out, and pinch on an editor that is full screen.
3. Drag and scroll on an editor that isn't full screen.
4. Drag and scroll on an editor that is full screen.

- [x] Unit Tests

### Release Notes

- Fixed bugs with `getViewportScreenCenter` that could effect zooming
and pinching on editors that aren't full screen
2024-02-04 12:03:49 +00:00
Steve Ruiz
dee5d2928c
Bump jest to fix weird prettier bug (#2716)
Our snapshot tests have been acting strange. It turned out that there's
a change in prettier that is incompatible with prettier's inline
snapshots.

This PR:
- updates jest to a compatible alpha
- updates dependencies

### Change Type

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

### Test Plan

- [x] Unit Tests
2024-02-04 11:19:47 +00:00
Steve Ruiz
d3a6d91217
[fix] Debug panel text overflow (#2715)
This PR prevents text overflow on the debug panel.

### Change Type

- [x] `patch` — Bug fix
2024-02-04 09:46:16 +00:00
Steve Ruiz
2fd6f254c8
Examples tweaks (#2681)
### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
2024-02-02 17:36:30 +00:00
Dan Groshev
d0f6ef80fc
Update the project to Node 20 (#2691)
### Change Type
- [x] `internal` — Any other changes that don't affect the published
package
2024-01-31 16:53:40 +00:00
alex
45c8777ea0
reactive context menu overrides (#2697)
Previously, we were calling context menu `overrides` in a `useMemo`, so
they weren't updating reactively in the way that most of our other
schema overrides do. This diff calls `override` in a `useValue` instead
so it updates reactively.

It also fixes some issues with testing the `<Tldraw />` component:
currently we get a lot of errors in the console about updates not being
wrapped in `act`. These are caused by the fill patterns at different
zoom levels popping in without us waiting for them. Now, we have a
helper for rendering the tldraw component that waits for this correctly
and stops the error.

### Change Type

- [x] `patch` — Bug fix

### Test Plan


- [x] Unit Tests


### Release Notes

- Context Menu overrides will now update reactively
2024-01-31 16:35:49 +00:00
Steve Ruiz
d31fecd3d5
[Fix] Note shape border radius (#2696)
This PR fixes a border radius on the note shape.

Before
<img width="382" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/5cb95dbd-c935-4f1f-901c-eca294836c96">

After
<img width="436" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/0cce7ccf-2f7b-40dd-a27c-08c251cb4715">


### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Fixes a bad border radius
2024-01-31 14:04:24 +00:00
Mime Čuvalo
34a95b2ec8
arrows: separate out handle behavior from labels (#2621)
This is a followup on the arrows work.
- allow labels to go to the ends if no arrowhead is present
- avoid using / overloading TLHandle and use a new PointingLabel state
to specifically address label movement
- removes the feature flag to launch this feature!

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Arrow labels: provide more polish on label placement

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-31 11:17:03 +00:00
Dan Groshev
a43b172b64
make CI check for yarn install warnings and fix the peer deps ones we have (#2683)
- [x] `internal` — Any other changes that don't affect the published
package
2024-01-30 11:41:46 +00:00
Mitja Bezenšek
7ac003cc05
Fix svg exporting for images with not fully qualified url (/tldraw.png or ./tldraw.png) (#2676)
Local images (like in our Local images example) could not be exported as
svg. We need to base64 encode them, but our check only matched images
with a `http` prefix, which local images like `/tldraw.png` don't have.

Fixes an issue reported here

https://discord.com/channels/859816885297741824/1198343938155745280/1198343938155745280

### 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 our Local images example.
2. Export as svg.
3. The export should correctly show the image.

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

### Release Notes

- Fix the svg export for images that have a local url.

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-01-30 10:11:10 +00:00
Mime Čuvalo
23f60ee98e
dev: add test-dev command for easier testing of packages (#2627)
@si14 you might know a better way to wire this up! lemme know if there's
something more clever here.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]

### Release Notes

- Adds easier testing command for individual packages.
2024-01-29 10:29:38 +00:00