# GUI
Eventually, programs will be able to use the `photon` library to have access to a graphics API.
This will initialize various [actors](/development/design/actor.md) to represent parts of the UI.

## Performance
The **GUI** is one of the systems where latency is far more important than throughput.
There are several things that aid with performance of this system:
1. Each window is drawn in a separate buffer, allowing for easy concurrency
3. Messages use the [latency bus](/development/design/actor.md#latency)
3. All draws are based on optimized and simple low-level operations
4. Only changes are re-rendered

## Drawing
When a **GUI** element wants to update, it first sends a [message](/development/design/actor.md#messages) to the `kernel`.
The `kernel` then calculates the overlaying of each window, writes each window to its own buffer, then updates the screen buffer with ones that have changed, which is then drawn to the screen.
This ensures that only necessary parts are re-rendered, and the rendering can be done asynchronously/threaded.

The `photon` library will not only provide a high-level API for applications to use, but also lower-level drawing methods for the `kernel` to use.
These may include line, rectangle, triangle, and circle drawing methods, as well as being able to render text.

### Flow
```mermaid
flowchart LR
    app(Application) --> kern(Kernel)
    kern --> buf([Buffer])
    kern --> app
    buf --> dis((Display))
```

## Styling
Styling of GUI elements is done via a global configuration.
The `kernel` parses this information, and uses it to actually style the widgets provided to it.

Widgets created by the program/library contain no styling data - only information such as text, size, callbacks, etc.
The `kernel` does all the display work.

## Design
```mermaid
erDiagram
    WINDOW ||--|{ SECTION: holds
    WINDOW ||--|| TITLE: has
    SECTION ||--|| TITLE: has
    SECTION ||--o{ SECTION: holds 
    SECTION ||--o{ CANVAS: holds
    SECTION ||--o{ TEXTBOX: holds
```