import type { Fn5 } from "@thi.ng/api" ; import type { IShape } from "@thi.ng/geom-api" ; import { rect } from "@thi.ng/geom/rect" ; import type { IGridLayout , LayoutBox } from "@thi.ng/layout" ; import { ZERO2 } from "@thi.ng/vectors/api" ; import { hash } from "@thi.ng/vectors/hash" ; import type { GUITheme , Hash } from "../api.js" ; import { handleButtonKeys , hoverButton } from "../behaviors/button.js" ; import type { IMGUI } from "../gui.js" ; import { labelHash } from "../hash.js" ; import { layoutBox } from "../layout.js" ; import { textLabelRaw , textTransformH , textTransformV } from "./textlabel.js" ; const mkLabel = ( gui , tx , id , key , x , y , w , h , hover , label ) => gui . resource ( id , labelHash ( key , label , gui . disabled ) , ( ) => textLabelRaw ( ZERO2 , { transform : tx ( gui . theme , x , y , w , h ) , fill : gui . textColor ( hover ) , } , label ) ) ; export const buttonH = ( gui , layout , id , label ? , labelHover = label , info ? ) => { const { x , y , w , h } = layoutBox ( layout ) ; const key = hash ( [ x , y , w , h ] ) ; return buttonRaw ( gui , id , gui . resource ( id , key , ( ) => rect ( [ x , y ] , [ w , h ] ) ) , key , label ? mkLabel ( gui , textTransformH , id , key , x , y , w , h , false , label ) : undefined , labelHover ? mkLabel ( gui , textTransformH , id , key , x , y , w , h , true , labelHover ) : undefined , info ) ; } ; export const buttonV = ( gui , layout , id , rows , label ? , labelHover = label , info ? ) => { const { x , y , w , h } = layoutBox ( layout , [ 1 , rows ] ) ; const key = hash ( [ x , y , w , h ] ) ; return buttonRaw ( gui , id , gui . resource ( id , key , ( ) => rect ( [ x , y ] , [ w , h ] ) ) , key , label ? mkLabel ( gui , textTransformV , id , key , x , y , w , h , false , label ) : undefined , labelHover ? mkLabel ( gui , textTransformV , id , key , x , y , w , h , true , labelHover ) : undefined , info ) ; } ; export const buttonRaw = ( gui , id , shape , hash , label ? , labelHover ? , info ? ) => { gui . registerID ( id , hash ) ; const hover = hoverButton ( gui , id , shape , info ) ; const focused = gui . requestFocus ( id ) ; if ( gui . draw ) { shape . attribs = { fill : hover ? gui . fgColor ( true ) : gui . bgColor ( focused ) , stroke : gui . focusColor ( id ) , } ; gui . add ( shape ) ; label && gui . add ( hover && labelHover ? labelHover : label ) ; } if ( focused && handleButtonKeys ( gui ) ) { return true ; } gui . lastID = id ; return ! gui . buttons && gui . hotID === id && gui . activeID === id ; } ;