Commit graph

2096 commits

Author SHA1 Message Date
alex
3bde22a482
Allow setting user as a prop (#1832)
Add `user` as a prop to `TldrawEditor`

### Change Type

- [x] `patch` — Bug fix
2023-08-30 13:26:14 +00:00
Justin Duke
e3b07631ce
Fix broken link in docs (#1830)
Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `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

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-08-28 08:21:13 +00:00
Judicael
3aeaf857fb
fix typo (#1831)
Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

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

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

- Just fixed a typo in the docs
2023-08-28 08:15:02 +00:00
Steve Ruiz
81b8e65741
export asset stuff (#1829)
This PR adds several new exports related to assets.

### Change Type

- [x] `minor` — New feature
2023-08-26 08:30:29 +00:00
Steve Ruiz
bd6ed1e00c
Add className as prop to Canvas (#1827)
This PR adds a `className` to the <Canvas> element.

### Change Type

- [x] `minor` — New feature
2023-08-25 17:40:18 +00:00
Steve Ruiz
57fcb3d07b
[feature] Asset props (#1824)
This PR adds additional props to the <Tldraw> component for setting the
maximum asset size, maximum image dimensions, accepted image types, and
accepted video types. It adds an example for using these properties and
for uploading image assets.

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Try (and fail) to upload image types other than the default types.
2. Try (and fail) to upload images / videos larger than 10mb.
3. Use the example to customize the properties.

### Release Notes

- [@tldraw/tldraw] add asset props
2023-08-25 17:30:09 +00:00
Steve Ruiz
e76de88668
[fix] text editing outline when scaled (#1826)
This PR counter-scales the outline of editing text shapes.

<img width="410" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/7a6652b9-10d3-42a5-a4b3-58508b862f8a">
<img width="654" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/7d536dd8-e40f-495f-b059-cbcd450134c2">


### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create a text shape
2. Scale it up
3. Edit it
4. Check that the outline isn't ridiculously big
2023-08-25 17:27:32 +00:00
Steve Ruiz
ba7a95d5f0
[fix] Line shape rendering (#1825)
This PR fixes several bugs in the line shape, both rendering in the app
and in SVG exports.

<img width="634" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/473db62f-2f18-40ef-992a-f5dac895d4ae">
<img width="525" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/0673767c-b0e5-415c-962c-92bb1249261e">


### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Make line shapes.
2. Export them as SVGs.
2023-08-25 17:24:30 +00:00
Steve Ruiz
b203967341
[fix] remove CSS radius calculations (#1823)
This PR fixes some creative use of CSS in setting the radius property of
various SVGs. While this use is supported in all browsers, it was
confusing CSS processors. Moving these out of CSS and into JavaScript
seems to be a pretty minor trade. Closes
https://github.com/tldraw/tldraw/issues/1775.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Ensure that borders and handles adjust their radii correctly when
zoomed in or out.
2023-08-25 16:22:52 +00:00
Steve Ruiz
162f68b71a
[fix] snapping bug (#1819)
This PR fixes a crash that was happening with certain snapping
interactions. Closes https://github.com/tldraw/tldraw/issues/1815

### Change Type

- [x] `patch` — Bug fix

### Test Plan

Create a series of equally spaced shapes like this:
 
<img width="870" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/416a42af-d8b0-4013-9d3c-341e374e96a4">

Drag the right group into position with the left group while snapping.

### Release Notes

- [fix] crash that could occur when snapping
2023-08-25 15:19:40 +00:00
Steve Ruiz
fd71bd1b5f
[fix] Replace findLast for browser compat (#1822)
Previously, we'd used `Array.findLast` in `getSelectedShapeAtPoint`.
This PR removes that newish JS call and replaces it with a `replace` and
`find` instead. Closes bug mentioned in
https://github.com/tldraw/tldraw/issues/1798.

### Change Type

- [x] `patch` — Bug fix
2023-08-25 05:57:20 +00:00
Steve Ruiz
57b2cf6955
[fix] editing video shapes (#1821)
This PR fixes editing video shapes. The controls are now interactive
again.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create a video shape.
2. Double click to edit the shape.
3. Use the controls to pause, change time, etc.

### Release Notes

- Fix bug with editing video shapes.
2023-08-25 05:49:06 +00:00
Steve Ruiz
af573bac51
[feature] unlock all action (#1820)
This PR adds an "Unlock all" action to the edit menu. 

- Selecting `unlock all` sets `isLocked` to false for all shapes on the
current page
- The option is disabled if the page is empty; but we don't check
whether there are locked shapes on the page (juice < squeeze)

Closes https://github.com/tldraw/tldraw/issues/1809

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Create locked shapes
2. Select menu > edit > unlock all

### Release Notes

- Adds the unlock all feature.
2023-08-24 12:25:04 +00:00
Steve Ruiz
df9f4254c4
[fix] bug with eventemitter3 default export (#1818)
This PR switches from the default export to a named export in event
emitter 3. Should close https://github.com/tldraw/tldraw/issues/1817.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Hard to test ahead of time, but try [this
reproduction](https://stackblitz.com/edit/github-6vmn42?file=src%2FEditor.jsx,src%2Fpages%2Findex.astro,package.json&on=stackblitz)
with the new version.

### Release Notes

- [@tldraw/editor] updates eventemitter3 import to fix issue with Astro
builds.
2023-08-24 09:19:46 +00:00
Steve Ruiz
2c7c97af9c
[fix] style changes (#1814)
This PR updates the way that styles are changed. It splits `setStyle`
and `setOpacity` into `setStyleForNext Shape` and
`setOpacityForNextShape` and `setStyleForSelectedShapes` and
`setOpacityForSelectedShapes`. It fixes the issue with setting one style
re-setting other styles.

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Set styles when shapes are not selected.
2. Set styles when shapes are selected.
3. Set styles when shapes are selected and the selected tool is not
select.

- [x] Unit Tests
2023-08-23 10:14:49 +00:00
David Sheldrick
55bd2b2485
Add next cache to clean command (#1811)
In our private repo we have a few next apps and they were not previously
being cleaned by the `yarn clean` command

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]


### Release Notes

- Internal tooling change
2023-08-18 12:52:51 +00:00
Steve Ruiz
1dc76fe32b
[fix] Sticky text content / hovered shapes (#1808)
This PR improves the UX around sticky notes. It fixes were some bugs
related to the editing / hovered shape after cloning a sticky note
shape.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Use the sticky note tool
2. Alt-drag to clone sticky notes
3. Use the Enter key to edit the selected shape.
4. Double click an editable shape and then click once to edit a shape of
the same type.

- [x] Unit Tests
2023-08-15 16:25:50 +00:00
Steve Ruiz
22329c51fc
[improvement] More selection logic (#1806)
This PR includes further UX improvements to selection.

- clicking inside of a hollow shape will no longer select it on pointer
up
- clicking a shape's filled label will select it on pointer down
- clicking a shape's empty label will select it on pointer up
- clicking and dragging a selected arrow is now better limited to its
body, not its bounds
- arrows will no longer bind to labels

### Text labels

A big change here relates to text labels. Previously, we had listeners
set on the text label elements; I've removed these and we now check the
actual label bounds geometry for a hit. For geo shapes, this geometry is
now placed correctly based on the alignment / vertical alignment of the
label.

- Clicking on a label with text in it will select the shape on pointer
down.
- Clicking on an empty text label will select the shape on pointer up.

## Hollow shapes

Previously, shapes with `fill: none` were also being selected on pointer
up. I've removed that logic because it was producing wrong-feeling
selections too often. We now select these shapes only when clicking on
the label (as mentioned above) or when clicking on the edges of the
shape. This is in line with the original behavior (currently on
tldraw.com, prior to the earlier PR that updated selection logic).

## Arrows

Arrows still hit the inside of hollow shapes, using the "smallest
hovered" logic previously used for pointer-up selection on hollow
shapes. They also now correctly do so while ignoring text labels.

### Change Type

- [x] `minor` — New feature

### Test Plan

1. try selecting geo shapes, nested geo shapes, arrows and shapes with
labels or without labels

- [x] Unit Tests
2023-08-13 15:55:24 +00:00
Steve Ruiz
eaba3c8f2a
[fix] Collaborator scribble on tldraw (#1804)
This PR fixes the collaborator scribble in the laser pointer, etc.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. In a multiplayer room, have a peer use the laser tool or eraser tool.
2023-08-10 13:48:30 +00:00
Steve Ruiz
13ef8be58d
Cleanup page state commands (#1800)
This PR cleans up some APIs around the editor's current page state:

- `setEditingShapeId` -> `setEditingShape`
- `setHoveredShapeId` -> `setHoveredShape`
- `setCroppingShapeId` -> `setCroppingShape`
- `setFocusedGroupId` -> `setFocusedGroup`
- `setErasingShapeIds` -> `setErasingShapes`
- `setHintingShapeIds` -> `setHintingShapes`

It also adds some additional computed getters, e.g.
`Editor.croppingShape`.

It also adds some errors around `setCroppingShape`.

### Change Type

- [x] `major` — Breaking change

### Test Plan

- [x] Unit Tests
2023-08-06 12:05:35 +00:00
Steve Ruiz
eabb0d52f8
Rendering / cropping side-effects (#1799)
This PR:
- improves the logic for computing `renderingShapes`
- improves the handling of side effects related to cropping

We might use the same side effect logic to edit / re-edit shapes, though
this may be more complicated with inputs that steal focus.

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Crop an image
2. Change the crop
3. Stop cropping
4. Undo — you should be cropping again!
5. Undo until you're not cropping anymore
6. Redo until you're cropping again
7. etc.

- [x] Unit Tests
2023-08-06 11:23:16 +00:00
Steve Ruiz
16e696ed03
[fix] page to screen (#1797)
This PR fixes our page to screen conversion.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Drop an image onto the screen while the camera is panned and zoomed.

- [x] Unit Tests
2023-08-06 08:27:28 +00:00
Steve Ruiz
8991468446
history options / markId / createPage (#1796)
This PR:

- adds history options to several commands in order to allow them to
support squashing and ephemeral data (previously, these commands had
boolean values for squashing / ephemeral)

It also:
- changes `markId` to return the editor instance rather than the mark id
passed into the command
- removes `focus` and `blur` commands
- changes `createPage` parameters
- unifies `animateShape` / `animateShapes` options

### Change Type

- [x] `major` — Breaking change

### Test Plan

- [x] Unit Tests
2023-08-05 11:21:07 +00:00
Steve Ruiz
ae56d975e0
remove yjs example (#1795)
This PR moves the yjs example into its own repository here:
https://github.com/tldraw/tldraw-yjs-example

### Change Type

- [x] `internal`
2023-08-04 16:23:38 +00:00
Steve Ruiz
c7ae756c0b
[fix] Don't make arrows shapes to arrows (#1793)
This PR turns off snapping between shapes and arrows.

### Change Type

- [x] `patch` 

### Test Plan

1. Drag a shape while snapping
2. The shape should not snap to the position of arrows
2023-08-03 15:22:40 +00:00
Steve Ruiz
4191e23a56
Fix text editing in page menu popover (#1790)
Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Resize the page so that the page menu scrolls
2. Edit the title of the last item
3. Click around the titles

### Release Notes

- (fix) page menu editing
2023-08-03 15:02:59 +00:00
Steve Ruiz
2b03a19f4a
[fix] embeds switching / tldraw embed (#1792)
This PR:
- fixes switching between an embed and a link (it's moved to the edit
menu for now, so a bit buried).
- fixes the tldraw embed

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Try to embed a tldraw url into a room.

### Release Notes

- [fix] tldraw embeds
2023-08-03 14:55:46 +00:00
Steve Ruiz
da62a1896c
[fix] CSS reload in dev (#1791)
This PR tweaks the CSS hot refresh script in dev.

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package[^2]
2023-08-03 14:42:40 +00:00
Steve Ruiz
2be738e0cc
Update setter names, setXXShapeId rather than setXXId (#1789)
This PR is a follower on #1787 that adds some changes to how setters are
named.

### Change Type

- [x] `major` — Breaking change
2023-08-03 14:10:41 +00:00
Steve Ruiz
e4829f6702
Custom rendering margin / don't cull selected shapes (#1788)
This PR:
- supports client configuration of the rendering bounds via
`Editor.renderingBoundsMargin`
- no longer culls selected shapes
- restores rendering shape tests accidentally removed in #1786 

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Select shapes, scroll quickly to see if they get culled

- [x] Unit Tests

### Release Notes

- [editor] add `Editor.renderingBoundsMargin`
2023-08-03 07:37:15 +00:00
Steve Ruiz
bf27743595
Rename shapes apis (#1787)
This PR updates APIs related to shapes in the Editor.

- removes the requirement for an `id` when creating shapes
- `shapesOnCurrentPage` -> `currentPageShapes`
- `findAncestor` -> `findShapeAncestor`
- `findCommonAncestor` -> `findCommonShapeAncestor`
- Adds `getCurrentPageShapeIds`
- `getAncestors` -> `getShapeAncestors`
- `getClipPath` -> `getShapeClipPath`
- `getGeometry` -> `getShapeGeometry`
- `getHandles` -> `getShapeHandles`
- `getTransform` -> `getShapeLocalTransform`
- `getPageTransform` -> `getShapePageTransform`
- `getOutlineSegments` -> `getShapeOutlineSegments`
- `getPageBounds` -> `getShapePageBounds`
- `getPageTransform` -> `getShapePageTransform`
- `getParentTransform` -> `getShapeParentTransform`
- `selectionBounds` -> `selectionRotatedPageBounds`

### Change Type

- [x] `major` — Breaking change

### Test Plan

- [x] Unit Tests
2023-08-02 18:12:25 +00:00
Steve Ruiz
39dbbca90e
Camera APIs (#1786)
This PR updates camera APIs:
- removes animateCamera
- adds animation support to setCamera
- makes camera commands accept points rather than an x/y
  - `centerOnPoint`
  - `pageToScreen`
  - `screenToPoint`
  - `pan`
  - `setCamera`
- makes `zoomToBounds` accept a `Box2d` rather than x/y/w/h
- removes the `getBoundingClientRects` call from `getPointerInfo`
- removes the resize observer from `useScreenBounds`, uses an interval
instead when focused

A big (unexpected) improvement here is that `getBoundingClientRects` was
being called on every pointer move. This is a relatively expensive call
(it forces reflow) which could impact interactions. It's now called at
most once per second, and we could probably improve on that too if we
needed by only updating while in the select state.

### Change Type

- [x] `major` — Breaking change

### Test Plan

1. Try the multiple editors example after scrolling / resizing
2. Use the camera commands (zoom in, etc)

- [x] Unit Tests

### Release Notes

- (editor) improve camera commands
2023-08-02 15:56:33 +00:00
Steve Ruiz
507bba82fd
SideEffectManager (#1785)
This PR extracts the side effect manager from #1778.

### Change Type

- [x] `major` — Breaking change
2023-08-02 11:05:14 +00:00
Steve Ruiz
c478d75117
environment manager (#1784)
This PR extracts the environment manager from #1778.

### Change Type

- [x] `major` — Breaking change

### Release Notes

- [editor] Move environment flags to environment manager
2023-08-02 11:05:09 +00:00
Steve Ruiz
79fae186e4
Revert "Editor commands API / effects" (#1783)
Reverts tldraw/tldraw#1778.

Fuzz testing picked up errors related to deleting pages and undo/redo
which may doom this PR.

### Change Type

- [x] `major` — Breaking change
2023-08-01 17:03:31 +00:00
Steve Ruiz
e17074a8b3
Editor commands API / effects (#1778)
This PR shrinks the commands API surface and adds a manager
(`CleanupManager`) for side effects.

### Change Type

- [x] `major` — Breaking change

### Test Plan

Use the app! Especially undo and redo. Our tests are passing but I've
found more cases where our coverage fails to catch issues.

### Release Notes

- tbd
2023-08-01 13:21:14 +00:00
Steve Ruiz
03514c00c4
[feature] Add val town embed (#1777)
This PR adds val town to tldraw's collection of embeddable things.

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Add links to val town, e.g.
https://www.val.town/v/steveruizok.mathFact

### Release Notes

- (feature) val town
2023-07-31 15:44:33 +00:00
Steve Ruiz
b3186f5881
Fix outlines on text shapes (#1781)
This PR fixes the extra outlines on text shapes when not editing those
shapes.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create two text shapes
2. Edit one of them
3. The outline on the second shape should not be shown
2023-07-31 15:38:15 +00:00
Steve Ruiz
3a3f5b595e
[fix] handles updates (#1779)
This PR fixes the signals in the `HandlesWrapper` component.

### Change Type

- [x] `patch` — Bug fix
2023-07-29 22:44:57 +00:00
Steve Ruiz
af0f0f8d8b
Add shapes to exports (#1776)
This PR adds tldraw's shapes to its exports.

### Change Type

- [x] `minor`
2023-07-28 16:08:59 +00:00
Steve Ruiz
2e4989255c
export UiEventsProvider (#1774)
This PR exports the `UiEventsProvider` component (and renames
`useEvents` to `useUiEvents`). It also changes the `useUiEvents` hook to
work outside of the context. When used outside of the context, the hook
will no longer throw an error—though it will also have no effect.

### Change Type

- [x] `minor`

### Release Notes

- [@tldraw/tldraw] export ui events, so that UI hooks can work without
context
2023-07-28 09:24:58 +00:00
Steve Ruiz
18f5a1d9d2
remove useForceSolid effect for geo / line shapes (#1769)
These shapes no longer use perfect freehand for their rendering, so we
can drop the effect of `useForceSolid` for them.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Zoom out
2. Draw style draw shapes should not change

### Release Notes

- Remove the force solid switching for geo / line shapes
2023-07-27 17:18:44 +00:00
Steve Ruiz
acbd9ce0cd
[fix] transform errors (#1772)
This PR fixes some over-cautious transform errors introduced in #1751. 

### Change Type

- [x] `patch` — Bug fix

### Test Plan

- [ ] Unit Tests
2023-07-27 16:27:35 +00:00
Steve Ruiz
eb52eb4e30
[fix] shape indicator showing when locked shapes are hovered (#1771)
This PR makes it so that locked shapes do not show an indicator when
hovered.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Hover a locked shape
2. Hover a shape, then lock it

### Release Notes

- locked shapes do not show an indicator when hovered
2023-07-27 16:11:08 +00:00
Steve Ruiz
1014a71abb
[fix] minimap, common page bounds (#1770)
This PR fixes a bug that was introduced (by me) in #1751, where:
- the `commonBoundsOfAllShapesOnCurrentPage` would mutate the first
bounding box
- the render reactor would fire too often

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Use the minimap
2023-07-27 16:01:01 +00:00
Steve Ruiz
7e4fb59a48
remove selectionPageCenter (#1766)
This PR removes `Editor.selectionPageCenter` and moves its
implementation inline where used (in two places).

### Change Type

- [x] `major` — Breaking change

### Release Notes

- [dev] Removes `Editor.selectionPageCenter`
2023-07-27 15:17:50 +00:00
Steve Ruiz
e3f4cac786
[fix] arrow rendering safari (#1767)
This PR fixes an arrow rendering bug in Safari.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create arrows in safari
2. Drag them
2023-07-26 16:58:20 +00:00
Steve Ruiz
28b92c5e76
[fix] restore bg option, fix calculations (#1765)
This PR fixes a bug introduced with #1751 where pointing the bounds of
rotated selections would not correctly hit the bounds background.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create a rotated selection.
2. Point into the bounds background

- [x] Unit Tests
2023-07-26 15:32:33 +00:00
Steve Ruiz
56cf77a8cd
rename selection page bounds (#1763)
This PR renames `selectedPageBounds` to `selectionPageBounds`.

### Change Type

- [x] `major` — Breaking change


### Release Notes

- [editor] rename `selectedPageBounds` to `selectionPageBounds`
2023-07-26 14:17:01 +00:00
Steve Ruiz
3ac4275b7a
refactor parentsToChildrenWithIndexes (#1764)
This PR removes the indexes from `parentsToChildrenWithIndexes`. The
indexes weren't needed except for in one place, where a `getShape` was
easier.

### Change Type

- [x] `minor` — New feature
2023-07-26 14:16:32 +00:00