import { Layout } from './Layout' ; /**
 * Generic class for creating a circular menu
 */ const RADIUSDESKTOP = 128 ; const RADIUSSMARTPHONE = 300 ; export class CircularMenu { private static allHidden = true ; private container = document . createElement ( "div" ) ; protected buttons = [ ] ; protected radius = RADIUSDESKTOP ; private readonly buttonWidth = 64 ; /**
     * immediate is by default false meaning that the menu will be added 1sec later to the DOM (it would be nice to improve that)
     * immediate = true means that the menu is added directly
     */ constructor ( immediate = false ) { this . container . classList . add ( "CircularMenu" ) ; this . container . classList . add ( "CircularMenuHide" ) ; this . container . innerHTML = "" ; if ( immediate ) document . getElementById ( "board" ) . appendChild ( this . container ) ; else setTimeout ( ( ) => document . getElementById ( "board" ) . appendChild ( this . container ) , 1000 ) ; } description clear ( ) { this . container . innerHTML = "" ; this . buttons = [ ] ; } param button description addButton ( button ) { this . buttons . push ( button ) ; this . container . appendChild ( button ) ; button . onmousedown = ( evt ) => { evt . preventDefault ( ) ; } ; button . classList . add ( "paletteColorButton" ) ; } param { src description addButtonImage ( { src , title , onclick } ) { const buttonImage = new Image ( ) ; buttonImage . src = src ; buttonImage . title = title ; this . addButton ( buttonImage ) ; buttonImage . onclick = onclick ; } description layout ( ) { for ( let i = 0 ; i < this . buttons . length ; i ++ ) { const button = this . buttons [ i ] ; const r = this . buttons . length <= 8 ? this . radius : this . radius + i * 48 / 8 ; const angle = this . buttons . length <= 8 ? - Math . PI / 2 + 2 * Math . PI * i / this . buttons . length : - Math . PI / 2 + 2 * Math . PI * Math . pow ( i , 0.8 ) / 8 ; button . style . top = ( r * Math . sin ( angle ) - 22 ) + "px" ; button . style . left = ( r * Math . cos ( angle ) - 16 ) + "px" ; } } param position description show ( position ) { CircularMenu . hide ( ) ; CircularMenu . allHidden = false ; if ( window . innerWidth <= 768 ) { position . y = Layout . STANDARDHEIGHT / 2 ; position . x = Layout . getWindowLeft ( ) + Layout . getWindowWidth ( ) / 2 ; this . radius = RADIUSSMARTPHONE ; } else { position . y = Math . min ( Layout . STANDARDHEIGHT - this . radius - this . buttonWidth , Math . max ( position . y , this . radius + 32 + this . buttonWidth ) ) ; position . x = Math . max ( position . x , this . radius + 32 + this . buttonWidth ) ; this . radius = RADIUSDESKTOP ; } this . container . style . left = position . x + "px" ; this . container . style . top = position . y + "px" ; this . container . hidden = false ; this . container . classList . remove ( "CircularMenuHide" ) ; this . container . classList . add ( "CircularMenuShow" ) ; } description static hide ( ) { if ( CircularMenu . allHidden ) return ; const menus = document . getElementsByClassName ( "CircularMenu" ) ; for ( let i = 0 ; i < menus . length ; i ++ ) { menus [ i ] . classList . remove ( "CircularMenuShow" ) ; menus [ i ] . classList . add ( "CircularMenuHide" ) ; } CircularMenu . allHidden = true ; } description static hideAndRemove ( ) { const menus = document . getElementsByClassName ( "CircularMenu" ) ; for ( let i = 0 ; i < menus . length ; i ++ ) { menus [ i ] . classList . remove ( "CircularMenuShow" ) ; menus [ i ] . classList . add ( "CircularMenuHide" ) ; ( < HTMLElement > menus [ i ] ) . hidden = true ; } CircularMenu . allHidden = true ; } description hide ( ) { this . container . classList . remove ( "CircularMenuShow" ) ; this . container . classList . add ( "CircularMenuHide" ) ; } returns static isShown ( ) { return document . getElementsByClassName ( "CircularMenuShow" ) . length > 0 ; } }