mar 9 gen 2024, 16:00:03, CET
This commit is contained in:
parent
7909306d7a
commit
28b5ee16fb
3 changed files with 418 additions and 142 deletions
138
ARCHITECTURE.md
138
ARCHITECTURE.md
|
|
@ -1,8 +1,8 @@
|
|||
## High level overview
|
||||
|
||||
Under the hood every element has an id, this id allows the library to store state
|
||||
between frames.
|
||||
Elements are also cached such that when the ui tree is rebuilt at the beginning of
|
||||
between frames.
|
||||
Elements are also cached such that when the ui tree is rebuilt at the beginning of
|
||||
every frame the element data structure doesn't have to be rebuilt.
|
||||
|
||||
Elements are arranged in a tree, nodes are container elements that can contain other
|
||||
|
|
@ -11,7 +11,7 @@ elements, leafs are elements that cannot contain other elements.
|
|||
Every element has a size and a position, containers also have to keep track of their
|
||||
layout information and some other state.
|
||||
|
||||
Elements can push commands into the draw stack, which is a structure that contains
|
||||
Elements can push commands into the draw stack, which is a structure that contains
|
||||
all the draw commands that the user application has to perform do display the ui
|
||||
correctly, such commands include drawing lines, rectangles, sprites, text, etc.
|
||||
|
||||
|
|
@ -90,75 +90,59 @@ multiple +--------v---------+ |
|
|||
|
||||
### Layouting
|
||||
|
||||
```text
|
||||
parent div
|
||||
[0,0]->+------------------------------------------------+
|
||||
| |
|
||||
| |
|
||||
| |
|
||||
| |
|
||||
| |
|
||||
| |
|
||||
| |
|
||||
| space_r |
|
||||
| space_c | begin div1
|
||||
| | ----+
|
||||
| | |
|
||||
| | |
|
||||
| | |
|
||||
| | |
|
||||
| | |
|
||||
| | |
|
||||
| | |
|
||||
+------------------------------------------------+ |
|
||||
|
|
||||
|
|
||||
parent div |
|
||||
[0,0]->+----------------------+-------------------------+ |
|
||||
| | | |
|
||||
| | | |
|
||||
| | | <---+
|
||||
| div 1 | | end div1
|
||||
| | |
|
||||
| | |
|
||||
| | |
|
||||
| | |
|
||||
+----------------------+ space_r |
|
||||
| | |
|
||||
| | | begin div2
|
||||
| | | ----+
|
||||
| | | |
|
||||
| space_c | | |
|
||||
| | | |
|
||||
| | | |
|
||||
| | | |
|
||||
+----------------------+-------------------------+ |
|
||||
|
|
||||
|
|
||||
parent div |
|
||||
[0,0]->+----------------------+--------+----------------+ |
|
||||
| | | | |
|
||||
| | div 2 | | |
|
||||
| | | | |
|
||||
| div 1 +--------+ | |
|
||||
| |xxxxxxxx| | |
|
||||
| |xxxxxxxx| | <---+
|
||||
| |xxxxxxxx| | end div2
|
||||
| |xxxxxxxx| |
|
||||
+----------------------+--------+ space_r |
|
||||
| | |
|
||||
| | |
|
||||
| | |
|
||||
| | |
|
||||
| space_c | |
|
||||
| | |
|
||||
| | |
|
||||
| | |
|
||||
+-------------------------------+----------------+
|
||||
Layouting happens in a dynamic grid, when a new element is inserted in a non-floating
|
||||
manner it reserves a space in the grid, new elements are placed following this grid.
|
||||
|
||||
+-+
|
||||
|x|: Lost Space
|
||||
+-+
|
||||
Every div has two points of origin, one for the row layout and one for the column
|
||||
layout, named origin_r and origin_c respectively
|
||||
|
||||
origin_r is used when the row layout is used and it is used to position the child
|
||||
elements one next to the other, as such it always points to the top-right edge
|
||||
of the last row element
|
||||
|
||||
```text
|
||||
Layout: row
|
||||
#: lost space
|
||||
Parent div
|
||||
x---------------------------------+
|
||||
|[origin_c] |
|
||||
|[origin_r] |
|
||||
| |
|
||||
| |
|
||||
| |
|
||||
| |
|
||||
| |
|
||||
| |
|
||||
| |
|
||||
+---------------------------------+
|
||||
|
||||
Parent div
|
||||
+-----x---------------------------+
|
||||
| |[origin_r] |
|
||||
| E1 | |
|
||||
| | |
|
||||
x-----+---------------------------+
|
||||
|[origin_c] |
|
||||
| | |
|
||||
| | |
|
||||
| | |
|
||||
| | |
|
||||
| | |
|
||||
+-----+---------------------------+
|
||||
|
||||
Parent div
|
||||
+-----+----------+-----x----------+
|
||||
| | E2 | |[origin_r]|
|
||||
| E1 +----------+ | |
|
||||
| |##########| E3 | |
|
||||
+-----+##########| | |
|
||||
|################| | |
|
||||
+----------------x-----+----------+
|
||||
| [origin_c] |
|
||||
| | |
|
||||
| | |
|
||||
| | |
|
||||
+----------------+----------------+
|
||||
```
|
||||
|
||||
TODO: handle when the content overflows the div
|
||||
|
|
@ -170,6 +154,10 @@ is clipped to the view and scrollbars are shown
|
|||
- individual elements accept dimensions and the x/y coordinates could be interpreted
|
||||
as offset if the layout is row/column or absolute coordinates if the leayout is floating
|
||||
|
||||
A div can be marked resizeable or fixed, and static or dynamic. The difference being
|
||||
that resizeable adds a resize handle to the div and dynamic lets the content overflow
|
||||
causing scrollbars to be drawn
|
||||
|
||||
### Notes
|
||||
|
||||
How elements determine if they have focus or not
|
||||
|
|
@ -185,6 +173,12 @@ set has_focus property
|
|||
if(PARENT_HAS_FOCUS()) {
|
||||
update stuff
|
||||
} else {
|
||||
fast path to return
|
||||
fast path to return
|
||||
}
|
||||
```
|
||||
|
||||
How to get ids:
|
||||
1. use a name for each element
|
||||
2. supply an id for each element
|
||||
3. use a macro and the line position as id and then hash it
|
||||
4. use a macro, get the code line and hash it
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue