alema
/
ugui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

work on div sliders, major changes

Browse Source 
* Ids are now keyed based on the parent's id, this means that an element can have
  the same label when placed in different divs
* Divs now enable the scissor test, this way the elements cannot draw outside of
  the parent div bounds
* Introduced a LAYOUT_ABSOLUTE that disables all layout logic, for internal use
* Divs now draw scrollbars using the slider_hor and slider_ver elements
c3
Alessandro Mauri 1 week ago
parent 499f6dc79b
commit a481269022
8 changed files with 86 additions and 121 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 18
      src/main.c3
  2. 14
      src/ugui_button.c3
  3. 2
      src/ugui_cmd.c3
  4. 17
      src/ugui_core.c3
  5. 98
      src/ugui_div.c3
  6. 8
      src/ugui_layout.c3
  7. 48
      src/ugui_slider.c3
  8. 2
      src/ugui_text.c3

18
src/main.c3
Unescape View File

@ -150,18 +150,18 @@ fn int main(String[] args)
{|
ui.layout_set_column()!!;
static float slider2 = 0.5;
if (ui.slider_ver("slider_other", ugui::Rect{0,0,30,100}, &slider2)!!.update) {
if (ui.slider_ver("slider", ugui::Rect{0,0,30,100}, &slider2)!!.update) {
io::printfn("other slider: %f", slider2);
}
ui.button("button10", ugui::Rect{0,0,50,50})!!;
ui.button("button11", ugui::Rect{0,0,50,50})!!;
ui.button("button12", ugui::Rect{0,0,50,50})!!;
ui.button("button13", ugui::Rect{0,0,50,50})!!;
ui.button("button0", ugui::Rect{0,0,50,50})!!;
ui.button("button1", ugui::Rect{0,0,50,50})!!;
ui.button("button2", ugui::Rect{0,0,50,50})!!;
ui.button("button3", ugui::Rect{0,0,50,50})!!;
if (toggle) {
ui.button("button14", ugui::Rect{0,0,50,50})!!;
ui.button("button15", ugui::Rect{0,0,50,50})!!;
ui.button("button16", ugui::Rect{0,0,50,50})!!;
ui.button("button17", ugui::Rect{0,0,50,50})!!;
ui.button("button4", ugui::Rect{0,0,50,50})!!;
ui.button("button5", ugui::Rect{0,0,50,50})!!;
ui.button("button6", ugui::Rect{0,0,50,50})!!;
ui.button("button7", ugui::Rect{0,0,50,50})!!;
}
ui.layout_next_column()!!;
ui.layout_set_row()!!;

14
src/ugui_button.c3
Unescape View File

@ -8,27 +8,19 @@ struct ElemButton {
bool active;
}
const Elem BUTTON_DEFAULTS = {
.type = ETYPE_BUTTON,
.button = {
.color = uint_to_rgba(0x0000ffff),
},
};
// draw a button, return the events on that button
fn ElemEvents! Ctx.button(&ctx, String label, Rect size, bool state = false)
{
Id id = label.hash();
Id id = ctx.gen_id(label)!;
Elem *parent = ctx.get_parent()!;
Elem *c_elem = ctx.get_elem(id)!;
// add it to the tree
ctx.tree.add(id, ctx.active_div)!;
bool needs_layout = c_elem.flags.is_new || parent.flags.updated;
if (c_elem.flags.is_new) {
*c_elem = BUTTON_DEFAULTS;
c_elem.type = ETYPE_BUTTON;
c_elem.button.color = uint_to_rgba(0x0000ffff);
} else if (c_elem.type != ETYPE_BUTTON) {
return UgError.WRONG_ELEMENT_TYPE?;
}

2
src/ugui_cmd.c3
Unescape View File

@ -171,7 +171,7 @@ fn void! Ctx.push_scissor(&ctx, Rect rect)
{
Cmd sc = {
.type = CMD_SCISSOR,
.scissor.rect = rect,
.scissor.rect = rect.intersection(ctx.div_scissor),
};
ctx.cmd_queue.enqueue(&sc)!;
}

17
src/ugui_core.c3
Unescape View File

@ -99,12 +99,6 @@ const uint MAX_ELEMS = 128;
const uint MAX_CMDS = 256;
const uint ROOT_ID = 1;
enum Layout {
ROW,
COLUMN,
FLOATING
}
// global style, similar to the css box model
struct Style { // css box model
Rect padding;
@ -118,7 +112,6 @@ struct Style { // css box model
struct Ctx {
Layout layout;
IdTree tree;
ElemCache cache;
CmdQueue cmd_queue;
@ -141,6 +134,7 @@ struct Ctx {
}
}
Rect div_scissor;
isz active_div; // tree node indicating the current active div
}
@ -180,6 +174,12 @@ fn Elem*! Ctx.get_parent(&ctx)
return ctx.cache.search(parent_id);
}
macro Id! Ctx.gen_id(&ctx, String label)
{
Id parent_id = ctx.tree.get(ctx.active_div)!;
return parent_id ^ label.hash();
}
// get or push an element from the cache, return a pointer to it
// resets all flags except is_new which is set accordingly
macro Ctx.get_elem(&ctx, Id id)
@ -218,7 +218,6 @@ fn void! Ctx.init(&ctx)
ctx.cmd_queue.init(MAX_ELEMENTS)!;
defer catch { (void)ctx.cmd_queue.free(); }
ctx.layout = Layout.ROW;
ctx.active_div = 0;
// TODO: add style config
@ -275,6 +274,8 @@ fn void! Ctx.frame_begin(&ctx)
// 3. Push the root element into the element tree
ctx.active_div = ctx.tree.add(ROOT_ID, 0)!;
ctx.div_scissor = {0, 0, ctx.width, ctx.height};
// The root element does not push anything to the stack
// TODO: add a background color taken from a theme or config
}

98
src/ugui_div.c3
Unescape View File

@ -7,6 +7,7 @@ enum DivLayout {
LAYOUT_ROW,
LAYOUT_COLUMN,
LAYOUT_FLOATING,
LAYOUT_ABSOLUTE,
}
// div element
@ -26,19 +27,9 @@ struct ElemDiv {
Color bgcolor;
}
const Elem DIV_DEFAULTS = {
.type = ETYPE_DIV,
.div = {
.scroll.can_x = false,
.scroll.can_y = false,
.scroll.value_x = 0,
.scroll.value_y = 0,
},
};
fn void! Ctx.div_begin(&ctx, String label, Rect size, bool scroll_x = false, bool scroll_y = false)
{
Id id = label.hash();
Id id = ctx.gen_id(label)!;
Elem* parent = ctx.get_parent()!;
Elem* c_elem = ctx.get_elem(id)!;
@ -48,7 +39,7 @@ fn void! Ctx.div_begin(&ctx, String label, Rect size, bool scroll_x = false, boo
bool is_new = c_elem.flags.is_new;
if (c_elem.flags.is_new) {
*c_elem = DIV_DEFAULTS;
c_elem.type = ETYPE_DIV;
} else if (c_elem.type != ETYPE_DIV) {
return UgError.WRONG_ELEMENT_TYPE?;
}
@ -60,6 +51,10 @@ fn void! Ctx.div_begin(&ctx, String label, Rect size, bool scroll_x = false, boo
c_elem.div.children_bounds = c_elem.bounds;
c_elem.div.bgcolor = ctx.style.bgcolor;
// update the ctx scissor
ctx.div_scissor = c_elem.bounds;
ctx.push_scissor(c_elem.bounds)!;
// 4. Fill the div fields
c_elem.div.origin_c = Point{
.x = c_elem.bounds.x,
@ -77,8 +72,23 @@ fn void! Ctx.div_begin(&ctx, String label, Rect size, bool scroll_x = false, boo
// TODO: check active
// TODO: check resizeable
// FIXME: we cannot use slider elements as scrollbars because of id management
// scrollbars
if (parent.flags.has_focus) {
if (point_in_rect(ctx.input.mouse.pos, c_elem.bounds)) {
c_elem.flags.has_focus = true;
}
}
}
fn void! Ctx.div_end(&ctx)
{
// swap the children bounds
Elem* parent = ctx.get_parent()!;
Elem* c_elem = ctx.get_elem_by_tree_idx(ctx.active_div)!;
c_elem.div.pcb = c_elem.div.children_bounds;
c_elem.events = ctx.get_elem_events(c_elem);
Rect cb = c_elem.div.pcb;
// children bounds bottom-right corner
Point cbc = {
@ -105,25 +115,10 @@ fn void! Ctx.div_begin(&ctx, String label, Rect size, bool scroll_x = false, boo
.w = 10,
.h = c_elem.bounds.h,
};
short hh = (short)(max((float)bc.y / cbc.y, (float)0.15) * c_elem.bounds.h);
Rect vhandle = {
.x = c_elem.bounds.x + c_elem.bounds.w - 10,
.y = calc_slider(c_elem.bounds.y, c_elem.bounds.h-hh, c_elem.div.scroll.value_y),
.w = 10,
.h = hh,
};
Point m = ctx.input.mouse.pos;
if (parent.flags.has_focus && c_elem.events.mouse_hover &&
c_elem.events.mouse_hold && point_in_rect(m, vhandle)) {
vhandle.y = calc_slider(c_elem.bounds.y, c_elem.bounds.h-hh, c_elem.div.scroll.value_y);
c_elem.div.scroll.value_y = calc_value(c_elem.bounds.y, m.y, c_elem.bounds.h, hh);
c_elem.flags.updated = true;
}
ctx.push_rect(vslider, uint_to_rgba(0x999999ff))!;
ctx.push_rect(vhandle, uint_to_rgba(0x9999ffff))!;
DivLayout prev_l = c_elem.div.layout;
c_elem.div.layout = LAYOUT_ABSOLUTE;
ctx.slider_ver("div_scrollbar_vertical", vslider, &c_elem.div.scroll.value_y, max((float)bc.y / cbc.y, (float)0.15))!;
c_elem.div.layout = prev_l;
}
if (c_elem.div.scroll.on_x) {
@ -133,41 +128,12 @@ fn void! Ctx.div_begin(&ctx, String label, Rect size, bool scroll_x = false, boo
.w = c_elem.bounds.w,
.h = 10,
};
short hw = (short)(max((float)bc.x / cbc.x, (float)0.15) * c_elem.bounds.w);
Rect hhandle = {
.x = calc_slider(c_elem.bounds.x, c_elem.bounds.w-hw, c_elem.div.scroll.value_x),
.y = c_elem.bounds.y + c_elem.bounds.h - 10,
.w = hw,
.h = 10,
};
Point m = ctx.input.mouse.pos;
if (parent.flags.has_focus && c_elem.events.mouse_hover &&
c_elem.events.mouse_hold && point_in_rect(m, hhandle)) {
hhandle.x = calc_slider(c_elem.bounds.x, c_elem.bounds.w-hw, c_elem.div.scroll.value_x);
c_elem.div.scroll.value_x = calc_value(c_elem.bounds.x, m.x, c_elem.bounds.w, hw);
c_elem.flags.updated = true;
}
ctx.push_rect(hslider, uint_to_rgba(0x999999ff))!;
ctx.push_rect(hhandle, uint_to_rgba(0x9999ffff))!;
}
if (parent.flags.has_focus) {
if (point_in_rect(ctx.input.mouse.pos, c_elem.bounds)) {
c_elem.flags.has_focus = true;
}
}
DivLayout prev_l = c_elem.div.layout;
c_elem.div.layout = LAYOUT_ABSOLUTE;
ctx.slider_hor("div_scrollbar_horizontal", hslider, &c_elem.div.scroll.value_x, max((float)bc.x / cbc.x, (float)0.15))!;
c_elem.div.layout = prev_l;
}
fn void! Ctx.div_end(&ctx)
{
// swap the children bounds
Elem* c_elem = ctx.get_elem_by_tree_idx(ctx.active_div)!;
c_elem.div.pcb = c_elem.div.children_bounds;
// the active_div returns to the parent of the current one
ctx.active_div = ctx.tree.parentof(ctx.active_div)!;
}

8
src/ugui_layout.c3
Unescape View File

@ -94,9 +94,11 @@ fn Rect Ctx.position_element(&ctx, Elem *parent, Rect rect, bool style = false)
origin = div.origin_r;
case LAYOUT_COLUMN:
origin = div.origin_c;
case LAYOUT_FLOATING: // none
default:
// Error
case LAYOUT_FLOATING: // none, relative to zero zero
case LAYOUT_ABSOLUTE: // absolute position, this is a no-op, return the rect
return rect;
default: // error
return Rect{};
}
// the bottom-right border of the element box

48
src/ugui_slider.c3
Unescape View File

@ -8,10 +8,6 @@ struct ElemSlider {
Rect handle;
}
const Elem SLIDER_DEFAULT = {
.type = ETYPE_SLIDER,
};
/* handle
* +----+-----+---------------------+
* | |#####| |
@ -20,9 +16,15 @@ const Elem SLIDER_DEFAULT = {
<*
@require value != null
*>
fn ElemEvents! Ctx.slider_hor(&ctx, String label, Rect size, float* value)
fn ElemEvents! Ctx.slider_hor(&ctx,
String label,
Rect size,
float* value,
float hpercent = 0.25,
Color bgcolor = uint_to_rgba(0x0000ffff),
Color handlecolor = uint_to_rgba(0x0ff000ff))
{
Id id = label.hash();
Id id = ctx.gen_id(label)!;
Elem *parent = ctx.get_parent()!;
Elem *c_elem = ctx.get_elem(id)!;
@ -31,8 +33,8 @@ fn ElemEvents! Ctx.slider_hor(&ctx, String label, Rect size, float* value)
// 1. Fill the element fields
if (c_elem.flags.is_new) {
*c_elem = SLIDER_DEFAULT;
} else if (c_elem.type != SLIDER_DEFAULT.type) {
c_elem.type = ETYPE_SLIDER;
} else if (c_elem.type != ETYPE_SLIDER) {
return UgError.WRONG_ELEMENT_TYPE?;
}
@ -40,7 +42,7 @@ fn ElemEvents! Ctx.slider_hor(&ctx, String label, Rect size, float* value)
c_elem.bounds = ctx.position_element(parent, size, true);
// handle width
short hw = (short)(c_elem.bounds.w * 0.25);
short hw = (short)(c_elem.bounds.w * hpercent);
Rect handle = {
.x = calc_slider(c_elem.bounds.x, c_elem.bounds.w-hw, *value),
.y = c_elem.bounds.y,
@ -60,10 +62,8 @@ fn ElemEvents! Ctx.slider_hor(&ctx, String label, Rect size, float* value)
}
// Draw the slider background and handle
Color bg_color = uint_to_rgba(0x0000ffff);
Color handle_color = uint_to_rgba(0x0ff000ff);
ctx.push_rect(c_elem.bounds, bg_color)!;
ctx.push_rect(c_elem.slider.handle, handle_color)!;
ctx.push_rect(c_elem.bounds, bgcolor)!;
ctx.push_rect(c_elem.slider.handle, handlecolor)!;
return c_elem.events;
}
@ -80,9 +80,15 @@ fn ElemEvents! Ctx.slider_hor(&ctx, String label, Rect size, float* value)
* | |
* +-+
*/
fn ElemEvents! Ctx.slider_ver(&ctx, String label, Rect size, float* value)
fn ElemEvents! Ctx.slider_ver(&ctx,
String label,
Rect size,
float* value,
float hpercent = 0.25,
Color bgcolor = uint_to_rgba(0x0000ffff),
Color handlecolor = uint_to_rgba(0x0ff000ff))
{
Id id = label.hash();
Id id = ctx.gen_id(label)!;
Elem *parent = ctx.get_parent()!;
Elem *c_elem = ctx.get_elem(id)!;
@ -91,8 +97,8 @@ fn ElemEvents! Ctx.slider_ver(&ctx, String label, Rect size, float* value)
// 1. Fill the element fields
if (c_elem.flags.is_new) {
*c_elem = SLIDER_DEFAULT;
} else if (c_elem.type != SLIDER_DEFAULT.type) {
c_elem.type = ETYPE_SLIDER;
} else if (c_elem.type != ETYPE_SLIDER) {
return UgError.WRONG_ELEMENT_TYPE?;
}
@ -100,7 +106,7 @@ fn ElemEvents! Ctx.slider_ver(&ctx, String label, Rect size, float* value)
c_elem.bounds = ctx.position_element(parent, size, true);
// handle height
short hh = (short)(c_elem.bounds.h * 0.25);
short hh = (short)(c_elem.bounds.h * hpercent);
Rect handle = {
.x = c_elem.bounds.x,
.y = calc_slider(c_elem.bounds.y, c_elem.bounds.h-hh, *value),
@ -121,10 +127,8 @@ fn ElemEvents! Ctx.slider_ver(&ctx, String label, Rect size, float* value)
}
// Draw the slider background and handle
Color bg_color = uint_to_rgba(0x0000ffff);
Color handle_color = uint_to_rgba(0x0ff000ff);
ctx.push_rect(c_elem.bounds, bg_color)!;
ctx.push_rect(c_elem.slider.handle, handle_color)!;
ctx.push_rect(c_elem.bounds, bgcolor)!;
ctx.push_rect(c_elem.slider.handle, handlecolor)!;
return c_elem.events;
}

2
src/ugui_text.c3
Unescape View File

@ -4,7 +4,7 @@ import std::io;
fn void! Ctx.text_unbounded(&ctx, String label, String text)
{
Id id = label.hash();
Id id = ctx.gen_id(label)!;
Elem *parent = ctx.get_parent()!;
Elem *c_elem = ctx.get_elem(id)!;

Write Preview
Loading…
Cancel
Save