Revert "removed tiled layout + added splitter to file browser example"

This reverts commit 5b07222968a6e0235601c1e87f1a827080f5f0f8.

Readme.md

@@ -39,7 +39,7 @@ draw the GUI.
 
 ## Gallery
 ![demo](https://cloud.githubusercontent.com/assets/8057201/10188098/1d5fe5b0-675d-11e5-83f7-967b71bbd1d4.png)
-![explorer](https://cloud.githubusercontent.com/assets/8057201/10710732/e4565e58-7a66-11e5-8dbc-56628bc9400a.png)
+![explorer](https://cloud.githubusercontent.com/assets/8057201/9937240/24f509ce-5d60-11e5-894a-e7e9e228de30.png)
 ![node](https://cloud.githubusercontent.com/assets/8057201/9976995/e81ac04a-5ef7-11e5-872b-acd54fbeee03.gif)
 
 ## Example

demo/demo.c

@@ -606,6 +606,39 @@ widget_panel(struct zr_context *panel, struct state *demo)
         zr_labelf(panel, ZR_TEXT_LEFT, "%lu", demo->progressbar);
     }
 
+    {
+        /* tiled layout  */
+        struct zr_tiled_layout tiled;
+        enum zr_layout_format fmt = (demo->scaleable) ? ZR_DYNAMIC : ZR_STATIC;
+
+        /* setup tiled window layout  */
+        zr_tiled_begin_local(&tiled, fmt, 250, 150);
+        if (!demo->scaleable) {
+            zr_tiled_slot(&tiled, ZR_SLOT_LEFT, 100, ZR_SLOT_VERTICAL, 4);
+            zr_tiled_slot(&tiled, ZR_SLOT_RIGHT, 150, ZR_SLOT_VERTICAL,  4);
+        } else {
+            zr_tiled_slot(&tiled, ZR_SLOT_LEFT, 0.50, ZR_SLOT_VERTICAL,  4);
+            zr_tiled_slot(&tiled, ZR_SLOT_RIGHT, 0.50, ZR_SLOT_VERTICAL,  4);
+        }
+        zr_tiled_end(&tiled);
+
+        /* setup widgets with tiled layout  */
+        zr_layout_row_tiled_begin(panel, &tiled);
+        {
+            zr_uint i = 0;
+            zr_layout_row_tiled_push(panel, &tiled, ZR_SLOT_LEFT, 1);
+            zr_label(panel, "Test0", ZR_TEXT_CENTERED);
+            zr_layout_row_tiled_push(panel, &tiled, ZR_SLOT_LEFT, 2);
+            zr_label(panel, "Test1", ZR_TEXT_CENTERED);
+            for (i = 0; i < 4; ++i) {
+                const char *items[] = {"item0", "item1", "item2", "item3"};
+                zr_layout_row_tiled_push(panel, &tiled, ZR_SLOT_RIGHT, i);
+                demo->list[i] = zr_button_toggle(panel, items[i], demo->list[i]);
+            }
+        }
+        zr_layout_row_tiled_end(panel);
+    }
+
     /* item selection  */
     if (!demo->scaleable) zr_layout_row_static(panel, 30, 150, 1);
     else zr_layout_row_dynamic(panel, 30, 1);

example/filex/filex.c

@@ -394,11 +394,10 @@ struct file_browser {
     struct zr_command_queue queue;
     struct zr_style config;
     struct zr_user_font font;
-    struct zr_window window;
+    struct zr_tiled_layout tiled;
-    struct zr_vec2 dir;
+    struct zr_window dir;
-    struct zr_vec2 sel;
+    struct zr_window sel;
-    zr_float ratio_dir;
+    zr_float left, center;
-    zr_float ratio_sel;
 };
 
 static void
@@ -413,7 +412,7 @@ file_browser_reload_directory_content(struct file_browser *browser, const char *
 
 static void
 file_browser_init(struct file_browser *browser, NVGcontext *vg,
-    struct zr_user_font *font, int width, int height)
+    struct zr_user_font *font)
 {
     memset(browser, 0, sizeof(*browser));
     media_init(&browser->media, vg);
@@ -424,8 +423,9 @@ file_browser_init(struct file_browser *browser, NVGcontext *vg,
         memset(&browser->input, 0, sizeof(browser->input));
         zr_command_queue_init_fixed(&browser->queue, browser->memory, MAX_COMMAND_MEMORY);
         zr_style_default(&browser->config, ZR_DEFAULT_ALL, &browser->font);
-        zr_window_init(&browser->window, zr_rect(0,0,width,height), 0, &browser->queue, &browser->config, &browser->input);
+        zr_window_init(&browser->dir, zr_rect(0,0,0,0), 0, &browser->queue, &browser->config, &browser->input);
-        browser->ratio_dir = 0.75; browser->ratio_sel = 0.25f;
+        zr_window_init(&browser->sel, zr_rect(0,0,0,0), 0, &browser->queue, &browser->config, &browser->input);
+        browser->left = 0.25; browser->center = 0.75f;
     }
     {
         /* load files and sub-directory list */
@@ -466,21 +466,39 @@ file_browser_run(struct file_browser *browser, int width, int height)
     struct zr_context context;
     struct media *media = &browser->media;
     struct icons *icons = &media->icons;
-    struct zr_rect total_space;
 
-    browser->window.bounds.w = width;
+    zr_tiled_begin(&browser->tiled,ZR_DYNAMIC,zr_rect(0,0,(zr_float)width,(zr_float)height),zr_vec2(0,0));
-    browser->window.bounds.h = height;
+    zr_tiled_slot(&browser->tiled, ZR_SLOT_LEFT, browser->left, ZR_SLOT_VERTICAL, 1);
-    zr_begin(&context, &browser->window);
+    zr_tiled_slot(&browser->tiled, ZR_SLOT_CENTER, browser->center, ZR_SLOT_VERTICAL,  1);
+    zr_tiled_end(&browser->tiled);
+
+    zr_begin_tiled(&context, &browser->sel, &browser->tiled, ZR_SLOT_LEFT, 0);
+    {
+        /* output special important directory in own window */
+        struct zr_image home = icons->home.img;
+        struct zr_image desktop = icons->desktop.img;
+        struct zr_image computer = icons->computer.img;
+
+        zr_layout_row_dynamic(&context, 40, 1);
+        zr_style_push_property(&browser->config, ZR_PROPERTY_ITEM_SPACING, zr_vec2(0, 1));
+        if (zr_button_text_image(&context, home, "home", ZR_TEXT_CENTERED, ZR_BUTTON_DEFAULT))
+            file_browser_reload_directory_content(browser, browser->home);
+        if (zr_button_text_image(&context,desktop,"desktop",ZR_TEXT_CENTERED, ZR_BUTTON_DEFAULT))
+            file_browser_reload_directory_content(browser, browser->desktop);
+        if (zr_button_text_image(&context,computer,"computer",ZR_TEXT_CENTERED,ZR_BUTTON_DEFAULT))
+            file_browser_reload_directory_content(browser, "/");
+        zr_style_pop_property(&browser->config);
+    }
+    zr_end(&context, &browser->sel);
+
+    zr_begin_tiled(&context, &browser->dir, &browser->tiled, ZR_SLOT_CENTER, 0);
     {
-        struct zr_context sub;
-        zr_float row_layout[3];
-        /* output path directory selector in the menubar */
         zr_menubar_begin(&context);
         {
+            /* output path directory selector */
             char *d = browser->directory;
             char *begin = d + 1;
             zr_layout_row_dynamic(&context, 25, 6);
-            zr_style_push_property(&browser->config, ZR_PROPERTY_ITEM_SPACING, zr_vec2(0, 4));
             while (*d++) {
                 if (*d == '/') {
                     *d = '\0';
@@ -493,57 +511,11 @@ file_browser_run(struct file_browser *browser, int width, int height)
                     begin = d + 1;
                 }
             }
-            zr_style_pop_property(&browser->config);
         }
         zr_menubar_end(&context);
 
-        /* window layout */
-        total_space = zr_space(&context);
-        row_layout[0] = (total_space.w - 8) * browser->ratio_sel;
-        row_layout[1] = 8;
-        row_layout[2] = (total_space.w - 8) * browser->ratio_dir;
-        zr_layout_row(&context, ZR_STATIC, total_space.h, 3, row_layout);
-        zr_style_push_property(&browser->config, ZR_PROPERTY_ITEM_SPACING, zr_vec2(0, 4));
-
-        /* output special important directory list in own window */
-        zr_group_begin(&context, &sub, NULL,0, browser->sel);
-        {
-            struct zr_image home = icons->home.img;
-            struct zr_image desktop = icons->desktop.img;
-            struct zr_image computer = icons->computer.img;
-
-            zr_layout_row_dynamic(&sub, 40, 1);
-            zr_style_push_property(&browser->config, ZR_PROPERTY_ITEM_SPACING, zr_vec2(0, 0));
-            if (zr_button_text_image(&sub, home, "home", ZR_TEXT_CENTERED, ZR_BUTTON_DEFAULT))
-                file_browser_reload_directory_content(browser, browser->home);
-            if (zr_button_text_image(&sub,desktop,"desktop",ZR_TEXT_CENTERED, ZR_BUTTON_DEFAULT))
-                file_browser_reload_directory_content(browser, browser->desktop);
-            if (zr_button_text_image(&sub,computer,"computer",ZR_TEXT_CENTERED,ZR_BUTTON_DEFAULT))
-                file_browser_reload_directory_content(browser, "/");
-            zr_style_pop_property(&browser->config);
-        }
-        zr_group_end(&context, &sub, &browser->sel);
-
-        {
-            /* scaler */
-            struct zr_rect bounds;
-            struct zr_input *in = &browser->input;
-            zr_layout_peek(&bounds, &context);
-            zr_spacing(&context, 1);
-            if ((zr_input_is_mouse_hovering_rect(in, bounds) ||
-                zr_input_is_mouse_prev_hovering_rect(in, bounds)) &&
-                zr_input_is_mouse_down(in, ZR_BUTTON_LEFT))
-            {
-                zr_float sel = row_layout[0] + in->mouse.delta.x;
-                zr_float dir = row_layout[2] - in->mouse.delta.x;
-                browser->ratio_sel = sel / (total_space.w - 8);
-                browser->ratio_dir = dir / (total_space.w - 8);
-            }
-        }
-
-        /* output directory content window */
-        zr_group_begin(&context, &sub, NULL, 0, browser->dir);
         {
+            /* output directory content */
             int index = -1;
             size_t i = 0, j = 0, k = 0;
             size_t rows = 0, cols = 0;
@@ -555,20 +527,21 @@ file_browser_run(struct file_browser *browser, int width, int height)
                 {
                     /* draw one row of icons */
                     size_t n = j + cols;
-                    zr_layout_row_dynamic(&sub, 120, cols);
+                    zr_layout_row_dynamic(&context, 140, cols);
+                    zr_style_push_property(&browser->config, ZR_PROPERTY_ITEM_SPACING, zr_vec2(0, 0));
                     zr_style_push_color(&browser->config, ZR_COLOR_BUTTON, zr_rgb(45, 45, 45));
                     zr_style_push_color(&browser->config, ZR_COLOR_BORDER, zr_rgb(45, 45, 45));
                     for (; j < count && j < n; ++j) {
                         if (j < browser->dir_count) {
                             /* draw and execute directory buttons */
-                            if (zr_button_image(&sub,icons->directory.img,ZR_BUTTON_DEFAULT))
+                            if (zr_button_image(&context,icons->directory.img,ZR_BUTTON_DEFAULT))
                                 index = (int)j;
                         } else {
                             /* draw and execute files buttons */
                             struct icon *icon;
                             size_t fileIndex = ((size_t)j - browser->dir_count);
                             icon = media_icon_for_file(media,browser->files[fileIndex]);
-                            if (zr_button_image(&sub, icon->img, ZR_BUTTON_DEFAULT)) {
+                            if (zr_button_image(&context, icon->img, ZR_BUTTON_DEFAULT)) {
                                 strncpy(browser->file, browser->directory, MAX_PATH_LEN);
                                 n = strlen(browser->file);
                                 strncpy(browser->file + n, browser->files[fileIndex], MAX_PATH_LEN - n);
@@ -578,19 +551,22 @@ file_browser_run(struct file_browser *browser, int width, int height)
                     }
                     zr_style_pop_color(&browser->config);
                     zr_style_pop_color(&browser->config);
+                    zr_style_pop_property(&browser->config);
                 }
                 {
                     /* draw one row of labels */
                     size_t n = k + cols;
-                    zr_layout_row_dynamic(&sub, 20, cols);
+                    zr_layout_row_dynamic(&context, 20, cols);
+                    zr_style_push_property(&browser->config, ZR_PROPERTY_ITEM_SPACING, zr_vec2(0, 0));
                     for (; k < count && k < n; k++) {
                         if (k < browser->dir_count) {
-                            zr_label(&sub, browser->directories[k], ZR_TEXT_CENTERED);
+                            zr_label(&context, browser->directories[k], ZR_TEXT_CENTERED);
                         } else {
                             size_t t = k-browser->dir_count;
-                            zr_label(&sub,browser->files[t],ZR_TEXT_CENTERED);
+                            zr_label(&context,browser->files[t],ZR_TEXT_CENTERED);
                         }
                     }
+                    zr_style_pop_property(&browser->config);
                 }
             }
 
@@ -605,10 +581,8 @@ file_browser_run(struct file_browser *browser, int width, int height)
                 file_browser_reload_directory_content(browser, browser->directory);
             }
         }
-        zr_group_end(&context, &sub, &browser->dir);
-        zr_style_pop_property(&browser->config);
     }
-    zr_end(&context, &browser->window);
+    zr_end(&context, &browser->dir);
     return 1;
 }
 /* =================================================================
@@ -837,7 +811,7 @@ main(int argc, char *argv[])
     font.userdata.ptr = vg;
     nvgTextMetrics(vg, NULL, NULL, &font.height);
     font.width = font_get_width;
-    file_browser_init(&browser, vg, &font, width, height);
+    file_browser_init(&browser, vg, &font);
 
     while (running) {
         /* Input */

zahnrad.c

@@ -4924,6 +4924,156 @@ zr_style_reset(struct zr_style *style)
     zr_style_reset_colors(style);
     zr_style_reset_properties(style);
 }
+/*
+ * ==============================================================
+ *
+ *                          Tiling
+ *
+ * ===============================================================
+ */
+void
+zr_tiled_begin_local(struct zr_tiled_layout *layout, enum zr_layout_format fmt,
+    zr_float width, zr_float height)
+{
+    ZR_ASSERT(layout);
+    if (!layout) return;
+    zr_zero(layout->slots, sizeof(layout->slots));
+    layout->fmt = fmt;
+    layout->bounds.w = width;
+    layout->bounds.h = height;
+    layout->spacing = zr_vec2(0,0);
+}
+
+void
+zr_tiled_begin(struct zr_tiled_layout *layout, enum zr_layout_format fmt,
+    struct zr_rect bounds, struct zr_vec2 spacing)
+{
+    ZR_ASSERT(layout);
+    if (!layout) return;
+    zr_zero(layout->slots, sizeof(layout->slots));
+    layout->fmt = fmt;
+    layout->bounds = bounds;
+    layout->spacing = spacing;
+}
+
+void
+zr_tiled_begin_inside(struct zr_tiled_layout *parent, struct zr_tiled_layout *child,
+    enum zr_layout_format fmt, enum zr_tiled_layout_slot_index slot, zr_uint index)
+{
+    struct zr_rect bounds;
+    ZR_ASSERT(parent);
+    ZR_ASSERT(child);
+    zr_tiled_bounds(&bounds, parent, slot, index);
+    child->fmt = fmt;
+    child->bounds = bounds;
+    child->spacing = parent->spacing;
+}
+
+void
+zr_tiled_slot(struct zr_tiled_layout *layout,
+    enum zr_tiled_layout_slot_index slot, zr_float ratio,
+    enum zr_tiled_slot_format fmt, zr_uint widget_count)
+{
+    ZR_ASSERT(layout);
+    if (!layout) return;
+    layout->slots[slot].capacity = widget_count;
+    layout->slots[slot].format = fmt;
+    layout->slots[slot].value = ratio;
+}
+
+void
+zr_tiled_slot_bounds(struct zr_rect *bounds,
+    const struct zr_tiled_layout *layout, enum zr_tiled_layout_slot_index slot)
+{
+    const struct zr_tiled_slot *s;
+    ZR_ASSERT(layout);
+    if (!layout) return;
+
+    s = &layout->slots[slot];
+    if (layout->fmt == ZR_DYNAMIC) {
+        bounds->x = layout->bounds.x + s->pos.x * (zr_float)layout->bounds.w;
+        bounds->y = layout->bounds.y + s->pos.y * (zr_float)layout->bounds.h;
+        bounds->w = s->size.x * (zr_float)layout->bounds.w;
+        bounds->h = s->size.y * (zr_float)layout->bounds.h;
+    } else {
+        bounds->x = layout->bounds.x + s->pos.x;
+        bounds->y = layout->bounds.y + s->pos.y;
+        bounds->w = s->size.x;
+        bounds->h = s->size.y;
+    }
+}
+
+void
+zr_tiled_bounds(struct zr_rect *bounds, const struct zr_tiled_layout *layout,
+    enum zr_tiled_layout_slot_index slot, zr_uint index)
+{
+    struct zr_rect slot_bounds;
+    const struct zr_tiled_slot *s;
+    ZR_ASSERT(layout);
+    if (!layout) return;
+
+    ZR_ASSERT(slot < ZR_SLOT_MAX);
+    s = &layout->slots[slot];
+    ZR_ASSERT(index < s->capacity);
+    zr_tiled_slot_bounds(&slot_bounds, layout, slot);
+
+    if (s->format == ZR_SLOT_HORIZONTAL) {
+        slot_bounds.h -= (2 * layout->spacing.y);
+        slot_bounds.w -= (zr_float)s->capacity * layout->spacing.x;
+
+        bounds->h = slot_bounds.h;
+        bounds->y = slot_bounds.y;
+        bounds->w = slot_bounds.w / (zr_float)s->capacity;
+        bounds->x = slot_bounds.x + (zr_float)index * bounds->w;
+    } else {
+        bounds->x = slot_bounds.x + layout->spacing.x;
+        bounds->w = slot_bounds.w - (2 * layout->spacing.x);
+        bounds->h = (slot_bounds.h - (zr_float)s->capacity * layout->spacing.y);
+        bounds->h /= (zr_float)s->capacity;
+        bounds->y = slot_bounds.y + (zr_float)index * bounds->h;
+        bounds->y += ((zr_float)index * layout->spacing.y);
+    }
+}
+
+void
+zr_tiled_end(struct zr_tiled_layout *layout)
+{
+    zr_float w;
+    zr_float centerh, centerv;
+    const struct zr_tiled_slot *top, *bottom;
+    const struct zr_tiled_slot *left, *right;
+    ZR_ASSERT(layout);
+    if (!layout) return;
+
+    top = &layout->slots[ZR_SLOT_TOP];
+    bottom = &layout->slots[ZR_SLOT_BOTTOM];
+    left = &layout->slots[ZR_SLOT_LEFT];
+    right = &layout->slots[ZR_SLOT_RIGHT];
+
+    if (layout->fmt == ZR_DYNAMIC) {
+        w = 1.0f;
+        centerh = MAX(0.0f, 1.0f - (left->value + right->value));
+        centerv = MAX(0.0f, 1.0f - (top->value + bottom->value));
+    } else {
+        w = layout->bounds.w;
+        centerh = MAX(0.0f, layout->bounds.w - (left->value + right->value));
+        centerv = MAX(0.0f, layout->bounds.h - (top->value + bottom->value));
+    }
+
+    /* calculate the slot size */
+    layout->slots[ZR_SLOT_CENTER].size = zr_vec2(centerh, centerv);
+    layout->slots[ZR_SLOT_TOP].size = zr_vec2(w, top->value);
+    layout->slots[ZR_SLOT_LEFT].size = zr_vec2(left->value, centerv);
+    layout->slots[ZR_SLOT_BOTTOM].size = zr_vec2(w, bottom->value);
+    layout->slots[ZR_SLOT_RIGHT].size = zr_vec2(right->value, centerv);
+
+    /* calculate the slot window position */
+    layout->slots[ZR_SLOT_TOP].pos = zr_vec2(0.0f, 0.0f);
+    layout->slots[ZR_SLOT_LEFT].pos = zr_vec2(0.0f, top->value);
+    layout->slots[ZR_SLOT_BOTTOM].pos = zr_vec2(0.0f, top->value + centerv);
+    layout->slots[ZR_SLOT_RIGHT].pos = zr_vec2(left->value + centerh, top->value);
+    layout->slots[ZR_SLOT_CENTER].pos = zr_vec2(left->value, top->value);
+}
 /*
  * ==============================================================
  *
@@ -5165,6 +5315,32 @@ zr_begin(struct zr_context *context, struct zr_window *window)
     return ret;
 }
 
+zr_flags
+zr_begin_tiled(struct zr_context *context, struct zr_window *window,
+    struct zr_tiled_layout *tiled, enum zr_tiled_layout_slot_index slot,
+    zr_uint index)
+{
+    zr_flags ret = 0;
+    ZR_ASSERT(context);
+    ZR_ASSERT(window);
+    ZR_ASSERT(tiled);
+    ZR_ASSERT(slot < ZR_SLOT_MAX);
+    ZR_ASSERT(index < tiled->slots[slot].capacity);
+    if (!context || !window || !tiled) return ret;
+
+    /* make sure that correct flags are set */
+    window->flags &= (zr_flags)~ZR_WINDOW_MOVEABLE;
+    window->flags &= (zr_flags)~ZR_WINDOW_SCALEABLE;
+    window->flags &= (zr_flags)~ZR_WINDOW_DYNAMIC;
+
+    /* place window inside layout and set window to background  */
+    zr_tiled_bounds(&window->bounds, tiled, slot, index);
+    ret = zr_begin(context, window);
+    zr_command_queue_remove(window->queue, &window->buffer);
+    zr_command_queue_insert_front(window->queue, &window->buffer);
+    return ret;
+}
+
 zr_flags
 zr_end(struct zr_context *layout, struct zr_window *window)
 {
@@ -6014,6 +6190,56 @@ zr_layout_row_space_end(struct zr_context *layout)
         zr_command_buffer_push_scissor(layout->buffer, layout->clip);
 }
 
+void
+zr_layout_row_tiled_begin(struct zr_context *layout,
+    struct zr_tiled_layout *tiled)
+{
+    const struct zr_style *config;
+    struct zr_vec2 padding;
+    struct zr_vec2 spacing;
+    ZR_ASSERT(layout);
+    if (!layout) return;
+    if (!layout->valid) return;
+
+    zr_panel_layout(layout, tiled->bounds.h, 2);
+    layout->row.type = (tiled->fmt == ZR_STATIC) ?
+        ZR_LAYOUT_STATIC_TILED: ZR_LAYOUT_DYNAMIC_TILED;
+
+    config = layout->style;
+    padding = config->properties[ZR_PROPERTY_PADDING];
+    spacing = config->properties[ZR_PROPERTY_ITEM_SPACING];
+
+    tiled->spacing = spacing;
+    tiled->bounds.x = layout->at_x + padding.x - layout->offset.x;
+    tiled->bounds.y = layout->at_y - layout->offset.y;
+    if (tiled->fmt == ZR_DYNAMIC)
+        tiled->bounds.w = layout->width - (2 * padding.x);
+}
+
+void
+zr_layout_row_tiled_push(struct zr_context *layout, struct zr_tiled_layout *tiled,
+    enum zr_tiled_layout_slot_index slot, zr_uint index)
+{
+    ZR_ASSERT(layout);
+    ZR_ASSERT(layout->style);
+    ZR_ASSERT(layout->buffer);
+    if (!layout) return;
+    if (!layout->valid) return;
+    zr_tiled_bounds(&layout->row.item, tiled, slot, index);
+}
+
+void
+zr_layout_row_tiled_end(struct zr_context *layout)
+{
+    ZR_ASSERT(layout);
+    ZR_ASSERT(layout->style);
+    if (!layout) return;
+    if (!layout->valid) return;
+
+    zr_zero(&layout->row.item, sizeof(layout->row.item));
+    layout->row.columns = 0;
+}
+
 static void
 zr_panel_alloc_row(struct zr_context *layout)
 {
@@ -6068,6 +6294,18 @@ zr_layout_widget_space(struct zr_rect *bounds, struct zr_context *layout,
             layout->row.index = 0;
         }
     } break;
+    case ZR_LAYOUT_STATIC_TILED:
+    case ZR_LAYOUT_DYNAMIC_TILED: {
+        /* dynamic tiled layout widget placing */
+        bounds->x = layout->row.item.x;
+        bounds->y = layout->row.item.y;
+        bounds->w = layout->row.item.w;
+        bounds->h = layout->row.item.h;
+        layout->row.index = 0;
+        if (((bounds->x + bounds->w + layout->offset.x) > layout->max_x) && modify)
+            layout->max_x = bounds->x + bounds->w + layout->offset.x;
+        return;
+    } break;
     case ZR_LAYOUT_DYNAMIC_FREE: {
         /* panel width depended free widget placing */
         bounds->x = layout->at_x + (layout->width * layout->row.item.x);

zahnrad.h

@@ -851,7 +851,10 @@ const struct zr_command *zr_command_buffer_next(struct zr_command_buffer*,
 
     Internally the command queue has a list of command buffers which can be
     modified to create a certain sequence, for example the `zr_begin`
-    function changes the list to create overlapping windows.
+    function changes the list to create overlapping windows, while `zr_begin_tiled`
+    always draws all its windows in the background by pushing its buffers to the
+    beginning of the list.
+
     USAGE
     ----------------------------
     The command queue owns a memory buffer internaly that needs to be initialized
@@ -2498,6 +2501,161 @@ void zr_style_reset(struct zr_style*);
     Input:
     - Configuration structure to pop the change from and to
 */
+/*
+ * ==============================================================
+ *
+ *                          Tiling
+ *
+ * ===============================================================
+    TILING
+    ----------------------------
+    Tiling provides a way to divide a space into fixed slots which again can be
+    divided into either horizontal or vertical spaces. The tiled layout consists
+    of five slots (Top, Left, Center, Right and Bottom) what is also known
+    as a Border layout. Since slots can either be filled or empty, horizontally or
+    vertically fillable, have either none, one or many subspaces and can even
+    have a tiled layout inside it is possible to achive a great number of layout.
+
+    In addition it is possible to define the space inside the tiled layout either
+    in pixel or as a ratio. Ratio based layout are great for scaling but
+    are less usefull in cases where scaling destroys the UI. Pixel based layouts
+    provided a layout which always look the same but are less flexible.
+
+    The tiled layout is used in the library inside windows as a widget layout
+    and for window placing inside the screen with each case having its own functions
+    to handle and use the tiled layout.
+
+    USAGE
+    ----------------------------
+    To use the tiled layout you have to define which slot inside the layout
+    should be active, how the slot should be filled and how much space the
+    it takes. To define each slot you first have to call `zr_tiled_begin`
+    to start the layout slot definiton and to end the definition
+    the corresponding function `zr_tiled_end` has to be called.
+    Between both sequence points you can define each slot with `zr_tiled_slot`.
+
+    -----------------------------
+    |           TOP             |
+    -----------------------------
+    |       |           |       |
+    | LEFT  |   CENTER  | RIGHT |
+    |       |           |       |
+    -----------------------------
+    |           BOTTOM          |
+    -----------------------------
+
+    Tiling API
+    zr_tiled_begin      -- starts the definition of a tiled layout
+    zr_tiled_begin_local-- starts the definition inside the first depth of a window
+    zr_tiled_slot       -- activates and setups a slot inside the tile layout
+    zr_tiled_end        -- ends the definiition of the tiled layout slots
+    zr_tiled_slot_bounds-- returns the bounds of a slot in the tiled layout
+    zr_tiled_bounds     -- returns the bounds of a widget in the tiled layout
+    zr_tiled_load       -- loads another tiled layout from slot
+*/
+enum zr_tiled_layout_slot_index {
+    ZR_SLOT_TOP,
+    ZR_SLOT_BOTTOM,
+    ZR_SLOT_LEFT,
+    ZR_SLOT_CENTER,
+    ZR_SLOT_RIGHT,
+    ZR_SLOT_MAX
+};
+
+enum zr_layout_format {
+    ZR_DYNAMIC, /* row layout which scales with the window */
+    ZR_STATIC /* row layout with fixed pixel width */
+};
+
+enum zr_tiled_slot_format {
+    ZR_SLOT_HORIZONTAL,
+    /* widgets in slots are added left to right */
+    ZR_SLOT_VERTICAL
+    /* widgets in slots are added top to bottom */
+};
+
+struct zr_tiled_slot {
+    zr_uint capacity;
+    /* number of widget inside the slot */
+    zr_float value;
+    /* temp value for layout build up */
+    struct zr_vec2 size;
+    /* horizontal and vertical window (ratio/width) */
+    struct zr_vec2 pos;
+    /* position of the slot in the window */
+    enum zr_tiled_slot_format format;
+    /* layout filling format  */
+};
+
+struct zr_tiled_layout {
+    struct zr_tiled_slot slots[ZR_SLOT_MAX];
+    /* tiled layout slots */
+    enum zr_layout_format fmt;
+    /* row layout format */
+    struct zr_rect bounds;
+    /* bounding rect of the layout */
+    struct zr_vec2 spacing;
+};
+
+void zr_tiled_begin(struct zr_tiled_layout*, enum zr_layout_format,
+                    struct zr_rect bounds, struct zr_vec2 spacing);
+/*  this functions begins the definitions of a tiled layout
+    Input:
+    - layout format with either dynamic ratio based or fixed pixel based slots
+    - pixel position and size of a window inside the screen
+    - spacing between slot entries
+*/
+void zr_tiled_begin_local(struct zr_tiled_layout*, enum zr_layout_format,
+                        zr_float width, zr_float height);
+/*  this functions begins the definitions of a tiled local layout.
+ *  IMPORTANT:  is only used for the first depth of a tiled window widget layout
+                all other types of tiled layouts need to use `zr_tiled_begin`.
+    Input:
+    - layout format with either dynamic ratio based or fixed pixel based slots
+    - pixel width of the tiled layout space (IMPORTANT: not used for dynamic tiled layouts)
+    - pixel height of the tiled layout space
+*/
+void zr_tiled_begin_inside(struct zr_tiled_layout *parent, struct zr_tiled_layout *child,
+                            enum zr_layout_format fmt, enum zr_tiled_layout_slot_index slot,
+                            zr_uint index);
+/*  this functions load a tiled layout from another tiled layout slot
+    Input:
+    - slot filling format with either horizontal or vertical filling
+    - slot identifier
+    - index of the widget inside the slot
+    Output:
+    - loaded child tiled layout inside the parent tiled layout
+*/
+void zr_tiled_slot(struct zr_tiled_layout *layout,
+                    enum zr_tiled_layout_slot_index, zr_float ratio,
+                    enum zr_tiled_slot_format, zr_uint widget_count);
+/*  this functions defines a slot in the tiled layout which then can be filled
+ *  with widgets
+    Input:
+    - slot identifier
+    - either ratio or pixel size of the slot
+    - slot filling format with either horizontal or vertical filling
+    - number of widgets inside the slot
+*/
+void zr_tiled_end(struct zr_tiled_layout*);
+/*  this functions ends the definitions of the tiled layout slots */
+void zr_tiled_slot_bounds(struct zr_rect*, const struct zr_tiled_layout*,
+                            enum zr_tiled_layout_slot_index);
+/*  this functions queries the bounds (position + size) of a tiled layout slot
+    Input:
+    - slot identifier
+    Output:
+    - rectangle with position and size of the slot
+*/
+void zr_tiled_bounds(struct zr_rect*, const struct zr_tiled_layout*,
+                        enum zr_tiled_layout_slot_index, zr_uint);
+/*  this functions queries the bounds (position + size) of a tiled layout slot entry
+    Input:
+    - slot identifier
+    - index of the widget inside the slot
+    Output:
+    - rectangle with position and size of the slot entry
+*/
 /*
  * ==============================================================
  *
@@ -2648,11 +2806,6 @@ zr_bool zr_window_is_minimized(struct zr_window*);
     zr_queue   -- returns the queue of the window
     zr_space   -- returns the drawable space inside the window
 */
-enum zr_layout_format {
-    ZR_DYNAMIC, /* row layout which scales with the window */
-    ZR_STATIC /* row layout with fixed pixel width */
-};
-
 enum zr_widget_states {
     ZR_INACTIVE = zr_false,
     ZR_ACTIVE = zr_true
@@ -2680,6 +2833,8 @@ enum zr_row_layout_type {
     /* immediate mode widget specific widget width ratio layout */
     ZR_LAYOUT_DYNAMIC_FREE,
     /* free ratio based placing of widget in a local space  */
+    ZR_LAYOUT_DYNAMIC_TILED,
+    /* dynamic Border layout */
     ZR_LAYOUT_DYNAMIC,
     /* retain mode widget specific widget ratio width*/
     ZR_LAYOUT_STATIC_FIXED,
@@ -2688,6 +2843,8 @@ enum zr_row_layout_type {
     /* immediate mode widget specific widget pixel width layout */
     ZR_LAYOUT_STATIC_FREE,
     /* free pixel based placing of widget in a local space  */
+    ZR_LAYOUT_STATIC_TILED,
+    /* static Border layout */
     ZR_LAYOUT_STATIC
     /* retain mode widget specific widget pixel width layout */
 };
@@ -2771,8 +2928,19 @@ zr_flags zr_begin(struct zr_context*, struct zr_window*);
     - window context to fill up with widgets
     - ZR_WINDOW_MOVABLE if window was moved
 */
+zr_flags zr_begin_tiled(struct zr_context*, struct zr_window*, struct zr_tiled_layout*,
+                    enum zr_tiled_layout_slot_index slot, zr_uint index);
+/*  this function begins the window build up process by creating a context to fill
+    and placing the window inside a tiled layout on the screen.
+    Input:
+    - input structure holding all user generated state changes
+    Output:
+    - window context to fill up with widgets
+    - ZR_WINDOW_MOVABLE if window was moved
+*/
 zr_flags zr_end(struct zr_context*, struct zr_window*);
-/*  this function ends the window layout build up process and updates the window.
+/*  this function ends the window layout build up process and updates the window
+    and placing the window inside a tiled layout on the screen.
     Output:
     - ZR_WINDOW_SCALEABLE if window was scaled
 */
@@ -2917,6 +3085,9 @@ void zr_menubar_end(struct zr_context*);
     the window and directly positioning each widget with position and size.
     This requires the least amount of work for the API and the most for the user,
     but offers the most positioning freedom.
+    The final row layout is a tiled layout which divides a space in the panel
+    into a Top, Left, Center, Right and Bottom slot. Each slot can be filled
+    with widgets either horizontally or vertically.
 
     fixed width widget layout API
     zr_layout_row_dynamic              -- scaling fixed column row layout
@@ -2928,6 +3099,11 @@ void zr_menubar_end(struct zr_context*);
     zr_layout_row_push                 -- pushes the next widget width
     zr_layout_row_end                  -- ends the row build up process
 
+    tiled layout widget placing API
+    zr_layout_row_tiled_begin          -- begins tiled layout based placing of widgets
+    zr_layout_row_tiled_push           -- pushes a widget into a slot in the tiled layout
+    zr_layout_row_tiled_end            -- ends tiled layout based placing of widgets
+
     custom widget placing API
     zr_layout_row_space_begin          -- creates a free placing space in the window
     zr_layout_row_space_push           -- pushes a widget into the space
@@ -3045,6 +3221,21 @@ struct zr_rect zr_layout_row_space_rect_to_local(struct zr_context*, struct zr_r
 */
 void zr_layout_row_space_end(struct zr_context*);
 /*  this functions finishes the scaleable space filling process */
+/* ------------------------------ Tiled ----------------------------------- */
+void zr_layout_row_tiled_begin(struct zr_context*, struct zr_tiled_layout*);
+/*  this functions begins the tiled layout
+    Input:
+    - row height of the complete layout to allocate from the window
+*/
+void zr_layout_row_tiled_push(struct zr_context*, struct zr_tiled_layout*,
+                            enum zr_tiled_layout_slot_index, zr_uint index);
+/*  this functions pushes a widget into a tiled layout slot
+    Input:
+    - slot identifier
+    - widget index in the slot
+*/
+void zr_layout_row_tiled_end(struct zr_context*);
+/*  this functions ends the tiled layout */
 /* ------------------------------ Tree ----------------------------------- */
 zr_bool zr_layout_push(struct zr_context*, enum zr_layout_node_type,
                         const char *title, zr_state*);