diff options
Diffstat (limited to 'node_modules/shiki/samples/imba.sample')
| -rw-r--r-- | node_modules/shiki/samples/imba.sample | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/node_modules/shiki/samples/imba.sample b/node_modules/shiki/samples/imba.sample new file mode 100644 index 0000000..c8c5b39 --- /dev/null +++ b/node_modules/shiki/samples/imba.sample @@ -0,0 +1,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
\ No newline at end of file |