moves to div renderer

This commit is contained in:
Steve Ruiz 2021-09-11 16:24:03 +01:00
parent bc96414bf7
commit e7987ca451
42 changed files with 1104 additions and 852 deletions

View file

@ -13,12 +13,15 @@ import { Canvas } from '../canvas'
import { Inputs } from '../../inputs'
import { useTLTheme, TLContext, TLContextType } from '../../hooks'
export interface RendererProps<T extends TLShape, M extends Record<string, unknown>>
extends Partial<TLCallbacks> {
export interface RendererProps<
T extends TLShape,
E extends HTMLElement | SVGElement,
M extends Record<string, unknown>
> extends Partial<TLCallbacks> {
/**
* An object containing instances of your shape classes.
*/
shapeUtils: TLShapeUtils<T>
shapeUtils: TLShapeUtils<T, E>
/**
* The current page, containing shapes and bindings.
*/
@ -63,7 +66,11 @@ export interface RendererProps<T extends TLShape, M extends Record<string, unkno
* @param props
* @returns
*/
export function Renderer<T extends TLShape, M extends Record<string, unknown>>({
export function Renderer<
T extends TLShape,
E extends SVGElement | HTMLElement,
M extends Record<string, unknown>
>({
shapeUtils,
page,
pageState,
@ -73,17 +80,18 @@ export function Renderer<T extends TLShape, M extends Record<string, unknown>>({
hideIndicators = false,
hideBounds = false,
...rest
}: RendererProps<T, M>): JSX.Element {
}: RendererProps<T, E, M>): JSX.Element {
useTLTheme(theme)
const rScreenBounds = React.useRef<TLBounds>(null)
const rPageState = React.useRef<TLPageState>(pageState)
React.useEffect(() => {
rPageState.current = pageState
}, [pageState])
const [context] = React.useState<TLContextType>(() => ({
const [context] = React.useState<TLContextType<T, E>>(() => ({
callbacks: rest,
shapeUtils,
rScreenBounds,
@ -92,7 +100,7 @@ export function Renderer<T extends TLShape, M extends Record<string, unknown>>({
}))
return (
<TLContext.Provider value={context}>
<TLContext.Provider value={context as TLContextType<T, E>}>
<Canvas
page={page}
pageState={pageState}