PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Fix <InFrontOfTheCanvas/> (#4024)

Browse source 
This PR:
- fixes the placement of the InFrontOfTheCanvas component

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix

### Release Notes

- Fixed placement of the InFrontOfTheCanvas component.
This commit is contained in:
Steve Ruiz 2024-06-26 17:00:37 +01:00 committed by GitHub
parent 4a3d9d407d
commit d686b1f0c5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 52 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
packages/editor/editor.css
View file

@ -41,7 +41,6 @@
--layer-collaborator-cursor: 130;
--layer-grid: 150;
--layer-culled-shapes: 175;
--layer-canvas: 200;
--layer-shapes: 300;
--layer-overlays: 400;
--layer-in-front-overlay: 500;
@ -257,7 +256,6 @@ input,
height: 100%;
width: 100%;
color: var(--color-text);
z-index: var(--layer-canvas);
cursor: var(--tl-cursor);
overflow: clip;
content-visibility: auto;
@ -313,17 +311,6 @@ input,
pointer-events: none;
}
.tl-front {
z-index: var(--layer-in-front);
position: absolute;
inset: 0px;
height: 100%;
width: 100%;
overflow: clip;
content-visibility: auto;
touch-action: none;
pointer-events: none;
}
/* ------------------- Background ------------------- */
.tl-background__wrapper {
@ -1068,7 +1055,7 @@ input,
display: flex;
align-items: center;
justify-content: center;
z-index: var(--layer-canvas);
z-index: 200;
font-size: 12px;
font-weight: 400;
color: var(--color-text-1);

91
packages/editor/src/lib/components/default-components/DefaultCanvas.tsx
View file

@ -125,53 +125,62 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
)
return (
<div
ref={rCanvas}
draggable={false}
data-iseditinganything={isEditingAnything}
data-isselectinganything={isSelectingAnything}
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
ref={rCanvas}
draggable={false}
data-iseditinganything={isEditingAnything}
data-isselectinganything={isSelectingAnything}
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 ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
<OnTheCanvasWrapper />
<SelectionBackgroundWrapper />
{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
</div>
)}
<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 />
<ShapeIndicators />
<HintedShapeIndicator />
<SnapIndicatorWrapper />
<SelectionForegroundWrapper />
<LiveCollaborators />
<div className="tl-overlays">
<div ref={rHtmlLayer2} className="tl-html-layer">
{debugGeometry ? <GeometryDebuggingView /> : null}
<HandlesWrapper />
<BrushWrapper />
<ScribbleWrapper />
<ZoomBrushWrapper />
<ShapeIndicators />
<HintedShapeIndicator />
<SnapIndicatorWrapper />
<SelectionForegroundWrapper />
<LiveCollaborators />
</div>
</div>
<MovingCameraHitTestBlocker />
</div>
<MovingCameraHitTestBlocker />
</div>
<InFrontOfTheCanvasWrapper />
</>
)
}
function InFrontOfTheCanvasWrapper() {
const { InFrontOfTheCanvas } = useEditorComponents()
if (!InFrontOfTheCanvas) return null
return <InFrontOfTheCanvas />
}
function GridWrapper() {
const editor = useEditor()
const gridSize = useValue('gridSize', () => editor.getDocumentSettings().gridSize, [editor])

13
packages/tldraw/src/lib/ui/TldrawUi.tsx
View file

@ -1,4 +1,4 @@
import { useEditor, useEditorComponents, useValue } from '@tldraw/editor'
import { useEditor, useValue } from '@tldraw/editor'
import classNames from 'classnames'
import React, { ReactNode } from 'react'
import { TLUiAssetUrlOverrides } from './assetUrls'
@ -87,21 +87,10 @@ const TldrawUiInner = React.memo(function TldrawUiInner({
<>
{children}
{hideUi ? null : <TldrawUiContent {...rest} />}
<InFrontOfTheCanvasWrapper />
</>
)
})
function InFrontOfTheCanvasWrapper() {
const { InFrontOfTheCanvas } = useEditorComponents()
if (!InFrontOfTheCanvas) return null
return (
<div className="tl-front">
<InFrontOfTheCanvas />
</div>
)
}
const TldrawUiContent = React.memo(function TldrawUI() {
const editor = useEditor()
const msg = useTranslation()