Fix background color for patterned shapes. (#3708)

Background on exported patterned shapes was not the same as on the
shapes themselves. This was especially noticeable in dark mode.

I'm not sure if this is the colour we want to use as this changes the
existing shape colour. But it is in line to what we had a while back. In
any case
[generateImage](https://github.com/tldraw/tldraw/blob/main/packages/tldraw/src/lib/shapes/shared/defaultStyleDefs.tsx#L113)
should be using the same colour as
[HashPatternForExport](https://github.com/tldraw/tldraw/blob/main/packages/tldraw/src/lib/shapes/shared/defaultStyleDefs.tsx#L88).

### Before

![image](https://github.com/tldraw/tldraw/assets/2523721/2772818e-7461-4cea-a36b-c16c8206b9d5)


### After

![image](https://github.com/tldraw/tldraw/assets/2523721/2bbe189c-fa18-4198-b9b3-1851c2336cf1)


### 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 patterned shapes.
2. Copy them as SVG.
3. Paste them. They should look the same.

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

### Release Notes

- Fixes an issue with copy pasting shapes as svg and png not correctly
working for patterned shapes.
This commit is contained in:
Mitja Bezenšek 2024-05-07 15:55:44 +02:00 committed by GitHub
parent ebc892a1a6
commit b5caa53cee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -110,7 +110,9 @@ const generateImage = (dpr: number, currentZoom: number, darkMode: boolean) => {
const ctx = canvasEl.getContext('2d')
if (!ctx) return
ctx.fillStyle = darkMode ? '#212529' : '#f8f9fa'
ctx.fillStyle = darkMode
? DefaultColorThemePalette.darkMode.solid
: DefaultColorThemePalette.lightMode.solid
ctx.fillRect(0, 0, size, size)
// This essentially generates an inverse of the pattern we're drawing.