kopia lustrzana https://github.com/Tldraw/Tldraw
117 wiersze
2.9 KiB
TypeScript
117 wiersze
2.9 KiB
TypeScript
import { Renderer, TLPointerEventHandler, TLShapeUtilsMap } from '@tldraw/core'
|
|
import { observer } from 'mobx-react-lite'
|
|
import * as React from 'react'
|
|
import { RectUtil, Shape } from './shapes'
|
|
import { Page, PageState } from './stores'
|
|
|
|
const page = new Page({
|
|
id: 'page1',
|
|
shapes: {
|
|
rect1: {
|
|
id: 'rect1',
|
|
type: 'rect',
|
|
parentId: 'page1',
|
|
name: 'Rect',
|
|
childIndex: 1,
|
|
rotation: 0,
|
|
point: [0, 0],
|
|
size: [100, 100],
|
|
},
|
|
},
|
|
bindings: {},
|
|
})
|
|
|
|
const pageState = new PageState()
|
|
|
|
const shapeUtils: TLShapeUtilsMap<Shape> = {
|
|
rect: new RectUtil(),
|
|
}
|
|
|
|
export default observer(function App() {
|
|
const onHoverShape: TLPointerEventHandler = (e) => {
|
|
pageState.setHoveredId(e.target)
|
|
}
|
|
|
|
const onUnhoverShape: TLPointerEventHandler = () => {
|
|
pageState.setHoveredId(undefined)
|
|
}
|
|
|
|
const onPointShape: TLPointerEventHandler = (info) => {
|
|
pageState.setSelectedIds(info.target)
|
|
}
|
|
|
|
const onPointCanvas: TLPointerEventHandler = () => {
|
|
pageState.clearSelectedIds()
|
|
}
|
|
|
|
const onDragShape: TLPointerEventHandler = (e) => {
|
|
page.dragShape(e.target, e.point)
|
|
}
|
|
|
|
const onPointerMove: TLPointerEventHandler = (info) => {
|
|
if (info.shiftKey) {
|
|
pageState.pan(info.delta)
|
|
}
|
|
}
|
|
|
|
const [meta] = React.useState({
|
|
isDarkMode: false,
|
|
})
|
|
|
|
const theme = React.useMemo(
|
|
() =>
|
|
meta.isDarkMode
|
|
? {
|
|
accent: 'rgb(255, 0, 0)',
|
|
brushFill: 'rgba(0,0,0,.05)',
|
|
brushStroke: 'rgba(0,0,0,.25)',
|
|
brushDashStroke: 'rgba(0,0,0,.6)',
|
|
selectStroke: 'rgb(66, 133, 244)',
|
|
selectFill: 'rgba(65, 132, 244, 0.05)',
|
|
background: 'rgb(248, 249, 250)',
|
|
foreground: 'rgb(51, 51, 51)',
|
|
}
|
|
: {
|
|
accent: 'rgb(255, 0, 0)',
|
|
brushFill: 'rgba(0,0,0,.05)',
|
|
brushStroke: 'rgba(0,0,0,.25)',
|
|
brushDashStroke: 'rgba(0,0,0,.6)',
|
|
selectStroke: 'rgb(66, 133, 244)',
|
|
selectFill: 'rgba(65, 132, 244, 0.05)',
|
|
background: 'rgb(248, 249, 250)',
|
|
foreground: 'rgb(51, 51, 51)',
|
|
},
|
|
[meta]
|
|
)
|
|
|
|
return (
|
|
<div className="tldraw">
|
|
<Renderer
|
|
shapeUtils={shapeUtils} // Required
|
|
page={page} // Required
|
|
pageState={pageState} // Required
|
|
onHoverShape={onHoverShape}
|
|
onUnhoverShape={onUnhoverShape}
|
|
onPointShape={onPointShape}
|
|
onPointCanvas={onPointCanvas}
|
|
onPointerMove={onPointerMove}
|
|
onDragShape={onDragShape}
|
|
meta={meta}
|
|
theme={theme}
|
|
id={undefined}
|
|
containerRef={undefined}
|
|
hideBounds={false}
|
|
hideIndicators={false}
|
|
hideHandles={false}
|
|
hideCloneHandles={false}
|
|
hideBindingHandles={false}
|
|
hideRotateHandles={false}
|
|
userId={undefined}
|
|
users={undefined}
|
|
snapLines={undefined}
|
|
onBoundsChange={undefined}
|
|
/>
|
|
</div>
|
|
)
|
|
})
|