This repository has been archived by the owner on Jul 13, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
sample.ts
114 lines (107 loc) · 2.96 KB
/
sample.ts
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import { layer } from 'tempo-paper/lib/layer'
import { adapter } from 'tempo-paper/lib/adapter'
import { component } from 'tempo-paper/lib/component'
import { iterate } from 'tempo-paper/lib/iterate'
import { path } from 'tempo-paper/lib/path'
import { CanvasState } from '../state'
import { Segment, MouseEvent, Color, Path, View, PaperScope } from 'paper'
import { Store } from 'tempo-store/lib/store'
import { reduceOnKind } from 'tempo-store/lib/reducer'
const state = {
paths: [] as Segment[][],
current: [] as Segment[]
}
type State = typeof state
type Action = {
kind: 'AddSegment'
segment: Segment
} | {
kind: 'AddPath'
}
const Action = {
addSegment(segment: Segment): Action {
return { kind: 'AddSegment', segment }
},
addPath: { kind: 'AddPath' } as Action
}
const reducer = reduceOnKind<State, Action>({
AddSegment: (state, action) => {
const current = state.current.concat([action.segment])
return {
...state,
current
}
},
AddPath: (state) => {
const project = (window.paper as PaperScope).project
const path = new Path({
segments: state.current.slice(0),
insert: false,
project
})
path.simplify(10)
const segments = path.segments!
path.remove()
return {
...state,
paths: state.paths.concat([segments]),
current: []
}
}
})
const store = Store.ofState<State, Action>({
state, reducer
})
store.observable.on((state, action) => {
// console.log(state)
})
export const template =
adapter<CanvasState, State, unknown, Action>(
{},
component<State, Action, unknown>(
{ store },
layer<State, Action, unknown, View>(
{
afterrender: (state, el, ctx) => {
// project = ctx.project // TODO dirty hack to remove
const tool = ctx.project.view // new Tool()
// tool.activate()
// const view = ctx.project.view
tool.onMouseDown = () => {}
tool.onMouseUp = () => {
store.process(Action.addPath)
}
tool.onMouseDrag = (event: MouseEvent) => {
const segment = new Segment(event.point!)
store.process(Action.addSegment(segment))
}
return tool
},
beforedestroy: (el, ctx, view) => {
if (view) {
view.onMouseDown = null
view.onMouseUp = null
view.onMouseDrag = null
}
}
},
path(
{
segments: state => state.current,
selected: true
}
),
iterate(
{ getArray: (state: State) => state.paths },
path<[Segment[], State, number], Action>(
{
segments: ([segments]) => segments,
strokeWidth: 2,
strokeColor: new Color(0.75, 0.75, 0.75),
selected: ([_, state, index]) => state.paths.length - 1 === index
}
)
)
)
)
)