Commit graph

568 commits

Author SHA1 Message Date
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
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
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
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
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
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
David Sheldrick
f5c5b05dc7
[chore] update lazyrepo (#1211) 2023-05-02 12:25:26 +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
David Sheldrick
4c65cb8db4
[lite] upgrade lazyrepo (#1198)
* upgrade lazyrepo

* update lockfile + lazy.config
2023-04-25 14:32:17 +01:00
alex
29ed921c67 transfer-out: transfer out 2023-04-25 12:01:25 +01:00