re-added sliders

This commit is contained in:
Alessandro Mauri 2025-09-12 20:23:07 +02:00
parent a00e39f36b
commit 71a959b9a1
2 changed files with 84 additions and 83 deletions

View File

@ -13,13 +13,12 @@ struct ElemSlider {
* | |#####| | * | |#####| |
* +----+-----+---------------------+ * +----+-----+---------------------+
*/ */
/* macro Ctx.slider_hor(&ctx, Size w, Size h, float* value, float hpercent = 0.25, ...)
macro Ctx.slider_hor(&ctx, Rect size, float* value, float hpercent = 0.25, ...) => ctx.slider_hor_id(@compute_id($vasplat), w, h, value, hpercent);
=> ctx.slider_hor_id(@compute_id($vasplat), size, value, hpercent);
<* <*
@require value != null @require value != null
*> *>
fn ElemEvents? Ctx.slider_hor_id(&ctx, Id id, Rect size, float* value, float hpercent = 0.25) fn ElemEvents? Ctx.slider_hor_id(&ctx, Id id, Size w, Size h, float* value, float hpercent = 0.25)
{ {
id = ctx.gen_id(id)!; id = ctx.gen_id(id)!;
@ -27,10 +26,14 @@ fn ElemEvents? Ctx.slider_hor_id(&ctx, Id id, Rect size, float* value, float hpe
Elem* elem = ctx.get_elem(id, ETYPE_SLIDER)!; Elem* elem = ctx.get_elem(id, ETYPE_SLIDER)!;
Style* style = ctx.styles.get_style(@str_hash("slider")); Style* style = ctx.styles.get_style(@str_hash("slider"));
// 2. Layout elem.layout.w = w;
elem.bounds = ctx.layout_element(parent, size, style); elem.layout.h = h;
if (elem.bounds.is_null()) return {}; elem.layout.content_offset = style.margin + style.border + style.padding;
Rect content_bounds = elem.content_bounds(style); update_parent_grow(elem, parent);
update_parent_size(elem, parent);
Rect bg_bounds = elem.bounds.pad(style.margin);
Rect content_bounds = elem.bounds.pad(style.margin + style.border + style.padding);
// handle width // handle width
short hw = (short)(content_bounds.w * hpercent); short hw = (short)(content_bounds.w * hpercent);
@ -55,7 +58,7 @@ fn ElemEvents? Ctx.slider_hor_id(&ctx, Id id, Rect size, float* value, float hpe
Style s = *style; Style s = *style;
Rect padding = s.padding; Rect padding = s.padding;
s.padding = {}; s.padding = {};
ctx.push_rect(elem.bounds, parent.div.z_index, &s)!; ctx.push_rect(bg_bounds, parent.div.z_index, &s)!;
s.bg = s.primary; s.bg = s.primary;
s.padding = padding; s.padding = padding;
s.border = {}; s.border = {};
@ -63,7 +66,6 @@ fn ElemEvents? Ctx.slider_hor_id(&ctx, Id id, Rect size, float* value, float hpe
return elem.events; return elem.events;
} }
*/
/* /*
@ -78,10 +80,9 @@ fn ElemEvents? Ctx.slider_hor_id(&ctx, Id id, Rect size, float* value, float hpe
* | | * | |
* +--+ * +--+
*/ */
/* macro Ctx.slider_ver(&ctx, Size w, Size h, float* value, float hpercent = 0.25, ...)
macro Ctx.slider_ver(&ctx, Rect size, float* value, float hpercent = 0.25, ...) => ctx.slider_ver_id(@compute_id($vasplat), w, h, value, hpercent);
=> ctx.slider_ver_id(@compute_id($vasplat), size, value, hpercent); fn ElemEvents? Ctx.slider_ver_id(&ctx, Id id, Size w, Size h, float* value, float hpercent = 0.25)
fn ElemEvents? Ctx.slider_ver_id(&ctx, Id id, Rect size, float* value, float hpercent = 0.25)
{ {
id = ctx.gen_id(id)!; id = ctx.gen_id(id)!;
@ -89,17 +90,15 @@ fn ElemEvents? Ctx.slider_ver_id(&ctx, Id id, Rect size, float* value, float hpe
Elem *elem = ctx.get_elem(id, ETYPE_SLIDER)!; Elem *elem = ctx.get_elem(id, ETYPE_SLIDER)!;
Style* style = ctx.styles.get_style(@str_hash("slider")); Style* style = ctx.styles.get_style(@str_hash("slider"));
// 1. Fill the element fields elem.layout.w = w;
if (elem.flags.is_new) { elem.layout.h = h;
elem.type = ETYPE_SLIDER; elem.layout.content_offset = style.margin + style.border + style.padding;
} else if (elem.type != ETYPE_SLIDER) { update_parent_grow(elem, parent);
return WRONG_ELEMENT_TYPE?; update_parent_size(elem, parent);
}
// 2. Layout // 2. Layout
elem.bounds = ctx.layout_element(parent, size, style); Rect bg_bounds = elem.bounds.pad(style.margin);
if (elem.bounds.is_null()) return {}; Rect content_bounds = elem.bounds.pad(style.margin + style.border + style.padding);
Rect content_bounds = elem.content_bounds(style);
// handle height // handle height
short hh = (short)(content_bounds.h * hpercent); short hh = (short)(content_bounds.h * hpercent);
@ -124,7 +123,7 @@ fn ElemEvents? Ctx.slider_ver_id(&ctx, Id id, Rect size, float* value, float hpe
Style s = *style; Style s = *style;
Rect padding = s.padding; Rect padding = s.padding;
s.padding = {}; s.padding = {};
ctx.push_rect(elem.bounds, parent.div.z_index, &s)!; ctx.push_rect(bg_bounds, parent.div.z_index, &s)!;
s.bg = s.primary; s.bg = s.primary;
s.padding = padding; s.padding = padding;
s.border = {}; s.border = {};
@ -136,4 +135,3 @@ fn ElemEvents? Ctx.slider_ver_id(&ctx, Id id, Rect size, float* value, float hpe
macro short calc_slider(short off, short dim, float value) => (short)off + (short)(dim * value); macro short calc_slider(short off, short dim, float value) => (short)off + (short)(dim * value);
macro float calc_value(short off, short mouse, short dim, short slider) macro float calc_value(short off, short mouse, short dim, short slider)
=> math::clamp((float)(mouse-off-slider/2)/(float)(dim-slider), 0.0f, 1.0f); => math::clamp((float)(mouse-off-slider/2)/(float)(dim-slider), 0.0f, 1.0f);
*/

View File

@ -73,54 +73,51 @@ fn int main(String[] args)
defer ren.free(); defer ren.free();
ui.input_window_size(800, 600)!!; ui.input_window_size(800, 600)!!;
// // ========================================================================================== //
// FONT LOADING // FONT LOADING //
// // ========================================================================================== //
{ // import font in the ui context
// import font in the ui context ui.load_font("font1", "resources/hack-nerd.ttf", 16)!!;
ui.load_font("font1", "resources/hack-nerd.ttf", 16)!!;
// create the rendering pipeline // create the rendering pipeline
ren.font_atlas_id = ui.get_font_id("font1"); ren.font_atlas_id = ui.get_font_id("font1");
ren.load_spirv_shader_from_file("UGUI_PIPELINE_FONT", SPRITE_VS_PATH, FONT_FS_PATH, 1, 0); ren.load_spirv_shader_from_file("UGUI_PIPELINE_FONT", SPRITE_VS_PATH, FONT_FS_PATH, 1, 0);
ren.create_pipeline("UGUI_PIPELINE_FONT", SPRITE); ren.create_pipeline("UGUI_PIPELINE_FONT", SPRITE);
// send the atlas to the gpu // send the atlas to the gpu
Atlas* font_atlas = ui.get_font_atlas("font1")!!; Atlas* font_atlas = ui.get_font_atlas("font1")!!;
ren.new_texture("font1", JUST_ALPHA, font_atlas.buffer, font_atlas.width, font_atlas.height); ren.new_texture("font1", JUST_ALPHA, font_atlas.buffer, font_atlas.width, font_atlas.height);
}
// // ========================================================================================== //
// ICON LOADING // ICON LOADING //
// // ========================================================================================== //
{ // create the atlas and upload some icons
// create the atlas and upload some icons ui.sprite_atlas_create("icons", AtlasType.ATLAS_R8G8B8A8, 512, 512)!!;
ui.sprite_atlas_create("icons", AtlasType.ATLAS_R8G8B8A8, 512, 512)!!; ui.import_sprite_file_qoi("tux", "resources/tux.qoi")!!;
ui.import_sprite_file_qoi("tux", "resources/tux.qoi")!!; ui.import_sprite_file_qoi("tick", "resources/tick_sdf.qoi", SpriteType.SPRITE_MSDF)!!;
ui.import_sprite_file_qoi("tick", "resources/tick_sdf.qoi", SpriteType.SPRITE_MSDF)!!;
// create the rendering pipelines // create the rendering pipelines
ren.sprite_atlas_id = ui.get_sprite_atlas_id("icons"); ren.sprite_atlas_id = ui.get_sprite_atlas_id("icons");
// normal sprite pipeline // normal sprite pipeline
ren.load_spirv_shader_from_file("UGUI_PIPELINE_SPRITE", SPRITE_VS_PATH, SPRITE_FS_PATH, 1, 0); ren.load_spirv_shader_from_file("UGUI_PIPELINE_SPRITE", SPRITE_VS_PATH, SPRITE_FS_PATH, 1, 0);
ren.create_pipeline("UGUI_PIPELINE_SPRITE", SPRITE); ren.create_pipeline("UGUI_PIPELINE_SPRITE", SPRITE);
// msdf sprite pipeline // msdf sprite pipeline
ren.load_spirv_shader_from_file("UGUI_PIPELINE_SPRITE_MSDF", SPRITE_VS_PATH, MSDF_FS_PATH, 1, 0); ren.load_spirv_shader_from_file("UGUI_PIPELINE_SPRITE_MSDF", SPRITE_VS_PATH, MSDF_FS_PATH, 1, 0);
ren.create_pipeline("UGUI_PIPELINE_SPRITE_MSDF", SPRITE); ren.create_pipeline("UGUI_PIPELINE_SPRITE_MSDF", SPRITE);
// upload the atlas to the gpu // upload the atlas to the gpu
Atlas atlas = ui.sprite_atlas.atlas; Atlas atlas = ui.sprite_atlas.atlas;
ren.new_texture("icons", FULL_COLOR, atlas.buffer, atlas.width, atlas.height); ren.new_texture("icons", FULL_COLOR, atlas.buffer, atlas.width, atlas.height);
}
// // ========================================================================================== //
// RECT PIPELINE // RECT PIPELINE //
// // ========================================================================================== //
ren.load_spirv_shader_from_file("UGUI_PIPELINE_RECT", RECT_VS_PATH, RECT_FS_PATH, 0, 0); ren.load_spirv_shader_from_file("UGUI_PIPELINE_RECT", RECT_VS_PATH, RECT_FS_PATH, 0, 0);
ren.create_pipeline("UGUI_PIPELINE_RECT", RECT); ren.create_pipeline("UGUI_PIPELINE_RECT", RECT);
// ========================================================================================== //
// CSS INPUT // CSS INPUT //
// ========================================================================================== //
io::printfn("imported %d styles", ui.import_style_from_file(STYLESHEET_PATH)); io::printfn("imported %d styles", ui.import_style_from_file(STYLESHEET_PATH));
isz frame; isz frame;
@ -132,9 +129,9 @@ fn int main(String[] args)
Times draw_times; Times draw_times;
// // ========================================================================================== //
// MAIN LOOP // MAIN LOOP //
// // ========================================================================================== //
sdl::start_text_input(ren.win); sdl::start_text_input(ren.win);
sdl::Event e; sdl::Event e;
@ -367,6 +364,7 @@ fn void calculator(ugui::Ctx* ui)
ui.@div(ugui::@grow(), ugui::@grow(), ROW, CENTER) { // center everything on the screen ui.@div(ugui::@grow(), ugui::@grow(), ROW, CENTER) { // center everything on the screen
ui.@div(ugui::@fit(), ugui::@fit(), COLUMN, TOP_LEFT) { ui.@div(ugui::@fit(), ugui::@fit(), COLUMN, TOP_LEFT) {
ui.@div(ugui::@grow(), ugui::@fit(), ROW, CENTER) {ui.text("SHITTY AHH CALCULATOR")!!;}!!;
ui.@div(ugui::@grow(), ugui::@exact(100), ROW, RIGHT) { ui.@div(ugui::@grow(), ugui::@exact(100), ROW, RIGHT) {
ui.text((String)buffer[:len])!!; ui.text((String)buffer[:len])!!;
}!!; }!!;
@ -412,11 +410,16 @@ fn void calculator(ugui::Ctx* ui)
}!!; }!!;
}!!; }!!;
ui.@div(ugui::@grow(), ugui::@grow(), anchor: CENTER) { ui.@div(ugui::@grow(), ugui::@fit(), anchor: CENTER) {
static bool state; static bool state;
ui.checkbox("boolean", &state, "tick")!!; ui.checkbox("boolean", &state, "tick")!!;
ui.sprite("tux")!!; ui.sprite("tux")!!;
}!!; }!!;
ui.@div(ugui::@grow(), ugui::@fit(), anchor: CENTER) {
static float f;
ui.slider_hor(ugui::@grow(), ugui::@exact(20), &f)!!;
ui.slider_ver(ugui::@exact(20), ugui::@exact(100), &f)!!;
}!!;
}!!; }!!; }!!; }!!;
} }