Commit graph

2309 commits

Author SHA1 Message Date
Steve Ruiz
a3c39cde4b
replace console.log with nicelog (#1496)
This PR replaces our `console.log` with `nicelog` so that I can more
easily grep for errant console.logs.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package (will not publish a new version)
2023-06-01 18:01:49 +00:00
Steve Ruiz
0c4174c0b8
[refactor] User-facing APIs (#1478)
This PR updates our user-facing APIs for the Tldraw and TldrawEditor
components, as well as the Editor (App). It mainly incorporates surface
changes from #1450 without any changes to validators or migrators,
incorporating feedback / discussion with @SomeHats and @ds300.

Here we:
- remove the TldrawEditorConfig
- bring back a loose version of shape definitions
- make a separation between "core" shapes and "default" shapes
- do not allow custom shapes, migrators or validators to overwrite core
shapes
- but _do_ allow new shapes

## `<Tldraw>` component

In this PR, the `Tldraw` component wraps both the `TldrawEditor`
component and our `TldrawUi` component. It accepts a union of props for
both components. Previously, this component also added local syncing via
a `useLocalSyncClient` hook call, however that has been pushed down to
the `TldrawEditor` component.

## `<TldrawEditor>` component

The `TldrawEditor` component now more neatly wraps up the different ways
that the editor can be configured.

## The store prop (`TldrawEditorProps.store`)

There are three main ways for the `TldrawEditor` component to be run:
1. with an externally defined store
2. with an externally defined syncing store (local or remote)
3. with an internally defined store
4. with an internally defined locally syncing store

The `store` prop allows for these configurations.

If the `store` prop is defined, it may be defined either as a `TLStore`
or as a `SyncedStore`. If the store is a `TLStore`, then the Editor will
assume that the store is ready to go; if it is defined as a SyncedStore,
then the component will display the loading / error screens as needed,
or the final editor once the store's status is "synced".

When the store is left undefined, then the `TldrawEditor` will create
its own internal store using the optional `instanceId`, `initialData`,
or `shapes` props to define the store / store schema.

If the `persistenceKey` prop is left undefined, then the store will not
be synced. If the `persistenceKey` is defined, then the store will be
synced locally. In the future, we may also here accept the API key /
roomId / etc for creating a remotely synced store.

The `SyncedStore` type has been expanded to also include types used for
remote syncing, e.g. with `ConnectionStatus`.

## Tools

By default, the App has two "baked-in" tools: the select tool and the
zoom tool. These cannot (for now) be replaced or removed. The default
tools are used by default, but may be replaced by other tools if
provided.

## Shapes

By default, the App has a set of "core" shapes:
- group
- embed
- bookmark
- image
- video
- text

That cannot by overwritten because they're created by the app at
different moments, such as when double clicking on the canvas or via a
copy and paste event. In follow up PRs, we'll split these out so that
users can replace parts of the code where these shapes are created.

### Change Type

- [x] `major` — Breaking Change

### Test Plan

- [x] Unit Tests
2023-06-01 15:47:34 +00:00
alex
d6085e4ea6
[3/3] Highlighter styling (#1490)
This PR finalises the highlighter shape with new colors, sizing, and
perfect freehand options.

The colors are based on our existing colour palette, but take advantage
of wide-gamut displays to make the highlighter highlightier. I used my
[oklch color palette tool to pick the
palette](https://alex.dytry.ch/toys/palette/?palette=%7B%22families%22:%5B%22black%22,%22grey%22,%22white%22,%22green%22,%22light-green%22,%22blue%22,%22light-blue%22,%22violet%22,%22light-violet%22,%22red%22,%22light-red%22,%22orange%22,%22yellow%22%5D,%22shades%22:%5B%22light-mode%22,%22dark-mode%22,%22hl-light%22,%22hl-dark%22%5D,%22colors%22:%5B%5B%5B0.2308,0,null%5D,%5B0.9097,0,null%5D,%5B0.2308,0,null%5D,%5B0.2308,0,null%5D%5D,%5B%5B0.7692,0.0145,248.02%5D,%5B0.6778,0.0118,256.72%5D,%5B0.7692,0.0145,248.02%5D,%5B0.7692,0.0145,248.02%5D%5D,%5B%5B1,0,null%5D,%5B0.2308,0,null%5D,%5B1,0,null%5D,%5B1,0,null%5D%5D,%5B%5B0.5851,0.1227,164.1%5D,%5B0.5319,0.0811,162.23%5D,%5B0.8729,0.2083,173.3%5D,%5B0.5851,0.152,173.3%5D%5D,%5B%5B0.7146,0.1835,146.44%5D,%5B0.6384,0.1262,143.36%5D,%5B0.8603,0.2438,140.11%5D,%5B0.6082,0.2286,140.11%5D%5D,%5B%5B0.5566,0.2082,268.35%5D,%5B0.4961,0.1644,270.65%5D,%5B0.7158,0.173,243.85%5D,%5B0.5573,0.178,243.85%5D%5D,%5B%5B0.718,0.1422,246.06%5D,%5B0.6366,0.1055,250.98%5D,%5B0.8615,0.1896,200.03%5D,%5B0.707,0.161,200.03%5D%5D,%5B%5B0.5783,0.2186,319.15%5D,%5B0.5043,0.1647,315.37%5D,%5B0.728,0.2001,307.45%5D,%5B0.5433,0.2927,307.45%5D%5D,%5B%5B0.7904,0.1516,319.77%5D,%5B0.6841,0.1139,315.99%5D,%5B0.812,0.21,327.8%5D,%5B0.5668,0.281,327.8%5D%5D,%5B%5B0.5928,0.2106,26.53%5D,%5B0.5112,0.1455,26.18%5D,%5B0.7326,0.21,20.59%5D,%5B0.554,0.2461,20.59%5D%5D,%5B%5B0.7563,0.146,21.1%5D,%5B0.6561,0.0982,20.86%5D,%5B0.7749,0.178,6.8%5D,%5B0.5565,0.2454,6.8%5D%5D,%5B%5B0.6851,0.1954,44.57%5D,%5B0.5958,0.1366,46.6%5D,%5B0.8207,0.175,68.62%5D,%5B0.6567,0.164,68.61%5D%5D,%5B%5B0.8503,0.1149,68.95%5D,%5B0.7404,0.0813,72.25%5D,%5B0.8939,0.2137,100.36%5D,%5B0.7776,0.186,100.36%5D%5D%5D%7D&selected=3).
I'm not sure happy about these colors as they are right now - in
particular, i think dark mode looks a bit rubbish and there are a few
colors where the highlight and original version are much too similar
(light-violet & light-red). Black uses yellow (like note shape) and grey
uses light-blue. Exports are forced into srgb color space rather than P3
for maximum compatibility.


![image](https://github.com/tldraw/tldraw/assets/1489520/e3de762b-6ef7-4d17-87db-3e2b71dd8de1)


![image](https://github.com/tldraw/tldraw/assets/1489520/3bd90aa9-bdbc-4a2b-9e56-e3a83a2a877b)



The size of a highlighter stroke is now based on the text size which
works nicely for making the highlighter play well with text:


![image](https://github.com/tldraw/tldraw/assets/1489520/dd3184fc-decd-4db5-90ce-e9cc75edd3d6)


Perfect freehands settings are very similar to the draw tool, but with
the thinning turned way down. There is still some, but it's pretty
minimal.

### The plan
1. initial highlighter shape/tool #1401 
2. sandwich rendering for highlighter shapes #1418
3. shape styling - new colours and sizes, lightweight perfect freehand
changes #1490 **>you are here<**

### Change Type
- [x] `minor` — New Feature

### Test Plan

1. You can find the highlighter tool in the extended toolbar
2. You can activate the highlighter tool by pressing shift-D
3. Highlighter draws nice and vibrantly when over the page background or
frame background
4. Highlighter is less vibrant but still visible when drawn over images
/ other fills
5. Highlighter size should nicely match the corresponding unscaled text
size
6. Exports with highlighter look as expected

### Release Notes

Highlighter pen is here! 🎉🎉🎉

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-01 15:34:59 +00:00
alex
a11a741de4
[2/3] renderer changes to support "sandwich mode" highlighting (#1418)
This diff modifies our canvas/rendering code to support shapes rendering
into a "background layer". The background layer isn't a layer in the
sense of our own html/svg/indicator layers, but is instead part of the
HTML canvas layer and is created by allocating z-indexes to shapes below
all others.

For most shapes, the background starts at the canvas. If a shape is in a
frame, then the frame is treated as the background.

![Kapture 2023-05-19 at 11 38
12](https://github.com/tldraw/tldraw/assets/1489520/3ab6e0c0-f71e-4bfd-a996-c5411be28a71)

Exports now use the `renderingShapes` algorithm which fixed a small bug
with exports where opacity wouldn't get correctly propagated down
through child shapes.

### The plan
1. initial highlighter shape/tool #1401 
2. sandwich rendering for highlighter shapes #1418  **>you are here<**
3. shape styling - new colours and sizes, lightweight perfect freehand
changes

### Change Type

- [x] `minor` — New Feature


### Test Plan

not yet!

- [x] Unit Tests

### Release Notes

[not yet!]
2023-06-01 15:22:47 +00:00
alex
674a829d1f
[1/3] initial highlighter shape/tool (#1401)
This diff adds an initial version of the highlighter shape. At this
stage, it's a complete copy of the draw tool minus the following
features:
* Fills
* Stroke types
* Closed shapes

I've created a new shape util (a copy-paste of the draw one with stuff
renamed/deleted) but reused the state chart nodes for the draw shape.
Currently this new tool looks exactly like the draw tool, but that'll be
changing soon!

![Kapture 2023-05-17 at 15 37
33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01)

The UI here is extremely WIP. The highlighter tool is behind a feature
flag, but once enabled is accessible through the tool bar. There's a
first-draft highlighter icon (i didn't spend much time on this, it's not
super legible on non-retina displays yet imo), and the tool is bound to
the `i` key (any better suggestions? `h` is taken by the hand tool)

### The plan
1. initial highlighter shape/tool #1401 **>you are here<**
2. sandwich rendering for highlighter shapes #1418  
3. shape styling - new colours and sizes, lightweight perfect freehand
changes

### Change Type
- [x] `minor` — New Feature

### Test Plan
(not yet)

### Release Notes

[internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
Steve Ruiz
2992ad85d9
[chore] remove benchmark (#1489)
This PR removes unused scripts related to benchmarking, and some other
unused dependencies.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package (will not publish a new version)
2023-05-30 15:43:28 +00:00
Steve Ruiz
3753acf5ce
[chore] remove webdriver dependencies / scripts (#1488)
This PR removes scripts and other dependencies associated with webdriver
tests.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package (will not publish a new version)
2023-05-30 15:23:28 +00:00
Steve Ruiz
a220b2eff1
[feature] reduce motion (#1485)
This PR adds a user preference to reduce motion. When enabled the app
will not animate the camera (and perhaps skip other animations in the
future). It's actual implementation is as an `animateSpeed` property, so
we can also use it to speed up or slow down our animations if that's
something we want to do!

### Change Type

- [x] `minor` — New Feature

### Test Plan

1. Turn on reduce motion
2. Use minimap / camera features to zoom in / out / etc

- [x] Unit Tests

### Release Notes

- [editor] Add `reduceMotion` user preference
- Add reduce motion option to preferences
2023-05-30 15:22:49 +00:00
Steve Ruiz
0dc0587bea
[feature] Easier store persistence API + persistence example (#1480)
This PR adds `getSnapshot` and `loadSnapshot` to the `Store`, sanding
down a rough corner that existed when persisting and loading data.
Avoids learning about stores vs schemas vs migrations until a little
later.

### Change Type

- [x] `minor` — New Feature

### Test Plan

- [x] Unit Tests

### Release Notes

- [tlstore] adds `getSnapshot` and `loadSnapshot`
2023-05-30 15:22:49 +00:00
Steve Ruiz
e3cf05f408
Add playwright tests (#1484)
This PR replaces our webdriver end to end tests with playwright tests.

It:
- replaces our webdriver workflow with a new e2e workflow based on
playwright
- removes the webdriver project
- adds e2e tests to our examples app
- replaces all `data-wd` attributes with `data-testid`

### Coverage

Most of the tests from our previous e2e tests are reproduced here,
though there are some related to our gestures that will need to be done
in a different way—or not at all. I've also added a handful of new
tests, too.

### Where are they

The tests are now part of our examples app rather than being in its own
different app. This should help us test our different examples too. As
far as I can tell there are no downsides here in terms of the regular
developer experience, though they might complicate any CodeSandbox
projects that are hooked into the examples app.

### Change Type

- [x] `tests` — Changes to any testing-related code only (will not
publish a new version)
2023-05-30 15:28:56 +01:00
alex
e3dec58499
Add DSL to make writing shape-layout test cases much easier (#1413)
As part of my highlighter work, I've been writing a few test cases
around rendering with different combinations of nested frames and
groups. Writing these test cases using `createShapes` is really hard,
and reading them is even harder. I wanted to see if there was an easier
way for us to define shapes for test cases, and turns out... there is!

This diff introduces a JSX-based DSL for defining test cases. It looks
something like this:
```tsx
// create some shapes
const ids = app.createShapesFromJsx([
	<TL.geo ref="A" x={100} y={100} w={100} h={100} />,
	<TL.frame ref="B" x={200} y={200} w={300} h={300}>
		<TL.geo ref="C" x={200} y={200} w={50} h={50} />
		<TL.text ref="D" x={1000} y={1000} text="Hello, world!" align="end" />
	</TL.frame>,
])

// refer to shape IDs according to their `ref`
app.select(ids.C)
```

It's probably not worth trying to migrate everything possible to this,
but i picked a few random tests to convert over to show how it works
(and because i wanted this diff to end up red overall)

In the future, I'd like to use this with visual regression testing to
test rendering/exports on some complex combinations of shapes too.

### Change Type
- [x] `tests` — Changes to any testing-related code only (will not
publish a new version)

### Release Notes

[internal only change]
2023-05-30 13:27:26 +00:00
alex
4048064e78
Feature flags rework (#1474)
This diff tweaks our `debugFlags` framework to support setting different
default value for different environments, makes it easier to define
feature flags, and makes feature flags show up in the debug menu by
default. With this change, feature flags will default to being enabled
in dev and preview environments, but disabled in production.

Specify a feature flag like this:
```ts
const featureFlags = {
      myCoolNewFeature: createFeatureFlag('myCoolNewFeature')
}
```

optionally, pass a second value to control its defaults:
```ts
const featureFlags = {
    featureEnabledInProduction: createFeatureFlag('someFeature', { all: true }),
    customEnabled: createFeatureFlag('otherFeature', {development: true, staging: false, production: false}),
}
```

In code, the value can be read using `featureFlags.myFeature.value`.
Remember to wrap reading it in a reactive context!

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

-

### Release Notes

[internal only change]
2023-05-30 13:06:15 +00:00
Steve Ruiz
7578fff2b1
[tiny] add isPageId (#1482)
This PR adds an `isPageId` helper.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package (will not publish a new version)

### Release Notes

- [tlschema] Add `isPageId`
2023-05-27 17:53:18 +00:00
Steve Ruiz
0bc397c946
[minor] Mark tlsync-client internal APIs (#1481)
This PR marks internal APIs as internal in `tlsync-client`.

### Change Type

- [x] `major` — Breaking Change

### Release Notes

- Removes internal APIs from `@tldraw/tlsync-client`
2023-05-27 16:18:32 +00:00
Steve Ruiz
3450de5282
[refactor] update record names (#1473)
This PR renames our record types to avoid a type collision with the type
that they are based on. For example `TLCamera` is both a type and a
record; after this PR, we use `CameraRecordType` for the camera's record
type.

### Change Type

- [x] `major` — Breaking Change

### Release Notes

- [editor] rename record types
2023-05-26 13:37:59 +00:00
alex
f8b6ee6ab9
remove safari special-casing for paste (#1470)
Previously, we had a bunch of special-casing around paste to support
safari quirks on desktop and ios.

Since upgrading radix-ui and useGesture, these are no longer needed and
were actually causing issues. This diff removes the special casing for
paste and makes it a normal action that get triggered the same way as
any other.

### Change Type
- [x] `patch` — Bug Fix

### Test Plan

1. Copy text outside of tldraw, paste in tldraw with the context menu,
edit menu, and keyboard shortcut
2. Repeat for images outside of tldraw
3. Repeat for shapes inside of tldraw

### Release Notes

[fixes a regression introduced during this release]
2023-05-26 08:24:21 +00:00
Mitja Bezenšek
042edeb4b4
Don't allow g keyboard shortcut in readonly mode, show laser tool in the toolbar (#1459)
Disable `g` keyboard shortcut in readonly mode. Show laser tool in
toolbar when in readonly mode.

Resolves [#1936](https://github.com/tldraw/brivate/issues/1936)
Resolves [#1935](https://github.com/tldraw/brivate/issues/1935)

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. Open a readonly room.
2. Press `g` and make sure it doesn't switch to it.
3. Laser tool should be visible in the toolbar in readonly rooms.


### Release Notes

- Disable geo tool shortcut in readonly mode. Show laser on the toolbar.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-05-25 19:08:52 +00:00
Lu Wilson
d22542bc55
Fix people menu button border on android (#1471)
This PR fixes the people menu button's border being misaligned on
android.

There is a still a tiny tiny tiny sliver visible through the border,
which could be fixed in a future PR.

![image](https://github.com/tldraw/tldraw/assets/15892272/d84cac26-33e4-4089-b0e0-1fa480b57286)


### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. Open a shared project on Android.
2. Place a visible *behind* the people menu button, so that you can
'see' the background-coloured border around the button.
3. Make sure the border is centered around the people menu button.
2023-05-25 16:15:11 +00:00
Steve Ruiz
f63371577d
[mini-feature] Following indicator (#1468)
This PR adds a colored box around the current window when following
another user.

### Change Type

- [x] `minor` — New Feature

### Test Plan

1. Follow a user
2. Check out the box

### Release Notes

- Adds viewport following indicator
2023-05-25 15:41:49 +00:00
David Sheldrick
b742783577
send user prefs data in broadcast msg (#1466)
fixes #1464 

The user preference changes were not broadcasting correctly in firefox
because it has a race condition wherein the broadcast message was being
received by a peer tab before the localStorage data was ready to be
consumed in that tab.

### Change Type

<!-- 💡 Indicate the type of change your pull request is. -->
<!-- 🤷‍♀️ If you're not sure, don't select anything -->
<!-- ✂️ Feel free to delete unselected options -->

<!-- To select one, put an x in the box: [x] -->

- [x] `patch` — Bug Fix
- [ ] `minor` — New Feature
- [ ] `major` — Breaking Change
- [ ] `dependencies` — Dependency Update (publishes a `patch` release,
for devDependencies use `internal`)
- [ ] `documentation` — Changes to the documentation only (will not
publish a new version)
- [ ] `tests` — Changes to any testing-related code only (will not
publish a new version)
- [ ] `internal` — Any other changes that don't affect the published
package (will not publish a new version)

### Test Plan

1. in firefox, have two tabs open in the same user context.
2. toggle dark mode.
3. the change should propagate to the other tab
2023-05-25 15:36:29 +00:00
Steve Ruiz
f551528ddf
[fix] lock option for laser tool (#1460)
This PR removes the laser tool toggleShapeLocked button.

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. Select laser tool.
2. Confirm that the toggle shape locked button is not visible.
2023-05-25 15:36:12 +00:00
Mitja Bezenšek
2f02daf37f
Add laser keyboard shortcut. (#1467)
Adds laser keyboard shortcut to the keyboard shortcuts dialog. Fixes
[#1465](https://github.com/tldraw/tldraw/issues/1465)
### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. Open the keyboard shortcuts dialog from the help menu.
2. Laser tool should be listed.
2023-05-25 15:33:40 +00:00
Steve Ruiz
3a1570d790
[fix] make follow icon visible on iPad (#1462)
This PR makes the "follow" button visible on iPad where hover is not
available.

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. View the people menu on iPad
2. See that the follow person button is visible
2023-05-25 15:06:07 +00:00
Steve Ruiz
b5cb601725
[fix] page item submenu (#1461)
This PR fixes a bug that would effect the page item submenu. With the
`useMenuIsOpen` hook, it's important that multiple menus have unique
ids. In this case each page was using `page sub menu` and so each open
menu would be closed by the not-open menu effects.

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. Create two pages
2. Open the submenus on each page
2023-05-25 15:01:19 +00:00
Lu Wilson
0e9058409d
Fix positioning of default cursor (#1458)
This PR fixes the default custom cursor being slightly out-of-position
compared to MacOS cursor.

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. On Mac, right-click on the canvas.
2. When the cursor swaps out for the OS cursor... it should stay in the
same position.
2023-05-25 11:09:18 +00:00
Lu Wilson
020b0da704
change pointer cursor to white (#1454)
This PR changes the pointer cursor back to white (from black).

I made it black to do some debugging, and I forgot to change it back.

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. Make a bookmark shape by pasting a link.
2. Hover the hyperlink of the bookmark.
3. Check that the 'pointer' cursor is white.
2023-05-25 11:08:52 +00:00
David Sheldrick
356a0d1e73
[chore] refactor user preferences (#1435)
- Remove TLUser, TLUserPresence
- Add first-class support for user preferences that persists across
rooms and tabs

### Change Type

<!-- 💡 Indicate the type of change your pull request is. -->
<!-- 🤷‍♀️ If you're not sure, don't select anything -->
<!-- ✂️ Feel free to delete unselected options -->

<!-- To select one, put an x in the box: [x] -->

- [ ] `patch` — Bug Fix
- [ ] `minor` — New Feature
- [x] `major` — Breaking Change
- [ ] `dependencies` — Dependency Update (publishes a `patch` release,
for devDependencies use `internal`)
- [ ] `documentation` — Changes to the documentation only (will not
publish a new version)
- [ ] `tests` — Changes to any testing-related code only (will not
publish a new version)
- [ ] `internal` — Any other changes that don't affect the published
package (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
- [ ] Webdriver tests

### Release Notes

- Add a brief release note for your PR here.
2023-05-25 09:54:29 +00:00
Lu Wilson
53b289310d
Add translations for "Leave shared project" action (#1394)
This PR adds translations for the "Leave shared project" action for
tldraw.com

It's for a brivate PR: https://github.com/tldraw/brivate/pull/1870

### Change Type

- [x] `patch` — Translations

### Release Notes

- None

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-05-25 09:51:28 +00:00
David Sheldrick
b61766c37f
update use-gesture (#1453)
Bumps use-gesture. Should fix #1393 

### Change Type

<!-- 💡 Indicate the type of change your pull request is. -->
<!-- 🤷‍♀️ If you're not sure, don't select anything -->
<!-- ✂️ Feel free to delete unselected options -->

<!-- To select one, put an x in the box: [x] -->

- [ ] `patch` — Bug Fix
- [ ] `minor` — New Feature
- [ ] `major` — Breaking Change
- [x] `dependencies` — Dependency Update (publishes a `patch` release,
for devDependencies use `internal`)
- [ ] `documentation` — Changes to the documentation only (will not
publish a new version)
- [ ] `tests` — Changes to any testing-related code only (will not
publish a new version)
- [ ] `internal` — Any other changes that don't affect the published
package (will not publish a new version)

### Test Plan

1. on iPad, with no shapes selected, long press on the canvas to open
the context menu.
2. tap outside of the menu to dismiss it
3. you should still be able to pan and pinch normally and select shapes
and everything.

### Release Notes

- Updates use-gesture to fix pinch gesture bug on iPad.
2023-05-25 09:39:47 +00:00
Mitja Bezenšek
787eab75d6
Add migration for horizontal alignment (#1443)
This adds a migration to migrate existing alignment options to their
legacy counter parts (`start` -> `start-legacy`, `end` -> `end-legacy`,
`middle` -> `middle-legacy`).

With this change the legacy options don't show any align as active in
the Styles panel:
![CleanShot 2023-05-23 at 19 53
45](https://github.com/tldraw/tldraw/assets/2523721/4017e03a-9492-4a02-b991-ac206f40ae17)

I think this is probably what we want.

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. Use some old preview link to create Geo and Note shapes with old
alignment options. You can use this one:
https://examples-kzwtf68jr-tldraw.vercel.app/
2. Copy and paste these shapes over to staging. Nothing should change
visually.
3. Also try out exporting to svg (with both old and new alignment
options)

- [x] Unit Tests
- [ ] Webdriver tests

### Release Notes

- Add support for legacy alignment options.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-05-24 11:34:13 +00:00
Lu Wilson
89428edffc
Fix issue template label not getting applied (#1428)
This PR *should* fix our issue templates not working correctly.

Before: No label was getting assigned to feature requests.
After: We add the 'enhancement' label to them.

### Change Type

- [x] `patch` — Bug Fix
2023-05-24 11:31:34 +00:00
alex
0375b5d86d
Stricter ID types (#1439)
We noticed that when inferring the type of a shape from its ID, it was
getting inferred as `any` which was hiding some issues. This diff
switches `BaseRecord`'s automatic ID to an explicit one, which lets us
pass in our correct `TLShapeId` definition and still have it play nicely
with other places.

### Change Type

- [x] `patch` — Bug Fix

### Release Notes

[internal only, covered by #1432 changelog]

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-05-24 11:25:41 +00:00
Steve Ruiz
eb26964130
[refactor] restore createTLSchema (#1444)
This PR restores `createTLSchema`. 

It also:
- removes `TldrawEditorConfig.default`
- makes `config` a required property of `<TldrawEditor>`, though it's
created automatically in `<Tldraw>`.
- makes `config` a required property of `App`
- removes `TLShapeType` and replaces the rare usage with
`TLShape["type"]`
- adds `TLDefaultShape` for a union of our default shapes
- makes `TLShape` a union of `TLDefaultShape` and `TLUnknownShape`

### Change Type

- [x] `major` — Breaking Change

### Release Notes

- [editor] Simplifies custom shape definition
- [tldraw] Updates props for <TldrawEditor> component to require a
`TldrawEditorConfig`.
2023-05-24 10:48:31 +00:00
Steve Ruiz
f3182c9874
[fix] local e2e script (#1442)
Fix the e2e script local

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package (will not publish a new version)
2023-05-23 15:57:00 +00:00
Lu Wilson
24f97a569f
Fix cursor shadow getting clipped (#1441)
This PR fixes cursor shadow getting clipped in some cases.

Kap doesn't record the error so you'll have to take my word on this one!

### Change Type

- [x] `patch` — Bug Fix

### Release Notes

- Fixed a bug where custom cursors could have their shadow clipped.
2023-05-23 15:12:49 +00:00
Lu Wilson
ab0df9118e
Add SVG cursors for all cursor types (#1416)
Fixes #1410 

This PR adds custom SVGs for all cursor types.
This will unblock some upcoming collaboration features!

It also adds some basic debugging for custom cursors.

![2023-05-19 at 11 02 57 - Coffee
Shrimp](https://github.com/tldraw/tldraw/assets/15892272/dbc84d04-604f-43e5-acd2-69df956e5784)

It uses custom cursors for any shape-related UI, like links.

![2023-05-19 at 11 07 04 - Amaranth
Aphid](https://github.com/tldraw/tldraw/assets/15892272/7eb25f6a-0552-47bd-b2b9-f6c3dc2fca70)

But it sticks with the default browser cursors for the non-canvas UI.

![2023-05-23 at 15 06 29 - Apricot
Bovid](https://github.com/tldraw/tldraw/assets/15892272/2fe35afb-095a-4454-a6c3-aa8337b71506)

### Change Type

- [x] `minor`

### Test Plan

1. Enable debug mode.
2. From the debug menu, enable "Debug cursors".
3. Hover the cursor over the shapes that appear.
4. Check that the cursor appears correctly over each one.
5. (Don't forget to turn off "Debug cursors" after use).

### Release Notes

- Added consistent custom cursors.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-05-23 14:12:11 +00:00
Steve Ruiz
abe9237c6e
[refactor] remove createTLSchema (#1440)
This PR removes `createTLSchema`, now that the default shapes / utils
are in the editor's `TldrawEditorConfig`. There were a few places that
still called `createTLSchema`, though they would have been missing many
parts of the

### Change Type

- [x] `major` — Breaking Change

### Test Plan

- [x] Unit Tests

### Release Notes

- [tlschema] Removes `createTLSchema` in favor of `TldrawEditorConfig`
2023-05-23 13:35:11 +00:00
Steve Ruiz
649125cdad
[refactor] Remove TLShapeDef, getShapeUtilByType. (#1432)
This PR removes `TLShapeDef` and associated helpers / references.

It purposely loosens the configuration and typings to better support
customization.

### Change Type

- [x] `major` — Breaking Change

### Test Plan

1. Use the app!

### Release Notes

- [tlschema] Update props of `createTLSchema`
- [editor] Update props of `TldrawEditorConfig`
- [editor] Remove `App.getShapeUtilByType`
- [editor] Update `App.getShapeUtil` to take a type rather than a shape

---------

Co-authored-by: alex <alex@dytry.ch>
2023-05-23 12:32:42 +00:00
Lu Wilson
3ce18c0c31
Fix new wobble (#1431)
This PR stops collaborator cursors wobbling while viewport-following. 
It's a **new wobble** that we haven't seen before! (It crept in at some
point)

It happens when these three things happen at the same time:
* You're following someone
* They're panning
* They're not moving their pointer

eg: This happens when they're trackpad-panning.

So this is *not* the **old wobble** that we fixed before! That one is
still fixed.

---

The **new wobble** looks like this:

![2023-05-22 at 12 08 51 - Magenta
Urial](https://github.com/tldraw/tldraw/assets/15892272/4b738766-cde3-4a9c-9169-76d622bec3bf)

It's sometimes hard-to-spot because of the _smoothing_ that we do.
When we drastically increase the strength of smoothing... the **new
wobble** is less noticeable:
![2023-05-22 at 12 12 40 - Rose
Goat](https://github.com/tldraw/tldraw/assets/15892272/4ece229a-60e8-4923-89f8-4a0f9b702491)

But we can do better!
So for demonstration purposes... let's turn off _smoothing_ to let us
see the **new wobble** more clearly.
![2023-05-22 at 12 16 02 - Gold
Macaw](https://github.com/tldraw/tldraw/assets/15892272/9030cf2a-bdf3-47f0-87f0-a1195ab2fcbf)

Now we can clearly see what's going on...

The cursor is updating every animation **frame**.
The camera is updating every **tick**.

Depending on your screen's refresh rate, these _might be different_!

Let's test that theory by throttling the **tick** further.
As expected, it increases the **new wobble**:
![2023-05-22 at 14 16 21 - Blush
Caterpillar](https://github.com/tldraw/tldraw/assets/15892272/c70ee08c-8fd3-40ae-a4b3-95637c08acc7)

Let's test the theory again by trying on a screen where the _tick_ and
_frame_ are in sync.
As expected, the **new wobble** doesn't happen _most of the time_.

However, _frame_ and _tick_ can still get out of sync! Which causes the
occasional wobble:

![2023-05-22 at 14 38 21 - Lime
Eagle](https://github.com/tldraw/tldraw/assets/15892272/2a9d8c98-194f-4b73-a7ea-ee85ac1fa28f)

So let's fix both cases...
Instead of making the following-camera update every _tick_...
Let's make it update every _frame_!

![2023-05-22 at 15 28 47 - Salmon
Smelt](https://github.com/tldraw/tldraw/assets/15892272/e9f5c10c-d421-4611-b049-7a961218c087)

The perceptive among you might notice a slight wobble that's still
there...
This is an entirely **different wobble** caused by different things.
We can get to it in the future! But we're back at our original
wobble-quota for now.

![2023-05-22 at 14 32 18 - Brown
Tern](https://github.com/tldraw/tldraw/assets/15892272/e1250715-0bf2-4b87-b6e7-a357bccf4106)

When we turn smoothing back on, things look better than before 👍 

![2023-05-22 at 14 42 48 - Cyan
Roundworm](https://github.com/tldraw/tldraw/assets/15892272/f3616c6f-7969-4a8d-80b1-26ee44e6f451)

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. Open a single shared project in two different browser sessions.
2. Make one session's user follow the other.
3. Trackpad-pan the leader's camera around.
4. Check that the wobble has reduced.
2023-05-23 08:04:07 +00:00
Steve Ruiz
53be923921
[refactor] record migrations (#1430)
This PR removes comments from our record types, makes initial version
optional, and unifies the order of initial / current version.

- Initial versions are zero by default
- If no current version is provided to `defineMigrations`, migrations
should be undefined
- Fixes TypeScript quirks in versioning (e.g. only initial version)

This PR also:
- Makes migrations optional when empty
- Removes reference to empty migrations

### Change Type

- [x] `major` — Breaking Change

### Test Plan

- [x] Unit Tests
- [ ] Webdriver tests

### Release Notes

- [tlschema] Improve `defineMigrations`
- [editor] Simplify migration definitions
2023-05-22 21:46:24 +00:00
alex
d48e403ed1
Measure individual words instead of just line breaks for text exports (#1397)
This diff fixes a number of issues with text export by completely
overhauling how we approach laying out text in exports.

Currently, we try to carefully replicate in-browser behaviour around
line breaks and whitespace collapsing. We do this using an iterative
algorithm that forces the browser to perform a layout for each word, and
attempting to re-implement how the browser does things like whitespace
collapsing & finding line break opportunities. Lots of export issues
come from the fact that this is almost impossible to do well (short of
sending a complete text layout algorithm & full unicode lookup tables).

Luckily, the browser already has a complete text layout algorithm and
full unicode lookup tables! In the new approach, we ask the browser to
lay the text out once. Then, we use the
[`Range`](https://developer.mozilla.org/en-US/docs/Web/API/Range) API to
loop over every character in the rendered text and measure its position.
These character positions are then grouped into "spans". A span is a
contiguous range of either whitespace or non-whitespace characters,
uninterrupted by any browser-inserting line breaks. When we come to
render the SVG, each span gets its own `<tspan>` element, absolutely
positioned according to where it ended up in the user's browser.

This fixes a bunch of issues:

**Misaligned text due to whitespace collapsing at line breaks**
![Kapture 2023-05-17 at 12 07
30](https://github.com/tldraw/tldraw/assets/1489520/5ab66fe0-6ceb-45bb-8787-90ccb124664a)

**Hyphenated text (or text with non-trivial/whitespace-based breaking
rules like Thai) not splitting correctly**
![Kapture 2023-05-17 at 12 21
40](https://github.com/tldraw/tldraw/assets/1489520/d2d5fd13-3e79-48c4-8e76-ae2c70a6471e)

**Weird alignment issues in note shapes**
![Kapture 2023-05-17 at 12 24
59](https://github.com/tldraw/tldraw/assets/1489520/a0e51d57-7c1c-490e-9952-b92417ffdf9e)

**Frame labels not respecting multiple spaces & not truncating
correctly**
![Kapture 2023-05-17 at 12 27
27](https://github.com/tldraw/tldraw/assets/1489520/39b2f53c-0180-460e-b10a-9fd955a6fa78)

#### Quick note on browser compatibility
This approach works well across all browsers, but in some cases actually
_increases_ x-browser variance. Consider these screenshots of the same
element (original above, export below):

![image](https://github.com/tldraw/tldraw/assets/1489520/5633b041-8cb3-4c92-bef6-4f3c202305de)

Notice how on chrome, the whitespace at the end of each line of
right-aligned text is preserved. On safari, it's collapsed. The safari
option looks better - so our manual line-breaking/white-space-collapsing
algorithm preferred safari's approach. That meant that in-app, this
shape looks very slightly different from browser to browser. But out of
the app, the exports would have been the same (although also note that
hyphenation is broken). Now, because these shapes look different across
browsers, the exports now look different across browsers too. We're
relying on the host-browsers text layout algorithm, which means we'll
faithfully reproduce any quirks/inconsistencies of that algorithm. I
think this is an acceptable tradeoff.

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

* Comprehensive testing of text in exports, paying close attention to
details around white-space, line-breaking and alignment
* Consider setting `tldrawDebugSvg = true`
* Check text shapes, geo shapes with labels, arrow shapes with labels,
note shapes, frame labels
* Check different alignments and fonts (including vertical alignment)

### Release Notes

- Add a brief release note for your PR here.
2023-05-22 15:10:03 +00:00
Steve Ruiz
97ffc168c1
[fix] laser pointer (#1429)
This PR makes two improvements to the laser pointer:
- it increases the opacity of collaborator lasers
- it fixes a case where a scribble could have no points

### Change Type

- [x] `patch` — Bug Fix
2023-05-22 13:11:47 +00:00
Steve Ruiz
cbbc0abcc6
[chore] remove yarnrc-private.yml (#1427)
This is a legacy of the chicken run.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package (will not publish a new version)
2023-05-22 08:56:05 +00:00
Lu Wilson
84e8db6847
Update docs links + guides + build (#1422)
This PR fixes various docs issues.

* Fixes `yarn dev-docs` and `yarn build-docs` not working.
* Updated guides to get assets from the new `tldraw/tldraw` repo instead
of the old `tldraw/tldraw-examples`.
* Updated an old CodeSandbox link to the new StackBlitz. Thanks
@MitjaBezensek for spotting it!

### Change Type

- [x] `documentation` — Changes to the documentation only (will not
publish a new version)

### Release Notes

* [docs] Updated guides to get assets from the new `tldraw/tldraw` repo
instead of the old `tldraw/tldraw-examples`.
* [docs] Updated an old CodeSandbox link to the new StackBlitz.
2023-05-22 08:21:54 +00:00
Steve Ruiz
e43b0103fd
Create @tldraw/indices package (#1426)
This PR moves our "fractical indices" library into its own package.

- [x] `major` — Breaking Change

### Release Notes

- [@tldraw/editor] Remove fractional indices code into `@tldraw/indices`
- [@tldraw/indices] Create library for fractional indices code
2023-05-22 08:18:01 +00:00
Steve Ruiz
6ea0cb039f
[feature] Add checkbox to toolbar (#1423)
This PR:
- adds the checkbox to the toolbar
- removes the embed button from the toolbar

### Change Type

- [x] `minor` — New Feature

### Release Notes

- Adds missing checkbox to toolbar.
2023-05-19 13:01:42 +00:00
Mitja Bezenšek
0375dbf8c0
Bump version. (#1421)
Bump vs code version. I build the extension from the
`release-2023-05-16` branch, but didn't push the changes there as we
never pull them back to main. So I'm making this change here.

### Change Type

- [x] `patch` — Bug Fix
2023-05-19 11:43:41 +00:00
Steve Ruiz
2a7b2dcdfd
[improvement] set horizontal position using text alignment (#1419)
This PR makes it so that horizontal alignment in geo and sticky note
shapes also effects the position of the text within the shape.

<img width="1169" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/96b28a7d-0f13-46ba-9ea1-82d02b4f870b">

<img width="1274" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/fa768c71-4e9e-4cfe-ad8a-94d7700c445d">

This PR also places the shape's label at the center when there is no
text and the shape is not editing.

### Change Type

- [x] `minor` — New Feature

### Test Plan

1. Create shapes with labels
2. Confirm that their labels are positioned correctly
3. Export the shapes and verify the export

### Release Notes

- Geo shapes and sticky notes now position their labels based on their
alignment.
2023-05-19 11:19:11 +00:00
Steve Ruiz
818972f222
[fix] reorder handles in front of selection (#1420)
This PR places handles in front of selection.

<img width="742" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/22640acf-54dc-4c69-a041-4187088005b5">

### Change Type

- [x] `patch` — Bug Fix

### Release Notes

- Fix a bug where handles would appear behind selection indicators.
2023-05-19 11:16:03 +00:00
Steve Ruiz
1eb1f89cd1
[feature] add laser pointer (#1412)
This PR adds a laser pointer. It's also available in readonly rooms.

![Kapture 2023-05-18 at 17 00
18](https://github.com/tldraw/tldraw/assets/23072548/4f638dff-8c17-4f9d-8177-4a63a524b7fd)

### Change Type

- [x] `minor` — New Feature

### Test Plan

1. Select the laser pointer tool
2. Draw some lasers.

### Release Notes

- Adds the laser pointer tool.
2023-05-19 11:09:13 +00:00