import { defAtom } from "@thi.ng/atom/atom" ; import { equiv } from "@thi.ng/equiv" ; import { start } from "@thi.ng/hdom/start" ; import { getIn } from "@thi.ng/paths/get-in" ; import { toDot , walk } from "@thi.ng/rstream-dot" ; import { gestureStream } from "@thi.ng/rstream-gestures" ; import { initGraph , node , node1 } from "@thi.ng/rstream-graph/graph" ; import { extract } from "@thi.ng/rstream-graph/nodes/extract" ; import { mul } from "@thi.ng/rstream-graph/nodes/math" ; import { fromRAF } from "@thi.ng/rstream/raf" ; import { choices } from "@thi.ng/transducers/choices" ; import { comp } from "@thi.ng/transducers/comp" ; import { dedupe } from "@thi.ng/transducers/dedupe" ; import { map } from "@thi.ng/transducers/map" ; import { circle } from "./circle" ; const colors = choices ( [ "bg-red" , "bg-blue" , "bg-gold" , "bg-light-green" , "bg-pink" , "bg-light-purple" , "bg-orange" , "bg-gray" , ] ) ; const db = defAtom < any > ( { } ) ; const gestures = gestureStream ( document . getElementById ( "app" ) ! ) ; const raf = fromRAF ( ) ; const graph = initGraph ( db , { mpos : { fn : extract ( [ "pos" ] ) , ins : { src : { stream : ( ) => gestures } } , outs : { "*" : "mpos" } , } , clickpos : { fn : extract ( [ "active" , 0 , "start" ] ) , ins : { src : { stream : ( ) => gestures } } , outs : { "*" : "clickpos" } , } , dist : { fn : node1 ( map ( ( gesture ) => { const delta = getIn ( gesture , [ "active" , 0 , "delta" ] ) ; return delta && Math . hypot . apply ( null , delta ) | 0 ; } ) ) , ins : { src : { stream : ( ) => gestures } } , outs : { "*" : "dist" } , } , circle : { fn : node ( map ( ( ins ) => { const { click , radius , color } = ins ; return click && radius && color ? circle ( color , click [ 0 ] , click [ 1 ] , radius * 2 ) : undefined ; } ) ) , ins : { click : { stream : "/clickpos/node" } , radius : { stream : "/radius/node" } , color : { stream : "/color/node" } , } , outs : { "*" : "circle" } , } , color : { fn : node1 ( comp ( dedupe ( equiv ) , map ( ( x ) => x && colors . next ( ) . value ) ) ) , ins : { src : { stream : "/clickpos/node" } } , outs : { "*" : "color" } , } , sine : { fn : node1 ( map ( ( x ) => 0.8 + 0.2 * Math . sin ( x * 0.05 ) ) ) , ins : { src : { stream : ( ) => raf } } , outs : { "*" : "sin" } , } , radius : { fn : mul , ins : { a : { stream : "/sine/node" } , b : { stream : "/dist/node" } , } , outs : { "*" : "radius" } , } , } ) ; start ( ( ) => [ "div" , [ "pre.absolute.top-1.left-1.pa0.ma0.z-2.f7" , JSON . stringify ( db . deref ( ) , null , 2 ) , ] , graph . circle . node , ] ) ; console . log ( toDot ( walk ( [ gestures , raf ] ) ) ) ;