Add imperative test, bump rko
This commit is contained in:
parent
91fe0f612a
commit
7489ee8174
8 changed files with 48 additions and 17 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 />
|
||||
}
|
||||
|
|
|
@ -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} />
|
||||
}
|
||||
|
|
29
packages/dev/src/imperative.tsx
Normal file
29
packages/dev/src/imperative.tsx
Normal 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} />
|
||||
}
|
|
@ -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"
|
||||
}
|
||||
}
|
|
@ -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(() => {
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue