diff --git a/packages/core/src/components/bounds/corner-handle.tsx b/packages/core/src/components/bounds/corner-handle.tsx index 6d35c9265..d5bff0fd3 100644 --- a/packages/core/src/components/bounds/corner-handle.tsx +++ b/packages/core/src/components/bounds/corner-handle.tsx @@ -37,10 +37,10 @@ export const CornerHandle = React.memo( /> diff --git a/packages/core/src/components/bounds/rotate-handle.tsx b/packages/core/src/components/bounds/rotate-handle.tsx index 42abe2a5e..53db4d120 100644 --- a/packages/core/src/components/bounds/rotate-handle.tsx +++ b/packages/core/src/components/bounds/rotate-handle.tsx @@ -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" /> diff --git a/packages/dev/src/app.tsx b/packages/dev/src/app.tsx index 934a245be..1daa04d71 100644 --- a/packages/dev/src/app.tsx +++ b/packages/dev/src/app.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import Basic from './basic' +import Imperative from './imperative' export default function App(): JSX.Element { - return + return } diff --git a/packages/dev/src/components/editor.tsx b/packages/dev/src/components/editor.tsx index 4dbbeb755..7139293af 100644 --- a/packages/dev/src/components/editor.tsx +++ b/packages/dev/src/components/editor.tsx @@ -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() 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 + return } diff --git a/packages/dev/src/imperative.tsx b/packages/dev/src/imperative.tsx new file mode 100644 index 000000000..2e67182e2 --- /dev/null +++ b/packages/dev/src/imperative.tsx @@ -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() + 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 +} diff --git a/packages/tldraw/package.json b/packages/tldraw/package.json index 26f0df777..f84292f33 100644 --- a/packages/tldraw/package.json +++ b/packages/tldraw/package.json @@ -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" -} +} \ No newline at end of file diff --git a/packages/tldraw/src/components/tldraw/tldraw.test.tsx b/packages/tldraw/src/components/tldraw/tldraw.test.tsx index 9b67d61b2..3d94e52ab 100644 --- a/packages/tldraw/src/components/tldraw/tldraw.test.tsx +++ b/packages/tldraw/src/components/tldraw/tldraw.test.tsx @@ -6,4 +6,14 @@ describe('tldraw', () => { test('mounts component without crashing', () => { render() }) + + test('mounts component and calls onMount', (done) => { + const onMount = jest.fn() + render() + // The call is asynchronous: it won't be called until the next tick. + setTimeout(() => { + expect(onMount).toHaveBeenCalled() + done() + }, 100) + }) }) diff --git a/packages/tldraw/src/components/tldraw/tldraw.tsx b/packages/tldraw/src/components/tldraw/tldraw.tsx index b7ecce6ee..1a81f491f 100644 --- a/packages/tldraw/src/components/tldraw/tldraw.tsx +++ b/packages/tldraw/src/components/tldraw/tldraw.tsx @@ -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(() => { diff --git a/yarn.lock b/yarn.lock index e2907c469..ba5421541 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"