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:
parent
57fcb3d07b
commit
bd6ed1e00c
2 changed files with 12 additions and 3 deletions
|
@ -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 {
|
||||
|
|
|
@ -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 />
|
||||
|
|
Loading…
Reference in a new issue