import { ANIME , EASE_TYPE } from "../cubicons/constants" ; import { MathText } from "../cubicons/text" ; import { Animation } from "./animation" ; export class Write extends Animation { constructor ( params ) { super ( { cubicon : params . cubicon , duration : params . duration ?? ANIME . CREATE , ease : params . ease , } ) ; } play ( sleepTime ) { this . writeText ( this . cubicon , sleepTime ) ; this . cubicon . elapsedTime += this . duration + sleepTime ; } private writeText ( cubicon , sleepTime ) { const options = [ cubicon , this . duration , this . ease , sleepTime ] ; const pathLengths = cubicon . def_cubiconBase . select ( "defs" ) . selectAll ( "path" ) . nodes ( ) . map ( ( d ) => d . getTotalLength ( ) ) ; const paths = cubicon . def_cubiconBase . select ( "defs" ) . selectAll ( "path" ) ; paths . call ( this . applyWriteAnimation , pathLengths , ... options ) ; const shapeLengths = cubicon . def_cubiconBase . selectAll ( "rect" ) . nodes ( ) . map ( ( d ) => d . getTotalLength ( ) ) ; const rects = cubicon . def_cubiconBase . selectAll ( "rect" ) ; rects . call ( this . applyWriteAnimation , shapeLengths , ... options ) ; } private applyWriteAnimation ( selection , lengths , cubicon , duration , ease , sleepTime ) { selection . attr ( "stroke" , cubicon . color ) . attr ( "stroke-width" , 20 ) . attr ( "fill" , cubicon . color ) . data ( lengths ) . attr ( "fill-opacity" , 0 ) . attr ( "stroke-dasharray" , ( d ) => d + ", " + d ) . attr ( "stroke-dashoffset" , ( d ) => d ) . transition ( ) . ease ( ease ) . delay ( ( d , i ) => 100 * i + cubicon . elapsedTime + sleepTime ) . duration ( duration ) . attr ( "stroke-dashoffset" , 0 ) . attr ( "fill-opacity" , 1 ) ; } }