Wykres commitów

1359 Commity (33a5febc7433e3b35dadaebef8395272c310c373)

Autor SHA1 Wiadomość Data
Taha 33a5febc74 Add note preview handles for creating notes 2024-03-28 17:32:18 +00:00
Taha effb19c610 add note preview shapes 2024-03-28 15:52:22 +00:00
Taha f333edddb0 change to handles 2024-03-28 14:51:42 +00:00
Taha 5726582d50 export getstickypit function, make handles smaller 2024-03-28 12:34:03 +00:00
Taha 7ea11f6661 fix jerky take-off from pit 2024-03-28 08:38:40 +00:00
Taha fb9c927009 implement better sticking
its a bit jerky, but now if you start in a sticky bit, you dont check for one until youve left the range of that one
2024-03-27 16:44:04 +00:00
Taha bded8ff56a nudge sticky note into sticky pit on translate 2024-03-27 13:28:00 +00:00
Mime Čuvalo d45d77bedf
styling: make dotcom and examples site have consistent font styling (#3271)
Our font styling for dotcom vs. our examples app is _ever_ so slightly
different.
- the Inter fonts weren't being consistently linked. Sometimes we
grabbed 700, sometimes 800, sometimes 500 or 400
- the dotcom specified a default weight of 500 and line-height 1.6 which
was not specified in the our UI. this made the UI inconsistent
- furthermore, we didn't specify `text-rendering` nor `font-smooth` and
that also made things inconsistent
- finally, our buttons needed to inherit the line-height because
otherwise they were reverting to the user agent default

before:
<img width="1800" alt="Screenshot 2024-03-26 at 15 23 12"
src="https://github.com/tldraw/tldraw/assets/469604/ee25c79c-5b43-4501-a126-255a9b03a4b8">
after:
<img width="1800" alt="Screenshot 2024-03-26 at 15 22 53"
src="https://github.com/tldraw/tldraw/assets/469604/a7a62441-e767-4919-b2bb-5c283eadd230">


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


### 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-03-27 09:44:22 +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
Mitja Bezenšek cd02d03d06
Revert perf changes (#3217)
Step 1 of the master plan 😂 

![CleanShot 2024-03-19 at 16 05
08](https://github.com/tldraw/tldraw/assets/2523721/7d2afed9-7b69-4fdb-8b9f-54a48c61258f)

This:
- Reverts #3186 
- Reverts #3160 (there were some conflicting changes so it's not a
straight revert)
- Reverts most of #2977 


### 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
- [ ] `improvement` — Improving existing features
- [x] `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-03-21 10:05:44 +00:00
alex 3a736007e5
Add image annotator example (#3147)
This diff mostly adds an image annotator example, but also has a couple
of drive-by changes:
- Added a 'use-cases' category to the examples app for this style of
mini-app
- Add `editor.pageToViewport`, which is like `editor.pageToScreen` but
works with viewport coordinates (better for `InFrontOfTheCanvas` stuff)
- Prevent the chrome side-swipe-to-go-back thing in the examples app

Some cool features of the image annotator:
- The image cannot be unlocked, and cannot have shapes places behind it
  - I still need to work out a way of removing the context menu though
- Anything you place outside the bounds of the image (and therefore
outside the bounds of the export) will be greyed out
- You can't change pages
  - unless you find the "move to page" action... need to fix that
- The camera is constrained! It'll keep the image roughly centered on
the screen. If you pick a very long thin image, you can only scroll
vertically. If you pick a very big one, it'll default it to a reasonable
size.

### Change Type

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

- [x] `sdk` — Changes the tldraw SDK
- [x] `docs` — Changes to the documentation, examples, or templates.

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

- [x] `feature` — New feature
2024-03-19 11:41:25 +00:00
Dan Groshev d7b80baa31
use native structuredClone on node, cloudflare workers, and in tests (#3166)
Currently, we only use native `structuredClone` in the browser, falling
back to `JSON.parse(JSON.stringify(...))` elsewhere, despite Node
supporting `structuredClone` [since
v17](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone)
and Cloudflare Workers supporting it [since
2022](https://blog.cloudflare.com/standards-compliant-workers-api/).
This PR adjusts our shim to use the native `structuredClone` on all
platforms, if available.

Additionally, `jsdom` doesn't implement `structuredClone`, a bug [open
since 2022](https://github.com/jsdom/jsdom/issues/3363). This PR patches
`jsdom` environment in all packages/apps that use it for tests.

Also includes a driveby removal of `deepCopy`, a function that is
strictly inferior to `structuredClone`.

### 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
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [x] `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. A smoke test would be enough

- [ ] Unit Tests
- [x] End to end tests
2024-03-18 17:16:09 +00:00
David Sheldrick 1951fc0e47
Fix lag while panning + translating at the same time (#3186)
Before

![Kapture 2024-03-18 at 09 42
33](https://github.com/tldraw/tldraw/assets/1242537/d27c5852-9514-4e44-8b75-d2cb2571362a)


After

![Kapture 2024-03-18 at 09 41
27](https://github.com/tldraw/tldraw/assets/1242537/f5cbebfd-a45c-48d9-915b-18823f4555ff)

The probelm was manifesting because our camera updates were not
throttled and our render tick was on a different tick timeline to our
tick manager. Fixing the latter gets rid of the lag without requiring us
to throttle the camera updates.

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



### 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-03-18 16:03:44 +00:00
alex 16a28bfd90
Fix jpg export and tests (#3198)
Fix a bug that was preventing JPG and webp exports from working. Also:
- Re-enable our export snapshot tests which got commented out again
- Fix some react act errors when running tests

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix
2024-03-18 15:08:09 +00:00
Steve Ruiz b9b5bd5b81
[fix] Batch tick events (#3181)
This PR fixes an issue where events happening on tick were not batched. 

![Kapture 2024-03-17 at 22 49
52](https://github.com/tldraw/tldraw/assets/23072548/2bcfa335-a38f-46c4-a3f3-434cac61b6ce)

We were listening to the `tick` event directly from the state node,
rather than passing the event into the state chart at the top. This
meant that it was bypassing the regular state chart rules, which was
what got me looking at this; but then I noticed that we also weren't
batching the changes, either. This causes computed stuff to re-compute
after each atom is updated within the `onTick` handler, which can be a
LOT.

Before:
<img width="1557" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/ba8791f2-faec-463d-945a-9f5920826aab">

After:
<img width="1204" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/a00f8e4a-caca-406a-89a2-8cff0e01b642">

It's not game breaking but it's important enough to hotfix at least in
the dot com.

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


### Test Plan

1. Select many shapes.
2. Resize them.

### Release Notes

- Fix a performance issue effecting resizing multiple shapes.
2024-03-18 14:33:36 +00:00
Steve Ruiz 4801b35768
[tinyish] Simplify / skip some work in Shape (#3176)
This PR is a minor cleanup of the Shape component.

Here we:
- use some dumb memoized info to avoid unnecessary style changes
- move the dpr check up out of the shapes themselves, avoiding renders
on instance state changes

Culled shapes:
- move the props setting on the culled shape component to a layout
reactor
- no longer set the height / width on the culled shape component
- no longer update the culled shape component when the shape changes

Random:
- move the arrow shape defs to the arrow shape util (using that neat API
we didn't used to have)

### 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 shapes
2. Use culled shapes

### Release Notes

- SDK: minor improvements to the Shape component
2024-03-17 21:37:37 +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 0a48aea7bb
fixup file helpers (#3130)
We had a couple regressions in #3110: first a missing `await` was
causing fonts not to get properly embedded in exports. second, some
`readAsText` calls were replaced with `readAsDataURL` calls.

### 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-03-12 16:51:29 +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 599a6cd484
quick fixes (#3128)
- Menu items
- keyboard shortcuts dialog menu

### Change Type

- [x] `patch` — Bug fix
2024-03-12 11:50:12 +00:00
Mime Čuvalo dba6d4c414
chore: cleanup multiple uses of FileReader (#3110)
from
https://discord.com/channels/859816885297741824/1006133967642177556/1213038401465618433

### Change Type

- [x] `patch` — Bug fix
2024-03-12 09:10:18 +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
Mitja Bezenšek b5aff00c89
Performance improvements (#2977)
This PR does a few things to help with performance:
1. Instead of doing changes on raf we now do them 60 times per second.
This limits the number of updates on high refresh rate screens like the
iPad. With the current code this only applied to the history updates (so
when you subscribed to the updates), but the next point takes this a bit
futher.
2. We now trigger react updates 60 times per second. This is a change in
`useValue` and `useStateTracking` hooks.
3. We now throttle the inputs (like the `pointerMove`) in state nodes.
This means we batch multiple inputs and only apply them at most 60 times
per second.

We had to adjust our own tests to pass after this change so I marked
this as major as it might require the users of the library to do the
same.

Few observations:
- The browser calls the raf callbacks when it can. If it gets
overwhelmed it will call them further and further apart. As things call
down it will start calling them more frequently again. You can clearly
see this in the drawing example. When fps gets to a certain level we
start to get fewer updates, then fps can recover a bit. This makes the
experience quite janky. The updates can be kinda ok one second (dropping
frames, but consistently) and then they can completely stop and you have
to let go of the mouse to make them happen again. With the new logic it
seems everything is a lot more consistent.
- We might look into variable refresh rates to prevent this overtaxing
of the browser. Like when we see that the times between our updates are
getting higher we could make the updates less frequent. If we then see
that they are happening more often we could ramp them back up. I had an
[experiment for this
here](4834863966 (diff-318e71563d7c47173f89ec084ca44417cf70fc72faac85b96f48b856a8aec466L30-L35)).

Few tests below. Used 6x slowdown for these.

# Resizing

### Before


https://github.com/tldraw/tldraw/assets/2523721/798a033f-5dfa-419e-9a2d-fd8908272ba0

### After


https://github.com/tldraw/tldraw/assets/2523721/45870a0c-c310-4be0-b63c-6c92c20ca037

# Drawing 
Comparison is not 100% fair, we don't store the intermediate inputs
right now. That said, tick should still only produce once update so I do
think we can get a sense of the differences.

### Before


https://github.com/tldraw/tldraw/assets/2523721/2e8ac8c5-bbdf-484b-bb0c-70c967f4541c

### After


https://github.com/tldraw/tldraw/assets/2523721/8f54b7a8-9a0e-4a39-b168-482caceb0149


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


### Release Notes

- Improves the performance of rendering.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-03-11 13:17:31 +00:00
Steve Ruiz a8b7d4e2d0
[fix] Rotated crop handle (#3093)
This PR fixes a bug where local rotation was used in cropping handles
rather than absolute rotation.
![Kapture 2024-03-10 at 18 21
51](https://github.com/tldraw/tldraw/assets/23072548/71ee5e46-59de-4c1d-8f54-27052677c0f7)



### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Crop an image
2. Place the image into a rotated parent
3. Crop the image
4. Rotate the image
5. Crop the image

The handles should be accurately rotated in all cases.

### Release Notes

- Fixed a bug that could cause rotated cropping images to have
incorrectly rotated handles.
2024-03-11 09:03:06 +00:00
Mitja Bezenšek 0813e54ca2
Fix validation errors for `duplicateProps` (#3065)
Should fix `At instance.duplicateProps.offset.x: Expected a number, got
NaN` validation errors.

Wasn't able to reproduce. We only assign the offset here, so
`Vec.Averge` is the most likely offender here and for that to happen I
guess `movingShapes` might not contain any shapes.

### 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.
2024-03-04 17:48:35 +00:00
hirano 5e4bca9961
Fix an issue where the video size was not drawn correctly (#3047)
Fixed an issue where the video size was drawing larger than the shape
size.


After:
![スクリーンショット 2024-03-04 15 38
10](https://github.com/tldraw/tldraw/assets/20399854/5839f4a3-913b-4d3a-a816-003d58f89d50)

Before:
![スクリーンショット 2024-03-04 15 37
32](https://github.com/tldraw/tldraw/assets/20399854/188bd0cb-50aa-4ea9-a0a5-7748d747eae0)

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

no tests

### Release Notes

- Fix an issue where the video size was not drawn correctly.

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-03-04 16:21:41 +00:00
alex ce782dc70b
Wrap local/session storage calls in try/catch (take 2) (#3066)
Steve tried this in #3043, but we reverted it in #3063. Steve's version
added `JSON.parse`/`JSON.stringify` to the helpers without checking for
where we were already `JSON.parse`ing (or not). In some places we just
store strings directly rather than wanting them jsonified, so in this
version we leave the jsonification to the callers - the helpers just do
the reading/writing and return the string values.

### Change Type

- [x] `patch` — Bug fix
2024-03-04 16:15:20 +00:00
alex 8adaaf8e22
Revert "Protect local storage calls (#3043)" (#3063)
This reverts commit 2f28d7c6f8.

### Change Type

- [x] `patch` — Bug fix
2024-03-04 15:48:31 +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 18a550ccdb
[fix] Input tags (#3038)
This PR fixes the input tags, which were set to `false` rather than
`off`, as they should be.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Test autocomplete
2. Test autocapitalize
3. Test autocorrect
4. Make sure that password managers don't show up


### Release Notes

- Fixed autocomplete, autocapitalize, and autocorrect tags on text
inputs.
2024-03-04 14:46:37 +00:00
Lu Wilson 5e390cf989
[terrible] Firefox: Allow scrolling on keyboard shortcuts dialog (#2974)
This PR lets firefox users scroll the keyboard shortcuts dialog
**horizontally**.
This isn't a real solution, just a plea for help for any ideas on how to
fix this in a better way.

Firefox users haven't been able to scroll the keyboard shortcuts dialog
for a long time.
The problem is that firefox handles overflowing column content
differently to other browsers. Most browsers overflow *downwards*, but
firefox overflows *sideways*, and there's no CSS property to control
that behaviour.
 
### 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. Open the keyboard shortcuts dialog on firefox.
2. Try to scroll the dialog to see overflowing content. More visible on
smaller screens.

- [ ] 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-03-04 14:26:01 +00:00
Steve Ruiz 2f28d7c6f8
Protect local storage calls (#3043)
This PR provides some safe wrappers for local storage calls. Local
storage is not available in all environments (for example, a React
Native web view). The PR also adds an eslint rule preventing direct
calls to local / session storage.

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Fixes a bug that could cause crashes in React Native webviews.
2024-03-04 13:37:09 +00:00
Steve Ruiz 1aef0e8f61
[fix] Missing element crash (rare) on video shapes. (#3037)
This PR adds a few guards against crashes when the video shape element
is not found.

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Fixed a rare crash with video shapes.
2024-03-02 19:38:21 +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
huppy-bot[bot] ba6cba64c6 Update CHANGELOG.md [skip ci] 2024-02-29 18:28:45 +00:00
Steve Ruiz 3b92faa5cf updatereadmes 2024-02-29 18:21:17 +00:00
huppy-bot[bot] ed1a031a69 Update CHANGELOG.md [skip ci] 2024-02-29 18:12:00 +00:00
David Sheldrick a25d58e9b6 fix refresh-assets cache inputs 2024-02-29 18:03:10 +00:00
huppy-bot[bot] 752c30ac62 Update CHANGELOG.md [skip ci] 2024-02-29 17:59:47 +00:00
David Sheldrick 7fdaa3b7ed use glob to pick up version files? 2024-02-29 17:55:36 +00:00
huppy-bot[bot] 76949b62bd Update CHANGELOG.md [skip ci] 2024-02-29 17:45:47 +00:00
David Sheldrick ba26324058
Fix publish script one more time (#3010)
follow up to #3009 

the versions.ts files were not being updated since things had been added
and moved around

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

- Add a brief release note for your PR here.
2024-02-29 17:38:19 +00:00
huppy-bot[bot] 21cc1c1345 Update CHANGELOG.md [skip ci] 2024-02-29 17:18:43 +00:00
David Sheldrick 9d237eec73
Fix publishing scripts (#3008)
Follow up to #3006 

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

- Add a brief release note for your PR here.
2024-02-29 16:59:05 +00:00
huppy-bot[bot] a429a44e69 Update CHANGELOG.md [skip ci] 2024-02-29 16:41:45 +00:00