/
CreatingState.tsx
78 lines (69 loc) · 2.03 KB
/
CreatingState.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import { TLApp, TLTargetType, TLToolState, uniqueId, GRID_SIZE } from '@tldraw/core'
import type { TLReactEventMap, TLReactEvents } from '@tldraw/react'
import Vec from '@tldraw/vec'
import { transaction } from 'mobx'
import { type Shape, LogseqPortalShape } from '../../../shapes'
import type { LogseqPortalTool } from '../LogseqPortalTool'
export class CreatingState extends TLToolState<
Shape,
TLReactEventMap,
TLApp<Shape, TLReactEventMap>,
LogseqPortalTool
> {
static id = 'creating'
creatingShape?: LogseqPortalShape
offset: number[] = [0, 0]
onEnter = () => {
this.app.history.pause()
transaction(() => {
let point = Vec.sub(this.app.inputs.originPoint, this.offset)
if (this.app.settings.snapToGrid) {
point = Vec.snap(point, GRID_SIZE)
}
const shape = new LogseqPortalShape({
id: uniqueId(),
parentId: this.app.currentPage.id,
point: point,
size: LogseqPortalShape.defaultProps.size,
fill: this.app.settings.color,
stroke: this.app.settings.color,
} as any)
this.creatingShape = shape
this.app.currentPage.addShapes(shape)
this.app.setEditingShape(shape)
this.app.setSelectedShapes([shape])
})
}
onPointerDown: TLReactEvents<Shape>['pointer'] = info => {
switch (info.type) {
case TLTargetType.Shape: {
if (info.shape === this.creatingShape) return
this.app.selectTool('select')
break
}
case TLTargetType.Selection: {
break
}
case TLTargetType.Handle: {
break
}
case TLTargetType.Canvas: {
if (!info.order) {
this.app.selectTool('select')
}
break
}
}
}
onExit = () => {
if (!this.creatingShape) return
this.app.history.resume()
if (this.creatingShape?.props.pageId) {
this.app.setSelectedShapes([this.creatingShape.id])
} else {
this.app.deleteShapes([this.creatingShape.id])
this.app.setEditingShape()
}
this.creatingShape = undefined
}
}