This is a more surgical fix while these other diffs are being hashed
out: https://github.com/tldraw/tldraw/pull/4045 and
https://github.com/tldraw/tldraw/pull/4048
Problem was that we always waited a minimum of 500ms and we really
should have a `leading: true` to our debounce.
### Change type
- [x] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`
### Release notes
- Assets: fix artificial delay in showing an image.
This PR fixes the distance between duplicated shapes to match the
editor.options.adjacentPositions value.
### Change type
- [x] `bugfix`
### Release notes
- Fixed a bug that caused the distance offset for duplicated shapes to
not match other duplication distance offsets.
This PR adds a `GET /api/unfurl?url=blahblah` endpoint to our worker.
I tried out the existing cheerio implementation but it added 300kb to
our worker bundle in the end, due to transitive dependencies.
So I implemented the same logic with cloudflare's sanctioned streaming
HTML parser `HTMLRewriter` and it seems to work fine.
I also made the vscode extension do its fetching locally (from the node
process so it's not bound by security policies), retaining the cheerio
version for that. At the same time I fixed a bug in the RPC layer that
was preventing unfurled metadata from loading correctly.
In a few months we can retire the bookmark-extractor app by just
deleting it in the vercel dashboard.
### Change Type
<!-- ❗ Please select a 'Type' label ❗️ -->
- [ ] `feature` — New feature
- [x] `improvement` — Product improvement
- [ ] `api` — API change
- [ ] `bugfix` — Bug fix
- [ ] `other` — Changes that don't affect SDK users, e.g. internal or
.com changes
### 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
- Do link unfurling on the same subdomain as all our other api
endpoints.
Sets up preview deploys etc. for bemo worker.
There's enough going on here that I wanted to make it its own PR. I'll
rework david's spike on top of it once it's landed.
### Change Type
- [x] `internal` — Does not affect user-facing stuff
- [x] `chore` — Updating dependencies, other boring stuff
---------
Co-authored-by: David Sheldrick <d.j.sheldrick@gmail.com>
This PR adds a way to set the default value of a style property.
### Change type
- [ ] `bugfix`
- [ ] `improvement`
- [x] `feature`
- [ ] `api`
- [ ] `other`
### Release notes
- Adds a method for changing the default style of a `StyleProp`
instance.
This PR fixes a case where right clicking on an empty canvas would
display the edit menu, even when there was nothing to do in the menu.
### Change Type
- [ ] `feature` — New feature
- [ ] `improvement` — Product improvement
- [ ] `api` — API change
- [x] `bugfix` — Bug fix
- [ ] `other` — Changes that don't affect SDK users, e.g. internal or
.com changes
### Test Plan
1. Right click on the canvas
### Release Notes
- Fixes a bug where the context menu would display an empty edit menu.
Still some improvements to be made with how we determine when to close a
draw shape, but filled draw shapes now close more reliably in dynamic
size mode.
### 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. Select the draw tool
2. set dynamic resize mode
3. Zoom in to 800%
4. Try to draw a closed shape, it should close!
### Release Notes
- Improve closing of draw shapes in dynamic size mode
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
fixes#4033
### Change Type
<!-- ❗ Please select a 'Type' label ❗️ -->
- [ ] `feature` — New feature
- [ ] `improvement` — Product improvement
- [ ] `api` — API change
- [x] `bugfix` — Bug fix
- [ ] `other` — Changes that don't affect SDK users, e.g. internal or
.com changes
### 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.
This PR:
- simplifies a lot of z-index layers
### Change Type
- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix
### Release Notes
- Cleans up z-indexes and removes some unused CSS.
before
out/index.js 1.1mb ⚠️
after
out/index.js 275.9kb
🤦🏼
### Change Type
<!-- ❗ Please select a 'Type' label ❗️ -->
- [ ] `feature` — New feature
- [ ] `improvement` — Product improvement
- [ ] `api` — API change
- [ ] `bugfix` — Bug fix
- [x] `other` — Changes that don't affect SDK users, e.g. internal or
.com changes
### 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.
This PR:
- fixes the placement of the InFrontOfTheCanvas component
### Change Type
- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix
### Release Notes
- Fixed placement of the InFrontOfTheCanvas component.
This PR replaces the extendable TLServer class with an instantiatable
wrapper for the TLSyncRoom called TLSocketRoom.
The goal is to provide an API where you pretty much just
1. create a room from some (optional) snapshot
2. pass websockets into it when they connect
And then lifecycle stuff and persistence stuff is left to the consumer,
since that all seems to be much more context dependent.
One thing remaining here is to work on observability. We had a slightly
messy situation regarding logging and error handling and analytics and I
want to clean that all up.
### 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
- [ ] `chore` — Updating dependencies, other boring stuff
- [x] `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.
4.
- [ ] Unit Tests
- [ ] End to end tests
### Release Notes
- Add a brief release note for your PR here.
Not the prettiest way to do this, but meh. This is what we talked about
offline @SomeHats
### 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
@OrionReed found this little bug. I started digging into it and it turns
out we have a bunch of problems around locking and it's all a bit janky
:P I was thinking I'd fix this at a deeper level (prevent select and
editing in the first place if locked) but @SomeHats advised that this is
all a bit of a hot mess 🙃
### 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
- Editing: don't allow editing locked shapes when edit→edit mode.
Simplify the types used by the props of the `Tldraw` and `TldrawEditor`
components. This doesn't make the docs perfect, but it makes them quite
a bit better than they were.
### Change Type
- [x] `sdk` — Changes the tldraw SDK
- [x] `docs` — Changes to the documentation, examples, or templates.
- [x] `improvement` — Improving existing features
So, here's what's up:
- in Firefox, in version 127 `navigator.clipboard.write` support was
added:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/127
- previously, Firefox was going down an if/else branch where
`navigator.clipboard.write` isn't present, we use
`navigator.clipboard.writeText`
- Now, that Firefox is using the more common path, it now puts
MIME-types on the clipboard, both HTML and plaintext.
- _However_, on Firefox, it uses a different sanitization algorithm than
the Blink engine does and it ends up scrubbing out the `<tldraw>` fake
HTML tag:
https://developer.chrome.com/docs/web-platform/unsanitized-html-async-clipboard
- And, unfortunately, Firefox doesn't support setting `unsanitized` on
the ClipboardItem: https://caniuse.com/?search=unsanitized
- see also:
https://developer.chrome.com/docs/web-platform/unsanitized-html-async-clipboard
- So, the workaround here is to just use `<div data-tldraw>`. I'm not
completely happy with it since the ending `</div>` tag assumes there's
no nesting but ¯\\_(ツ)_/¯ it's fine in this case.
- Plus, I wanted to make sure that in the wild no one was relying on
this format being what was on the clipboard. Searching across all of
GitHub it seems like it'll be fine.
- The longer term, better solution, would be to use custom HTML formats:
https://developer.chrome.com/blog/web-custom-formats-for-the-async-clipboard-api
- However, of course, Firefox doesn't support that yet either 🙃https://caniuse.com/?search=web%20custom%20format
- see also:
https://developer.chrome.com/blog/web-custom-formats-for-the-async-clipboard-api
Talked with Alex, and what we could do down the line is copy SVG-in-HTML
and then include `data-info` attributes that had data we could extract
per shape. Something like that :handwavy: :)
I'll hotfix this once it lands.
### 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
- Clipboard: fix copy/paste in Firefox 127+
React's strict mode runs effects twice on mount, but once it's done that
it'll go forward with the state from the first effect. For example, this
component:
```tsx
let nextId = 1
function Component() {
const [state, setState] = useState(null)
useEffect(() => {
const id = nextId++
console.log('set up', id)
setState(id)
return () => console.log('tear down', id)
}, [])
if (!state) return
console.log('render', state)
}
```
Would log something like this when mounting for the first time:
- `set up 1`
- `tear down 1`
- `set up 2`
- `render 1`
For us, this is a problem: editor 2 is the version that's still running,
but editor 1 is getting used for render. React talks a bit about this
issue here: https://github.com/reactwg/react-18/discussions/19
The fix seems to be to keep the editor in a `useRef` instead of a
`useState`. We need the state to trigger re-renders though, so we sync
the ref into the state although we don't actually use the state value.
### Change Type
- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix
### Release Notes
- Fix a bug causing text shape measurement to work incorrectly when
using react strict mode
Looks like some leftovers when we switched away from apache. Did a full
text search and didn't find any other references to apache.
### Change Type
<!-- ❗ Please select a 'Scope' label ❗️ -->
- [ ] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [x] `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
- [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
### Release Notes
- Fix the license in the readme file for the store package.
bad hook deps was causing the wrong presence record to be returned when
switching between following users.
### 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.
This PR fixes a bug where new draw shapes (created after 500 points)
would have scale 1.
### Change Type
- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix
### Test Plan
1. Zoom in a lot
2. Draw for a long time
3. When the new draw shape happens, the new draw shape should have the
correct scale
If you zoom in at 110% or more, edge scrolling was not working on the
bottom and right edges. That's because we were setting insets using
exact comparison when the document.body.scrollWidth/Height values were
slightly off integers.
### 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.
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)
This PR fixes the positions of assets created when multiple assets are
created at once.
### Change Type
- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix
### Test Plan
1. Drop / paste multiple images on the canvas.
2. The shapes should be top aligned and positioned next to eachother.
### Release Notes
- Fixes the position of multiple assets when pasted / dropped onto the
canvas.
This PR fixes the indicators for shapes that were drawn with a pen or
stylus.
<img width="1008" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/f3050ccb-08f0-4bf4-a225-51863df12464">
### Change Type
- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix
### Release Notes
- Fixes a bug with the indicator for stylus-drawn draw shapes.
There was a race condition when pasting tldraw content. The paste would
sometimes resolve in time and sometimes not. We need to listen to when
the asset is actually updated/synced in the db.
### 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
- Assets: fix copy/paste for new asset resolver mechanic.
Our reference docs don't currently include members inherited through the
`extends` keyword. These extended items are barely referenced at all -
you have to find them in the signature.
This diff adds a clearer note to the docs saying which type has been
extended, and if possible brings the extended items through onto the
current documentation page (with a note saying where they're from)
### Change Type
- [x] `docs` — Changes to the documentation, examples, or templates.
- [x] `improvement` — Improving existing features
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>
This PR:
- moves the edge scrolling logic into a manager
- adds a new Editor option for `edgeScrollDelay`
- adds a new Editor option for `edgeScrollEaseDuration`
When in a state that would trigger an edge scroll, a delay is added
before the scrolling starts. When scrolling does start, it is eased in
by a certain duration.
### Change Type
- [x] `sdk` — Changes the tldraw SDK
- [x] `improvement` — Improving existing features
### Test Plan
1. Drag shapes, resize, or drag select to the edge of the screen
2. The screen should move
- [x] Unit Tests
### Release Notes
- Add a delay and easing to edge scrolling.
---------
Co-authored-by: Mitja Bezenšek <mitja.bezensek@gmail.com>
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.
- [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>
Looking at the waterfall of fonts/images/etc. we wanted the "Loading
assets..." bit to commence earlier so it's not fighting for bandwidth
with the icons loading all at the same time.
This writes to the index.html file to start preloading the fonts we
need.
### 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
### Release Notes
- Perf: improve font loading timing on dotcom.
---------
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
I originally didn't want to add these methods to the Editor class, to
avoid muddying the API with multiple ways to do one thing, but I've
found myself reaching for these on a number of occasions so I think
maybe it would be better to have them?
### 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.
I wanted to extend the arrow binding util to adapt holograph for the
bindings api, but it wasn't being exported like all the shape utils
were. I could have plucked it from the `defaultBindingUtils` array but
that felt dirty. What do you think @SomeHats ?
### 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.
This PR adds some functionality for turning shapes into images.
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.
It has an argument, `flattenImageBoundsExpand`, which if provided will
chunk the given shapes into images based on their overlapping (expanded)
bounding boxes.
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
this is take #2 of this PR https://github.com/tldraw/tldraw/pull/3745
As I look at LOD holistically and whether we have multiple sources when
working locally, I learned that our system used base64 encoding of
assets directly. Issue https://github.com/tldraw/tldraw/issues/3728
<img width="1350" alt="assetstore"
src="https://github.com/tldraw/tldraw/assets/469604/e7b41e29-6656-4d9b-b462-72d43b98f3f7">
The motivations and benefits are:
- store size: not having a huge base64 blobs injected in room data
- perf on loading snapshot: this helps with loading the room data more
quickly
- multiple sources: furthermore, if we do decide to have multiple
sources locally (for each asset), then we won't get a multiplicative
effect of even larger JSON blobs that have lots of base64 data in them
- encoding/decoding perf: this also saves the (slow) step of having to
base64 encode/decode our assets, we can just strictly with work with
blobs.
Todo:
- [x] decodes video and images
- [x] make sure it syncs to other tabs
- [x] make sure it syncs to other multiplayer room
- [x] fix tests
### 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. Test the shit out of uploading/downloading video/image assets,
locally+multiplayer.
- [ ] Need to fix current tests and write new ones
### Release Notes
- Assets: store as reference to blob in indexedDB instead of storing
directly as base64 in the snapshot.
couple fixes and improvements for the LOD work.
- add `format=auto` for Cloudflare to send back more modern image
formats
- fix the broken asset logic that regressed (should not have looked at
`url`)
- fix stray parenthesis, omg
- rm the `useValueDebounced` function in lieu of just debouncing the
resolver. the problem was that the initial load in a multiplayer room
has a zoom of 1 but then the real zoom comes in (via the url) and so we
would double load all images 😬. this switches the debouncing to the
resolving stage, not making it tied to the zoom specifically.
### 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
