import * as PIXI from 'pixi.js' ; import { colors , styles } from '../style' ; /** Base Checkbox */ export class Checkbox extends PIXI . Container { /** Checkmark Polygon */ private static readonly CHECK_POLYGON : PIXI . Polygon = new PIXI . Polygon ( [ 8 , 8 , 12 , 8 , 16 , 12 , 20 , 12 , 24 , 8 , 28 , 8 , 28 , 12 , 24 , 16 , 24 , 20 , 28 , 24 , 28 , 28 , 24 , 28 , 20 , 24 , 16 , 24 , 12 , 28 , 8 , 28 , 8 , 24 , 12 , 20 , 12 , 16 , 8 , 12 , 8 , 8 ] ) ; /** Checkbox Graphic */ private m_Checkbox : PIXI . Graphics ; /** Checkbox Hover */ private m_Hover : PIXI . Graphics ; /** Data of Checkbox */ private m_Checked : boolean ; public constructor ( checked = false , text ? ) { super ( ) ; this . interactive = true ; this . checked = checked ; if ( text !== undefined ) { const label = new PIXI . Text ( text , styles . controls . checkbox ) ; label . position . set ( 24 , 0 ) ; this . addChild ( label ) ; } this . on ( 'pointerdown' , ( ) => { this . checked = ! this . checked ; this . emit ( 'changed' ) ; } ) ; this . on ( 'pointerover' , ( ) => { this . m_Hover . visible = true ; } ) ; this . on ( 'pointerout' , ( ) => { this . m_Hover . visible = false ; } ) ; } param checked param hover private static drawGraphic ( checked , hover , visible ) { const graphic = new PIXI . Graphics ( ) ; graphic . beginFill ( colors . controls . checkbox . background . color , colors . controls . checkbox . background . alpha ) . drawRect ( 2 , 2 , 32 , 32 ) . beginFill ( hover ? colors . controls . checkbox . hover . color : colors . controls . checkbox . background . color , hover ? colors . controls . checkbox . hover . alpha : colors . controls . checkbox . background . alpha ) . drawRoundedRect ( 0 , 0 , 36 , 36 , 10 ) . lineStyle ( { width : 2 , color : colors . controls . checkbox . checkmark . color , alpha : colors . controls . checkbox . checkmark . alpha , } ) ; if ( checked ) { graphic . beginFill ( colors . controls . checkbox . checkmark . color , colors . controls . checkbox . checkmark . alpha ) . drawPolygon ( Checkbox . CHECK_POLYGON ) ; } graphic . cacheAsBitmap = true ; graphic . scale . set ( 0.5 , 0.5 ) ; graphic . position . set ( 0 , 0 ) ; graphic . visible = visible ; return graphic ; } /** Is checkbox checked */ public get checked ( ) : boolean { return this . m_Checked ; } public set checked ( checked ) { if ( this . m_Checked !== checked ) { this . m_Checked = checked ; if ( this . m_Checkbox !== undefined ) { this . removeChild ( this . m_Checkbox ) ; } this . m_Checkbox = Checkbox . drawGraphic ( this . m_Checked , false , true ) ; this . addChild ( this . m_Checkbox ) ; if ( this . m_Hover !== undefined ) { this . removeChild ( this . m_Hover ) ; } this . m_Hover = Checkbox . drawGraphic ( this . m_Checked , true , false ) ; this . addChild ( this . m_Hover ) ; } } }