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"