import { canvas } from "@thi.ng/hdom-canvas" ; import { fit , fitClamped } from "@thi.ng/math/fit" ; import { gestureStream } from "@thi.ng/rstream-gestures" ; import { fromAtom } from "@thi.ng/rstream/atom" ; import { fromDOMEvent } from "@thi.ng/rstream/event" ; import { merge } from "@thi.ng/rstream/merge" ; import { sidechainPartitionRAF } from "@thi.ng/rstream/sidechain-partition" ; import { sync } from "@thi.ng/rstream/sync" ; import { updateDOM } from "@thi.ng/transducers-hdom" ; import { map } from "@thi.ng/transducers/map" ; import { mapIndexed } from "@thi.ng/transducers/map-indexed" ; import { WINDOW_LEN } from "./config" ; import { gui , updateGUI } from "./gui" ; import { DB } from "./state" ; const main = sync ( { src : { state : fromAtom ( DB ) , } , } ) ; const app = ( ) => { const _canvas = { ... canvas , init ( canv ) { main . add ( merge < any , any > ( { src : [ gestureStream ( canv , { } ) . subscribe ( { next ( e ) { gui . setMouse ( e . pos , e . buttons ) ; } , } ) , fromDOMEvent ( window , "resize" ) . subscribe ( { next ( ) { DB . resetIn ( [ "size" ] , [ window . innerWidth , window . innerHeight ] ) ; } , } ) , ] , } ) ) ; } , } ; return ( ) => { const width = window . innerWidth ; const height = 500 ; const iwidth = width - 10 ; updateGUI ( false ) ; updateGUI ( true ) ; return [ _canvas , { width , height , style : { background : gui . theme . globalBg , cursor : gui . cursor } , ... gui . attribs , } , gui , [ "polyline" , { stroke : "red" } , [ ... mapIndexed ( ( i , y ) => [ fit ( i , 0 , WINDOW_LEN - 1 , 10 , iwidth ) , fitClamped ( y , - 1 , 1 , 490 , 290 ) , ] , DB . value . wave ) , ] , ] , ] ; } ; } ; sidechainPartitionRAF ( main ) . transform ( map ( app ( ) ) , updateDOM ( ) ) ;