import { defAtom } from "@thi.ng/atom/atom" ; import { equivArrayLike } from "@thi.ng/equiv" ; import { circle } from "@thi.ng/hiccup-svg/circle" ; import { line } from "@thi.ng/hiccup-svg/line" ; import { svg } from "@thi.ng/hiccup-svg/svg" ; import { $compile } from "@thi.ng/rdom/compile" ; import { $list } from "@thi.ng/rdom/list" ; import { fromAtom } from "@thi.ng/rstream/atom" ; import { indexed } from "@thi.ng/transducers/indexed" ; import { partition } from "@thi.ng/transducers/partition" ; import { repeatedly } from "@thi.ng/transducers/repeatedly" ; import { random2 } from "@thi.ng/vectors/random" ; const WIDTH = 600 ; const NUM = 10 ; const R = 20 ; const db = defAtom ( [ ... repeatedly ( ( ) => random2 ( [ ] , R , WIDTH - R ) , NUM ) ] ) ; let clicked = - 1 ; $compile ( svg ( { width : WIDTH , height : WIDTH , viewBox : `0 0 ${ WIDTH } ${ WIDTH }` , onmousemove : ( e ) => clicked !== - 1 && db . resetIn ( [ clicked ] , [ e . clientX , e . clientY ] ) , onmouseup : ( ) => ( clicked = - 1 ) , ondblclick : ( e ) => db . swap ( ( pts ) => [ ... pts , [ e . clientX , e . clientY ] ] ) , } , $list ( fromAtom ( db ) . map ( ( pts ) => [ ... partition ( 2 , 1 , pts ) ] ) , "g" , { stroke : "#00f" } , ( [ a , b ] ) => line ( a , b ) , equivArrayLike ) , $list ( fromAtom ( db ) . map ( ( pts ) => [ ... indexed ( 0 , pts ) ] ) , "g" , { fill : "#00f" } , ( [ i , p ] ) => circle ( p , R , { onmousedown : ( e ) => { clicked = i ; db . resetIn ( [ i ] , [ e . clientX , e . clientY ] ) ; } , } ) , equivArrayLike ) ) ) . mount ( document . getElementById ( "app" ) ! ) ;