[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

apps/examples/src/examples/custom-components/CustomComponentsExample.tsx

@@ -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">
+			<svg ref={rSvg} className="tl-overlays__item">
-				<rect
+				<rect className="tl-brush" stroke="red" fill="none" width={w} height={h} />
-					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>
 		)
 	},

packages/editor/editor.css

@@ -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 {