import { CircularMenu } from './CircularMenu' ; import { ChalkCursor } from './ChalkCursor' ; import { OptionManager } from './OptionManager' ; /**
 * the circular palette
 */ export class Palette extends CircularMenu { private static defaultColorSet = '["white", "yellow", "orange", "rgb(100, 172, 255)", "Crimson", "Plum", "LimeGreen", "black"]' ; /** colors that can have a chalk. The first color *must* be white */ private colors : string [ ] = eval ( Palette . defaultColorSet ) ; private currentColorID = 0 ; onchange : ( ) => void = ( ) => { } ; constructor ( ) { super ( ) ; setTimeout ( ( ) => OptionManager . string ( { name : "palette" , defaultValue : Palette . defaultColorSet , onChange : ( s ) => { this . colors = eval ( s ) ; this . _createPalette ( ) ; } } ) , 1000 ) ; this . _createPalette ( ) ; } descrition private _createPalette ( ) { this . clear ( ) ; for ( let i = 0 ; i < this . colors . length ; i ++ ) { this . addButton ( this . _createColorButton ( i ) ) ; } this . layout ( ) ; } description switchBlackAndWhite ( ) { this . colors = this . colors . map ( ( color ) => color == "white" ? "black" : color == "black" ? "white" : color ) ; this . _createPalette ( ) ; this . onchange ( ) ; } param { * } i description _createColorButton ( i ) { const img = new Image ( ) ; img . src = ChalkCursor . getCursorURL ( this . colors [ i ] ) ; img . classList . add ( "paletteColorButton" ) ; img . style . borderColor = this . colors [ i ] ; img . onclick = ( ) => { this . buttons [ this . currentColorID ] . classList . remove ( "selected" ) ; this . currentColorID = i ; this . buttons [ this . currentColorID ] . classList . add ( "selected" ) ; CircularMenu . hide ( ) ; this . onchange ( ) ; } ; return img ; } description next ( ) { this . buttons [ this . currentColorID ] . classList . remove ( "selected" ) ; this . currentColorID ++ ; this . currentColorID = this . currentColorID % this . colors . length ; this . buttons [ this . currentColorID ] . classList . add ( "selected" ) ; this . onchange ( ) ; } description previous ( ) { this . buttons [ this . currentColorID ] . classList . remove ( "selected" ) ; this . currentColorID -- ; if ( this . currentColorID < 0 ) this . currentColorID = this . colors . length - 1 ; this . buttons [ this . currentColorID ] . classList . add ( "selected" ) ; this . onchange ( ) ; } param position description show ( position ) { super . show ( position ) ; this . _createPalette ( ) ; } returns getCurrentColor ( ) { return this . colors [ this . currentColorID ] ; } }