Unified · Split
| @@ -8,7 +8,7 @@ · 7 unmodified lines | |||
| 8 | ## Overview | 8 | ## Overview |
| 9 | The overall structure when using the library is as follows: | 9 | The overall structure when using the library is as follows: |
| 10 | ``` | 10 | ``` |
| 11 | initialize `mu_Context` | 11 | initialise `mu_Context` |
| 12 | 12 | ||
| 13 | main loop: | 13 | main loop: |
| 14 | call `mu_input_...` functions | 14 | call `mu_input_...` functions |
| @@ -19,7 +19,7 @@ main loop: · 4 unmodified lines | |||
| 19 | ``` | 19 | ``` |
| 20 | 20 | ||
| 21 | ## Getting Started | 21 | ## Getting Started |
| 22 | Before use a `mu_Context` should be initialized: | 22 | Before use a `mu_Context` should be initialised: |
| 23 | ```c | 23 | ```c |
| 24 | mu_Context *ctx = malloc(sizeof(mu_Context)); | 24 | mu_Context *ctx = malloc(sizeof(mu_Context)); |
| 25 | mu_init(ctx); | 25 | mu_init(ctx); |
| @@ -38,8 +38,8 @@ mu_begin(ctx); · 12 unmodified lines | |||
| 38 | Before any controls can be used we must begin a window using one of the | 38 | Before any controls can be used we must begin a window using one of the |
| 39 | `mu_begin_window...` or `mu_begin_popup...` functions. The `mu_Container` | 39 | `mu_begin_window...` or `mu_begin_popup...` functions. The `mu_Container` |
| 40 | for the window is expected to be either zeroed memory in which case | 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 | 41 | it will be initialised automatically when used, or to have been |
| 42 | intialized manually using the `mu_init_window()` function; once used, | 42 | initialised manually using the `mu_init_window()` function; once used, |
| 43 | the `mu_Container`'s memory must remain valid until `mu_end()` is called | 43 | the `mu_Container`'s memory must remain valid until `mu_end()` is called |
| 44 | at the end of the frame. The `mu_begin_...` window functions return a | 44 | at the end of the frame. The `mu_begin_...` window functions return a |
| 45 | truthy value if the window is open, if this is not the case we should | 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 | of which are focused, hovered, etc. These are generated either from the | 73 | of which are focused, hovered, etc. These are generated either from the |
| 74 | pointer passed to the function (eg. for treenodes, checkboxes, textboxes | 74 | pointer passed to the function (eg. for treenodes, checkboxes, textboxes |
| 75 | and sliders), or the string/icon passed to the function (eg. buttons). An | 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 | use the same label. The `mu_push_id()` and `mu_pop_id()` functions are | 77 | use the same label. The `mu_push_id()` and `mu_pop_id()` functions are |
| 78 | provided for such situations, allowing you to push additional data that | 78 | provided for such situations, allowing you to push additional data that |
| 79 | will be mixed into the unique ID: | 79 | will be mixed into the unique ID: |
| @@ -95,7 +95,7 @@ mu_end(ctx); · 15 unmodified lines | |||
| 95 | 95 | ||
| 96 | When we're ready to draw the UI the `mu_next_command()` can be used | 96 | When we're ready to draw the UI the `mu_next_command()` can be used |
| 97 | to iterate the resultant commands. The function expects a `mu_Command` | 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 | list any number of times: | 99 | list any number of times: |
| 100 | ```c | 100 | ```c |
| 101 | mu_Command *cmd = NULL; | 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 | ## Layout System | 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 | ## Style Customisation | 197 | ## Style Customisation |