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
This commit is contained in:
Mitja Bezenšek 2024-04-05 21:09:07 +02:00 committed by GitHub
parent 97b5e4093a
commit d01a2223be
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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>
</>
)
}