From 05d5193c01c02e11dad5d7fe3224e2fd9b001c6e Mon Sep 17 00:00:00 2001 From: San Jacobs Date: Fri, 3 Oct 2025 01:33:01 +0200 Subject: Rewritten and simplified down to a rectcut-style layout system --- src/main.odin | 218 ++++++++++++++++++++++++++++++---------------------------- 1 file changed, 114 insertions(+), 104 deletions(-) (limited to 'src/main.odin') diff --git a/src/main.odin b/src/main.odin index 334ac08..47f7ff3 100644 --- a/src/main.odin +++ b/src/main.odin @@ -3,6 +3,8 @@ package main import "core:fmt" import t "tafl" +BUTTON_SIZE : [2]int : {120, 40} + main :: proc() { width, height : int = 1920, 1080 @@ -17,8 +19,8 @@ main :: proc() { { t.tafl( // ROOT tafl - sizing_width=t.FIXED(int(width)), - sizing_height=t.FIXED(int(height)), + width=width, + height=height, layout=.LEFT_TO_RIGHT, color=colors.background, padding={5,5,5,5}, @@ -26,20 +28,17 @@ main :: proc() { ) { // Left bar t.tafl(color=colors.panel_blackground, - sizing_height=t.GROW, - sizing_width=t.FIT, - layout=.TOP_TO_BOTTOM) - { - t.tafl(color={0,0,0,0}, - sizing_height=t.GROW, - sizing_width=t.GROW) - } - slider() + width=BUTTON_SIZE.x*3 + 8*4, + cut_from=.START, + layout=.TOP_TO_BOTTOM, + ) { t.tafl( + height=BUTTON_SIZE.y+8*2, padding={8,8,8,8}, child_gap=8, color={.0, .0, .0, 0.4}, + cut_from=.END, ) { if button("Yeet", "yeet").clicked { @@ -53,66 +52,64 @@ main :: proc() { } } } - + slider_h() } - { // Middle section - t.tafl(color=colors.panel_blackground, - sizing_width=t.GROW, - sizing_height=t.GROW, - position_horizontal=.MIDDLE, - position_vertical=.MIDDLE, - child_gap=5, - layout=.TOP_TO_BOTTOM,) - {// Red square - t.tafl(color={1,0,0,1}, - sizing_width=t.FIXED(300), - sizing_height=t.FIXED(300), - padding={1,1,1,1},) - { - t.tafl(color={0,0,0,0.5}, - sizing_width=t.GROW, - sizing_height=t.GROW) - } - } - {// Red square - t.tafl(color={1,0,0,1}, - sizing_width=t.FIXED(200), - sizing_height=t.FIXED(200), - padding={1,1,1,1},) - { - t.tafl(color={0,0,0,0.5}, - sizing_width=t.GROW, - sizing_height=t.GROW) - } - } - } { // Right bar t.tafl(color=colors.panel_blackground, - sizing_width=t.FIXED(300), - sizing_height=t.GROW, + width=300, child_gap=20, - layout=.TOP_TO_BOTTOM) + layout=.TOP_TO_BOTTOM, + cut_from=.END,) { {t.tafl(color={.5, .5, .5, 1}, - sizing_height=t.FIXED(50), - sizing_width=t.GROW, + height=50, )} {t.tafl(color={.5, .5, .5, 1}, - sizing_height=t.FIXED(50), - sizing_width=t.GROW, - )} - {t.tafl(color={.5, .5, .8, 1}, - sizing_height=t.GROW, - sizing_width=t.GROW, + height=50, )} {t.tafl(color={.5, .5, .5, 1}, - sizing_height=t.FIXED(50), - sizing_width=t.GROW, + height=50, + cut_from=.END, + )} + {t.tafl(color={.5, .5, .8, 1}, )} } } + + { // Middle section + big_square_size := 300 + small_square_size := 200 + total_size := big_square_size+small_square_size+5 + t.tafl(color=colors.panel_blackground, + layout=.TOP_TO_BOTTOM,) + { + t.tafl(height=total_size, + layout=.TOP_TO_BOTTOM, + align_children=.MIDDLE, + cut_from=.MIDDLE, + child_gap=5,) + {// Red square (BIG) + t.tafl(color={1,0,0,1}, + width=big_square_size, + height=big_square_size, + padding={1,1,1,1},) + { + t.tafl(color={0,0,0,0.5},) + } + } + {// Red square (Small) + t.tafl(color={1,0,0,1}, + width=small_square_size, + height=small_square_size, + padding={1,1,1,1},) + { + t.tafl(color={0,0,0,0.5},) + } + } + } + } } t.render() @@ -122,76 +119,89 @@ main :: proc() { button :: proc(text : string, id : string) -> t.Com { - com := t.tafl(sizing_width=t.FIXED(120), - sizing_height=t.FIXED(40), + com := t.tafl(width=BUTTON_SIZE.x, + height=BUTTON_SIZE.y, color=colors.button_outline, padding={2,2,2,2}, - flags=t.BUTTON, + flags={.HIT_CHECK}, + align_children=.MIDDLE, id=id) color : t.Color = {.1,.1,.1, 1} if com.hover do color = {.2,.2,.2, 1} if com.clicked || com.is_down do color = {.05,.05,.05, 1} - t.tafl(sizing_width=t.GROW, - sizing_height=t.GROW, - color=color, - position_horizontal=.MIDDLE, - position_vertical=.MIDDLE,) + t.tafl(color=color,) - t.tafl(text=text) + t.tafl(text=text, + cut_from=.MIDDLE, + width=0, + height=0,) return com } slider_root : int = 0 slider_delta : int = 0 slider_current : int = 0 -slider :: proc(id : string = "a_slider") -> t.Com { - com : t.Com - t.tafl(padding={2,2,2,2}, - sizing_width=t.GROW) - t.tafl(sizing_width=t.GROW, - sizing_height=t.FIXED(30), - color={.1,.1,.1,1}, - padding={5,5,5,5}, - layout=.LEFT_TO_RIGHT, - position_horizontal=.END, - position_vertical=.END) - - { - com = t.tafl(sizing_width=t.FIXED(80), - sizing_height=t.GROW, - color={.5,.5,.5,1}, +slider_grabbed : bool = false +slider_output : f32 = 0 +slider_h :: proc(id : string = "a_slider") { + t.tafl( + cut_from=.END, padding={2,2,2,2}, - flags={.DRAGGABLE, .CLICKABLE, .HOVERABLE}, - id=id) + height=35, + ) + outer_com := t.tafl( + layout=.LEFT_TO_RIGHT, + color={.1,.1,.1,1}, + padding={2,2,2,2} + ) + {// Space before + t.tafl( + width=slider_current, + cut_from=.START) + } + {// Scroll handle + com:=t.tafl( + width=90, + cut_from=.START, + color={.4,.4,.4,1}, + padding={2,2,2,2}, + flags={.HIT_CHECK}, + id=id, + ) - core_color : t.Color = {.2,.2,.2,1} - if com.hover { - core_color = {.3,.3,.3,1} - } if com.pressed_down { - slider_root = slider_root+slider_delta + slider_root = slider_current + slider_grabbed = true } - if com.dragging { - core_color = {.12,.12,.12,1} - fmt.println(com.drag_delta) - slider_delta = com.drag_delta.x - slider_current = slider_root+slider_delta - fmt.println(slider_current) + + if t.mouse_left_released { + slider_grabbed = false } - { - t.tafl(sizing_height=t.GROW, - sizing_width=t.GROW, - color=core_color) + + slider_max := outer_com.tafl.width - com.tafl.width - outer_com.tafl.padding.left - outer_com.tafl.padding.right + + if slider_grabbed { + slider_delta = t.mouse_position.x - t.mouse_left_press_position.x + slider_current = slider_root + slider_delta + slider_current = max(slider_current, 0) + slider_current = min(slider_current, slider_max) + slider_output = f32(slider_current)/f32(slider_max) + fmt.printfln("slider_output: {}", slider_output) } + + color : t.Color = {.2,.2,.2,1} + if com.hover do color={.3,.3,.3,1} + if com.is_down do color={.13,.13,.13,1} + t.tafl( + color=color, + ) } - - - { - t.tafl(sizing_width=t.FIXED(-slider_current), - sizing_height=t.GROW) + {// Area after + t.tafl( + width=slider_current, + cut_from=.START) } - return com } -- cgit v1.2.1