Feat/fix examples (#970)
This commit is contained in:
parent
4ea39a0263
commit
914de946ea
2 changed files with 59 additions and 93 deletions
|
@ -1,16 +1,21 @@
|
||||||
import { Renderer, TLPointerEventHandler } from '@tldraw/core'
|
import { Renderer, TLBinding, TLPage, TLPageState, TLPointerEventHandler } from '@tldraw/core'
|
||||||
|
import Vec from '@tldraw/vec'
|
||||||
import * as React from 'react'
|
import * as React from 'react'
|
||||||
import { RectUtil, Shape } from './shapes'
|
import { RectUtil, Shape } from './shapes'
|
||||||
import { Page, PageState } from './stores'
|
|
||||||
|
|
||||||
const page = new Page({
|
const shapeUtils = {
|
||||||
|
rect: new RectUtil(),
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const [page, setPage] = React.useState<TLPage<Shape, TLBinding>>({
|
||||||
id: 'page1',
|
id: 'page1',
|
||||||
shapes: {
|
shapes: {
|
||||||
rect1: {
|
box1: {
|
||||||
id: 'rect1',
|
id: 'box1',
|
||||||
type: 'rect',
|
type: 'rect',
|
||||||
parentId: 'page1',
|
parentId: 'page1',
|
||||||
name: 'Rect',
|
name: 'Box',
|
||||||
childIndex: 1,
|
childIndex: 1,
|
||||||
rotation: 0,
|
rotation: 0,
|
||||||
point: [0, 0],
|
point: [0, 0],
|
||||||
|
@ -18,38 +23,65 @@ const page = new Page({
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
bindings: {},
|
bindings: {},
|
||||||
})
|
})
|
||||||
|
|
||||||
const pageState = new PageState()
|
const [pageState, setPageState] = React.useState<TLPageState>({
|
||||||
|
id: 'page',
|
||||||
const shapeUtils = {
|
selectedIds: [],
|
||||||
rect: new RectUtil(),
|
hoveredId: undefined,
|
||||||
}
|
camera: {
|
||||||
|
point: [0, 0],
|
||||||
export default function App() {
|
zoom: 1,
|
||||||
|
},
|
||||||
|
})
|
||||||
const onHoverShape: TLPointerEventHandler = (e) => {
|
const onHoverShape: TLPointerEventHandler = (e) => {
|
||||||
pageState.setHoveredId(e.target)
|
setPageState({
|
||||||
|
...pageState,
|
||||||
|
hoveredId: e.target,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const onUnhoverShape: TLPointerEventHandler = () => {
|
const onUnhoverShape: TLPointerEventHandler = () => {
|
||||||
pageState.setHoveredId(undefined)
|
setPageState({
|
||||||
|
...pageState,
|
||||||
|
hoveredId: null,
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const onPointShape: TLPointerEventHandler = (info) => {
|
const onPointShape: TLPointerEventHandler = (info) => {
|
||||||
pageState.setSelectedIds(info.target)
|
setPageState({ ...pageState, selectedIds: [info.target] })
|
||||||
}
|
}
|
||||||
|
|
||||||
const onPointCanvas: TLPointerEventHandler = () => {
|
const onPointCanvas: TLPointerEventHandler = () => {
|
||||||
pageState.clearSelectedIds()
|
setPageState({ ...pageState, selectedIds: [] })
|
||||||
}
|
}
|
||||||
|
|
||||||
const onDragShape: TLPointerEventHandler = (e) => {
|
const onDragShape: TLPointerEventHandler = (e) => {
|
||||||
page.dragShape(e.target, e.point)
|
setPage((page) => {
|
||||||
|
const shape = page.shapes[e.target]
|
||||||
|
|
||||||
|
return {
|
||||||
|
...page,
|
||||||
|
shapes: {
|
||||||
|
...page.shapes,
|
||||||
|
[shape.id]: {
|
||||||
|
...shape,
|
||||||
|
point: Vec.sub(e.point, Vec.div(shape.size, 2)),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const onPointerMove: TLPointerEventHandler = (info) => {
|
const onPointerMove: TLPointerEventHandler = (info) => {
|
||||||
if (info.shiftKey) {
|
if (info.shiftKey) {
|
||||||
pageState.pan(info.delta)
|
setPageState((prev) => ({
|
||||||
|
...pageState,
|
||||||
|
camera: {
|
||||||
|
...prev.camera,
|
||||||
|
point: Vec.add(prev.camera.point, info.delta),
|
||||||
|
},
|
||||||
|
}))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,66 +0,0 @@
|
||||||
import { TLBounds, TLPage, TLPageState, Utils } from '@tldraw/core'
|
|
||||||
import Vec from '@tldraw/vec'
|
|
||||||
import type { Shape } from './shapes'
|
|
||||||
|
|
||||||
export class Page implements TLPage<Shape> {
|
|
||||||
id
|
|
||||||
name
|
|
||||||
shapes
|
|
||||||
bindings
|
|
||||||
|
|
||||||
constructor(opts = {} as TLPage<Shape>) {
|
|
||||||
const { id = Utils.uniqueId(), name = 'page', shapes = {}, bindings = {} } = opts
|
|
||||||
this.id = id
|
|
||||||
this.name = name
|
|
||||||
this.shapes = shapes
|
|
||||||
this.bindings = bindings
|
|
||||||
}
|
|
||||||
|
|
||||||
dragShape(id: string, point: number[]) {
|
|
||||||
const shape = this.shapes[id]
|
|
||||||
shape.point = Vec.sub(point, Vec.div(shape.size, 2))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export class PageState implements TLPageState {
|
|
||||||
id
|
|
||||||
selectedIds
|
|
||||||
camera
|
|
||||||
brush?: TLBounds
|
|
||||||
pointedId?: string
|
|
||||||
hoveredId?: string
|
|
||||||
editingId?: string
|
|
||||||
bindingId?: string
|
|
||||||
|
|
||||||
constructor(opts = {} as TLPageState) {
|
|
||||||
const {
|
|
||||||
id = Utils.uniqueId(),
|
|
||||||
selectedIds = [],
|
|
||||||
camera = {
|
|
||||||
point: [0, 0],
|
|
||||||
zoom: 1,
|
|
||||||
},
|
|
||||||
} = opts
|
|
||||||
this.id = id
|
|
||||||
this.camera = camera
|
|
||||||
this.selectedIds = selectedIds
|
|
||||||
}
|
|
||||||
|
|
||||||
setHoveredId = (id: string | undefined) => {
|
|
||||||
this.hoveredId = id
|
|
||||||
}
|
|
||||||
|
|
||||||
setSelectedIds = (id: string) => {
|
|
||||||
if (!this.selectedIds.includes(id)) {
|
|
||||||
this.selectedIds = [id]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
clearSelectedIds = () => {
|
|
||||||
this.selectedIds = []
|
|
||||||
}
|
|
||||||
|
|
||||||
pan = (point: number[]) => {
|
|
||||||
this.camera.point = Vec.add(this.camera.point, point)
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in a new issue