History of UIManager (No. 1)

• History
• View the diff.
• View the diff current.
• View the source.
• Go to UIManager.
  • 1 (2024-02-10 (Sat) 09:41:51)
  • 2 (2024-02-10 (Sat) 19:20:26)

Class: UIManager

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".