[fix] overlays stacking (#1849)

This PR fixes a small bug introduced by #1842 where overlays would be
stacked behind shapes.

### Change Type

- [x] `patch` — Bug fix

packages/editor/editor.css

@@ -230,6 +230,16 @@ input,
 	contain: strict;
 }
 
+.tl-shapes {
+	position: relative;
+	z-index: 2;
+}
+
+.tl-overlays {
+	position: relative;
+	z-index: 3;
+}
+
 .tl-overlays__item {
 	position: absolute;
 	top: 0px;
@@ -291,7 +301,6 @@ input,
 	width: 1px;
 	height: 1px;
 	contain: layout style size;
-	z-index: 3;
 }
 
 /* ---------------------- Brush --------------------- */

packages/editor/src/lib/components/Canvas.tsx

@@ -52,18 +52,11 @@ export const Canvas = track(function Canvas({ className }: { className?: string
 			const offset =
 				z >= 1 ? modulate(z, [1, 8], [0.125, 0.5], true) : modulate(z, [0.1, 1], [-2, 0.125], true)
 
-			htmlElm.style.setProperty(
+			const transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(
-				'transform',
+				x + offset
-				`scale(${toDomPrecision(z)}) translate(${toDomPrecision(x + offset)}px,${toDomPrecision(
+			)}px,${toDomPrecision(y + offset)}px)`
-					y + offset
+			htmlElm.style.setProperty('transform', transform)
-				)}px)`
+			htmlElm2.style.setProperty('transform', transform)
-			)
-			htmlElm2.style.setProperty(
-				'transform',
-				`scale(${toDomPrecision(z)}) translate(${toDomPrecision(x + offset)}px,${toDomPrecision(
-					y + offset
-				)}px)`
-			)
 		},
 		[editor]
 	)
@@ -111,11 +104,11 @@ export const Canvas = track(function Canvas({ className }: { className?: string
 					{SvgDefs && <SvgDefs />}
 				</defs>
 			</svg>
-			<div ref={rHtmlLayer} className="tl-html-layer" draggable={false}>
+			<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
 				<SelectionBackgroundWrapper />
 				<ShapesToDisplay />
 			</div>
-			<div className="tl-fixed-layer">
+			<div className="tl-fixed-layer tl-overlays">
 				<div ref={rHtmlLayer2} className="tl-html-layer">
 					{/* <GeometryDebuggingView /> */}
 					<HandlesWrapper />