Wykres commitów

112 Commity (6c5c74d1758c8d22c59d6427d2de911188285e5c)

Autor SHA1 Wiadomość Data
Steve Ruiz 6c5c74d175 ok 2024-04-14 19:27:14 +01:00
Steve Ruiz 4d19b78ca4 Update test-text.spec.ts 2024-04-14 14:54:53 +01:00
Steve Ruiz 9540817fcb ok 2024-04-14 10:42:53 +01:00
Steve Ruiz 760600a27b use black for black in dark mode 2024-04-14 10:20:58 +01:00
Steve Ruiz a60ef0c1c6 fix api docs 2024-04-14 08:59:49 +01:00
Steve Ruiz 92adea4e21 Merge branch 'main' into stickies-rc 2024-04-14 08:44:29 +01:00
Steve Ruiz 3ceebc82f8
Faster selection / erasing (#3454)
This PR makes a small improvement to the way we measure distances.
(Often we measure distances multiple times per frame per shape on the
screen). In many cases, we compare a minimum distance. This makes those
checks faster by avoiding a square root.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` — Improving existing features

### Release Notes

- Improve performance of minimum distance checks.
2024-04-13 13:30:30 +00:00
Steve Ruiz 577de09c43 remove shadow offset, rotate top shadow 2024-04-12 12:10:44 +01:00
Steve Ruiz 63c0223e4f improve text
turn off autofocus

Update EditingShape.ts

fix disable tab logic

don't move to editing shape when in coarse pointer
2024-04-11 19:15:14 +01:00
Steve Ruiz 6d98b25124 cleanup 2024-04-09 16:54:13 +01:00
Steve Ruiz 3a698444da Merge branch 'main' into stickies-rc 2024-04-09 16:27:39 +01:00
Steve Ruiz f8222156cf
Stickies: restore tab in text shape (#3422)
This PR restores the tab key for the text shape.
2024-04-09 16:11:19 +01:00
Lu Wilson eabcb22b6e
Allow "kickout" on every shape, not just frames, and add drag-and-drop example (#3406)
> Stacked on top of https://github.com/tldraw/tldraw/pull/3405

> This doesn't need to land for the stickies release. We can merge it
afterwards. It's the last bit of work on my 'parenting' spike.

This PR makes `kickoutOccludedShapes` shape-agnostic. It now runs on any
shape that opts-in to the drag and drop manager by having an
`onDragShapesOut` method. This is more of a bug fix than a feature, but
some people might be relying on the bug.

This PR also adds an example for drag and drop.


https://github.com/tldraw/tldraw/assets/15892272/15b66be4-75bd-4c30-a594-340415bc5896


### Change Type

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

- [ ] `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
- [ ] `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: Steve Ruiz <steveruizok@gmail.com>
2024-04-09 14:47:08 +01:00
Mime Čuvalo 63f4059938
Revert "textfields: fix Safari cursor rendering bug (#3373)"
This reverts commit bd433483b0.
2024-04-08 12:25:35 +02:00
Mime Čuvalo bd433483b0
textfields: fix Safari cursor rendering bug (#3373)
There seems to be a Webkit bug with the cursor not initially being
visible sometimes, especially when the page first loads.
This ain't pretty but it's a not-too-hacky way of "shaking" the cursor
awake.

Before:


https://github.com/tldraw/tldraw/assets/469604/ca66c7d1-8b34-498a-a827-4f7725ab85dd


After:


https://github.com/tldraw/tldraw/assets/469604/93d0f190-b586-496c-a416-0c726ac51858




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

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `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-04-06 23:04:09 +01:00
Steve Ruiz d45cfe0b0b remove bring to front 2024-04-06 22:41:28 +01:00
Steve Ruiz f1da5ab361 Merge branch 'main' into stickies-rc 2024-04-06 22:40:03 +01:00
Steve Ruiz 5aa64a1460
Remove note parenting (#3384)
This PR removes the ability for notes to accept children. It keeps all
of the other improvements to dragging / dropping / etc.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `feature` — New feature
2024-04-06 22:34:30 +01:00
Steve Ruiz 62d90a797e
[stickies] feature flag edit on type (#3383)
This PR removes edit on type. A noble ambition, perhaps feature flag?

### Change Type
- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` — Improving existing features
2024-04-06 22:31:21 +01:00
Mitja Bezenšek f1e0af7631
Display none for culled shapes (#3291)
Comparing different culling optimizations:


https://github.com/tldraw/tldraw/assets/2523721/0b3b8b42-ed70-45b7-bf83-41023c36a563

I think we should go with the `display: none` + showing the skeleteon.
The way it works is:
- We now add a sibling to the shape wrapper div which serves as the
skeleton for the culled shapes.
- Only one of the two divs (shape wrapper and skeleton div) is
displayed. The other one is using `display: none` to improve
performance.

### Change Type

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

- [ ] `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
- [x] `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


- Improve performance of culled shapes by using `display: none`.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-04-05 13:23:02 +00:00
Mime Čuvalo 1df05133af
stickies: update geometry to differentiate between shape and text label (#3361)
Separates out the geometry - we want clicking in the negative space to
not have the text editing mechanics. This definitely feels better
without the sticky note textfield assuming it takes up the whole note.

Before:
<img width="614" alt="Screenshot 2024-04-04 at 15 35 58"
src="https://github.com/tldraw/tldraw/assets/469604/f4673fc5-5b9a-4ab9-a169-a91ba7f49d17">
After:
<img width="636" alt="Screenshot 2024-04-04 at 15 35 42"
src="https://github.com/tldraw/tldraw/assets/469604/645c439a-662b-4244-af7f-6c718e5c5fc2">


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

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-04-05 09:15:07 +01:00
Steve Ruiz 4a84b3482c Simplify RTL 2024-04-04 22:49:28 +01:00
Lu Wilson 574724be57
Stickies: Bring stickies to front when you move them (#3353)
When you start translating stickies, bring them to front.


https://github.com/tldraw/tldraw/assets/15892272/bdd1bc0c-8e94-435a-98ef-d09f9f93f4cb


### Change Type

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

- [ ] `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
- [ ] `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.
2024-04-04 16:05:03 +01:00
Mime Čuvalo 3c91ed78da
textareas: place cursor at intended position (#3328)
This is take 2 on this original PR:
https://github.com/tldraw/tldraw/pull/3132

It goes further to try to address these issues that came up:
- [x] fixes up problem with being able to click "through" an occluded
shape because of z-layer issues. This is done by only "raising" the
textareas when a shape is selected, priming them for easy selection.
- [x] add a `data-isediting` property which lets us stay in editing mode
and keep the z-indices of the textareas raised when in editing mode.
- [x] Initiating a drag from within a textarea was losing pointer events
when going over the UI. Would love feedback on this piece - had to
disable pointer events to the UI while dragging which I think is the
right move anyway. But wiring that up properly could use work since it
relies on cursor changes, heh.

Btw, @MitjaBezensek I had to undo your PR
https://github.com/tldraw/tldraw/pull/3283 because that would conflict
with this sticky work where we want text editing to be more fluid.

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

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `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

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-04-04 10:21:05 +01:00
Lu Wilson 3f6b385880
Stickies: parenting (of frames and stickies) (#3297)
This PR adds parenting behaviour to stickies, and also changes how
parenting works on the whole.

- Rescaled timings for drag and drop manager. It should feel tighter,
closer to figma.


https://github.com/tldraw/tldraw/assets/15892272/c36c5bba-9964-403e-a5cd-6dcb35e1fe27


- We now 'kick out' any occluded children from their parents. We
manually do this after many interactions and actions.
- We now only parent shapes if their geometry overlaps *as well* as your
cursor dragging over.
- We now hint parents when translating a child inside it.
- We hide the hint if your selected shape will be kicked out of a
frame/note when you let go.
- We now *only* hint if a child will successfully drop inside a parent.
- Removed `shouldHint` option from `onDragShapesOver`. The editor
handles that now.

I will add more gifs demonstrating all these cases.

### Change Type

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

- [x] `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
- [x] `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: Steve Ruiz <steveruizok@gmail.com>
2024-04-03 17:15:19 +01:00
Steve Ruiz 30e605ef7e
Font size adjustment migration (#3338)
This PR adds migrations for font size adjustment.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` — Improving existing features
2024-04-03 15:56:56 +01:00
Lu[ke] Wilson 4c854f4cb8 fix api 2024-04-03 09:45:09 +01:00
Mime Čuvalo d96b69394e
merge 2024-04-02 14:33:30 +01: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 79b551b985
Stickies: clone handles (#3320)
This PR adds "cloning handles" for note shapes.

![Kapture 2024-04-01 at 17 13
57](https://github.com/tldraw/tldraw/assets/23072548/18d0a10b-e4c2-4332-b253-e61f5a3ebc4d)


![image](https://github.com/tldraw/tldraw/assets/23072548/91628f38-1d62-4be9-9a07-675a9c8db3f7)

### Change Type

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

### Test Plan

1. Use the clone handles to create new notes by clicking.
2. Use the clone handles to create new notes by dragging.

- [x] Unit Tests

### Release Notes

- Adds clone handles to note shapes.
2024-04-01 17:32:38 +01:00
Mime Čuvalo 9c9d1c4922
stickies: create new sticky hotkeys (tab, cmd+enter) (#3103)
Breakout from https://github.com/tldraw/tldraw/pull/2953


### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Sticky note: create new note on hotkeys.
2024-03-27 17:38:48 +00:00
Mime Čuvalo 7c5826e4bd
stickies: edit on type, part 2: place cursor at intended position in general (#3132)
This is what we discussed this morning! Places the cursor at the
intended position. This is doing some magic with opacity to still
capture the cursor position and we show it when we're actually editing.

The discussion offline was that select all, being the current behavior
implies that editing = 'replace all text' as the default behavior,
requiring a third-click to deselect the entirely selected text. The
previous 'edit on type' PR that this is stacked on top of start shifting
that paradigm to at least choose append to text instead of replace -
but! We can still do better. This PR goes the next logical step and
places the cursor where the user would probably expect it to go.

(This obviously also ties in with the textfields PR work in general as
well.)


https://github.com/tldraw/tldraw/assets/469604/7f747296-0801-4c01-baa8-25e33b06882c

### 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
- [x] `feature` — New feature
- [ ] `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.
2024-03-27 15:06:25 +00:00
Mime Čuvalo ffd1a44e88
stickies: edit on type (#3099)
Breakout from https://github.com/tldraw/tldraw/pull/2953
Auto-edit a shape upon keystroke. Related to this change is that we
shouldn't do the selection of all text when editing (and it would
conflict currently with this behavior, or at least we'd have to special
case). In any case, I would argue that it's odd and doesn't feel like
the right move — this PR updates it so that it puts the cursor at the
end of the text which to me feels better or more expected.

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Sticky note: auto-edit on keystroke.
2024-03-27 13:41:40 +00:00
Mime Čuvalo 03562c1a62
stickies: resize font-size _only_ if we hit long words (#3242)
The gif shows it all. This is a further iteration on
https://github.com/tldraw/tldraw/pull/3142/files
This doesn't mean that we necessarily want to keep the `growY` property.
It just shows that we can sometimes rely on the CSS `overflow-wrap`
property and sometimes we can try to actively avoid where it makes
sense.

I put a lower size limit of 12 but I think I'm open to having a higher
one, maybe 14? Hard to say.

- [x] SVG export
- [x] Check previous text wrapping PRs for a text torture file
- [x] Tests


https://github.com/tldraw/tldraw/assets/469604/352b2721-b2e7-40ec-bb19-46e0bd607e1c

### 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.
2024-03-27 13:35:53 +00:00
Mime Čuvalo 6def201da2
ui: make toasts look more toasty (#2988)
<img width="449" alt="Screenshot 2024-03-11 at 14 03 44"
src="https://github.com/tldraw/tldraw/assets/469604/5b00dafc-abf1-44a3-b6c6-1d16db74b1be">


### Change Type

- [x] `patch` — Bug fix

### Release Notes

- UI: Add severity to toasts.
2024-03-27 09:41:13 +00:00
Mime Čuvalo d76d53db95
textfields [1 of 3]: add text into speech bubble; also add rich text example (#3050)
This is the first of three textfield changes. This starts with making
the speech bubble actually have text. Also, it creates a TipTap example
and how that would be wired up.

🎵 this is dangerous, I walk through textfields so watch your head rock 🎵

### Change Type

- [x] `minor` — New feature

### Release Notes

- Refactor textfields be composable/swappable.
2024-03-27 09:33:48 +00:00
Mitja Bezenšek 6dd6f8e77e
Allow hiding debug panel. (#3261)
We allowed the users to customize pretty much all of our components, but
not the `DebugPanel`. We had overrides for `DebugMenu` which is
displayed inside the panel, but not for the panel itself.

I guess it makes sense to allow users to override both?

![CleanShot 2024-03-26 at 09 54
13](https://github.com/tldraw/tldraw/assets/2523721/c873fe85-7d01-4e4c-9324-70566dc3a4db)

Reported
[here](https://discord.com/channels/859816885297741824/1221663945627140157/1221663945627140157).

Fixes https://github.com/tldraw/tldraw/issues/3260

### 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
- [x] `feature` — New feature
- [ ] `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. Best way to test this is to check the `Hidden UI Components` example.
2. Play around with commenting out the `DebugPanel` and `DebugMenu`
overrides.

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

### Release Notes

- Allow users to fully override the `DebugPanel`.
2024-03-26 10:03:20 +00:00
alex 05f58f7c2a
React-powered SVG exports (#3117)
## Migration path
1. If any of your shapes implement `toSvg` for exports, you'll need to
replace your implementation with a new version that returns JSX (it's a
react component) instead of manually constructing SVG DOM nodes
2. `editor.getSvg` is deprecated. It still works, but will be going away
in a future release. If you still need SVGs as DOM elements rather than
strings, use `new DOMParser().parseFromString(svgString,
'image/svg+xml').firstElementChild`

## The change in detail
At the moment, our SVG exports very carefully try to recreate the
visuals of our shapes by manually constructing SVG DOM nodes. On its own
this is really painful, but it also results in a lot of duplicated logic
between the `component` and `getSvg` methods of shape utils.

In #3020, we looked at using string concatenation & DOMParser to make
this a bit less painful. This works, but requires specifying namespaces
everywhere, is still pretty painful (no syntax highlighting or
formatting), and still results in all that duplicated logic.

I briefly experimented with creating my own version of the javascript
language that let you embed XML like syntax directly. I was going to
call it EXTREME JAVASCRIPT or XJS for short, but then I noticed that we
already wrote the whole of tldraw in this thing called react and a (imo
much worse named) version of the javascript xml thing already existed.

Given the entire library already depends on react, what would it look
like if we just used react directly for these exports? Turns out things
get a lot simpler! Take a look at lmk what you think

This diff was intended as a proof of concept, but is actually pretty
close to being landable. The main thing is that here, I've deliberately
leant into this being a big breaking change to see just how much code we
could delete (turns out: lots). We could if we wanted to make this
without making it a breaking change at all, but it would add back a lot
of complexity on our side and run a fair bit slower

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>
2024-03-25 14:16:55 +00:00
Mime Čuvalo a8477d00fa
toolbar: fix missing title attributes (#3244)
The `title` attribute is currently missing in production. It was using
`title` when it should have been using `titleStr`
This also nixes the `title` attribute which is used just twice in the
codebase — probably not necessary to have a different title/label but
lemme know if you disagree.

Adds this behavior back in:
<img width="204" alt="Screenshot 2024-03-22 at 18 15 42"
src="https://github.com/tldraw/tldraw/assets/469604/f9b6d8d7-07ea-4f2f-8b45-e650ede18ae4">


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

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `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

- Fix title's being missing on toolbar items.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-03-24 14:47:21 +00:00
Steve Ruiz 4e0df0730d
[tiny] lift theme in style panel (#3170)
The button pickers in the style panel pop in and out all the time as
different shapes are selected. This PR lifts the dark mode check up to
the style panel itself, rather than in each picker.

### 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. Use the style panel
2. Change the them
2024-03-17 17:45:45 +00:00
alex adebb680e5
Component-based toolbar customisation API (#3067)
When we went from overrides-based to component based UI customisation
APIs, we didn't do the toolbar because it had some significant extra
complexity around overflowing the contents of the menu into the
dropdown. This is really hard to do at render-time with react - you
can't introspect what a component will return to move some of it into an
overflow.

Instead, this diff runs that logic in a `useLayoutEffect` - we render
all the items into both the main toolbar and the overflow menu, then in
the effect (or if the rendered components change) we use CSS to remove
the items we don't need, check which was last active, etc. Originally, I
wasn't really into this approach - but i've actually found it to work
super well and be very reliable.

### Change Type

- [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. Test the toolbar at many different sizes with many different 'active
tools'

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-03-12 16:14:28 +00:00
Mime Čuvalo 83544a9ea8
docs: fix missing API entries (#3111)
following up on
https://discord.com/channels/859816885297741824/1162726738774720574/1211715924613275681

several things here:
- `docs/api/.*json` were out-of-date — seems like fetch-api-source
should run automatically? shouldn't `build-api` also override this
directory? in particular, tldraw.api.json still had a ton of references
to the old @tldraw/tldraw package
- the main problem was that `generateApiContent` was failing silently.
we were relying on Promises and this broke silently because we never
handled exceptions. i got rid of the Promise as it was unnecessary and
made the exceptions bubble up
- two things were broken in the docs and those are fixed, so now the
missing entries will resurface

### Change Type

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

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-03-12 13:36:24 +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
alex 15c760f7ea
children: any -> children: ReactNode (#3061)
We use `children: any` in a bunch of places, but the proper type for
these is `ReactNode`. This diff fixes those.

### Change Type

- [x] `patch` — Bug fix
2024-03-04 14:48:40 +00:00
Steve Ruiz 4cc823e22e
Show a broken image for files without assets (#2990)
This PR shows a broken state for images or video shapes without assets.
It deletes assets when pasted content fails to generate a new asset for
the shape. It includes some mild refactoring to the image shape.
Previously, shapes that had no corresponding assets would be
transparent. This PR preserves the transparent state for shapes with
assets but without source data (ie loading assets).

After:
<img width="1062" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/81ad6953-a45f-4cc2-9f39-559009621a82">
<img width="1158" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/40d15158-d201-458f-b555-6f3d8708a283">

Before:
<img width="1178" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/2bed5b3c-cf1f-48be-9c68-d15fdccb9c99">


### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Create an image / video
2. Delete its asset

### Release Notes

- Better handling of broken images / videos.
2024-03-01 18:16:27 +00:00
Steve Ruiz 9a6f4e8c4b
[docs] design shuffle (#2951)
This PR incorporates design tweaks from #2922 without the home page or
content changes.

These are:
- Replacing all `hello@tldraw.com` with `sales@tldraw.com`
- Fix mailto links.
- Showing the first item in a section on direct routes to the section
- Splitting the article page for human-written content from article page
for generated content
- Splitting the layout for the landing page from the rest of the site
(temporarily identical to the regular content)
- Removing headings from left sidebar
- Restoring headings in right sidebar for human-written pages with > 1
heading link
- Styling block quote
- Adjusting section link appearance / layout in header / menu
- Changing the order of search results to preference docs over examples
- Updating copy on events
- Removing copy on user interface menus
- Adding hero as prop to all articles
- Updated icon
- Fixing a few broken links
- Replaces the sandpack code blocks with hljs code blocks, except in
examples.

### Change Type

- [x] `documentation` — Changes to the documentation only[^2]
2024-02-29 16:28:45 +00:00
alex a0628f9cb2
tldraw_final_v6_final(old version).docx.pdf (#2998)
Rename `@tldraw/tldraw` to just `tldraw`! `@tldraw/tldraw` still exists
as an alias to `tldraw` for folks who are still using that.

### Test Plan

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

### Release Notes

- The `@tldraw/tldraw` package has been renamed to `tldraw`. You can
keep using the old version if you want though!
2024-02-29 16:06:19 +00:00
Taha 5db4e9a491
Adding a single E2E test per menu (#2954)
A basic test for each of the menu areas

fixes TLD-2251

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

### Release Notes

- Add a brief release note for your PR here.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-02-29 13:21:10 +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 22af179983
Make exportToBlob public (#2983)
Solves #2939

Also converts to named arguments to make it easier to add arguments in
the future. We should be doing this everywhere from now on.

### Change Type


- [x] `minor` — New feature


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

### Release Notes

- Exposes the exportToBlob function for library users
2024-02-28 11:26:30 +00:00