Fix an issue with layers when moving shapes. (#3380)

https://github.com/tldraw/tldraw/assets/2523721/d35b5e41-5270-4fad-8f9e-f8d7ac46558c



https://github.com/tldraw/tldraw/assets/2523721/2e1d1f54-f980-437d-aa51-f598b59d56b9



### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

packages/editor/src/lib/components/default-components/DefaultCanvas.tsx

@@ -91,52 +91,54 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	])
 
 	return (
-		<div
+		<>
-			ref={rCanvas}
-			draggable={false}
-			className={classNames('tl-canvas', className)}
-			data-testid="canvas"
-			{...events}
-		>
-			<svg className="tl-svg-context">
-				<defs>
-					{shapeSvgDefs}
-					<CursorDef />
-					<CollaboratorHintDef />
-					{SvgDefs && <SvgDefs />}
-				</defs>
-			</svg>
 			{Background && (
 				<div className="tl-background__wrapper">
 					<Background />
 				</div>
 			)}
-			<GridWrapper />
 			<div className="tl-culled-shapes">
 				<CulledShapes />
 			</div>
-			<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
+			<div
-				<OnTheCanvasWrapper />
+				ref={rCanvas}
-				<SelectionBackgroundWrapper />
+				draggable={false}
-				{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
+				className={classNames('tl-canvas', className)}
-			</div>
+				data-testid="canvas"
-			<div className="tl-overlays">
+				{...events}
-				<div ref={rHtmlLayer2} className="tl-html-layer">
+			>
-					{debugGeometry ? <GeometryDebuggingView /> : null}
+				<svg className="tl-svg-context">
-					<HandlesWrapper />
+					<defs>
-					<BrushWrapper />
+						{shapeSvgDefs}
-					<ScribbleWrapper />
+						<CursorDef />
-					<ZoomBrushWrapper />
+						<CollaboratorHintDef />
-					<SelectedIdIndicators />
+						{SvgDefs && <SvgDefs />}
-					<HoveredShapeIndicator />
+					</defs>
-					<HintedShapeIndicator />
+				</svg>
-					<SnapIndicatorWrapper />
+				<GridWrapper />
-					<SelectionForegroundWrapper />
+				<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
-					<LiveCollaborators />
+					<OnTheCanvasWrapper />
+					<SelectionBackgroundWrapper />
+					{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
+				</div>
+				<div className="tl-overlays">
+					<div ref={rHtmlLayer2} className="tl-html-layer">
+						{debugGeometry ? <GeometryDebuggingView /> : null}
+						<HandlesWrapper />
+						<BrushWrapper />
+						<ScribbleWrapper />
+						<ZoomBrushWrapper />
+						<SelectedIdIndicators />
+						<HoveredShapeIndicator />
+						<HintedShapeIndicator />
+						<SnapIndicatorWrapper />
+						<SelectionForegroundWrapper />
+						<LiveCollaborators />
+					</div>
+					<InFrontOfTheCanvasWrapper />
 				</div>
-				<InFrontOfTheCanvasWrapper />
 			</div>
-		</div>
+		</>
 	)
 }