Commit graph

170 commits

Author SHA1 Message Date
Steve Ruiz
b7d9c8684c
tldraw zero - package shuffle (#1710)
This PR moves code between our packages so that:
- @tldraw/editor is a “core” library with the engine and canvas but no
shapes, tools, or other things
- @tldraw/tldraw contains everything particular to the experience we’ve
built for tldraw

At first look, this might seem like a step away from customization and
configuration, however I believe it greatly increases the configuration
potential of the @tldraw/editor while also providing a more accurate
reflection of what configuration options actually exist for
@tldraw/tldraw.

## Library changes

@tldraw/editor re-exports its dependencies and @tldraw/tldraw re-exports
@tldraw/editor.

- users of @tldraw/editor WITHOUT @tldraw/tldraw should almost always
only import things from @tldraw/editor.
- users of @tldraw/tldraw should almost always only import things from
@tldraw/tldraw.

- @tldraw/polyfills is merged into @tldraw/editor
- @tldraw/indices is merged into @tldraw/editor
- @tldraw/primitives is merged mostly into @tldraw/editor, partially
into @tldraw/tldraw
- @tldraw/file-format is merged into @tldraw/tldraw
- @tldraw/ui is merged into @tldraw/tldraw

Many (many) utils and other code is moved from the editor to tldraw. For
example, embeds now are entirely an feature of @tldraw/tldraw. The only
big chunk of code left in core is related to arrow handling.

## API Changes

The editor can now be used without tldraw's assets. We load them in
@tldraw/tldraw instead, so feel free to use whatever fonts or images or
whatever that you like with the editor.

All tools and shapes (except for the `Group` shape) are moved to
@tldraw/tldraw. This includes the `select` tool.

You should use the editor with at least one tool, however, so you now
also need to send in an `initialState` prop to the Editor /
<TldrawEditor> component indicating which state the editor should begin
in.

The `components` prop now also accepts `SelectionForeground`.

The complex selection component that we use for tldraw is moved to
@tldraw/tldraw. The default component is quite basic but can easily be
replaced via the `components` prop. We pass down our tldraw-flavored
SelectionFg via `components`.

Likewise with the `Scribble` component: the `DefaultScribble` no longer
uses our freehand tech and is a simple path instead. We pass down the
tldraw-flavored scribble via `components`.

The `ExternalContentManager` (`Editor.externalContentManager`) is
removed and replaced with a mapping of types to handlers.

- Register new content handlers with
`Editor.registerExternalContentHandler`.
- Register new asset creation handlers (for files and URLs) with
`Editor.registerExternalAssetHandler`

### Change Type

- [x] `major` — Breaking change

### Test Plan

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

### Release Notes

- [@tldraw/editor] lots, wip
- [@tldraw/ui] gone, merged to tldraw/tldraw
- [@tldraw/polyfills] gone, merged to tldraw/editor
- [@tldraw/primitives] gone, merged to tldraw/editor / tldraw/tldraw
- [@tldraw/indices] gone, merged to tldraw/editor
- [@tldraw/file-format] gone, merged to tldraw/tldraw

---------

Co-authored-by: alex <alex@dytry.ch>
2023-07-17 21:22:34 +00:00
David Sheldrick
eeb41d4e69
tweaks for cloud shape (#1723)
This makes the bumps on the curvy parts more bumpy, and improves the way
inky clouds are drawn to make it less likely to produce double lines
that do not fully overlap.

<img width="1066" alt="image"
src="https://github.com/tldraw/tldraw/assets/1242537/6119c6e8-ceee-4cf6-b393-70efbbdd6373">


### Change Type

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

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

### Test Plan

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

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

### Release Notes

- Add a brief release note for your PR here.
2023-07-10 07:55:28 +00:00
David Sheldrick
83a391b46b
Add cloud shape (#1708)
![Kapture 2023-07-04 at 16 36
31](https://github.com/tldraw/tldraw/assets/1242537/bcb19959-ac66-46fa-92ea-50fe4692a96c)


### Change Type

- [x] `minor` — New feature


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

### Test Plan

1. Make some cloud shapes, try different sizes, colors, fills.
2. Export cloud shapes to images.

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

### Release Notes

- Adds a cloud shape.
2023-07-07 15:32:08 +00:00
Steve Ruiz
910be6073f
[refactor] reduce dependencies on shape utils in editor (#1693)
We'd like to make the @tldraw/editor layer more independent of specific
shapes. Unfortunately there are many places where shape types and
certain shape behavior is deeply embedded in the Editor. This PR begins
to refactor out dependencies between the editor library and shape utils.

It does this in two ways:
- removing shape utils from the arguments of `isShapeOfType`, replacing
with a generic
- removing shape utils from the arguments of `getShapeUtil`, replacing
with a generic
- moving custom arrow info cache out of the util and into the editor
class
- changing the a tool's `shapeType` to be a string instead of a shape
util

We're here trading type safety based on inferred types—"hey editor, give
me your instance of this shape util class"—for knowledge at the point of
call—"hey editor, give me a shape util class of this type; and trust me
it'll be an instance this shape util class". Likewise for shapes.

### A note on style 

We haven't really established our conventions or style when it comes to
types, but I'm increasingly of the opinion that we should defer to the
point of call to narrow a type based on generics (keeping the types in
typescript land) rather than using arguments, which blur into JavaScript
land.

### Change Type

- [x] `major` — Breaking change

### Test Plan

- [x] Unit Tests

### Release Notes

- removes shape utils from the arguments of `isShapeOfType`, replacing
with a generic
- removes shape utils from the arguments of `getShapeUtil`, replacing
with a generic
- moves custom arrow info cache out of the util and into the editor
class
- changes the a tool's `shapeType` to be a string instead of a shape
util
2023-07-07 13:56:31 +00:00
Lu Wilson
d99c4a0e9c
Make some missing tsdocs appear on the docs site (#1706)
🚨 Note 🚨
This PR has changed! See my [newer
comment](https://github.com/tldraw/tldraw/pull/1706#issuecomment-1623451709)
for what the PR does now.
This description is kept here to show the original intention of the PR.

---

This PR fixes the tsdocs formatting of `TldrawEditorProps`, so that they
appears on the docs site.

We have docs already written, but they weren't appearing. There are
probably others like this too.


![image](https://github.com/tldraw/tldraw/assets/15892272/8d8940b3-983f-48b3-9804-7ac88116ca9d)

### Change Type

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

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

### Test Plan

1. Navigate to `/gen/editor/TldrawEditorProps`
2. Make sure that that the parameters are listed out with descriptions.

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

### Release Notes

- Docs: Fixed some missing docs for the TldrawEditor component.
2023-07-07 11:50:47 +00:00
Lu Wilson
f745781056
[hot take] remove tool from shape definition (#1691)
This PR removes the `tool` parameter from the `defineShape` function.
It's an opinionated change that I think we should at the very least
consider.

## What's the context?

Currently, you can add **tools** (aka state nodes) to your state chart
in two different ways:

1. Passing them to the `<Tldraw>` component with the `tools` attribute.
2. As part of a shape definition's `tool` property, which you then pass
to the `<Tldraw>` component with the `shapes` attribute.

This is what (1) looks like:

```jsx
import { MyTool } from "./MyTool"

function Example() {
  return <Tldraw tools={[MyTool]} />
}
```

This is what (2) looks like:

```jsx
import { MyTool } from "./MyTool"
import { MyShapeUtil, myShapeProps } from "./MyShape"

const MyShapeDefinition = defineShape("my-shape", {
  util: MyShapeUtil,
  props: myShapeProps,
  tool: MyTool,
})

function Example() {
  return <Tldraw shapes={[MyShapeDefinition]} />
}
```

Clearly, (1) is better for when you want to add *just a tool*, that
doesn't have an associated shape.
And (2) is better for when you want to add *both* a tool and an
associated shape.

## Why change it?

I think we should remove method (2). Because I think that it adds a few
complications.


#### Does it help?

I don't think that it helps to streamline the process of coupling shapes
and tools. You still need to remember to add your tool.

Seeing as `tool` is optional on the shape definition (rightly so), it
doesn't prompt you to do it.

#### What's easier to explain?

I think it's easier to just have to explain _one method_. It would take
longer to explain two methods, and it complicates the concepts involved.

Seeing as there's not a big benefit to one method over the other, the
added explanation wouldn't be a good trade-off.

#### What happens if I use both?

It's unclear to the user what would happen if they use both methods. Do
we know what the intended behaviour of this would be? I think this will
happen often.

```jsx
import { MyTool } from "./MyTool"
import { MyShapeUtil, myShapeProps } from "./MyShape"

const MyShapeDefinition = defineShape("my-shape", {
  util: MyShapeUtil,
  props: myShapeProps,
  tool: MyTool,
})

function Example() {
  return <Tldraw tools={[MyTool]} shapes={[MyShapeDefinition]} />
}
```

#### Does it fit my shape/tool?

Many shapes are coupled closely with one tool. But some shapes would
involve multiple tools. And some tools would involve multiple shapes.

For example, you might first add a tool and a shape that go nicely
together, so you use method (2). But two months later, you decide that
you want another tool to be able to make this shape too. Now you've
inserted your related tools in two different places, unless you
refactor.

Alternatively, you might want to add some more functionality to your
tool, so that it can make multiple types of shapes. Instead of
refactoring the existing shape, you want to create an entirely new
shape, to keep your new code separate. Should you add the `tool`
property to the new shape as well? What would happen if you did/didn't?
What happens if you later disable the original shape? Would you need to
move the `tool` property from there to the newer shape?

It would be a lot simpler to just have the tool in your list of tools,
instead of having them tangled up with shapes.

#### Plugins?

We've been considering moving towards some sort of 'plugins' system in
the future, that could collect together shapes, tools, and other stuff.

I think that a more complete concept of a 'plugin' would be the best
place to collect together shapes, and tools — not on the shape itself.

### 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. Try using all of the app's tools, making sure they still work.

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

### Release Notes

- [dev] Removed the `tool` property from `defineShape`
2023-07-07 11:44:57 +00:00
Steve Ruiz
103809b83e
[refactor] reordering shapes (#1718)
This PR:
- adds tests for shape reordering
- removes `Editor.getParentsMappedToChildren`
- removes `Editor.reorderShapes`
- moves reordering shapes code into its own file, outside of the editor

### Change Type

- [x] `major` — Breaking change (if you were using those APIs)

### Release Notes

- [api] removes `Editor.getParentsMappedToChildren`
- [api] removes `Editor.reorderShapes`
- [api] moves reordering shapes code into its own file, outside of the
editor
2023-07-07 11:29:31 +00:00
Steve Ruiz
7fe43bb2ef
remove state checks for brush and zoom brush (#1717)
This PR removes the strict state checks for the brush and zoom brush. We
should consider making the canvas more controlled by what exists (e.g.
whether a `brush` exists) rather than depending on particular statechart
states.

### Change Type

- [x] `minor`

### Test Plan

1. Create a brush manually in the API.
2. The brush should be visible on the canvas.

### Release Notes

- [editor] remove `editor.isIn` state checks for displaying brush and
zoom brush.
2023-07-07 09:38:16 +00:00
Mitja Bezenšek
090e148552
Go back to default cursor when done resizing. (#1700)
Once we are done resizing (when inserting text) we now show the default
cursor.

Fixes #1699 

### Change Type

- [x] `patch` — Bug fix


### Test Plan

1. Select text tool
2. Insert a text shape by dragging to select it's size.
3. After you are done dragging the cursor should go back to the default
cursor.

### Release Notes

- Switch back to the default cursor after you are done inserting a new
text shape.
2023-07-05 14:06:46 +00:00
Lu Wilson
d965c9f6c9
Firefox: Fix coarse pointer issue (#1701)
This PR fixes the editor sometimes incorrectly assuming that you're
using a coarse pointer in firefox. It's not a complete fix — it just
avoids some of the bigger issues with it. ie: It disables cursor chat.

To avoid the issue, we just assume that you have a fine pointer if
you're using firefox on desktop.

Eventually, we should do a more complete fix for this.

I QA'd this change on:
* Mac Firefox (no touch screen)
* Windows Firefox (touch screen)
* Android Firefox

### 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. Use firefox on desktop with a touch screen.
2. Check that you can still use cursor chat (when in a shared project).

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

### Release Notes

- Fixed firefox not being able to use cursor chat when using a touch
screen on desktop.
2023-07-04 15:24:20 +00:00
huppy-bot[bot]
43442070c2 Update CHANGELOG.md [skip ci] 2023-07-04 14:21:37 +00:00
Steve Ruiz
603966486d
[fix] penmode (#1698)
This PR fixes pen mode.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. On iPad, use the pencil to enter pen mode
2. Select the draw tool
3. touch the screen

- [x] Unit Tests (sort of)

### Release Notes

- [fix] pen mode
2023-07-04 10:11:57 +00:00
Steve Ruiz
5174d3f466
[fix] indicator not updating (#1696)
This PR fixes the indicator bug
(https://github.com/orgs/tldraw/projects/16/views/1?pane=issue&itemId=32402403).

### Change Type

- [x] `patch` — Bug fix
2023-07-04 10:06:45 +00:00
Steve Ruiz
eb6aa9bbe4
[improvement] More nuanced cursor state (#1682)
This PR adds some more nuance to collaborator cursors.

Rather than being timed out or not timed out, a collaborator can now be
`active`, `idle` or `inactive`.

We calculate this based on the difference between the time that has
elapsed since the user's last activity timestamp.

After 3 seconds of inactivity, they go `idle`.
After sixty seconds of inactivity, they are `inactive`.
After any activity, they become `active` again.

When a user is `active`, we always show their cursor.
When a user is `idle`, we hide their cursor if they're following us,
unless they're highlighted
When a user is `inactive`, we hide their cursor unless they're
highlighted.

### Change Type

- [x] `minor`

### Test Plan

1. Find a friend and experiment with inactive times
2. Join a room that includes an inactive cursors; they should be hidden
on load
3. Have people follow you; do their timeouts feel natural?

### Release Notes

- Improve cursor timeouts and hiding logic.
2023-06-30 12:46:07 +00:00
Steve Ruiz
c524cac3f7
[fix] comma keyboard shortcuts (#1675)
This PR fixes some issues in our `useDocumentEvents`. It closes
https://github.com/tldraw/tldraw/issues/1667 (I think).

### Change Type

- [x] `patch`

### Release Notes

- [@tldraw/editor] Bug fixes on document events.
2023-06-29 20:30:33 +00:00
Steve Ruiz
cf2cc8c970
[improvement] add box sizing border box (#1674)
This PR adds `box-sizing: border-box` to the editor and its children.

### Change Type

- [x] `patch`

### Release Notes

- [@tldraw/editor] Add `box-sizing: border-box` to `tl-container`
2023-06-29 14:23:18 +00:00
Steve Ruiz
f1f584df94
[improvemnet] drop crc, Buffer dependency (#1673)
This PR incorporates a crc method from
https://github.com/alexgorbatchev/crc into the library, removing a peer
dependency on `buffer`. This was causing build errors in apps that did
not include the buffer library. (Our codebase included buffer because of
vsce.)

### Change Type

- [x] `patch`

### Release Notes

- [@tldraw/editor] Remove peer dependency on buffer.
2023-06-29 14:14:43 +00:00
Steve Ruiz
6faef733b6
[improvement] export scribble manager (#1671)
This PR adds the `ScribbleManager` to the exports from `@tldraw/editor`.

### Change Type

- [x] `minor` — New feature


### Release Notes

- [@tldraw/tldraw] Export `ScribbleManager`
2023-06-29 14:10:54 +00:00
Steve Ruiz
81ee3381bf
[fix] Shape rendering (#1670)
This PR fixes shape rendering logic. Remember! memo's 2nd argument
returns "when should we NOT render" not "when should we render"

### Change Type

- [x] `patch`

### Test Plan

1. Use the draw tool
2023-06-29 10:13:50 +00:00
Steve Ruiz
fd29006538
[feature] add meta property to records (#1627)
This PR adds a `meta` property to shapes and other records.

It adds it to:
- asset
- camera
- document
- instance
- instancePageState
- instancePresence
- page
- pointer
- rootShape

## Setting meta

This data can generally be added wherever you would normally update the
corresponding record.

An exception exists for shapes, which can be updated using a partial of
the `meta` in the same way that we update shapes with a partial of
`props`.

```ts
this.updateShapes([{
    id: myShape.id,
    type: "geo",
    meta: { 
      nemesis: "steve",
      special: true
    }
])
```

## `Editor.getInitialMetaForShape`

The `Editor.getInitialMetaForShape` method is kind of a hack to set the
initial meta property for newly created shapes. You can set it
externally. Escape hatch!

### Change Type

- [x] `minor` — New feature

### Test Plan

todo

- [ ] Unit Tests (todo)

### Release Notes

- todo
2023-06-28 14:24:05 +00:00
David Sheldrick
a63b536782 Update CHANGELOG.md [skip ci] 2023-06-28 11:53:57 +01:00
Lu Wilson
9c12c91f5f
Fix crash when rotating a deleted shape (#1658)
This PR fixes a crash when rotating a deleted shapes, and adds a unit
test for it.

It also updates the docs of an editor method to communicate a current
limitation that we left a 'todo' for. 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. Get two devices out for this! (or write a little console script to do
it for you)
2. Rotate a shape on one device.
3. While rotating it, delete it on the other device.
4. Make sure the page doesn't crash!

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

### Release Notes

- Fixed a crash when trying to rotate a deleted shape.
2023-06-27 15:08:23 +00:00
Steve Ruiz
7fd0ab75ed
[improvement] custom shapes example (#1660)
This PR fixes an import in the custom shapes example. It also tweaks the
example to show how buttons and other interactive content should work.

### Change Type

- [x] `documentation`
2023-06-27 14:51:35 +00:00
Steve Ruiz
2d5b2bdc94
[tweak] migrate store snapshot arguments (#1659)
This PR updates the `migrateStoreSnapshot` method in @tldraw/store

### Change Type

- [x] `major` — Breaking change

### Test Plan

- [x] Unit Tests
2023-06-27 13:59:07 +00:00
Steve Ruiz
ed8d4d9e05
[improvement] store snapshot types (#1657)
This PR improves the types for the Store.

- renames `StoreSnapshot` to `SerializedStore`, which is the return type
of `Store.serialize`
- creates `StoreSnapshot` as a type for the return type of
`Store.getSnapshot` / the argument type for `Store.loadSnapshot`
- creates `TLStoreSnapshot` as the type used for the `TLStore`.

This came out of a session I had with a user. This should prevent
needing to import types from `@tldraw/store` directly.

### Change Type

- [x] `major` — Breaking change

### Test Plan

- [x] Unit Tests

### Release Notes

- [dev] Rename `StoreSnapshot` to `SerializedStore`
- [dev] Create new `StoreSnapshot` as type related to
`getSnapshot`/`loadSnapshot`
2023-06-27 12:25:55 +00:00
Steve Ruiz
faecd88220
[fix] pen mode touches (#1655)
This PR fixes an issue (cough feature cough) where three touches would
exit pen mode.

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Removes three touches to cancel pen mode feature.
2023-06-27 10:25:49 +00:00
Lu Wilson
caaedc559f
Fix text shapes not having colour (#1649)
This PR fixes text shapes always being black.
It also fixes Note shapes not having the correct text colour.

<img width="759" alt="Screenshot 2023-06-26 at 11 26 45"
src="https://github.com/tldraw/tldraw/assets/15892272/a68ae0d1-69ba-43de-9e21-87c483ffd2dc">


### 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. Make a text shape.
2. Make sure you can change its colour.
3. Make a note shape.
4. Make sure its text label stays black when you change the note's
colour.

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

### Release Notes

- None: Fixes an unreleased bug.
2023-06-26 12:57:15 +00:00
alex
aad5815a06
Styles API docs (#1641)
Adds some basic API docs for the new styles API.

### Change Type

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

### Test Plan

--

### Release Notes
 --

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 14:01:02 +00:00
alex
e8bc114bf3
Styles API follow-ups (#1636)
tldraw-zero themed follow-ups to the styles API added in #1580.

- Removed style related helpers from `ShapeUtil`
- `editor.css` no longer includes the tldraw default color palette.
Instead, a global `DefaultColorPalette` is defined as part of the color
style. If developers wish to cusomise the colors, they can mutate that
global.
- `ShapeUtil.toSvg` no longer takes font/color. Instead, it takes an
"svg export context" that can be used to add `<defs>` to the exported
SVG element. Converting e.g. fonts to inlined data urls is now the
responsibility of the shapes that use them rather than the Editor.
- `usePattern` is not longer a core part of the editor. Instead,
`ShapeUtil` has a `getCanvasSvgDefs` method for returning react
components representing anything a shape needs included in `<defs>` for
the canvas.
- The shape-specific cleanup logic in `setStyle` has been deleted. It
turned out that none of that logic has been running anyway, and instead
the relevant logic lives in shape `onBeforeChange` callbacks already.

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

### Test Plan


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

### Release Notes
 --

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-24 13:46:04 +00:00
Lu Wilson
39a4615fe5
Fix SVG cursors not being used (#1639)
This PR fixes a bug where our custom SVG cursors were not being used,
causing cursor chat to look worse on Windows.

It was the result of a dodgy merge!

### Change Type

- [x] `patch` — Bug fix

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

### Test Plan

To test this, you might need to change your OS cursor to something
different to usual. I set mine to off-black so that I can test this sort
of thing.

1. Make sure that your cursor is our custom black cursor when using the
app.

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

### Release Notes

- None: Fixing an unreleased bug.
2023-06-24 08:24:10 +00:00
Steve Ruiz
83184aaf43
[fix] react component runaways, error boundaries (#1625)
This PR fixes a few components that were updating too often. It changes
the format of our error boundaries in order to avoid re-rendering them
as changed props.

### Change Type

- [x] `major` — Breaking change
2023-06-20 14:06:28 +00:00
Steve Ruiz
5cb08711c1
Incorporate signia as @tldraw/state (#1620)
It tried to get out but we're dragging it back in. 

This PR brings [signia](https://github.com/tldraw/signia) back into
tldraw as @tldraw/state.

### Change Type

- [x] major

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2023-06-20 13:31:26 +00:00
Steve Ruiz
a4b5bcb8f7
3/2 Cursor chat (#1623)
This PR tweaks the cursor chat support.

### Change Type

- [x] `patch` — Bug fix
2023-06-20 12:08:49 +00:00
Steve Ruiz
57bb341593
ShapeUtil refactor, Editor cleanup (#1611)
This PR improves the ergonomics of `ShapeUtil` classes.

### Cached methods

First, I've remove the cached methods (such as `bounds`) from the
`ShapeUtil` class and lifted this to the `Editor` class.

Previously, calling `ShapeUtil.getBounds` would return the un-cached
bounds of a shape, while calling `ShapeUtil.bounds` would return the
cached bounds of a shape. We also had `Editor.getBounds`, which would
call `ShapeUtil.bounds`. It was confusing. The cached methods like
`outline` were also marked with "please don't override", which suggested
the architecture was just wrong.

The only weirdness from this is that utils sometimes reach out to the
editor for cached versions of data rather than calling their own cached
methods. It's still an easier story to tell than what we had before.

### More defaults

We now have three and only three `abstract` methods for a `ShapeUtil`:
- `getDefaultProps` (renamed from `defaultProps`)
- `getBounds`,
- `component`
-  `indicator`

Previously, we also had `getCenter` as an abstract method, though this
was usually just the middle of the bounds anyway.

### Editing bounds

This PR removes the concept of editingBounds. The viewport will no
longer animate to editing shapes.

### Active area manager

This PR also removes the active area manager, which was not being used
in the way we expected it to be.

### Dpr manager

This PR removes the dpr manager and uses a hook instead to update it
from React. This is one less runtime browser dependency in the app, one
less thing to document.

### Moving things around

This PR also continues to try to organize related methods and properties
in the editor.

### Change Type

- [x] `major` — Breaking change

### Release Notes

- [editor] renames `defaultProps` to `getDefaultProps`
- [editor] removes `outline`, `outlineSegments`, `handles`, `bounds`
- [editor] renames `renderBackground` to `backgroundComponent`
2023-06-19 14:01:18 +00:00
alex
38d74a9ff0
Revert "Update dependencies (#1613)" (#1617)
This reverts commit b6716a3750.

Not sure why, but this introduced a `/// <references />` comment in the
tldraw/tldraw api-report.md file that doesn't show up when you build
from brivate. Reverting for now.

### Change Type

- [x] `dependencies` — Changes to package dependencies[^1]


### Test Plan

-

### Release Notes

-
2023-06-19 09:49:44 +00:00
Steve Ruiz
4b8491d388
[fix] tldraw file drop (#1616)
This PR removes a line of code that was filtering out .tldraw files when
dropping files onto the canvas.

### Change Type

- [x] `patch` — Bug fix
2023-06-18 22:38:50 +00:00
Steve Ruiz
b6716a3750
Update dependencies (#1613)
This PR updates a few key dependencies.

### Change Type

- [x] `dependencies` — Changes to package dependencies
2023-06-18 18:26:33 +00:00
Steve Ruiz
99a46af4c8
Remove on drop override (#1612)
This PR removes the `onDropOverride` prop from the canvas, which was a
bit of a hack.

### Change Type

- [x] `major` — Breaking change

### Release Notes

- [editor] Remove `onDropOverride`
2023-06-18 12:51:19 +00:00
Steve Ruiz
336cbc7158
Make resizeBox a regular function (#1610)
This PR changes `resizeBox` to be a regular function rather than an
arrow function.

### Change Type

- [x] `minor` — New feature

### Release Notes

- [editor] Change `resizeBox` to be a regular function.
2023-06-18 09:47:00 +00:00
Steve Ruiz
3129bae6e2
Rename ShapeUtil.render -> ShapeUtil.component (#1609)
This PR renames `ShapeUtil.render` to `ShapeUtil.component`.

### Change Type

- [x] `major` — Breaking change

### Release Notes

- [editor] rename `ShapeUtil.render` to `ShapeUtil.component`
2023-06-18 09:46:53 +00:00
Steve Ruiz
4dfc59e5cb
tldraw.css (#1607)
This PR introduces `@tldraw/tldraw/tldraw.css`, an exported CSS file
that replaces the `editor.css` and `ui.css` that were previously copied
from the editor and ui packages. Instead, these files are combined into
the `tldraw.css` file, simplifying the import story when using
`@tldraw/tldraw`.

### Change Type

- [x] `major` — Breaking change

### Release Notes

- [tldraw] Removes `editor.css` and `ui.css` exports, replaces with
`tldraw.css`
2023-06-17 22:33:21 +00:00
Steve Ruiz
3f52c24fec
[fix] yjs presence (#1603)
This PR:
- updates the yjs example to include user presence
- tweaks the `createPresenceStateDerivation` API
- fix a "double update" bug caused by re-syncing local changes
- fix connection bugs

### Change Type

- [x] `minor` — New feature
2023-06-16 15:59:13 +00:00
Steve Ruiz
bdd8913af3
[fix] camera culling (#1602)
This PR restores camera culling behavior and includes a 500ms forced
render while the camera is moving to prevent weird long pan behavior.

It:
- removes `CameraManager`
- adds `cameraState` to editor

### Change Type

- [x] `major` — Breaking change

### Release Notes

- [editor] Adds `Editor.cameraState`
- Adds smart culling to make panning and zooming more smooth
2023-06-16 13:02:38 +00:00
Steve Ruiz
271d0088e9
Tidy up (#1600)
This PR is intended to do some housecleaning ahead of our developer
release.

It:
- co-locates code in the `Editor` class, i.e. moving shape-related
methods next to other shape-related methods
- renames `cullingBounds` and other culling-related names to
`renderingBounds`
- renames `Editor.getParentPageId` to `Editor.getAncestorPageId`
- renames `Editor.shapeIds` to `Editor.currentPageShapeIds`

### Change Type

- [x] `major` — api changes
2023-06-16 11:27:47 +00:00
alex
b88a2370b3
Styles API (#1580)
Removes `propsForNextShape` and replaces it with the new styles API. 

Changes in here:
- New custom style example
- `setProp` is now `setStyle` and takes a `StyleProp` instead of a
string
- `Editor.props` and `Editor.opacity` are now `Editor.sharedStyles` and
`Editor.sharedOpacity`
- They return an object that flags mixed vs shared types instead of
using null to signal mixed types
- `Editor.styles` returns a `SharedStyleMap` - keyed on `StyleProp`
instead of `string`
- `StateNode.shapeType` is now the shape util rather than just a string.
This lets us pull the styles from the shape type directly.
- `color` is no longer a core part of the editor set on the shape
parent. Individual child shapes have to use color directly.
- `propsForNextShape` is now `stylesForNextShape`
- `InstanceRecordType` is created at runtime in the same way
`ShapeRecordType` is. This is so it can pull style validators out of
shape defs for `stylesForNextShape`
- Shape type are now defined by their props rather than having separate
validators & type defs

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Big time regression testing around styles!
2. Check UI works as intended for all shape/style/tool combos

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

### Release Notes

-

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-16 10:33:47 +00:00
Lu Wilson
f864d0cfbd
(1/2) Timeout collaborator cursors (#1525)
This PR adds a timeout to collaborator cursors.

It's part 1 of two PRs. The second one is smaller:
https://github.com/tldraw/brivate/pull/2053

# What is this?

After three seconds of inactivity, collaborator cursors disappear.

![2023-06-08 at 10 42 43 - Moccasin
Flamingo](https://github.com/tldraw/tldraw/assets/15892272/93e463aa-0329-4ecb-ada1-4c38b36a655b)

If you're following someone, you can always see their cursor.

![2023-06-08 at 10 45 42 - Olive
Crayfish](https://github.com/tldraw/tldraw/assets/15892272/11e8d85a-18a8-4976-85c5-d14f3841c296)

# Is there anything else?
The PR also adds support for the brivate PR:
https://github.com/tldraw/brivate/pull/2053

# Admin

### Change Type

- [x] `minor` — New Feature

### Test Plan

You probably need to test this locally, as we don't do multiplayer
previews on this repo yet.
1. Open the same shared project in two browser sessions.
2. Move around the cursor in one session, while able to see it from the
other.
3. Stop moving the cursor.
4. Make sure that the cursor disappears on the other session after 3
seconds.
5. Move the cursor again, and make sure it reappears it.
6. Make sure that viewport-following the user makes the cursor show
permanently.

### Release Notes

- Brought back cursor timeouts. Collaborator cursors now disappear after
3 seconds of inactivity.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-15 15:48:47 +00:00
Lu Wilson
3bbb34eba8
(1/2) Cursor Chat - Presence (#1487)
This PR adds support for seeing **another user**'s chat messages.

It's part 1 of two PRs relating to Cursor Chat.
And it's needed for the much bigger part 2:
https://github.com/tldraw/brivate/pull/1981

# Presence

You can see another person's chat messages!

![2023-06-02 at 17 42 33 - Blush
Capybara](https://github.com/tldraw/tldraw/assets/15892272/8f3efb5f-9c05-459c-aa7e-24842be75e58)

If they have a name, it gets popped on top.

![2023-06-02 at 17 45 34 - Sapphire
Meerkat](https://github.com/tldraw/tldraw/assets/15892272/749bd924-c1f5-419b-a028-1fafe1b61292)

That's it!
With this PR, there's no way of actually *typing* your chat messages.
That comes with the [next
one](https://github.com/tldraw/brivate/pull/1981)!

# Admin

### To-do

- [x] Store chat message
- [x] Allow overflowing chat
- [x] Presence for chat message
- [x] Display chat message to others

### Change Type

- [x] `minor` — New Feature

### Test Plan

To test this, I recommend checking out both `lu/cursor-chat` branches,
and opening two browser sessions in the same shared project.

1. In one session, type some cursor chat by pressing the Enter key while
on the canvas (and typing).
2. On the other session, check that you can see the chat message appear.
3. Repeat this while being both named, and unnamed.

I recommend just focusing on the visible presense in this PR.
The [other PR](https://github.com/tldraw/brivate/pull/1981) is where we
can focus about how we _input_ the cursor chat.

### Release Notes

- [dev] Added support for cursor chat presence.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-15 15:10:08 +00:00
Steve Ruiz
21377c0f22
Explicit shape type checks (#1594)
This PR adds shape type checks that use the shape util, e.g.
`this.editor.isShapeOfType(shape, FrameShapeUtil)`. In part this is
designed to help us track down where dependencies exist between the
editor and our default shapes.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package
2023-06-15 15:09:41 +00:00
Steve Ruiz
b22bb13bb0
[refactor] snapping (#1589)
This PR is a refactor / tidy up of some snapping logic.

- Fix a bug where the recursive call to `findAdjacentGaps` could lead to
a maximum call stack error
- Fixed an issue that caused handle snapping to expensively recompute
- Fixed a dependency from the snap manager to the line shape

### Change Type

- [x] `patch`

### Test Plan

Our snap tests are pretty thorough, they should work here.

### Release Notes

- [editor] fix bug in snapping
2023-06-15 14:36:46 +00:00
Steve Ruiz
4650869988
remove ShapeUtil.transform (#1590)
Removes the cached (but not really needed) local transform for shapes.
We almost never get the local transform except when getting the page
transform.

### Change Type

- [x] `major` — Breaking change


### Release Notes

- [editor] Remove `ShapeUtil.transform`
2023-06-15 12:42:18 +00:00