import { canvas } from "@thi.ng/hdom-canvas" ; import { HALF_PI , PI } from "@thi.ng/math/api" ; import { type , GestureEvent , gestureStream } from "@thi.ng/rstream-gestures" ; import { CloseMode } from "@thi.ng/rstream/api" ; import { StreamSync , sync } from "@thi.ng/rstream/sync" ; import { trigger } from "@thi.ng/rstream/trigger" ; import { updateDOM } from "@thi.ng/transducers-hdom" ; import { filter } from "@thi.ng/transducers/filter" ; import { map } from "@thi.ng/transducers/map" ; import { mapcat } from "@thi.ng/transducers/mapcat" ; import { normRange } from "@thi.ng/transducers/norm-range" ; import { partition } from "@thi.ng/transducers/partition" ; import { repeat } from "@thi.ng/transducers/repeat" ; import { zip } from "@thi.ng/transducers/zip" ; import { dist } from "@thi.ng/vectors/dist" ; const W = 480 ; const line = ( [ a , b ] ) => ( _ , attribs ) => [ "line" , { ... attribs , weight : dist ( a , b ) / 4 } , a , b ] ; const app = ( main ) => { const _canvas = { ... canvas , init : ( el ) => main . add ( gestureStream ( el ) . transform ( filter ( ( e ) => e . type === "start" || e . type === "drag" ) , map ( ( e ) => e . pos ) , partition ( 2 , 1 ) , map ( line ) ) , "gesture" ) , } ; return ( { gesture } ) => [ "div.sans-serif.ma2" , "Click & draw in the box below..." , [ _canvas , { class : "mv2 db" , width : W , height : W , __clear : false } , [ "rect" , { fill : "rgba(255,255,255,0.1)" , stroke : "black" , dash : [ 1 , 1 ] , } , [ 0 , 0 ] , W , W , ] , [ "g" , { lineCap : "round" } , mapcat ( ( attribs ) => map ( ( [ [ h , translate , theta ] , delta ] ) => [ gesture , { stroke : `hsl(${ h + ( delta - 0.5 ) * 40 },100%,50%)` , rotate : theta + ( delta - 0.5 ) * 0.3 , translate , } , ] , zip ( repeat ( attribs ) , normRange ( 6 ) ) ) , [ [ 30 , [ 0 , 0 ] , 0 ] , [ 120 , [ W , W ] , PI ] , [ 210 , [ W , 0 ] , HALF_PI ] , [ 300 , [ 0 , W ] , - HALF_PI ] , ] ) , ] , ] , [ "a.db.link" , { href : "https://github.com/thi-ng/umbrella/tree/develop/examples/hdom-canvas-draw" , } , "Source code" , ] , ] ; } ; const main = sync < any , any > ( { src : { trigger : trigger ( ) } , closeIn : CloseMode . NEVER , } ) ; main . transform ( map ( app ( main ) ) , updateDOM ( ) ) ;