[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:
parent
79460cbf3a
commit
ad58bbb98b
2 changed files with 18 additions and 17 deletions
|
@ -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>
|
||||
)
|
||||
},
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue