Unified · Split
| @@ -8,7 +8,7 @@ · 7 unmodified lines | ||
| 8 | 8 | ## Overview |
| 9 | 9 | The overall structure when using the library is as follows: |
| 10 | 10 | ``` |
| 11 | −initialize `mu_Context` | |
| 11 | +initialise `mu_Context` | |
| 12 | 12 | |
| 13 | 13 | main loop: |
| 14 | 14 | call `mu_input_...` functions |
| @@ -19,7 +19,7 @@ main loop: · 4 unmodified lines | ||
| 19 | 19 | ``` |
| 20 | 20 | |
| 21 | 21 | ## Getting Started |
| 22 | −Before use a `mu_Context` should be initialized: | |
| 22 | +Before use a `mu_Context` should be initialised: | |
| 23 | 23 | ```c |
| 24 | 24 | mu_Context *ctx = malloc(sizeof(mu_Context)); |
| 25 | 25 | mu_init(ctx); |
| @@ -38,8 +38,8 @@ mu_begin(ctx); · 12 unmodified lines | ||
| 38 | 38 | Before any controls can be used we must begin a window using one of the |
| 39 | 39 | `mu_begin_window...` or `mu_begin_popup...` functions. The `mu_Container` |
| 40 | 40 | for the window is expected to be either zeroed memory in which case |
| 41 | −it will be initialized automatically when used, or to have been | |
| 42 | −intialized manually using the `mu_init_window()` function; once used, | |
| 41 | +it will be initialised automatically when used, or to have been | |
| 42 | +initialised manually using the `mu_init_window()` function; once used, | |
| 43 | 43 | the `mu_Container`'s memory must remain valid until `mu_end()` is called |
| 44 | 44 | at the end of the frame. The `mu_begin_...` window functions return a |
| 45 | 45 | truthy value if the window is open, if this is not the case we should |
| @@ -73,7 +73,7 @@ The library generates unique IDs for controls internally to keep track · 27 unmodified lines | ||
| 73 | 73 | of which are focused, hovered, etc. These are generated either from the |
| 74 | 74 | pointer passed to the function (eg. for treenodes, checkboxes, textboxes |
| 75 | 75 | and sliders), or the string/icon passed to the function (eg. buttons). An |
| 76 | −issue arrises then if you have several buttons in a window or panel that | |
| 76 | +issue arises then if you have several buttons in a window or panel that | |
| 77 | 77 | use the same label. The `mu_push_id()` and `mu_pop_id()` functions are |
| 78 | 78 | provided for such situations, allowing you to push additional data that |
| 79 | 79 | will be mixed into the unique ID: |
| @@ -95,7 +95,7 @@ mu_end(ctx); · 15 unmodified lines | ||
| 95 | 95 | |
| 96 | 96 | When we're ready to draw the UI the `mu_next_command()` can be used |
| 97 | 97 | to iterate the resultant commands. The function expects a `mu_Command` |
| 98 | −pointer initialized to `NULL`. It is safe to iterate through the commands | |
| 98 | +pointer initialised to `NULL`. It is safe to iterate through the commands | |
| 99 | 99 | list any number of times: |
| 100 | 100 | ```c |
| 101 | 101 | mu_Command *cmd = NULL; |
| @@ -119,7 +119,79 @@ See the [`demo`](../demo) directory for a usage example. · 17 unmodified lines | ||
| 119 | 119 | |
| 120 | 120 | |
| 121 | 121 | ## Layout System |
| 122 | −*TODO* | |
| 122 | +The layout system is primarily based around *rows* — Each row | |
| 123 | +can contain a number of *items* or *columns* each column can itself | |
| 124 | +contain a number of rows and so forth. A row is initialised using the | |
| 125 | +`mu_layout_row()` function, the user should specify the number of items | |
| 126 | +on the row, an array containing the width of each item, and the height | |
| 127 | +of the row: | |
| 128 | +```c | |
| 129 | +/* intialize a row of 3 items: the first item with a width | |
| 130 | +** of 90 and the remaining two with the width of 100 */ | |
| 131 | +mu_layout_row(ctx, 3, (int[]) { 90, 100, 100 }, 0); | |
| 132 | +``` | |
| 133 | +When a row is filled the next row is started, for example, in the above | |
| 134 | +code 6 buttons immediately after would result in two rows. The function | |
| 135 | +can be called again to begin a new row. | |
| 136 | + | |
| 137 | +As well as absolute values, width and height can be specified as `0` | |
| 138 | +which will result in the Context's `style.size` value being used, or a | |
| 139 | +negative value which will size the item relative to the right/bottom edge, | |
| 140 | +thus if we wanted a row with a small button at the left, a textbox filling | |
| 141 | +most the row and a larger button at the right, we could do the following: | |
| 142 | +```c | |
| 143 | +mu_layout_row(ctx, 3, (int[]) { 30, -90, -1 }, 0); | |
| 144 | +mu_button(ctx, "X"); | |
| 145 | +mu_textbox(ctx, buf, sizeof(buf)); | |
| 146 | +mu_button(ctx, "Submit"); | |
| 147 | +``` | |
| 148 | + | |
| 149 | +If the `items` parameter is `-1`, the `widths` parameter is ignored | |
| 150 | +and controls will continue to be added to the row at the width last | |
| 151 | +specified by `mu_layout_width()` or `style.size.x` if this function has | |
| 152 | +not been called: | |
| 153 | +```c | |
| 154 | +mu_layout_row(ctx, -1, NULL, 0); | |
| 155 | +mu_layout_width(ctx, -90); | |
| 156 | +mu_textbox(ctx, buf, sizeof(buf)); | |
| 157 | +mu_layout_width(ctx, -1); | |
| 158 | +mu_button(ctx, "Submit"); | |
| 159 | +``` | |
| 160 | + | |
| 161 | +A column can be started at any point on a row using the | |
| 162 | +`mu_layout_begin_column()` function. Once begun, rows will act inside | |
| 163 | +the body of the column — all negative size values will be relative to | |
| 164 | +the column's body as opposed to the body of the container. All new rows | |
| 165 | +will be contained within this column until the `mu_layout_end_column()` | |
| 166 | +function is called. | |
| 167 | + | |
| 168 | +Internally controls use the `mu_layout_next()` function to retrieve the | |
| 169 | +next screen-positioned-Rect and advance the layout system, you should use | |
| 170 | +this function when making custom controls or if you want to advance the | |
| 171 | +layout system without placing a control. | |
| 172 | + | |
| 173 | +The `mu_layout_set_next()` function is provided to set the next layout | |
| 174 | +Rect explicitly. This will be returned by `mu_layout_next()` when it is | |
| 175 | +next called. By using the `relative` boolean you can choose to provide | |
| 176 | +a screen-space Rect or a Rect which will have the container's position | |
| 177 | +and scroll offset applied to it. You can peek the next Rect from the | |
| 178 | +layout system by using the `mu_layout_next()` function to retrieve it, | |
| 179 | +followed by `mu_layout_set_next()` to return it: | |
| 180 | +```c | |
| 181 | +mu_Rect rect = mu_layout_next(ctx); | |
| 182 | +mu_layout_set_next(ctx, rect, 0); | |
| 183 | +``` | |
| 184 | + | |
| 185 | +If you want to position controls arbitrarily inside a container the | |
| 186 | +`relative` argument of `mu_layout_set_next()` should be true: | |
| 187 | +```c | |
| 188 | +/* place a (40, 40) sized button at (300, 300) inside the container: */ | |
| 189 | +mu_layout_set_next(ctx, mu_rect(300, 300, 40, 40), 1); | |
| 190 | +mu_button(ctx, "X"); | |
| 191 | +``` | |
| 192 | +A Rect set with `relative` true will also effect the `content_size` | |
| 193 | +of the container, causing it to effect the scrollbars if it exceeds the | |
| 194 | +width or height of the container's body. | |
| 123 | 195 | |
| 124 | 196 | |
| 125 | 197 | ## Style Customisation |