import { Dynamic , val , applyOptions } from '../util' ; import { Visual , VisualOptions } from './visual' ; interface TextOptions extends VisualOptions { text : Dynamic < string > ; font ? : Dynamic < string > ; color ? : Dynamic < string > ; /** The text's horizontal offset from the layer */ textX ? : Dynamic < number > ; /** The text's vertical offset from the layer */ textY ? : Dynamic < number > ; maxWidth ? : Dynamic < number > ; desc see textAlign ? : Dynamic < string > ; desc see textBaseline ? : Dynamic < string > ; see textDirection ? : Dynamic < string > ; } class Text extends Visual { text : Dynamic < string > ; font : Dynamic < string > ; color : Dynamic < string > ; /** The text's horizontal offset from the layer */ textX : Dynamic < number > ; /** The text's vertical offset from the layer */ textY : Dynamic < number > ; maxWidth : Dynamic < number > ; desc see textAlign : Dynamic < string > ; desc see textBaseline : Dynamic < string > ; see textDirection : Dynamic < string > ; private _prevText : string ; private _prevFont : string ; private _prevMaxWidth : number ; /**
     * Creates a new text layer
     */ constructor ( options ) { super ( { background : null , ... options } ) ; applyOptions ( options , this ) ; } doRender ( ) { super . doRender ( ) ; const text = val ( this , 'text' , this . currentTime ) ; const font = val ( this , 'font' , this . currentTime ) ; const maxWidth = this . maxWidth ? val ( this , 'maxWidth' , this . currentTime ) : undefined ; this . cctx . font = font ; this . cctx . fillStyle = val ( this , 'color' , this . currentTime ) ; this . cctx . textAlign = val ( this , 'textAlign' , this . currentTime ) ; this . cctx . textBaseline = val ( this , 'textBaseline' , this . currentTime ) ; this . cctx . direction = val ( this , 'textDirection' , this . currentTime ) ; this . cctx . fillText ( text , val ( this , 'textX' , this . currentTime ) , val ( this , 'textY' , this . currentTime ) , maxWidth ) ; this . _prevText = text ; this . _prevFont = font ; this . _prevMaxWidth = maxWidth ; } getDefaultOptions ( ) { return { ... Visual . prototype . getDefaultOptions ( ) , background : null , text : undefined , font : '10px sans-serif' , color : '#fff' , textX : 0 , textY : 0 , maxWidth : null , textAlign : 'start' , textBaseline : 'top' , textDirection : 'ltr' } ; } } export { Text , TextOptions } ;