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

Fix on mount

packages/core/src/components/bounds/corner-handle.tsx

@@ -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>

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"
         />
       </g>

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 <Basic />
+  return <Imperative />
 }

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<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} />
 }

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<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} />
+}

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"
 }

packages/tldraw/src/components/tldraw/tldraw.test.tsx

@@ -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)
+  })
 })

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(() => {

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"