Commit graph

327 commits

Author SHA1 Message Date
Steve Ruiz
d750da8f40
ShapeUtil.getGeometry, selection rewrite (#1751)
This PR is a significant rewrite of our selection / hit testing logic.

It
- replaces our current geometric helpers (`getBounds`, `getOutline`,
`hitTestPoint`, and `hitTestLineSegment`) with a new geometry API
- moves our hit testing entirely to JS using geometry
- improves selection logic, especially around editing shapes, groups and
frames
- fixes many minor selection bugs (e.g. shapes behind frames)
- removes hit-testing DOM elements from ShapeFill etc.
- adds many new tests around selection
- adds new tests around selection
- makes several superficial changes to surface editor APIs

This PR is hard to evaluate. The `selection-omnibus` test suite is
intended to describe all of the selection behavior, however all existing
tests are also either here preserved and passing or (in a few cases
around editing shapes) are modified to reflect the new behavior.

## Geometry

All `ShapeUtils` implement `getGeometry`, which returns a single
geometry primitive (`Geometry2d`). For example:

```ts
class BoxyShapeUtil {
  getGeometry(shape: BoxyShape) {
    return new Rectangle2d({
        width: shape.props.width, 
        height: shape.props.height, 
        isFilled: true,
        margin: shape.props.strokeWidth
      })
    }
}
```

This geometric primitive is used for all bounds calculation, hit
testing, intersection with arrows, etc.

There are several geometric primitives that extend `Geometry2d`:
- `Arc2d`
- `Circle2d`
- `CubicBezier2d`
- `CubicSpline2d`
- `Edge2d`
- `Ellipse2d`
- `Group2d`
- `Polygon2d`
- `Rectangle2d`
- `Stadium2d`

For shapes that have more complicated geometric representations, such as
an arrow with a label, the `Group2d` can accept other primitives as its
children.

## Hit testing

Previously, we did all hit testing via events set on shapes and other
elements. In this PR, I've replaced those hit tests with our own
calculation for hit tests in JavaScript. This removed the need for many
DOM elements, such as hit test area borders and fills which only existed
to trigger pointer events.

## Selection

We now support selecting "hollow" shapes by clicking inside of them.
This involves a lot of new logic but it should work intuitively. See
`Editor.getShapeAtPoint` for the (thoroughly commented) implementation.

![Kapture 2023-07-23 at 23 27
27](https://github.com/tldraw/tldraw/assets/23072548/a743275c-acdb-42d9-a3fe-b3e20dce86b6)

every sunset is actually the sun hiding in fear and respect of tldraw's
quality of interactions

This PR also fixes several bugs with scribble selection, in particular
around the shift key modifier.

![Kapture 2023-07-24 at 23 34
07](https://github.com/tldraw/tldraw/assets/23072548/871d67d0-8d06-42ae-a2b2-021effba37c5)

...as well as issues with labels and editing.

There are **over 100 new tests** for selection covering groups, frames,
brushing, scribbling, hovering, and editing. I'll add a few more before
I feel comfortable merging this PR.

## Arrow binding

Using the same "hollow shape" logic as selection, arrow binding is
significantly improved.

![Kapture 2023-07-22 at 07 46
25](https://github.com/tldraw/tldraw/assets/23072548/5aa724b3-b57d-4fb7-92d0-80e34246753c)

a thousand wise men could not improve on this

## Moving focus between editing shapes

Previously, this was handled in the `editing_shapes` state. This is
moved to `useEditableText`, and should generally be considered an
advanced implementation detail on a shape-by-shape basis. This addresses
a bug that I'd never noticed before, but which can be reproduced by
selecting an shape—but not focusing its input—while editing a different
shape. Previously, the new shape became the editing shape but its input
did not focus.

![Kapture 2023-07-23 at 23 19
09](https://github.com/tldraw/tldraw/assets/23072548/a5e157fb-24a8-42bd-a692-04ce769b1a9c)

In this PR, you can select a shape by clicking on its edge or body, or
select its input to transfer editing / focus.

![Kapture 2023-07-23 at 23 22
21](https://github.com/tldraw/tldraw/assets/23072548/7384e7ea-9777-4e1a-8f63-15de2166a53a)

tldraw, glorious tldraw

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Erase shapes
2. Select shapes
3. Calculate their bounding boxes

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

### Release Notes

- [editor] Remove `ShapeUtil.getBounds`, `ShapeUtil.getOutline`,
`ShapeUtil.hitTestPoint`, `ShapeUtil.hitTestLineSegment`
- [editor] Add `ShapeUtil.getGeometry`
- [editor] Add `Editor.getShapeGeometry`
2023-07-25 16:10:15 +00:00
Steve Ruiz
0323ee1f6b
[fix] dark mode (#1754)
This PR fixes a bug where dark mode would not immediately cause shapes
to update their colors. Previously, we got the current theme during
render but not in a way that hooked into the change. In this update, we
hook into the change. We also pass the change down to shape fills as
props rather than getting the theme from deeper down.

### Change Type

- [x] `patch`

### Test Plan

1. Use dark mode.
2. Switch colors

### Release Notes

- [fix] dark mode colors not updating
2023-07-20 11:38:55 +00:00
Steve Ruiz
b22ea7cd4e
More cleanup, focus bug fixes (#1749)
This PR is another grab bag:
- renames `readOnly` to `readonly` throughout editor
- fixes a regression related to focus and keyboard shortcuts
- adds a small outline for focused editors

### Change Type

- [x] `major`

### Test Plan

- [x] End to end tests
2023-07-19 10:52:21 +00:00
Steve Ruiz
789b1d1ac6
Fix e2e test (#1748)
This PR fixes a failing end to end test that snuck in.

### Change Type

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

### Test Plan

- [x] End to end tests
2023-07-18 22:13:11 +00:00
Steve Ruiz
3e31ef2a7d
Remove helpers / extraneous API methods. (#1745)
This PR removes several extraneous computed values from the editor. It
adds some silly instance state onto the instance state record and
unifies a few methods which were inconsistent. This is fit and finish
work 🧽

## Computed Values

In general, where once we had a getter and setter for `isBlahMode`,
which really masked either an `_isBlahMode` atom on the editor or
`instanceState.isBlahMode`, these are merged into `instanceState`; they
can be accessed / updated via `editor.instanceState` /
`editor.updateInstanceState`.

## tldraw select tool specific things

This PR also removes some tldraw specific state checks and creates new
component overrides to allow us to include them in tldraw/tldraw.

### Change Type

- [x] `major` — Breaking change

### Test Plan

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

### Release Notes

- [tldraw] rename `useReadonly` to `useReadOnly`
- [editor] remove `Editor.isDarkMode`
- [editor] remove `Editor.isChangingStyle`
- [editor] remove `Editor.isCoarsePointer`
- [editor] remove `Editor.isDarkMode`
- [editor] remove `Editor.isFocused`
- [editor] remove `Editor.isGridMode`
- [editor] remove `Editor.isPenMode`
- [editor] remove `Editor.isReadOnly`
- [editor] remove `Editor.isSnapMode`
- [editor] remove `Editor.isToolLocked`
- [editor] remove `Editor.locale`
- [editor] rename `Editor.pageState` to `Editor.currentPageState`
- [editor] add `Editor.pageStates`
- [editor] add `Editor.setErasingIds`
- [editor] add `Editor.setEditingId`
- [editor] add several new component overrides
2023-07-18 21:50:23 +00:00
Steve Ruiz
a7d3a77cb0
(chore) bump (#1744)
Bump deps to fix build

### Change Type

- [x] `dependencies`
2023-07-18 10:19:28 +00:00
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
Steve Ruiz
43a0dd83f8
support custom shapes in yjs example (#1737)
This PR adds support for custom shapes (`shapes`) to the y.js example. A
user should pass the same data to the `useYjsStore` hook as they pass to
the `<Tldraw>` component.

### Change Type

- [x] `internal`
2023-07-14 20:33:57 +00:00
Mitja Bezenšek
1e07ae51dc
Bump vs code version. (#1735)
Bumps the VS Code version.

### 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
2023-07-12 08:37:04 +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
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
Mitja Bezenšek
85db9ba469
Bump vs code version. (#1719)
Bump vs code version for a new version release.

### Change Type

- [x] `patch` — Bug fix
2023-07-07 10:47:15 +00:00
Steve Ruiz
80595232d2
[internal] Add basic list to examples (#1688)
This PR adds a basic list of all examples to the examples site

### Change Type

- [x] `internal`
2023-07-05 14:07:28 +00:00
alex
eba7b8c6a6
cleanup (#1711)
I accidentally checked in a bunch of stuff i shouldn't. oops.

### Change Type

- [ ] `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]
- [x] `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
2023-07-05 08:55:56 +00:00
alex
c893a02878
remove lock option from highlighter (#1703)
Highlighter is autolocked, so we shouldn't show the lock icon 

### 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. Add a step-by-step description of how to test your PR here.
2.

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

### Release Notes

- We no longer show the tool lock option for highlighter - it didn't do
anything anyway
2023-07-04 10:41:14 +00:00
Steve Ruiz
b96d207f5f
[docs] Update multiple test (#1685)
This PR adds a bit of content to the multiple editor test so that we can
also test scrolling.

### Change Type

- [x] `documentation`
2023-06-30 13:30:06 +00:00
Steve Ruiz
91dfdecc93
[fix] Lock shortcut (#1677)
This PR fixes the shortcut for lock shapes, which may be blocked by
browser defaults. We now use Shift+L instead of Cmd+Shift+L. Closes
https://github.com/tldraw/tldraw/issues/1676.

### Change Type

- [x] `patch` 

### Test Plan

1. Try the lock tool shortcuts.

- [x] End to end tests

### Release Notes

- [@tldraw/editor] Fix lock tool shortcut
2023-06-29 21:43:28 +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
Steve Ruiz
1dede56131
[chore] bump vscode extension to 2.0.9 (#1662)
Bump vscode to 2.0.9

### Change Type

- [x] `internal`
2023-06-28 10:35:55 +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
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
Steve Ruiz
51406d2d81
remove docs (again) (#1643)
This PR removes the docs site (again) which suggests that git may have
been confused about new content.

### Change Type

- [x] `documentation` — Changes to the documentation only
2023-06-23 14:47:15 +00:00
Steve Ruiz
096df3209b
[1/2] Move docs to brivate (#1640)
This PR moves the docs site to the private repo while keeping the docs
content on the public repo.

### Change Type

- [x] `documentation`
2023-06-23 14:23:14 +00:00
alex
245f74010c
speed up playwright and add visual regression tests (#1638)
This diff:
- tweaks how playwright runs in CI to have it go a bit faster
- uploads nice browsable reports to S3 for looking at playwright
failures and traces
- adds visual regression testing to playwright

### Change Type

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

### Test Plan

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

### Release Notes

--

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2023-06-23 11:53:04 +00:00
Lu Wilson
0c046a561b
[docs] Allow sidebar to be scrolled on short screens (#1632)
This PR changes how the sidebar works on the docs site.

## What's the problem?
Previously, you couldn't reach the bottom of the sidebar on some screens
- unless you scroll to the very bottom of the main content. Some of our
pages are [very
long](https://canary.tldraw.dev/gen/editor/Editor-class), so this isn't
practical.

![2023-06-22 at 11 25 26 - Violet
Gazelle](https://github.com/tldraw/tldraw/assets/15892272/873ffa98-5eea-48b4-a005-c3aa89074065)

## How are we fixing it?
This PR makes the sidebar scroll separately from the main content.
It's less fancy and less pretty :/ 
But it's usable.

Maybe we could make it sleeker somehow, but this works at least.

![2023-06-22 at 11 27 29 - Rose
Hedgehog](https://github.com/tldraw/tldraw/assets/15892272/99bd47b9-d07c-46ff-b1bb-de0ac289d294)

## Admin

### 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. On the docs site, make your browser window short so that you can't
see the whole sidebar.
2. Make sure that you can scroll down to the bottom on the sidebar,
separately from the rest of the page.

### Release Notes

- Documentation: Fixed the sidebar being unscrollable on some short
screens.
2023-06-23 09:59:57 +00:00
Lu Wilson
004787d5bd
[docs] Add feedback when you search (#1633)
This PR adds some immediate feedback when you search on the docs site —
so that you know that your query has been submitted. This is most
noticeable on slower internet connections. But even on fast connections,
search feels a bit untrustworthy because you don't get that immediate
feedback.

We could make a little loading spinner or something. But for now, I just
disabled the search input when you submit it, because it didn't require
any design work!

## Before

No way of telling that the search results are loading. No immediate
feedback:

![2023-06-22 at 12 17 34 - Fuchsia
Fowl](https://github.com/tldraw/tldraw/assets/15892272/da3b3d7f-fc6a-49f9-9352-58949ca917d5)

## After
![2023-06-22 at 13 09 26 - Turquoise
Cat](https://github.com/tldraw/tldraw/assets/15892272/9e44061a-c4b9-43d2-8b8f-e1c4dce60c48)


## Admin

### 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. Throttle your network tab!
2. Search for something on the docs site (eg: Editor)
3. The search input should get disabled when you press the Enter key.

### Release Notes

- Documentation: Added some immediate feedback when you search.
2023-06-23 09:57:57 +00:00
Lu Wilson
c5fe399842
[docs] Separate some pages out of the Docs section (#1626)
This PR changes the structure of the docs site's sidebar.


![image](https://github.com/tldraw/tldraw/assets/15892272/ffe1e152-c921-43f0-9ba2-d084bda5e1e3)

I think this signposts more clearly what the different pages are for.
And it also paves the way for some work I want to do on
expanding+refining the Editor docs.

This PR also simplifies URL for all sidebar links.
It's a bit scrappy, but I think it feels simple enough to work with, and
easy-enough to change in the future.
> But hey! I've been doing this a couple times recently. Maybe we should
refactor? Or maybe we should keep going with what we've got and focus on
getting these docs *done*.

### 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. Check that all the sidebar links go to where you expect.
2. Check that old URLs redirect to the right pages, eg: `/docs/usage`
should go to the usage page.


### Release Notes

- Documentation: Restructured the sidebar for clarity.
2023-06-23 09:53:22 +00:00
Lu Wilson
d2c51ae3ba
[docs] Fix wrong cursor when hovering buttons (#1630)
This PR fixes your cursor when you hover some buttons in the docs site.

This makes them consistent with all other buttons.


![image](https://github.com/tldraw/tldraw/assets/15892272/d918e12e-2831-49fe-acf7-34c67a9cd976)

### 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. On the docs site, hover your cursor over the light/dark button.
2. Make sure that your cursor is a pointing finger.


### Release Notes

- Documentation: Fixed the wrong cursor showing when hovering some
buttons.
2023-06-23 09:51:42 +00:00
Lu Wilson
db68473db9
[docs] Tighten up wording & structure of Usage page (#1624)
This PR tightens up the wording of the Usage docs page, and it
restructures it slightly.

See my comments in the code for more info.

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

### Release Notes

- Documentation: Impoved clarity of wording and structure of the Usage
page.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-20 15:42:51 +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
Lu Wilson
655d3b39ee
[docs] Tighten up Editor page introduction (#1622)
This PR improves the wording in the Editor docs page.
It only touches the intro section.

See the comments for more details!



I'm also looking at the page in entirety - will cover that in another
PR.

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

### Release Notes

- Documentation: Simplified the Editor page.
2023-06-20 10:53:26 +00:00
Lu Wilson
8d28d16943
[docs] Tighten up Introduction page (#1621)
This PR contains some feedback for the Introduction page of the docs.
I've written comments explaining my feedback, and the changes are some
potential changes (but they're just examples).

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

### Release Notes

- Documentation: Simplified the Introduction page.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-20 09:12:20 +00:00
Lu Wilson
8329b1da89
[docs] Simplify paths for uncategorised pages (#1619)
This PR changes the paths that we use for uncategorised pages on the
docs site.
It also redirects the old paths to the new ones.

```
// BEFORE
tldraw.dev/docs/ucg/shapes

// AFTER
tldraw.dev/docs/shapes
```

I think that this is more intuitive, and will make the links that we
share a bit clearer.
eg: As a by-product, it fixes some broken links from the introduction
page.

As a trade-off, this PR makes our pathing system a bit more complicated.
But I don't think it's tooooo bad? WDYT?

### 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 `/docs/shapes` on the docs site.
2. Make sure that it goes to the Shapes page.
3. Do the same for `/docs/ucg/shapes`


### Release Notes

- Documentation: Cleaned up some paths.
2023-06-19 18:48:55 +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
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
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
b9c6bf2fe8
Auto content refresh for docs site (#1606)
This PR improves the author experience when working on the docs site. 

When running `docs-dev`, the site's content will now update whenever a
content file is changed.

### Context

In the docs project, we generate content from two sources: from API
documentation generated by api-extractor and from markdown files in the
docs/content folder. Generating API docs is a relatively slow process
because it involves building and parsing TypeScript declaration files
for each package in the monorepo; however, generating docs from the
markdown files is basically instantaneous. The same script used to
address both tasks, which meant it was too slow to run on each save.
Instead, the script needed to be run manually or the dev server would
need to be restarted.

We now split the generation into two separate scripts. First, the script
runs to generate the API content; and then a second script runs to
generate the markdown content. The second script also imports and
combines the two sources of content. When we build the docs, both
scripts are run. When a markdown file changes, the new watcher only runs
the second script. This allows the site's content to be updated quickly
without having to generate the API docs each time.

Note that this does not incorporate live changes to package APIs, though
I can't think of a time where we be developing the docs and the APIs at
the same time.

### Change Type

- [x] `documentation` — Changes to the documentation only
2023-06-17 09:46:46 +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
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
6d4d9424df
Remove @tldraw/utils from the docs site (#1596)
This PR removes the `@tldraw/utils` package from the docs site's API
reference. It does this by removing it from the docs site's
`devDependencies`.

The reason for this is this:

<img width="899" alt="Screenshot 2023-06-15 at 15 52 24"
src="https://github.com/tldraw/tldraw/assets/15892272/3b00e9da-663d-45e5-8b77-ab0a4fc466ad">


### 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. Check the API Reference page of the docs.
2. Make that `@tldraw/utils` isn't there.

### Release Notes

- [docs] Removed an internal utilities package.
2023-06-15 15:35:23 +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
Lu Wilson
0bbdcdd91b
[docs] Add barebones note about translations (#1593)
This PR adds a bare-minimum note to the Translations page on the docs
site.

### 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. Take a look at the Translations docs page.

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

### Release Notes

- [docs] Added brief info on how to join as a translations contributor.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-15 14:53:30 +00:00
Lu Wilson
519d0dd348
Change app to editor in docs (#1592)
This PR changes App to Editor in the docs.
It goes alongside some changes that I accidentally commited to main...
so feel free to review those here as well!
([this
one](be1ec9699c))
and ([this
one](5a9f3a1726))

### 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. Check that there's an Editor page in the docs sidebar.

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

### Release Notes

- [docs] Updated 'App' to 'Editor'.
2023-06-15 12:37:42 +00:00
Lu[ke] Wilson
5a9f3a1726 change App to Editor in docs 2023-06-15 11:36:54 +01:00
Lu[ke] Wilson
be1ec9699c rename api.mdx to editor.mdx 2023-06-15 11:35:39 +01:00