import { Animation } from "./animation" ; import { ANIME , EASE_TYPE } from "../cubicons/constants" ; import { CREATE_TYPES , CREATE_SHAPE_TYPES , CREATE_LINE_TYPES , } from "../cubicons/constants" ; /**
 * Play animated creation on the screen.
 */ export class Create extends Animation { constructor ( params ) { super ( { cubicon : params . cubicon , duration : params . duration ?? ANIME . CREATE , ease : params . ease , } ) ; } play ( sleepTime ) { this . create ( this . cubicon , sleepTime ) ; } private create ( cubicon , sleepTime ) { switch ( cubicon . cubType ) { case "geometry" : { switch ( cubicon . geoType ) { case "line" : case "vector" : { this . lineCreation ( cubicon , sleepTime ) ; break ; } default : { this . shapeCreation ( cubicon , sleepTime ) ; break ; } } break ; } case "coordinate-system" : { switch ( cubicon . coordSysObjType ) { case "graph" : { this . shapeCreation ( cubicon , sleepTime ) ; break ; } default : { console . warn ( "This cubicon is not defined in CREATE_TYPES." ) ; } } break ; } } } private applyLineCreation ( selection , cubicon , sleepTime ) { const WstartPoint = cubicon . getWpoint ( cubicon . startPoint ) ; const WendPoint = cubicon . getWpoint ( cubicon . endPoint ) ; selection . attr ( "x2" , WstartPoint . x ) . attr ( "y2" , WstartPoint . y ) ; selection . transition ( ) . ease ( this . ease ) . delay ( cubicon . elapsedTime + sleepTime ) . duration ( this . duration ) . attr ( "x2" , WendPoint . x ) . attr ( "y2" , WendPoint . y ) ; } private lineCreation ( cubicon , sleepTime ) { this . applyLineCreation ( cubicon . geoType === "line" ? cubicon . def_cubiconBase : cubicon . def_lineStroke , cubicon , sleepTime ) ; cubicon . elapsedTime += this . duration + sleepTime ; if ( cubicon . geoType === "vector" ) { const drawArrowHeadAnimTime = 1500 ; cubicon . def_arrowHead . style ( "opacity" , 0 ) . transition ( ) . ease ( this . ease ) . delay ( this . cubicon . elapsedTime - 500 ) . duration ( drawArrowHeadAnimTime ) . style ( "opacity" , 1 ) ; cubicon . elapsedTime += drawArrowHeadAnimTime - 500 ; } } /**
     * Applied for all of SVG tags except `<line/>`
     *
     * Legal cubicon types:
     *
     * - Geometry(): Rectangle, Square, Circle, GridOrigin.
     * - CoordinateSystem(): Point, Graph.
     */ private shapeCreation ( cubicon , sleepTime ) { cubicon . def_cubiconBase . style ( "fill-opacity" , 0 ) ; const lineLen = this . cubicon . def_cubiconBase . node ( ) . getTotalLength ( ) ; cubicon . def_cubiconBase . attr ( "stroke-dasharray" , lineLen + ", " + lineLen ) . attr ( "stroke-dashoffset" , lineLen ) ; cubicon . def_cubiconBase . transition ( ) . ease ( this . ease ) . delay ( cubicon . elapsedTime + sleepTime ) . duration ( this . duration ) . attr ( "stroke-dashoffset" , 0 ) . style ( "fill" , cubicon . cubType === "coordinate-system" ? "none" : cubicon . fillColor ) . style ( "fill-opacity" , cubicon . cubType === "geometry" ? cubicon . fillOpacity : 1 ) ; cubicon . elapsedTime += this . duration + sleepTime ; } }