55 lines
1.5 KiB
Text
55 lines
1.5 KiB
Text
|
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
|