Add className as prop to Canvas (#1827)

This PR adds a `className` to the <Canvas> element.

### Change Type

- [x] `minor` — New feature
This commit is contained in:
Steve Ruiz 2023-08-25 19:40:18 +02:00 committed by GitHub
parent 57fcb3d07b
commit bd6ed1e00c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 3 deletions

View file

@ -277,7 +277,9 @@ export const CAMERA_SLIDE_FRICTION = 0.09;
export function canonicalizeRotation(a: number): number;
// @public (undocumented)
export const Canvas: React_2.MemoExoticComponent<() => JSX.Element>;
export const Canvas: React_2.MemoExoticComponent<({ className }: {
className?: string | undefined;
}) => JSX.Element>;
// @public (undocumented)
export class Circle2d extends Geometry2d {

View file

@ -1,6 +1,7 @@
import { react, track, useQuickReactor, useValue } from '@tldraw/state'
import { TLHandle, TLShapeId } from '@tldraw/tlschema'
import { dedupe, modulate, objectMapValues } from '@tldraw/utils'
import classNames from 'classnames'
import React from 'react'
import { useCanvasEvents } from '../hooks/useCanvasEvents'
import { useCoarsePointer } from '../hooks/useCoarsePointer'
@ -19,7 +20,7 @@ import { Shape } from './Shape'
import { ShapeIndicator } from './ShapeIndicator'
/** @public */
export const Canvas = track(function Canvas() {
export const Canvas = track(function Canvas({ className }: { className?: string }) {
const editor = useEditor()
const { Background, SvgDefs } = useEditorComponents()
@ -81,7 +82,13 @@ export const Canvas = track(function Canvas() {
rCanvas.current?.focus()
}, [])
return (
<div ref={rCanvas} draggable={false} className="tl-canvas" data-testid="canvas" {...events}>
<div
ref={rCanvas}
draggable={false}
className={classNames('tl-canvas', className)}
data-testid="canvas"
{...events}
>
{Background && <Background />}
<GridWrapper />
<UiLogger />