Commit graph

39 commits

Author SHA1 Message Date
Mime Čuvalo
6137d4e375
theme: rename color scheme to theme (#3991)
cc @MitjaBezensek 

### Change Type

<!--  Please select a 'Scope' label ️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know
2024-06-20 10:04:47 +00:00
Steve Ruiz
a307939822
Add fill fill style. (#3966)
This PR adds a sneaky action / kbd (Alt-F) for the fill fill style.
Similar to the white action, this is not really documented and may be
removed in the future. But it's cool!!

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `feature` — New feature

### Test Plan

1. Press Alt-F.

### Release Notes

- Secretly adds a fill-fill style (Alt-F)
2024-06-18 10:50:01 +00:00
Mitja Bezenšek
12aea7ed68
[Experiment] Allow users to use system's appearance (dark / light) mode (#3703)
Allow the users to fully use the same colour scheme as their system.
Allows the users to either: force dark colour scheme, force light colour
scheme, or use the system one.

It's reactive to the system changes.


https://github.com/tldraw/tldraw/assets/2523721/6d4cef03-9ef0-4098-b299-6bf5d7513e98


### Change Type

<!--  Please select a 'Scope' label ️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


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

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
2024-06-17 14:46:04 +00:00
Steve Ruiz
ac149c1014
Dynamic size mode + fill fill (#3835)
This PR adds a user preference for "dynamic size mode" where the scale
of shapes (text size, stroke width) is relative to the current zoom
level. This means that the stroke width in screen pixels (or text size
in screen pixels) is identical regardless of zoom level.

![Kapture 2024-05-27 at 05 23
21](https://github.com/tldraw/tldraw/assets/23072548/f247ecce-bfcd-4f85-b7a5-d7677b38e4d8)

- [x] Draw shape
- [x] Text shape
- [x] Highlighter shape
- [x] Geo shape
- [x] Arrow shape
- [x] Note shape
- [x] Line shape

Embed shape?

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `feature` — New feature

### Test Plan

1. Use the tools.
2. Change zoom

- [ ] Unit Tests

### Release Notes

- Adds a dynamic size user preferences.
- Removes double click to reset scale on text shapes.
- Removes double click to reset autosize on text shapes.

---------

Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>
Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2024-06-16 16:58:13 +00:00
Steve Ruiz
5bf05bbb3c
Flatten shapes to image(s) (#3933)
This PR adds some functionality for turning shapes into images.

![Kapture 2024-06-13 at 12 51
00](https://github.com/tldraw/tldraw/assets/23072548/78525e29-61b5-418f-889d-2f061f26f34d)

It adds:
- the `flattenShapesToImages`
- the `useFlatten` hook
- a `flatten-shapes-to-images` action (shift + f)
- adds `flattenImageBoundsExpand` option
- adds `flattenImageBoundsPadding` option

## Flatten shapes to images

The `flattenShapesToImages` helper method will 1) create an image for
the given shape ids, 2) add it to the canvas in the same location / size
as the source shapes, and then 3) delete the original shapes. The new
image will be placed correctly in the z index and in the correct
rotation of the root-most ancestor of the given shape ids.


![image](https://github.com/tldraw/tldraw/assets/23072548/fe888980-05a5-4369-863f-90c142f9f8b9)

It has an argument, `flattenImageBoundsExpand`, which if provided will
chunk the given shapes into images based on their overlapping (expanded)
bounding boxes.


![image](https://github.com/tldraw/tldraw/assets/23072548/c4799309-244d-4a2b-ac59-9c2fd100319c)

By default, the flatten action uses the editor's
`options.flattenImageBoundsExpand`. The `flattenImageBoundsPadding`
option is used as a value for how much larger the image should be than
the source image bounds (to account for large strokes, for example).

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `feature` — New feature

### Test Plan

1. Select shapes
2. Select context menu > edit > flatten

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

### Release Notes

- Add Flatten, a new menu item to flatten shapes into images
2024-06-16 11:40:50 +00:00
Taha
4dab25be57
Open share menu when navigating from create new shared project button (#3898)
This PR ensures that the share menu is open when navigating from the
create new shared project button.

This could be achieved by calling ```editor.addOpenMenu('share-menu')```
after ```navigate('/new')``` , but that opens the menu on the local
editor first so you get a flash of that before the multiplayer editor
loads.

Instead I've used the state prop on the Navigate component/function to
pass a property called shouldOpenShareMenu.

If the user presses the back button to return to the local editor
instance then the open state of the share menu is preserved, which is
actually something we don't want in this case. Not sure how to deal with
that without adding a ton more complexity, is it worth it?

### Change Type

<!--  Please select a 'Scope' label ️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [x] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan

1. Click create new shared project from the file menu
2. Share menu should open after navigating to the new room

### Release Notes

- Open share menu when navigating from the create new shared project
button.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-06-10 08:15:55 +00:00
Mime Čuvalo
e29137f467
share: make share/fork/copy actions clearer (#3846)
Right now when you hit Share/Fork on production it can take a good 5
seconds for something to happen.
In the meantime, it can feel like nothing happened when you clicked the
button. Maybe you click it again to see if that'll fix it, which doesn't
do anything. Same thing for the Copy action, sometimes we don't have an
icon to subtly show that it's been copied.

This adds some toasts and disables the Share menu while a project is
being created.

Also, has two drive-by fixes:
- the getShareUrl logic is old and needed to be superseded by the new
stuff
- the icon fix for clipboard-copied.svg from the readonly omnibus PR
(https://github.com/tldraw/tldraw/pull/3192) got overridden in a
different PR (https://github.com/tldraw/tldraw/pull/3627) - this
restores the fix

<img width="304" alt="Screenshot 2024-05-30 at 11 38 39"
src="https://github.com/tldraw/tldraw/assets/469604/f9a3b7c7-f9ea-41f0-ad00-7fc5d71da93f">
<img width="257" alt="Screenshot 2024-05-30 at 11 38 14"
src="https://github.com/tldraw/tldraw/assets/469604/c0a2d762-64c3-44da-b61e-c237133dd8cd">


### Change Type

<!--  Please select a 'Scope' label ️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

### Release Notes

- Share menu: make sharing/fork/copy actions clearer
2024-06-03 08:42:08 +00:00
Mitja Bezenšek
15dd56a75e
Readonly / room creation omnibus (#3192)
Reworks how the readonly urls work. Till now we just used a simple
function that would scramble the slugs. Now we use a proper key value
mapping between regular and readonly slugs:

- We use two KV stores. One is for going from a slug to a readonly slug
and the other one for going the other way around. They are populated at
the same time.
- We separate preview KV stores (dev, preview, staging) from production
one. I've already created these on Cloudflare. [My understanding is
](https://developers.cloudflare.com/kv/reference/data-security/#encryption-at-rest)that
ids [can be
public](https://community.cloudflare.com/t/is-it-safe-to-keep-kv-ids-in-a-public-git-repo/517387/4)
since we can only access KV from our worker. Happy to move them to env
variables though.

- [x] Disable creating new rooms when tldraw is embedded inside iframes
on other websites (we check the referrer and if it's not the same as the
iframe's origin we don't allow it)
- [x] Fork a project when inside an iframe now opens the forked project
on tldraw.com and not inside iframe.
- [x] We allow embeding of iframes, but we now track the where they are
used via the referrer. We send this to Vercel analytics.
- [x] Improved UX of the share menu to make it less confusing. Toggle is
gone.
- [x]  `/new` and `/r` routes not redirect to `/`.
- [x] This introduces a new `/ro` route for readonly rooms. Legacy rooms
still live on `/v`.
- [x] Brought back `dotcom-shared` project to share code between BE and
FE. Mostly types.
- [x] Prevent creating of rooms by entering `/r/non-existing-slug`. 
- [x] Handle getting a readonly slug for old rooms. Added a comment
about it
[here](https://github.com/tldraw/tldraw/pull/3192/files#diff-c0954b3dc71bb7097c39656441175f3238ed60cf5cee64077c06e21da82182cbR17-R18).
- [x] We no longer expose editor on the window object for readonly
rooms. Prevents the users disabling readonly rooms manually.

### Change Type

<!--  Please select a 'Scope' label ️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [x] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!--  Please select a 'Type' label ️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Test Plan
1. Make sure old readonly rooms still work.
2. Creating a readonly link from an existing room should still use `/v`
path.
3. Newly created rooms should use `/ro` path for readonly rooms. Make
sure these work as well.
4. `/r` room was disabled and redirects to `/`
5. `/new` should still work when not inside iframes.

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

### Release Notes


1. This adds new functionality for readonly rooms:
- We have a new route `/ro` for newly created readonly rooms. These
rooms no longer use the scrambling logic to create readonly slugs.
Instead we now use KV storage from cloudflare to track the mapping for
slugs -> readonly slug and readonly slug -> slug.
- The old route `/v` is preserved, so that the old room still work as
they did before.
- For old rooms we will keep on generating the old readonly slugs, but
for new rooms we'll start using the new logic.
2. We no longer prevent embedding of tldraw inside iframes. 
3. We do prevent generating new rooms from inside the iframes though.
`/r`, `/new`, `/r/non-existing-id` should not allow creation of new
rooms inside iframes. Only `/new` still works when not inside iframes.
4. Forking a project from inside an iframe now opens it on tldraw.com
5. Slight copy change on the sharing menu. We no longer have a toggle
between readonly and non-readonly links.
6. `editor` and `app` are no longer exposed on the window object for
readonly rooms. Prevents users from using the `updateInstanceState` to
escape readonly rooms.

---------

Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
2024-04-25 14:10:40 +00:00
Steve Ruiz
8db84b33b2
Add white (#3321)
This PR adds white. It's available with Alt+T.
![Kapture 2024-04-01 at 18 32
22](https://github.com/tldraw/tldraw/assets/23072548/932c9621-ee09-403f-aacc-0226e7b03967)



### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `feature` — New feature

### Release Notes

- Adds secret white color.
2024-04-01 18:48:56 +00:00
Steve Ruiz
60cc0dcce3
Menu updates / fix flip / add export / remove Shape menu (#3115)
This PR:
- adds the export all menu items to the main menu
- removes the export all menu items from the dotcom menus
- removes the shape menu and reverts several changes from
https://github.com/tldraw/tldraw/pull/2782. This was not properly
reviewed (I thought it was a PR about hiding / showing menu items).
- fixes a bug with exporting (exporting JSON was not working when the
user had no selected shapes)
- fixes a bug that would prevent "flip shapes" from appearing in the
menu
- prevents export / copy actions from running if there are no shapes on
the page
- allows export / copy actions to default to all shapes on the page if
no shapes are selected

These changes have not been released in the dotcom yet. There's will be
some thrash in the APIs.

# Menu philosophy

In the menu, the **edit** submenu relates to undo/redo, plus the user's
current selection.

Menu items that relate to specific to certain shapes are hidden when not
available.

Menu items that relate to all shapes are disabled when not available.

<img width="640" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/e467e6bb-d958-4a9a-ac19-1dada52dcfa6">

### Change Type

- [x] `major` — Bug fix

### Test

- Select no shapes (arrange / flip should not be visible)
- Select one geo shape (arrange / flip should not be visible)
- Select two geo shapes (arrange / flip should be visible)
- Select one draw shape (arrange / flip should not be visible)

### Release Notes

- Revert some changes in the menu.
2024-03-11 18:31:28 +00:00
Steve Ruiz
4f07e696e8
[feature] wrap mode (#2938)
By default, tldraw's brushing mode will select when the box intersects
an shape's geometry. A user can hold Command / Ctrl to require that the
selection box fully contain a shape's bounds instead.

Some people really prefer the opposite. Three years! Three years I've
been saying "no no no".

This PR adds a user preference to flip the logic. When `isWrapMode` is
true, selection requires that the box completely contain a shape before
it's added to the list of selecting shapes; and ctrl flips back to
intersection instead.

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Turn on wrap mode in the user preferences menu.
2. Select stuff.
3. Use the ctrl key to except the behavior back to intersection.

- [x] Unit Tests

### Release Notes

- Added `isWrapMode` to user preferences.
- Added Wrap Mode toggle to user preferences menu.
2024-02-29 11:45:02 +00:00
David Sheldrick
4639436aad
Show toast on upload error (#2959)
A little toast for when image uploads fail. Solves #2944

![Kapture 2024-02-27 at 09 27
12](https://github.com/tldraw/tldraw/assets/1242537/9e285622-8015-41fa-bc3d-92dccfaa7ba9)

### Change Type

- [x] `patch` — Bug fix


### Release Notes

- Adds a quick toast to show when image uploads fail.
2024-02-27 14:14:42 +00:00
Mime Čuvalo
2a8ae6188e
menu: export followup with different semantics for file menu (#2968)
Renamed Object → Shape
Different semantics for Export under file menu. Thanks @TodePond !

### Change Type

- [x] `patch` — Bug fix
2024-02-27 12:48:20 +00:00
Mime Čuvalo
fb852459db
menu: rework File menu / ensure Export menu is present (#2783)
<img width="428" alt="Screenshot 2024-02-16 at 16 46 28"
src="https://github.com/tldraw/tldraw/assets/469604/334cd0db-d9d5-4993-8012-c6985173edfb">


- re-orders to be the normative New / Open / Save order — we shouldn't
be messing with this conventional ordering
- removes the "Don't ask again" from New/Open dialogs because they're
non-undoable and not what _anybody_ should ever select. we shouldn't
offer users a loaded footgun! :P
- makes File menu be part of the default menu — it's presence is
glaringly missing for regular development
- along with that, make the pieces of that menu available as lego pieces
to use - it can't just be `DefaultMainMenuContent`, all or nothing,
forcing downstream users to import everything from scratch
- finally, adds the Export menu as initially intended by this PR!

@steveruizok let's discuss if you have some notes on this and we can
talk about the shape of things here.

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Composable UI: makes File items be more granularly accessible / usable
- Menu: show Export under the File menu.
2024-02-26 15:01:56 +00:00
Mitja Bezenšek
b3d6af4454
Allow users to set document name and use it for exporting / saving (#2685)
Adds the ability to change document names in the top center part of the
UI. This mostly brings back the functionality we already had in the
past.

This is basically a port of what @SomeHats did a while back. I changed
the dropdown options and removed some of the things (we are not dealing
with network requests directly so some of that logic did not apply any
longer). We did have autosave back then, not sure if we want to bring
that back?

Changes the `exportAs` api, thus braking.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [x] `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. Top center should now show a new UI element. It has a dropdown with a
few actions.
2. Double clicking the name should also start editing it.
3. The name should also be respected when exporting things. Not if you
select some shapes or a frame. In that case we still use the old names.
But if you don't have anything selected and then export / save a project
it should have the document name.

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

### Release Notes

- Allow users to name their documents.
2024-02-19 12:30:26 +00:00
Mime Čuvalo
d6e9912d92
style: fix missing titles on vertical align menu (#2623)
### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Adds missing titles to vertical align menu.
2024-01-25 11:26:12 +00:00
Mitja Bezenšek
4e50c9c162
Start scrolling if we are dragging close to the window edges. (#2299)
Start scrolling when we get close to the edges of the window. This works
for brush selecting, translating, and resizing.


https://github.com/tldraw/tldraw/assets/2523721/4a5effc8-5445-411b-b317-36097233d36c


### Change Type

- [ ] `patch` — Bug fix
- [x] `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. Select a shape.
2. Move it towards the edge of the window. The camera position should
change.
3. Also try resizing, brush selecting.

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

### Release Notes

- Adds the logic to change the camera position when you get close to the
edges of the window. This allows you to drag, resize, brush select past
the edges of the current viewport.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-12-15 23:37:03 +00:00
Mitja Bezenšek
300466f52a
Add fit to content for frames. (#2275)
Adds Fit to content option for frames. This resizes the frames so that
the whole content fits. It also adds 50px padding on all sides so that
the content does not touch the frame's borders.



https://github.com/tldraw/tldraw/assets/2523721/b2f86e31-7dfb-495f-ac31-f1e0125e0af1



https://github.com/tldraw/tldraw/assets/2523721/e0a73d25-ac9f-4a35-a1fd-4aed7a5b151c



Fixes #1407

### Change Type

- [ ] `patch` — Bug fix
- [x] `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 some shapes.
2. Add a frame that encloses those shapes.
3. Right click on the frame and choose `Fit to content`
4. The frame should resize to fit all the children with some padding on
all sides of the frame.

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

### Release Notes

- Add Fit to content option to the context menu for frames. This resizes
the frames to correctly fit all their content.

---------

Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-12-07 12:57:56 +00:00
Mitja Bezenšek
e2ddbb16f6
Removing frames and adding elements to frames (#2219)
- Add simple frame removing - it just drops the frame and parent
children to frames parent.
- Select children after removing the frame.
- Add children to the frame if we resize the frame so that it encloses
them.

Describe what your pull request does. If appropriate, add GIFs or images
showing the before and after.

### Change Type

- [ ] `patch` — Bug fix
- [x] `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.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>
2023-11-29 12:01:57 +00:00
Steve Ruiz
ddb73cb6cf
Tighten up editor ui (#2102)
This PR tightens up the editor UI. It removes padding around the editor.

![Kapture 2023-10-28 at 18 27
15](https://github.com/tldraw/tldraw/assets/23072548/18075308-7b62-43a1-8c80-ff4e4136197b)

<img width="1196" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/a8205ef1-b142-4fdc-9745-e400c0c4939a">

<img width="1196" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/87e9dcd1-39f5-466a-a256-9cbd2ff2cf7e">

### Change Type

- [x] `minor` — New feature

### Release Notes

- Small adjustment to editor ui.
2023-10-28 21:58:32 +00:00
Steve Ruiz
aaf810b015
Add offline indicator (also to top zone example) (#2083)
This PR adds an offline indicator to the UI package. It's not used in
the default app but we'll use it on tldraw.com, and it makes sense to
include it here as it's generally useful.

### Change Type

- [x] `minor` — New feature

### Test Plan

1. See the zones example.

### Release Notes

- [@tldraw/tldraw] add offline indicator to ui components
2023-10-17 08:32:41 +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
David Sheldrick
b7884c6d67
[fix] add cloud tooltip (#1728)
Fix cloud tool tooltip

### 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-11 10:01:53 +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
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
8d1817a3e3
Use "Toggle locked" (#1538)
Use toggle locked rather than Lock / Unlock

### Change Type

- [x] `patch` — Bug Fix
2023-06-06 11:52:26 +00:00
Lu Wilson
3bc72cb822
Add support for project names (#1340)
This PR adds some things that we need for the Project Name feature on
tldraw.com.
It should be reviewed alongside
https://github.com/tldraw/tldraw-lite/pull/1814


## Name Property
This PR adds a `name` property to `TLDocument`. We use this to store a
project's name.

<img width="454" alt="Screenshot 2023-05-09 at 15 47 26"
src="https://github.com/tldraw/tldraw/assets/15892272/f3be438e-aa0f-4dec-8f51-8dfd9f9d0ced">

## Top Zone
This PR adds a `topZone` area of the UI that we can add stuff to,
similar to how `shareZone` works.
It also adds an example to show where the `topZone` and `shareZone` are:

<img width="1511" alt="Screenshot 2023-05-12 at 10 57 40"
src="https://github.com/tldraw/tldraw/assets/15892272/f5e1cd33-017e-4aaf-bfee-4d85119e2974">

## Breakpoints
This PR change's the UI's breakpoints a little bit.
It moves the action bar to the bottom a little bit earlier.
(This gives us more space at the top for the project name).

![2023-05-12 at 11 08 26 - Fuchsia
Bison](https://github.com/tldraw/tldraw/assets/15892272/34563cea-b1d1-47be-ac5e-5650ee0ba02d)

![2023-05-12 at 13 45 04 - Tan
Mole](https://github.com/tldraw/tldraw/assets/15892272/ab190bd3-51d4-4a8b-88de-c72ab14bcba6)

## Input Blur
This PR adds an `onBlur` parameter to `Input`.
This was needed because 'clicking off' the input wasn't firing
`onComplete` or `onCancel`.

<img width="620" alt="Screenshot 2023-05-09 at 16 12 58"
src="https://github.com/tldraw/tldraw/assets/15892272/3b28da74-0a74-4063-8053-e59e47027caf">

## Create Project Name
This PR adds an internal `createProjectName` property to
`TldrawEditorConfig`.
Similar to `derivePresenceState`, you can pass a custom function to it.
It lets you control what gets used as the default project name. We use
it to set different names in our local projects compared to shared
projects.

In the future, when we add more advanced project features, we could
handle this better within the UI.

<img width="454" alt="Screenshot 2023-05-09 at 15 47 26"
src="https://github.com/tldraw/tldraw/assets/15892272/da9a4699-ac32-40d9-a97c-6c682acfac41">

### Test Plan

1. Gradually reduce the width of the browser window.
2. Check that the actions menu jumps to the bottom before the style
panel moves to the bottom.

---

1. In the examples app, open the `/zones` example.
2. Check that there's a 'top zone' at the top.

- [ ] Unit Tests
- [ ] Webdriver tests

### Release Note

- [dev] Added a `topZone` area where you can put stuff.
- [dev] Added a `name` property to `TLDocument` - and `app` methods for
it.
- [dev] Added an internal `createProjectName` config property for
controlling the default project name.
- [dev] Added an `onBlur` parameter to `Input`.
- Moved the actions bar to the bottom on medium-sized screens.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-01 18:46:26 +00:00
Mitja Bezenšek
d738c28c19
Add support for locking shapes (#1447)
Add support for locking shapes. 

How it works right now:
- You can lock / unlock shapes from the context menu.
- You can also lock shapes with `⇧⌘L` keyboard shortcut.
- You cannot select locked shapes: clicking on the shape, double click
to edit, select all, brush select,... should not work.
- You cannot change props of locked shapes.
- You cannot delete locked shapes.
- If a shape is grouped or within the frame the same rules apply.
- If you delete a group, that contains locked shape it will also delete
those shapes. This seems to be what other apps use as well.

Solves #1445 

### Change Type

- [x] `minor` — New Feature

### Test Plan

1. Insert a shape
2. Right click on it and lock it.
3. Test that you cannot select it, change its properties, delete it.
4. Do the same with locked groups.
5. Do the same with locked frames.

- [x] Unit Tests
- [ ] Webdriver tests

### Release Notes

- Add support for locking shapes.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-06-01 18:13:38 +00:00
alex
674a829d1f
[1/3] initial highlighter shape/tool (#1401)
This diff adds an initial version of the highlighter shape. At this
stage, it's a complete copy of the draw tool minus the following
features:
* Fills
* Stroke types
* Closed shapes

I've created a new shape util (a copy-paste of the draw one with stuff
renamed/deleted) but reused the state chart nodes for the draw shape.
Currently this new tool looks exactly like the draw tool, but that'll be
changing soon!

![Kapture 2023-05-17 at 15 37
33](https://github.com/tldraw/tldraw/assets/1489520/982e78f4-6495-4a68-aa51-c8f7b5bcdd01)

The UI here is extremely WIP. The highlighter tool is behind a feature
flag, but once enabled is accessible through the tool bar. There's a
first-draft highlighter icon (i didn't spend much time on this, it's not
super legible on non-retina displays yet imo), and the tool is bound to
the `i` key (any better suggestions? `h` is taken by the hand tool)

### The plan
1. initial highlighter shape/tool #1401 **>you are here<**
2. sandwich rendering for highlighter shapes #1418  
3. shape styling - new colours and sizes, lightweight perfect freehand
changes

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

### Test Plan
(not yet)

### Release Notes

[internal only change layout ground work for highlighter]
2023-06-01 12:46:13 +00:00
Steve Ruiz
a220b2eff1
[feature] reduce motion (#1485)
This PR adds a user preference to reduce motion. When enabled the app
will not animate the camera (and perhaps skip other animations in the
future). It's actual implementation is as an `animateSpeed` property, so
we can also use it to speed up or slow down our animations if that's
something we want to do!

### Change Type

- [x] `minor` — New Feature

### Test Plan

1. Turn on reduce motion
2. Use minimap / camera features to zoom in / out / etc

- [x] Unit Tests

### Release Notes

- [editor] Add `reduceMotion` user preference
- Add reduce motion option to preferences
2023-05-30 15:22:49 +00:00
Lu Wilson
53b289310d
Add translations for "Leave shared project" action (#1394)
This PR adds translations for the "Leave shared project" action for
tldraw.com

It's for a brivate PR: https://github.com/tldraw/brivate/pull/1870

### Change Type

- [x] `patch` — Translations

### Release Notes

- None

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-05-25 09:51:28 +00:00
Steve Ruiz
1eb1f89cd1
[feature] add laser pointer (#1412)
This PR adds a laser pointer. It's also available in readonly rooms.

![Kapture 2023-05-18 at 17 00
18](https://github.com/tldraw/tldraw/assets/23072548/4f638dff-8c17-4f9d-8177-4a63a524b7fd)

### Change Type

- [x] `minor` — New Feature

### Test Plan

1. Select the laser pointer tool
2. Draw some lasers.

### Release Notes

- Adds the laser pointer tool.
2023-05-19 11:09:13 +00:00
Mitja Bezenšek
f59bfe01b1
Vertical text alignment for geo shapes (#1414)
Vertical text alignment for geo shapes.

### Change Type

- [x] `minor` — New Feature

### Test Plan

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

- [ ] Unit Tests
- [ ] Webdriver tests

### Release Notes

- This adds vertical text alignment property to geo shapes.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2023-05-19 10:23:43 +00:00
David Sheldrick
ad5a23e135
Add stuff for new 'share project' flow (#1403)
Coming up in the ephemeral state branch is the new 'share project' flow
where it uploads the document data before redirecting. This sets up some
stuff that will be needed there.

### Change Type

<!-- 💡 Indicate the type of change your pull request is. -->
<!-- 🤷‍♀️ If you're not sure, don't select anything -->
<!-- ✂️ Feel free to delete unselected options -->

<!-- To select one, put an x in the box: [x] -->

- [ ] `patch` — Bug Fix
- [x] `minor` — New Feature
- [ ] `major` — Breaking Change
- [ ] `dependencies` — Dependency Update (publishes a `patch` release,
for devDependencies use `internal`)
- [ ] `documentation` — Changes to the documentation only (will not
publish a new version)
- [ ] `tests` — Changes to any testing-related code only (will not
publish a new version)
- [ ] `internal` — Any other changes that don't affect the published
package (will not publish a new version)
2023-05-17 16:17:31 +00:00
Steve Ruiz
7131ab597c
Snapshot link menu translations (#1399)
This PR lands a few changes to the UI that are relevant for the Snapshot
link feature (see https://github.com/tldraw/brivate/pull/1824).

### Change Type

- [x] `minor` — New Feature
2023-05-17 14:01:50 +00:00
Mitja Bezenšek
a824168e0a
Add localizations for snapshots links (#1347)
Add localization key for creating snapshot links.

I guess it's internal?

### Change Type

- [x] `internal` — Any other changes that don't affect the published
package (will not publish a new version)

### Release Notes

- Add localization for creating snapshot links.
2023-05-15 15:30:35 +00:00
Steve Ruiz
bb96852b9d
[feature] check-box geo shape (#1330)
This PR adds a `check-box` geo shape. 

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

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

### Test Plan

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

- [x] Unit Tests

### Release Note

- Adds checkbox geo shape.
2023-05-09 13:32:04 +00:00
alex
bb1c84e101 lite: run prettier on js + json files 2023-05-02 16:12:34 +01:00
alex
29ed921c67 transfer-out: transfer out 2023-04-25 12:01:25 +01:00