import { Transition , TransitionOptions } from "../Transition" ; export type CurtainDirection = "horizontal" | "vertical" ; export interface CurtainTransitionOptions extends TransitionOptions { direction ? : CurtainDirection ; } export class CurtainTransition extends Transition { private readonly direction : CurtainDirection ; public constructor ( { direction = "horizontal" , ... options } ) { super ( options ) ; this . direction = direction ; } public draw ( ctx , draw , width , height ) { const value = this . valueOf ( ) ; if ( this . direction === "horizontal" ) { ctx . save ( ) ; ctx . translate ( Math . round ( - width * value / 2 ) , 0 ) ; ctx . beginPath ( ) ; ctx . rect ( 0 , 0 , Math . round ( width / 2 ) , height ) ; ctx . clip ( ) ; draw ( ) ; ctx . restore ( ) ; ctx . save ( ) ; ctx . translate ( Math . round ( width * value / 2 ) , 0 ) ; ctx . beginPath ( ) ; ctx . rect ( Math . round ( width / 2 ) , 0 , Math . round ( width ) , height ) ; ctx . clip ( ) ; draw ( ) ; ctx . restore ( ) ; } else if ( this . direction === "vertical" ) { ctx . save ( ) ; ctx . translate ( 0 , Math . round ( - height * value / 2 ) ) ; ctx . beginPath ( ) ; ctx . rect ( 0 , 0 , width , Math . round ( height / 2 ) ) ; ctx . clip ( ) ; draw ( ) ; ctx . restore ( ) ; ctx . save ( ) ; ctx . translate ( 0 , Math . round ( height * value / 2 ) ) ; ctx . beginPath ( ) ; ctx . rect ( 0 , Math . round ( height / 2 ) , width , Math . round ( height / 2 ) ) ; ctx . clip ( ) ; draw ( ) ; ctx . restore ( ) ; } } }