Diff of UIManager

• The added line is THIS COLOR.
• The deleted line is THIS COLOR.
• Go to UIManager.
• Deleting diff of UIManager

* Class: UIManager
#author("2024-02-10T19:20:26+00:00","","")

The `UIManager` is a singleton class manages the user interface by adding, removing, updating, focus and unfocus UI widgets.
It controlling screen fade-in/fade-out and overlayer too.
** Constructors
- ''new UIManager''(): UIManager~
The constructor.~
** Methods
- ''addNode''(node: HTMLElement, styles: string): void~
The "addNode" function appends an HTML element to the root element and applies optional CSS styles to
it.~
-- ''node'': The `node` parameter is an HTMLElement object that represents the
element you want to add to the DOM (Document Object Model). It can be any valid HTML element such as
`<div>`, `<p>`, `<span>`, etc.~
-- ''styles'': The `styles` parameter is a string that represents CSS styles that you
want to apply to the `node`. It is optional and has a default value of an empty string.~
~
- ''addWidget''(widget: UIWidget, styles: string): UIWidget~
The "addWidget" function add a UIWidget to the UIManager. It appends the node widget to the root element,
applies optional styles and returns the widget.~
-- ''widget'': The `widget` parameter is an instance of the `UIWidget` class. It
represents the widget that you want to add to the UI.~
-- ''styles'': The `styles` parameter is a string that represents the CSS styles to be
applied to the widget. It is optional and has a default value of an empty string.~
~
- ''clear''(): void~
The "clear" function remove nodes element and deletes all
widgets.~
~
- ''enableOverlayer''(enable: boolean): void~
The "enableOverlayer" function display the over-layer if enable is true, and 0 if enable is false.~
-- ''enable'': A boolean value indicating whether to enable or disable the overlayer.~
~
- ''fadeIn''(delay: number, ms: number, transitionTimingFunction: string, cb: Function): void~
The "fadeIn" function gradually increases the opacity of the fade-layer over a specified duration and
delay, using a specified transition timing function, and executes a callback function after the
animation is complete.~
-- ''delay'': The delay parameter is the amount of time in milliseconds to wait before
starting the fade-in animation.~
-- ''ms'': The `ms` parameter represents the duration of the fade-in animation in
milliseconds.~
-- ''transitionTimingFunction'': The `transitionTimingFunction` parameter is a
string that specifies the timing function to be used for the transition. It determines how the
intermediate property values are calculated during the transition. Some common values for this
parameter are:~
-- ''cb'': The `cb` parameter is a callback function that will be executed after the
fade animation is complete. It is optional and defaults to an empty arrow function `() => { }`. You
can pass a custom callback function to perform any additional actions after the fade animation
finishes.~
~
- ''fadeOut''(delay: number, ms: number, transitionTimingFunction: string, cb: Function): void~
The "fadeOut" function fades out the fade-layer over a specified duration with a specified delay and
transition timing function.~
-- ''delay'': The delay parameter is the amount of time in milliseconds to wait before
starting the fade out animation.~
-- ''ms'': The `ms` parameter represents the duration of the fade-out animation in
milliseconds.~
-- ''transitionTimingFunction'': The `transitionTimingFunction` parameter is a
string that specifies the timing function to be used for the fade-out animation. It determines how
the intermediate property values are calculated during the transition. Some common values for this
parameter are:~
-- ''cb'': The `cb` parameter is a callback function that will be executed after the
fade out animation is complete. It is an optional parameter and if not provided, a default empty
function will be used.~
~
- ''focus''(widget: UIWidget): void~
The "focus" function takes a UIWidget as a parameter, focuses the new widget, unfocuses the
currently focused widget (if any) and emits an event indicating that a widget has been focused.~
-- ''widget'': The widget to focus.~
~
- ''getWidgets''()~
The "getWidgets" function returns all active widgets.~
~
- ''removeNode''(node: HTMLElement): void~
The "removeNode" function removes a specified HTML element from the root element.~
-- ''node'': The `node` parameter is an `HTMLElement` object that represents the node
to be removed from the DOM (Document Object Model).~
~
- ''removeWidget''(widget: UIWidget): boolean~
The "removeWidget" function removes a UIWidget from the UIManager.~
-- ''widget'': The  widget to be removed from the UI.~
~
- ''setClassName''(className: string): void~
The "setClassName" function set classes to the root ui element.~
-- ''className'': A string value of space-separate list of class.~
~
- ''unfocus''(): void~
The "unfocus" function is used to remove focus from a widget and emit an event.~
~
- ''update''(ts: number): void~
The "update" function.~
-- ''ts'': The `ts` parameter stands for "timestep".~