[feature] multi-scribbles (#2125)

This PR adds support for multiple scribbles at the same time. It
prevents the sudden disappearance of existing scribbles when new ones
are added. It simplifies the management of scribbles by moving the
scribble manager to the editor.

![Kapture 2023-10-29 at 10 17
48](https://github.com/tldraw/tldraw/assets/23072548/23089047-6247-4714-bb79-c4972370140f)

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Use the eraser, scribble select, and laser pointer tools

- [x] Unit Tests

### Release Notes

- [feature] multi scribbles
This commit is contained in:
Steve Ruiz 2023-10-29 14:37:36 +00:00 committed by GitHub
parent 1c2611aab6
commit 19645b771d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 372 additions and 311 deletions

View file

@ -145,13 +145,24 @@ function GridWrapper() {
function ScribbleWrapper() {
const editor = useEditor()
const scribble = useValue('scribble', () => editor.instanceState.scribble, [editor])
const scribbles = useValue('scribbles', () => editor.instanceState.scribbles, [editor])
const zoomLevel = useValue('zoomLevel', () => editor.zoomLevel, [editor])
const { Scribble } = useEditorComponents()
if (!(Scribble && scribble)) return null
if (!(Scribble && scribbles.length)) return null
return <Scribble className="tl-user-scribble" scribble={scribble} zoom={zoomLevel} />
return (
<>
{scribbles.map((scribble) => (
<Scribble
key={scribble.id}
className="tl-user-scribble"
scribble={scribble}
zoom={zoomLevel}
/>
))}
</>
)
}
function BrushWrapper() {