import type { IntBuffer } from "@thi.ng/pixel" ; import { sidechainPartitionRAF } from "@thi.ng/rstream/sidechain-partition" ; import { map } from "@thi.ng/transducers/map" ; import { updateDOM } from "@thi.ng/transducers-hdom" ; import { type , AppState , type , Event , SET_IMAGE , SET_KERNEL_OFFSET , SET_KERNEL_WIDTH , } from "./api" ; import { dispatch } from "./events" ; import { state } from "./state" ; /**
 * Canvas component w/ life cycle methods
 */ const canvas = < any > { init ( el , _ , pix ) { this . el = el ; this . render ( null , pix ) ; } , render ( _ , pix ) { this . el && setTimeout ( ( ) => pix . blitCanvas ( this . el ) , 0 ) ; return [ "canvas.mv3.pa1.ba" , { width : pix . width , height : pix . height , } , ] ; } , } ; /**
 * File/image chooser component w/ event dispatch
 */ const fileChooser = [ "div.mb3" , [ "label.dib.w3" , `Image:` ] , [ "input.f7" , { type : "file" , accept : "image/png, image/jpeg, image/webp" , onchange : ( e ) => dispatch ( [ SET_IMAGE , e . target . files [ 0 ] ] ) , } , ] , ] ; param eventID param label param value param opts const param = ( eventID , label , value , opts ) => [ "div" , [ "label.dib.w3" , `${ label }:` ] , [ "input.w3" , { type : "number" , value , onchange : ( e ) => dispatch ( < Event > [ eventID , parseInt ( e . target . value ) ] ) , ... opts , } , ] , ] ; param state const imageEditor = ( { destImg , threshold } ) => [ "div" , param ( SET_KERNEL_WIDTH , "Width" , threshold . windowSize , { min : 3 , max : 29 , step : 2 , } ) , param ( SET_KERNEL_OFFSET , "Offset" , threshold . offset , { min : - 20 , max : 20 , step : 1 , } ) , [ canvas , destImg ] , ] ; param state const app = ( state ) => { return [ "div" , [ "h1" , "Adaptive thresholding" ] , fileChooser , state . destImg ? imageEditor ( state ) : null , ] ; } ; sidechainPartitionRAF ( state ) . transform ( map ( app ) , updateDOM ( ) ) ;