From d01a2223be4f5c2400d80a5a9ad366371223de87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Fri, 5 Apr 2024 21:09:07 +0200
Subject: [PATCH] Fix an issue with layers when moving shapes. (#3380)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../default-components/DefaultCanvas.tsx      | 74 ++++++++++---------
 1 file changed, 38 insertions(+), 36 deletions(-)

diff --git a/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx b/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx
index 414f69606..3f89197b1 100644
--- a/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx
+++ b/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}>
-				<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
+				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>
+				<GridWrapper />
+				<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
+					<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>
+		</>
 	)
 }