import { downloadWithMime } from "@thi.ng/dl-asset/raw" ; import { serialize } from "@thi.ng/hiccup/serialize" ; import { snapshot , valueSetter } from "@thi.ng/interceptors/interceptors" ; import { getInUnsafe } from "@thi.ng/paths/get-in" ; import { fromIterable } from "@thi.ng/rstream/iterable" ; import { range } from "@thi.ng/transducers/range" ; import type { AppConfig } from "./api" ; import { main } from "./components/main" ; import * as fx from "./effects" ; import * as ev from "./events" ; import * as paths from "./paths" ; import { SLIDERS } from "./sliders" ; const FG_COL = "light-silver" ; const LINK_COL = "white" ; export const CONFIG = { events : { ... SLIDERS . reduce ( ( events , spec ) => ( ( events [ spec . event ] = [ snapshot ( ) , valueSetter ( spec . path ) ] ) , events ) , { } ) , [ ev . UPDATE_SVG ] : [ valueSetter ( paths . SVG ) ] , [ ev . SAVE_SVG ] : ( state ) => ( { [ fx . SAVE_SVG ] : getInUnsafe ( state , paths . SVG ) , } ) , [ ev . SAVE_ANIM ] : ( ) => ( { [ fx . SAVE_ANIM ] : true } ) , } , effects : { [ fx . SAVE_SVG ] : ( src ) => { src = src . slice ( ) ; src [ 1 ] = { ... src [ 1 ] , width : 1000 , height : 1000 } ; downloadWithMime ( `grid-${ Date . now ( ) }.svg` , serialize ( src ) , { mime : "image/svg+xml" , } ) ; } , [ fx . SAVE_ANIM ] : ( _ , bus ) => fromIterable ( range ( 0 , 90 , 5 ) , { delay : 1000 } ) . subscribe ( { next : ( x ) => { bus . dispatch ( [ ev . SET_THETA , x ] ) ; bus . dispatchLater ( [ ev . SAVE_SVG ] ) ; } , } ) , } , rootComponent : main , domRoot : "app" , initialState : { [ paths . PARAM_BASE ] : { cols : 5 , rows : 5 , theta : 35 , stroke : 0.3 , } , } , views : { cols : paths . COLS , rows : paths . ROWS , stroke : paths . STROKE , theta : paths . THETA , svg : paths . SVG , } , ui : { button : { class : `pointer bg-${ FG_COL } hover-bg-${ LINK_COL } bg-animate black pa2 mr1 w-100 ttu b tracked-tight` , } , buttongroup : { class : "flex mb1" } , footer : { class : "absolute bottom-1" } , link : { class : `pointer link dim ${ LINK_COL } b` } , root : { class : "vw-100 vh-100 flex" } , sidebar : { root : { class : `bg-near-black pa2 pt3 w5 f7 ${ FG_COL }` } , title : { class : `mt0 ${ FG_COL }` } , } , slider : { root : { class : `mb3 ttu b tracked-tight ${ FG_COL }` } , range : { class : "w-100" } , label : { class : "pl2" } , number : { class : `fr w3 tr ttu bn bg-transparent ${ FG_COL }` } , } , } , } ;