Dynamic size mode + fill fill (#3835)

Browse source

This PR adds a user preference for "dynamic size mode" where the scale
of shapes (text size, stroke width) is relative to the current zoom
level. This means that the stroke width in screen pixels (or text size
in screen pixels) is identical regardless of zoom level.

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

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

Embed shape?

### Change Type

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

### Test Plan

1. Use the tools.
2. Change zoom

- [ ] Unit Tests

### Release Notes

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

---------

Co-authored-by: Taha <98838967+Taha-Hassan-Git@users.noreply.github.com>
Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>

...

This commit is contained in:

Steve Ruiz 2024-06-16 19:58:13 +03:00 • committed by GitHub

parent cbf7c2c605

commit ac149c1014

No known key found for this signature in database

GPG key ID: B5690EEEBB952194

81 changed files with 1262 additions and 671 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download patch file Download diff file Expand all files Collapse all files

BIN

apps/examples/e2e/tests/export-snapshots.spec.ts-snapshots/Export-snapshots-Exports-with-draw-fill-none-in-dark-mode-1-Mobile-Chrome-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 4.7 KiB After Width:  |  Height:  |  Size: 4.5 KiB

BIN

apps/examples/e2e/tests/export-snapshots.spec.ts-snapshots/Export-snapshots-Exports-with-draw-fill-none-in-dark-mode-1-chromium-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 4.7 KiB After Width:  |  Height:  |  Size: 4.5 KiB

BIN

apps/examples/e2e/tests/export-snapshots.spec.ts-snapshots/Export-snapshots-Exports-with-draw-fill-pattern-in-dark-mode-1-Mobile-Chrome-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 12 KiB After Width:  |  Height:  |  Size: 10 KiB

BIN

apps/examples/e2e/tests/export-snapshots.spec.ts-snapshots/Export-snapshots-Exports-with-draw-fill-pattern-in-dark-mode-1-chromium-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 12 KiB After Width:  |  Height:  |  Size: 10 KiB

BIN

apps/examples/e2e/tests/export-snapshots.spec.ts-snapshots/Export-snapshots-Exports-with-draw-fill-semi-in-dark-mode-1-Mobile-Chrome-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 5 KiB After Width:  |  Height:  |  Size: 4.8 KiB

BIN

apps/examples/e2e/tests/export-snapshots.spec.ts-snapshots/Export-snapshots-Exports-with-draw-fill-semi-in-dark-mode-1-chromium-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 5 KiB After Width:  |  Height:  |  Size: 4.8 KiB

BIN

apps/examples/e2e/tests/export-snapshots.spec.ts-snapshots/Export-snapshots-Exports-with-draw-fill-solid-in-dark-mode-1-Mobile-Chrome-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 5 KiB After Width:  |  Height:  |  Size: 4.8 KiB

BIN

apps/examples/e2e/tests/export-snapshots.spec.ts-snapshots/Export-snapshots-Exports-with-draw-fill-solid-in-dark-mode-1-chromium-linux.png

View file

Binary file not shown.

Side by side Swipe Overlay Before Width:  |  Height:  |  Size: 5 KiB After Width:  |  Height:  |  Size: 4.8 KiB