Commit graph

1768 commits

Author SHA1 Message Date
Steve Ruiz
a722e3e6f0
[fix] various text (#1350)
This PR updates tests for the text shape, as well as updating the logic
of `getTextLines`. We now:

- allow leading whitespace
- allow white space to cause line breaks, trim the whitespace off of the
end of the line. Crazy times!
- fix a bug with geo shapes changes width when growY changes

Note that this is not a "full solution" to line breaks that are caused
by whitespace + wrapping. AFAIK this is impossible to fix in SVG-land
without measuring the SVG element in order to collapse whitespace in the
same way that it collapses in HTML layout.

### Change Type

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

- [x] Webdriver tests

### Release Notes

- Allow leading whitespace
2023-05-11 22:15:24 +00:00
Steve Ruiz
3437ca89d9
[feature] ui events (#1326)
This PR updates the editor events:
- adds types to the events emitted by the app (by `app.emit`)
- removes a few events emitted by the app (e.g. `move-to-page`,
`change-camera`)
- adds `onEvent` prop to the <TldrawUi> / <Tldraw> components
- call the `onEvent` when actions occur or tools are selected
- does some superficial cleanup on editor app APIs

### Release Note

- Fix layout bug in error dialog
- (ui) Add `TLEventMap` for types emitted from editor app
- (editor) Update `crash` event emitted from editor app to include error
- (editor) Update `change-history` event emitted from editor app
- (editor) Remove `change-camera` event from editor app
- (editor) Remove `move-to-page` event from editor app
- (ui) Add `onEvent` prop and events to <Tldraw> / <TldrawUi>
- (editor) Replace `app.openMenus` plain Set with computed value
- (editor) Add `addOpenMenu` method
- (editor) Add `removeOpenMenu` method
- (editor) Add `setFocusMode` method 
- (editor) Add `setToolLocked` method  
- (editor) Add `setSnapMode` method 
- (editor) Add `isSnapMode` method 
- (editor) Update `setGridMode` method return type to editor app
- (editor) Update `setReadOnly` method return type to editor app
- (editor) Update `setPenMode` method return type to editor app
- (editor) Update `selectNone` method return type to editor app
- (editor) Rename `backToContent` to `zoomToContent`
- (editor) Remove `TLReorderOperation` type

---------

Co-authored-by: Orange Mug <orangemug@users.noreply.github.com>
2023-05-11 22:14:58 +00:00
David Sheldrick
5061240912
[chore] Bump nanoid (#1349)
I need to mock nanoid for the ephemeral state fuzz tests, to create
repeatable test runs. In order to do that properly it needs to have a
consistent version among all our packages.

At the same time I'm removing some old unused params in AppOptions

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


### Release Notes

- Remove unused userId and instanceId props from AppOptions
2023-05-11 11:55:00 +00:00
Steve Ruiz
dfaa536370
[fix] tabs in text exports (#1323)
This PR fixes the appearance of tabs in labels and text when exporting
images.

This involved refactoring our CSS-text-to-multiline-SVG-text.

### Test Plan

1. Create a text or geo shape with a label that includes a tab character
at the beginning of a line (e.g. jsx)
2. Copy the image as SVG and paste

### Release Note

- Fixes a bug with trailing tab characters in text labels on image
export
2023-05-11 09:20:48 +00:00
Orange Mug
88e6f441b1
Fix "copy as png" in firefox when dom.events.asyncClipboard.clipboardItem is enabled (#1342)
Fixes the issue outlined in #1325.

### Test Plan
In firefox

1. Enable clipboard in firefox by going to `about:config` and enabling
`dom.events.asyncClipboard.clipboardItem` (remember to turn it off
afterwards)
2. Test that `copy-as -> PNG` copies the image

In other browsers

1. Test that `copy-as -> PNG` still copies the image

### Release Notes

- Fix "copy as png" in firefox when
`dom.events.asyncClipboard.clipboardItem` is enabled
2023-05-11 06:59:45 +00:00
David Sheldrick
9d5f3fb2fd
[chore] update wdio-vscode-service (#1346)
Updating broken wdio-vscode-service package

### Change Type

- [x] `dependencies` — Dependency Update (publishes a `patch` release,
for devDependencies use `internal`)
2023-05-10 12:42:15 +00:00
Orange Mug
2dbfda1285
Added initial webdriver tests (#1337)
Adds webdriver tests for testing from a users perspective via browser
actions. We currently support local test runners for a bunch of actions
on desktop `chrome`/`firefox`/`edge`/`safari` on macos.

We also have a browserstack runner which we'll enable in another PR.

### Release Note

- Adds initial webdriver tests
2023-05-09 20:21:45 +00:00
alex
28c8cb9c5f main: exclude @tldraw/assets from vite dep optimization to fix examples links 2023-05-09 18:32:10 +01:00
alex
71aef1764d
Rework the assets package for strategy-specific imports (#1341)
The assets package now only exports esm-formatted .js files. There's one
for each strategy - import-based, and meta.url-based. These are directly
generated as .js and .d.ts files rather than generated as .ts and
converted to js/dts through other means.

As this package depends on esm-specific stuff to function, we don't
publish a cjs version any more.

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

### Release Notes

- [dev] If you're using the `@tldraw/assets` package, you need to update
your code to `import { getAssetUrlsByImport } from
'@tldraw/assets/imports'` instead of `import { getBundlerAssetUrls }
from '@tldraw/assets`
2023-05-09 16:08:38 +00:00
David Sheldrick
67f5c25c73
[chore] move schema construction to tlschema package (#1334)
Our private tlsync package currently depends on the editor package,
which balloons the size of the cloudflare worker. It also makes it so
that any change to any package triggers a worker refresh, which makes
working on multiplayer stuff kinda miserable.

This is the first PR to fix that problem.

The second PR will need to resolve TLSyncClient's dependency on the
debugFlags somehow. Easiest would be to just remove the offending flag,
but we might want cross-bublic debug flags at some point in the future
so I'll try to find a low-cost way to make that happen while making
`tlsync` not depend on `editor`.

cc @TodePond since you added the flag in question
(`tldrawResetConnectionEveryPing`)

### Release Note

- internal moving stuff around
2023-05-09 14:40:58 +00:00
David Sheldrick
1f90c3f2b4
[chore] Add label options to PR template (#1339)
Merge after deploying the new huppy.

### Release Note

- Repo infra only
2023-05-09 14:36:57 +00:00
Steve Ruiz
bb96852b9d
[feature] check-box geo shape (#1330)
This PR adds a `check-box` geo shape. 

![Kapture 2023-05-08 at 15 31
49](https://user-images.githubusercontent.com/23072548/236853749-99ba786f-73a4-4b65-86ca-f2cdac61a903.gif)

It also improves some logic around the `onClick` shape util handler and
some surprisingly related fixes to point hit testing.

### Test Plan

1. Create a geo shape
2. Set it as a checkbox style
3. *easter egg* double click while holding alt to toggle between
check-box and rectangle

- [x] Unit Tests

### Release Note

- Adds checkbox geo shape.
2023-05-09 13:32:04 +00:00
alex
a8910e5491
Fix publishing (#1338)
Automated package publish had gotten broken because we lost all our git
tags/releases. We fixed that, but also:
* made releases come from huppy instead of david
* swtiched from node's `execSync` to our `exec` for more debuggable
output
* cleaned up some of the scripts a little

this diff has a lot of whitespace changes so you're best off reviewing
it with whitespace changes hidden:
https://github.com/tldraw/tldraw/pull/1338/files?diff=split&w=1
2023-05-09 13:25:56 +00:00
Steve Ruiz
2a36d6342c
[tiny] rename show menu paste (#1332)
This PR renames `showUiPaste` to `showMenuPaste`, since we use
`MENU_PASTE` elsewhere.
2023-05-08 21:06:10 +01:00
Steve Ruiz
0800dbe087
Update README.md (#1331)
Add some unhappy but necessary language to our readme's licensing and
contributing sections.
2023-05-08 20:28:53 +01:00
Steve Ruiz
4d7770b7bc
[docs] editor API (#1328)
This PR adds a basic guide to the editor API.

### Release Note

- (docs) Add a basic guide to the editor API.
2023-05-07 19:10:59 +01:00
Steve Ruiz
15b705800f
[fix] update useTransform.ts (#1327)
This PR fixes the way that rotation is handled in `useTransform`.

Before:
<img width="756" alt="image"
src="https://user-images.githubusercontent.com/23072548/236692574-7fcf94bd-76e2-4584-9ea0-4ea4aa6c7ffc.png">
After:
<img width="738" alt="image"
src="https://user-images.githubusercontent.com/23072548/236692585-f1970c9e-041c-470c-8bdb-af975ef48246.png">

### Test Plan

1. Select a bunch of shapes
2. Rotate the selection
3. The selection box should be correct
2023-05-07 18:24:06 +01:00
Steve Ruiz
aab47a1474
[improvement] dragging start distance on coarse pointer (#1220)
This PR slightly increases the distance needed to initiate a drag when
using a coarse pointer.
2023-05-05 14:48:49 +00:00
Steve Ruiz
f315ea2250
[fix] SVG export for arrows with labels but no arrowheads (#1229)
This PR fixes a bug where arrow shapes without arrowheads would not mask
their labels when exporting images.
2023-05-05 14:17:01 +00:00
Lu[ke] Wilson
dc16ae1b12
remove svg layer, html all the things, rs to tl (#1227)
This PR has been hijacked! 🗑️🦝🦝🦝

The <Canvas> component was previously split into an <SVGLayer> and an
<HTMLLayer>, mainly due to the complexity around translating SVGs.
However, this was done before we learned that SVGs can have overflow:
visible, so it turns out that we don't really need the SVGLayer at all.
This PR now refactors away SVG Layer.

It also updates the class name prefix in editor from `rs-` to `tl-` and
does a few other small changes.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-05-05 14:14:42 +00:00
Lu[ke] Wilson
986ffc1dd6
[docs] Add missing params docs (#1223)
This PR makes the docs site show documentation for parameters, even when
api-extractor thinks that there aren't any.

eg: Properties like `onBeforeUpdate`
eg: Types


![image](https://user-images.githubusercontent.com/15892272/236172263-155005cf-5a94-40ca-8faa-995e7d670e96.png)

![image](https://user-images.githubusercontent.com/15892272/236172299-8d1ff9dd-580d-48e8-bec9-903a9568a177.png)
2023-05-05 14:05:44 +00:00
Lu[ke] Wilson
b1569c97e0
add docs for TLShapeUtil (#1215)
This PR adds docs for the methods in the TLShapeUtil class.
I think that it's a good page to have docs on, as it shows people what's
possible with the custom shape API.

Currently, our docs are not showing `@param` info for lots of methods,
including the ones added in this PR.
I'll do fix for that in a follow-up PR, so that it's easier to review.

---

Note: Moving forward, we probably want to consider **_where_** these
docs are shown, and how we achieve that.

For example, do we put the docs for these methods in:
* The docs page for the `TLShapeUtil` class?
* The docs pages for the handler types, eg:
[`OnResizeHandler`](http://localhost:3000/gen/editor/OnResizeHandler-type)?
* Both?

Right now, I opted for putting them in the the TLShapeUtil class, as it
keeps them all in one place, and it's what we already do for some
others.

We should consider both - what works best for the docs? and what works
best for code editors?

---

This PR also includes a fix to our pre-commit step that @SomeHats did.
2023-05-05 14:05:25 +00:00
alex
880f82e658
New vite-based examples app (#1226)
Right now this examples app looks exactly the same as our old examples
app, but there are a couple of tiny differences:
- We use `vite` instead of our own esbuild setup for development and
bundling
- We use `@tldraw/assets` for smart asset hashing instead of copying the
assets to a public folder

You can use `@tldraw/assets` with vite with a bunch of extra config, but
it (plus a bunch of other bundlers) also support a special syntax for
specifying asset urls: `new URL('./my/asset.svg',
import.meta.url).href`. This approach is more standards-complient, but
doesn't work with every bundler just yet. This diff also adds a
url-based version of `@tldraw/assets`, although I'd like to tweak the
entry point - right now you need to import from
`@tldraw/assets/lib/urls`, but i'd like to find a way to get this to
`@tldraw/assets/urls` or something at some point.

There are a couple other extra fixes in here:
- vscode builds were broken, they're fixed now!
- there's also a little tweak to the `getBundlerAssetUrls` API to allow
passing in a function instead of an object for URL formatting
- there are new internal-only functions for injecting asset urls
globally instead of passing them in via react props. this means we can
get the benefits of cacheable URLs without having to clutter our
examples by passing them in
2023-05-05 13:10:36 +00:00
Lu[ke] Wilson
c76dc1596f
Add link to original tldraw within issue template (#1225)
This PR adds a link to the original tldraw repo within our issue
templates.

It will look similar to this (with different wording):

![image](https://user-images.githubusercontent.com/15892272/236198339-9dd12831-fec0-49f4-b279-9c991dfaaafc.png)
2023-05-05 13:01:30 +00:00
Lu[ke] Wilson
117ec62691
Fix issue templates not appearing (#1228)
This PR fixes the issue templates not working.


![image](https://user-images.githubusercontent.com/15892272/236412742-dd1ce7b4-8865-41f7-a0b7-dbb05547e360.png)


![image](https://user-images.githubusercontent.com/15892272/236412776-0124f624-7eae-452d-8318-309886b39c81.png)
2023-05-05 13:01:04 +00:00
Steve Ruiz
0d16942222 readmes 2023-05-04 13:47:56 +01:00
David Sheldrick
b63e871420
[fix] publish (#1222)
- fixes an invalid usage of process.env in the editor package
- fixes some bublic paths in the publishing infra code
2023-05-04 09:25:31 +00:00
David Sheldrick
f44f6e2c9f
[fix] typo in isFocusingInput (#1221)
Fixes
https://discord.com/channels/859816885297741824/1103050527731884082/1103052355110457354
2023-05-03 15:57:59 +00:00
David Sheldrick
00e3d20dc8
[feat] new LiveCollaborators behind feature flag (#1219)
In this PR I'm adding new versions of the `LiveCollaborators` and
`Collaborators` components for the ephemeral state work. They are behind
a feature flag for now.
2023-05-03 13:48:46 +00:00
Lu[ke] Wilson
9e5de0c48e
[improvement] readme / contributing (#1199)
This PR adds a barebones Readme to the public repo that we can start to
iterate on.

This is what it looks like!


![image](https://user-images.githubusercontent.com/15892272/234321088-6bde4a16-5c9d-4d74-985b-fc578d374eb9.png)

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-05-03 08:32:52 +00:00
Steve Ruiz
5d4b3bec45
[improvement] add bug report / feature request (#1218)
This PR adds issue templates for bug reports and feature requests.
2023-05-03 08:30:17 +00:00
Steve Ruiz
9fd0803428
[fix] collaborator render order (#1213)
This PR fixes a bug where collaborator cursors would appear below other
overlay content, such as selection boxes.
2023-05-03 08:29:04 +00:00
alex
14b1f24eb2
update @radix-ui/react-popover to 1.0.6-rc.5 (#1206)
Temporarily moving us to a prerelease of this dep. This resolves an
issue where the mobile style menu popover couldn't be closed by tapping
the style button again. See
https://github.com/radix-ui/primitives/issues/2105 for details
2023-05-03 08:28:55 +00:00
alex
859fff480d
add env and prefix output options to exec (#1217)
We make use of this `exec` function for the new huppy bot. For that, I
needed to support a couple of extra use-cases: extending the `env` used
to evaluate a command, and prefixing the command output with a string.

In use, these look something like this:
```ts
await exec('my', ['command'], {
    env: {HELLO: 'world'},
    ...prefixOutput('my prefix'),
})
```
2023-05-02 16:13:09 +00:00
alex
bb1c84e101 lite: run prettier on js + json files 2023-05-02 16:12:34 +01:00
David Sheldrick
4242f6ee3d
[chore] use explicit yarn in clean script (#1216)
I was finding that `npx yarn` was causing yarn v1 to be used for some
reason
2023-05-02 13:33:30 +00:00
alex
e81e269e72
fix husky install (#1212)
yarn2+ doesn't run the prepare script when you install a project, so our
husky hooks weren't getting set up correctly :(
2023-05-02 13:26:57 +00:00
David Sheldrick
f5c5b05dc7
[chore] update lazyrepo (#1211) 2023-05-02 12:25:26 +00:00
Steve Ruiz
5ab93eef5f
[fix] pick a better default language (#1201)
This PR improves the language selection. 

Previously, we would miss the user's languages that included a locale.
For example, if a user's languages were `['en-US', 'fr'], then they
would get 'fr' because 'en-US' wasn't in our table—though 'en' was!

We were already doing the splitting elsewhere but now we do it here,
too.

### Release Note

- Improves default language

---------

Co-authored-by: Lu[ke] Wilson <l2wilson94@gmail.com>
2023-04-29 23:06:02 +00:00
Orange Mug
00d4648ef5
Use strokePathData for <ShapeFill/> path to avoid bugs in the inner path algo (#1207)
This avoids some bug with fills in the new inky path algo. This is a
temp fix as it reuses the outer path, but it's fairly broken at the
moment so probably a good hotfix.

Before (notice the background fill busting the bounds of the shape) 

<img width="575" alt="Screenshot 2023-04-27 at 16 54 53"
src="https://user-images.githubusercontent.com/235915/234921462-3f2d81a4-f209-427e-ba33-bfc6b919bba9.png">

After

<img width="575" alt="Screenshot 2023-04-27 at 16 55 24"
src="https://user-images.githubusercontent.com/235915/234921460-7f36ab3e-ec97-4c4a-8634-868bf8eec791.png">

This isn't perfect because we're filling it with this double fill shape,
which I assume has perf issues.

<img width="1058" alt="Screenshot 2023-04-27 at 17 08 28"
src="https://user-images.githubusercontent.com/235915/234921788-f400bac0-fd2c-469a-beec-3e0a0d2f309d.png">

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-04-29 22:58:18 +00:00
Orange Mug
77175a9dc4
Added pHYs to import/export of png images (#1200)
Added the following

 - Always export pngs with a pixel-ratio of `2`
- Added the `pHYs` png metadata chunk describing the pixel ratio so it
opens with the correct size
 - When importing PNGs read the `pHYs` chunk for the sizing info
 
All the exporting is done via just modifying the bytes from the browsers
native image handling.


https://user-images.githubusercontent.com/235915/234309015-19f39f3a-66ce-4ec2-b7d0-b34a07ed346b.mov

I've also added `ANALYZE=true` option to get the build metadata from
esbuild on boot of `yarn dev` which allow me to see the bundle size info
in https://esbuild.github.io/analyze/

![esbuild github
io_analyze_](https://user-images.githubusercontent.com/235915/234310302-c6fe8109-c82d-480a-8c65-c7638b09e71e.png)

You can see that `crc` adds about `4.4kb`

<img width="280" alt="Screenshot 2023-04-25 at 15 33 26"
src="https://user-images.githubusercontent.com/235915/234310669-99e3e787-ddca-4ad2-81cf-b4a541631d62.png">

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-04-29 22:10:01 +00:00
David Sheldrick
731da1bc77
derived presence state (#1204)
This PR adds

- A new `TLInstancePresence` record type, to collect info about the
presence state in a particular instance of the editor. This will
eventually be used to sync presence data instead of sending
instance-only state across the wire.
- **Record Scopes**

`RecordType` now has a `scope` property which can be one of three
things:
- `document`: the record belongs to the document and should be synced
and persisted freely. Currently: `TLDocument`, `TLPage`, `TLShape`, and
`TLAsset`
- `instance`: the record belongs to a single instance of the store and
should not be synced at all. It should not be persisted directly in most
cases, but rather compiled into a kind of 'instance configuration' to
store alongside the local document data so that when reopening the
associated document it can remember some of the previous instance state.
Currently: `TLInstance`, `TLInstancePageState`, `TLCamera`, `TLUser`,
`TLUserDocument`, `TLUserPresence`
- `presence`: the record belongs to a single instance of the store and
should not be persisted, but may be synced using the special presence
sync protocol. Currently just `TLInstancePresence`

This sets us up for the following changes, which are gonna be pretty
high-impact in terms of integrating tldraw into existing systems:

- Removing `instanceId` as a config option. Each instance gets a
randomly generated ID.
- We'd replace it with an `instanceConfig` option that has stuff like
selectedIds, camera positions, and so on. Then it's up to library users
to get and reinstate the instance config at persistence boundaries.
- Removing `userId` as config option, and removing the `TLUser` type
altogether.
- We might need to revisit when doing auth-enabled features like locking
shapes, but I suspect that will be separate.
2023-04-27 18:03:19 +00:00
Orange Mug
da613ea6ef
Fix to not ignore the userId option for <Tldraw/> component in @tldraw/tldraw (#1205)
The `userId` prop in the `<Tldraw/>` component from the `@tldraw/tldraw`
was previously ignored. This PR fixes that to make it operational again.
2023-04-27 10:03:21 +00:00
alex
121ec72f25
Alex/test (#1202) 2023-04-25 17:17:31 +01:00
David Sheldrick
4c65cb8db4
[lite] upgrade lazyrepo (#1198)
* upgrade lazyrepo

* update lockfile + lazy.config
2023-04-25 14:32:17 +01:00
alex
39aa01b974 lite: tweak lockfile name 2023-04-25 12:01:38 +01:00
alex
1c8b9c9b13 lite: common logfile name 2023-04-25 12:01:38 +01:00
alex
67e94eb641 lite: open runners 2023-04-25 12:01:38 +01:00
alex
0994827b71 poke 2023-04-25 12:01:38 +01:00
alex
4066d06f93 lite: standalone? 2023-04-25 12:01:38 +01:00