[fix] overlays, custom brush example (#2806)

This PR fixes the overlays / custom brush example

### 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
This commit is contained in:
Steve Ruiz 2024-02-12 18:04:15 +00:00 committed by GitHub
parent 79460cbf3a
commit ad58bbb98b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 18 additions and 17 deletions

View file

@ -1,20 +1,21 @@
import { Tldraw, TLEditorComponents } from '@tldraw/tldraw'
import { Tldraw, TLEditorComponents, toDomPrecision, useTransform } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
import { useRef } from 'react'
// There's a guide at the bottom of this file!
const components: TLEditorComponents = {
Brush: function MyBrush({ brush }) {
const rSvg = useRef<SVGSVGElement>(null)
useTransform(rSvg, brush.x, brush.y)
const w = toDomPrecision(Math.max(1, brush.w))
const h = toDomPrecision(Math.max(1, brush.h))
return (
<svg className="tl-overlays__item">
<rect
className="tl-brush"
stroke="red"
fill="none"
width={Math.max(1, brush.w)}
height={Math.max(1, brush.h)}
transform={`translate(${brush.x},${brush.y})`}
/>
<svg ref={rSvg} className="tl-overlays__item">
<rect className="tl-brush" stroke="red" fill="none" width={w} height={h} />
</svg>
)
},

View file

@ -224,13 +224,6 @@ input,
contain: strict;
}
.tl-fixed-layer {
position: absolute;
inset: 0px;
contain: strict;
pointer-events: none;
}
.tl-shapes {
position: relative;
z-index: var(--layer-shapes);
@ -264,6 +257,13 @@ input,
transform-origin: top left;
}
.tl-fixed-layer {
position: absolute;
inset: 0px;
contain: strict;
pointer-events: none;
}
/* ------------------- Background ------------------- */
.tl-background {