Merge pull request #82 from tldraw/fix-on-mount

Fix on mount
This commit is contained in:
Steve Ruiz 2021-09-08 13:02:09 +01:00 committed by GitHub
commit e9aa3e76f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 58 additions and 17 deletions

View file

@ -37,10 +37,10 @@ export const CornerHandle = React.memo(
/>
<rect
className="tl-corner-handle"
x={(isLeft ? -1 : bounds.width + 1) - size / 2}
y={(isTop ? -1 : bounds.height + 1) - size / 2}
width={size}
height={size}
x={(isLeft ? -1 : bounds.width + 1) - 4}
y={(isTop ? -1 : bounds.height + 1) - 4}
width={8}
height={8}
pointerEvents="none"
/>
</g>

View file

@ -21,7 +21,7 @@ export const RotateHandle = React.memo(
className="tl-rotate-handle"
cx={bounds.width / 2}
cy={size * -2}
r={size / 2}
r={4}
pointerEvents="none"
/>
</g>

View file

@ -1,6 +1,6 @@
import * as React from 'react'
import Basic from './basic'
import Imperative from './imperative'
export default function App(): JSX.Element {
return <Basic />
return <Imperative />
}

View file

@ -1,7 +1,7 @@
import * as React from 'react'
import { TLDraw, TLDrawState } from '@tldraw/tldraw'
import { TLDraw, TLDrawProps, TLDrawState } from '@tldraw/tldraw'
export default function Editor(): JSX.Element {
export default function Editor(props: TLDrawProps): JSX.Element {
const rTLDrawState = React.useRef<TLDrawState>()
const handleMount = React.useCallback((state: TLDrawState) => {
@ -9,7 +9,8 @@ export default function Editor(): JSX.Element {
// @ts-ignore
window.tlstate = state
rTLDrawState.current = state
props.onMount?.(state)
}, [])
return <TLDraw id="tldraw" onMount={handleMount} />
return <TLDraw id="tldraw" {...props} onMount={handleMount} />
}

View file

@ -0,0 +1,29 @@
import * as React from 'react'
import { TLDraw, TLDrawShapeType, TLDrawState } from '@tldraw/tldraw'
export default function Imperative(): JSX.Element {
const rTLDrawState = React.useRef<TLDrawState>()
const handleMount = React.useCallback((state: TLDrawState) => {
rTLDrawState.current = state
state.createShapes(
{
id: 'rect1',
type: TLDrawShapeType.Rectangle,
name: 'Rectangle',
childIndex: 1,
point: [0, 0],
size: [100, 100],
},
{
id: 'rect2',
name: 'Rectangle',
type: TLDrawShapeType.Rectangle,
point: [200, 200],
size: [100, 100],
}
)
}, [])
return <TLDraw onMount={handleMount} />
}

View file

@ -67,7 +67,7 @@
"@tldraw/core": "^0.0.83",
"perfect-freehand": "^0.5.3",
"react-hotkeys-hook": "^3.4.0",
"rko": "^0.5.23"
"rko": "^0.5.25"
},
"gitHead": "55da8880eb3d8ab5fb62b5eb7853065922c95dcf"
}

View file

@ -6,4 +6,14 @@ describe('tldraw', () => {
test('mounts component without crashing', () => {
render(<TLDraw />)
})
test('mounts component and calls onMount', (done) => {
const onMount = jest.fn()
render(<TLDraw onMount={onMount} />)
// The call is asynchronous: it won't be called until the next tick.
setTimeout(() => {
expect(onMount).toHaveBeenCalled()
done()
}, 100)
})
})

View file

@ -52,7 +52,8 @@ export interface TLDrawProps {
export function TLDraw({ id, document, currentPageId, onMount, onChange }: TLDrawProps) {
const [sId, setSId] = React.useState(id)
const [tlstate, setTlstate] = React.useState(() => new TLDrawState(id))
const [tlstate, setTlstate] = React.useState(() => new TLDrawState(id, onChange, onMount))
const [context, setContext] = React.useState(() => ({ tlstate, useSelector: tlstate.useStore }))
React.useEffect(() => {

View file

@ -11538,10 +11538,10 @@ rko@^0.5.19:
idb-keyval "^5.1.3"
zustand "^3.5.9"
rko@^0.5.23:
version "0.5.23"
resolved "https://registry.yarnpkg.com/rko/-/rko-0.5.23.tgz#2613c05d518df71b08215bb031aa4680ede51302"
integrity sha512-u4c2n/99zE+j23WE7FoO5GA4ussYhvhZ5/fh/xJ9ctXyV6Vy+445r2jM2M2xegrCRkIw67RtPI5BmpCXZHnRxA==
rko@^0.5.25:
version "0.5.25"
resolved "https://registry.yarnpkg.com/rko/-/rko-0.5.25.tgz#1095803900e3f912f6adf8a1c113b8227d3d88bf"
integrity sha512-HU6M3PxK3VEqrr6QZKAsqO98juQX24kEgJkKSdFJhw8U/DBUGAnU/fgyxNIaTw7TCI7vjIy/RzBEXf5I4sijKg==
dependencies:
idb-keyval "^5.1.3"
zustand "^3.5.9"