-
-
Notifications
You must be signed in to change notification settings - Fork 49
/
imba.sample
55 lines (43 loc) · 1.49 KB
/
imba.sample
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
global css body m:0 p:0 rd:lg bg:yellow1 of:hidden
tag value-picker
css w:100px h:40px pos:rel
d:hgrid ji:center ai:center
css .item h:100% pos:rel tween:styles 0.1s ease-out
def update e
data = options[e.x]
<self @touch.stop.fit(0,options.length - 1,1)=update>
for item in options
<div.item[$value:{item}] .sel=(item==data)>
tag stroke-picker < value-picker
css .item bg:black w:calc($value*1px) h:40% rd:sm
o:0.3 @hover:0.8 .sel:1
tag color-picker < value-picker
css .item js:stretch rdt:lg bg:$value mx:2px scale-y.sel:1.5
tag app-canvas
prop dpr = window.devicePixelRatio
prop state = {}
def draw e
let path = e.#path ||= new Path2D
let ctx = $canvas.getContext('2d')
path.lineTo(e.x * dpr,e.y * dpr)
ctx.lineWidth = state.stroke * dpr
ctx.strokeStyle = state.color
ctx.stroke(path)
def resized e
$canvas.width = offsetWidth * dpr
$canvas.height = offsetHeight * dpr
<self @resize=resized @touch.prevent.moved.fit(self)=draw>
<canvas$canvas[pos:abs w:100% h:100%]>
const strokes = [1,2,3,5,8,12]
const colors = ['#F59E0B','#10B981','#3B82F6','#8B5CF6']
const state = {stroke: 5, color: '#3B82F6'}
tag App
<self>
<div[ta:center pt:20 o:0.2 fs:xl]> 'draw here'
<app-canvas[pos:abs inset:0] state=state>
<div.tools[pos:abs b:0 w:100% d:hgrid ja:center]>
<stroke-picker options=strokes bind=state.stroke>
<color-picker options=colors bind=state.color>
imba.mount <App[pos:abs inset:0]>
# from https://imba.io
# run online at https://scrimba.com/scrim/cPPdD4Aq