fix layout bugs
parent
8b45221d07
commit
b7d7907871
|
@ -327,22 +327,23 @@ draw :: proc(state_with_ui: ^StateWithUi) {
|
||||||
new_ui := transmute(^ui.State)state.ui
|
new_ui := transmute(^ui.State)state.ui
|
||||||
|
|
||||||
ui.open_element(new_ui, nil, {
|
ui.open_element(new_ui, nil, {
|
||||||
kind = {ui.Fit{}, ui.Exact(400)},
|
kind = {ui.Exact(state.screen_width), ui.Exact(state.screen_height)},
|
||||||
})
|
})
|
||||||
{
|
{
|
||||||
ui.open_element(new_ui, "Hello, I am a text thingy", {})
|
ui.open_element(new_ui, "Hello, I am a text thingy", {
|
||||||
|
kind = {ui.Grow{}, ui.Grow{}}
|
||||||
|
})
|
||||||
ui.close_element(new_ui)
|
ui.close_element(new_ui)
|
||||||
|
|
||||||
ui.open_element(new_ui, "Number 2", {})
|
ui_file_buffer_2(new_ui, core.current_buffer(state_with_ui.state))
|
||||||
ui.close_element(new_ui)
|
|
||||||
|
|
||||||
ui.open_element(new_ui, "I am on the right hopefully", {
|
ui.open_element(new_ui, "I am on the right hopefully", {
|
||||||
kind = {ui.Exact(state.screen_width-128), ui.Grow{}}
|
kind = {nil, ui.Grow{}}
|
||||||
})
|
})
|
||||||
ui.close_element(new_ui)
|
ui.close_element(new_ui)
|
||||||
|
|
||||||
ui.open_element(new_ui, "Number 4", {
|
ui.open_element(new_ui, "Number 4", {
|
||||||
kind = {ui.Exact(state.screen_width-128), ui.Grow{}}
|
kind = {nil, ui.Grow{}}
|
||||||
})
|
})
|
||||||
ui.close_element(new_ui)
|
ui.close_element(new_ui)
|
||||||
}
|
}
|
||||||
|
@ -464,6 +465,65 @@ ui_file_buffer :: proc(ctx: ^ui.Context, buffer: ^FileBuffer) -> ui.Interaction
|
||||||
return interaction;
|
return interaction;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ui_file_buffer_2 :: proc(s: ^ui.State, buffer: ^FileBuffer) {
|
||||||
|
draw_func := proc(state: ^State, e: ui.UI_Element, user_data: rawptr) {
|
||||||
|
buffer := transmute(^FileBuffer)user_data;
|
||||||
|
if buffer != nil {
|
||||||
|
buffer.glyph_buffer_width = e.layout.size.x / state.source_font_width;
|
||||||
|
buffer.glyph_buffer_height = e.layout.size.y / state.source_font_height + 1;
|
||||||
|
|
||||||
|
core.draw_file_buffer(state, buffer, e.layout.pos.x, e.layout.pos.y);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
relative_file_path, _ := filepath.rel(state.directory, buffer.file_path, context.temp_allocator)
|
||||||
|
|
||||||
|
ui.open_element(s, nil, {
|
||||||
|
dir = .TopToBottom,
|
||||||
|
kind = {ui.Grow{}, ui.Grow{}},
|
||||||
|
})
|
||||||
|
{
|
||||||
|
ui.open_element(s, ui.UI_Element_Kind_Custom{fn = draw_func, user_data = transmute(rawptr)buffer}, {
|
||||||
|
kind = {ui.Grow{}, ui.Grow{}}
|
||||||
|
})
|
||||||
|
ui.close_element(s)
|
||||||
|
|
||||||
|
ui.open_element(s, nil, {
|
||||||
|
kind = {ui.Grow{}, ui.Exact(state.source_font_height)}
|
||||||
|
})
|
||||||
|
{
|
||||||
|
ui.open_element(s, fmt.tprintf("%s", state.mode), {})
|
||||||
|
ui.close_element(s)
|
||||||
|
}
|
||||||
|
ui.close_element(s)
|
||||||
|
|
||||||
|
/*
|
||||||
|
ui.open_element(s, nil, {
|
||||||
|
kind = {ui.Grow{}, ui.Exact(state.source_font_height)}
|
||||||
|
})
|
||||||
|
{
|
||||||
|
ui.open_element(s, fmt.tprintf("%s", state.mode), {})
|
||||||
|
ui.close_element(s)
|
||||||
|
|
||||||
|
if selection, exists := buffer.selection.?; exists {
|
||||||
|
ui.open_element(s, fmt.tprintf("sel: %d:%d", selection.end.line, selection.end.col), {});
|
||||||
|
ui.close_element(s)
|
||||||
|
}
|
||||||
|
ui.open_element(s, nil, {
|
||||||
|
kind = {ui.Grow{}, ui.Grow{}}
|
||||||
|
})
|
||||||
|
ui.close_element(s)
|
||||||
|
|
||||||
|
ui.open_element(s, relative_file_path, {});
|
||||||
|
ui.close_element(s)
|
||||||
|
}
|
||||||
|
ui.close_element(s)
|
||||||
|
*/
|
||||||
|
|
||||||
|
}
|
||||||
|
ui.close_element(s)
|
||||||
|
}
|
||||||
|
|
||||||
init_plugin_vtable :: proc(ui_context: ^ui.Context) -> plugin.Plugin {
|
init_plugin_vtable :: proc(ui_context: ^ui.Context) -> plugin.Plugin {
|
||||||
return plugin.Plugin {
|
return plugin.Plugin {
|
||||||
state = cast(rawptr)&state,
|
state = cast(rawptr)&state,
|
||||||
|
|
|
@ -563,28 +563,28 @@ push_clip :: proc(ctx: ^Context, pos: [2]int, size: [2]int, inside_parent: bool
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
sdl2.RenderSetClipRect(ctx.renderer, &sdl2.Rect {
|
// sdl2.RenderSetClipRect(ctx.renderer, &sdl2.Rect {
|
||||||
i32(rect.pos.x),
|
// i32(rect.pos.x),
|
||||||
i32(rect.pos.y),
|
// i32(rect.pos.y),
|
||||||
i32(rect.size.x),
|
// i32(rect.size.x),
|
||||||
i32(rect.size.y)
|
// i32(rect.size.y)
|
||||||
});
|
// });
|
||||||
|
|
||||||
append(&ctx.clips, rect);
|
append(&ctx.clips, rect);
|
||||||
}
|
}
|
||||||
|
|
||||||
pop_clip :: proc(ctx: ^Context) {
|
pop_clip :: proc(ctx: ^Context) {
|
||||||
if len(ctx.clips) > 0 {
|
if len(ctx.clips) > 0 {
|
||||||
rect := pop(&ctx.clips);
|
// rect := pop(&ctx.clips);
|
||||||
|
|
||||||
sdl2.RenderSetClipRect(ctx.renderer, &sdl2.Rect {
|
// sdl2.RenderSetClipRect(ctx.renderer, &sdl2.Rect {
|
||||||
i32(rect.pos.x),
|
// i32(rect.pos.x),
|
||||||
i32(rect.pos.y),
|
// i32(rect.pos.y),
|
||||||
i32(rect.size.x),
|
// i32(rect.size.x),
|
||||||
i32(rect.size.y)
|
// i32(rect.size.y)
|
||||||
});
|
// });
|
||||||
} else {
|
} else {
|
||||||
sdl2.RenderSetClipRect(ctx.renderer, nil);
|
// sdl2.RenderSetClipRect(ctx.renderer, nil);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -29,10 +29,15 @@ UI_Element :: struct {
|
||||||
UI_Element_Kind :: union {
|
UI_Element_Kind :: union {
|
||||||
UI_Element_Kind_Text,
|
UI_Element_Kind_Text,
|
||||||
UI_Element_Kind_Image,
|
UI_Element_Kind_Image,
|
||||||
|
UI_Element_Kind_Custom,
|
||||||
}
|
}
|
||||||
|
|
||||||
UI_Element_Kind_Text :: distinct string
|
UI_Element_Kind_Text :: string
|
||||||
UI_Element_Kind_Image :: distinct u64
|
UI_Element_Kind_Image :: distinct u64
|
||||||
|
UI_Element_Kind_Custom :: struct {
|
||||||
|
user_data: rawptr,
|
||||||
|
fn: proc(state: ^core.State, element: UI_Element, user_data: rawptr),
|
||||||
|
}
|
||||||
|
|
||||||
UI_Layout :: struct {
|
UI_Layout :: struct {
|
||||||
dir: UI_Direction,
|
dir: UI_Direction,
|
||||||
|
@ -64,6 +69,8 @@ open_element :: proc(state: ^State, kind: UI_Element_Kind, layout: UI_Layout) {
|
||||||
kind = kind,
|
kind = kind,
|
||||||
layout = layout,
|
layout = layout,
|
||||||
}
|
}
|
||||||
|
e.layout.pos = state.curr_elements[state.num_curr].layout.pos
|
||||||
|
e.layout.size = state.curr_elements[state.num_curr].layout.size
|
||||||
|
|
||||||
if parent, ok := state.current_open_element.?; ok {
|
if parent, ok := state.current_open_element.?; ok {
|
||||||
e.parent = parent
|
e.parent = parent
|
||||||
|
@ -86,7 +93,7 @@ open_element :: proc(state: ^State, kind: UI_Element_Kind, layout: UI_Layout) {
|
||||||
state.num_curr += 1
|
state.num_curr += 1
|
||||||
}
|
}
|
||||||
|
|
||||||
close_element :: proc(state: ^State, loc := #caller_location) {
|
close_element :: proc(state: ^State, loc := #caller_location) -> UI_Layout {
|
||||||
if curr, ok := state.current_open_element.?; ok {
|
if curr, ok := state.current_open_element.?; ok {
|
||||||
e := &state.curr_elements[curr]
|
e := &state.curr_elements[curr]
|
||||||
|
|
||||||
|
@ -97,15 +104,16 @@ close_element :: proc(state: ^State, loc := #caller_location) {
|
||||||
switch v in e.kind {
|
switch v in e.kind {
|
||||||
case UI_Element_Kind_Text: {
|
case UI_Element_Kind_Text: {
|
||||||
// FIXME: properly use font size
|
// FIXME: properly use font size
|
||||||
e.layout.size[0] = len(v) * 9
|
e.layout.size.x = len(v) * 9
|
||||||
}
|
}
|
||||||
case UI_Element_Kind_Image: {
|
case UI_Element_Kind_Image: {
|
||||||
// TODO
|
// TODO
|
||||||
}
|
}
|
||||||
|
case UI_Element_Kind_Custom: { }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
case Exact: { e.layout.size[0] = int(v) }
|
case Exact: { e.layout.size.x = int(v) }
|
||||||
case Fit: {
|
case Fit: {
|
||||||
child_index := e.first
|
child_index := e.first
|
||||||
for child_index != nil {
|
for child_index != nil {
|
||||||
|
@ -114,12 +122,12 @@ close_element :: proc(state: ^State, loc := #caller_location) {
|
||||||
switch e.layout.dir {
|
switch e.layout.dir {
|
||||||
case .RightToLeft: fallthrough
|
case .RightToLeft: fallthrough
|
||||||
case .LeftToRight: {
|
case .LeftToRight: {
|
||||||
e.layout.size[0] += child.layout.size[0]
|
e.layout.size.x += child.layout.size.x
|
||||||
}
|
}
|
||||||
|
|
||||||
case .BottomToTop: fallthrough
|
case .BottomToTop: fallthrough
|
||||||
case .TopToBottom: {
|
case .TopToBottom: {
|
||||||
e.layout.size[0] = math.max(e.layout.size[0], child.layout.size[0])
|
e.layout.size.x = math.max(e.layout.size.x, child.layout.size.x)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -129,21 +137,22 @@ close_element :: proc(state: ^State, loc := #caller_location) {
|
||||||
case Grow: { /* Done in the Grow pass */ }
|
case Grow: { /* Done in the Grow pass */ }
|
||||||
}
|
}
|
||||||
|
|
||||||
switch v in e.layout.kind[1] {
|
switch v in e.layout.kind.y {
|
||||||
case nil: {
|
case nil: {
|
||||||
switch v in e.kind {
|
switch v in e.kind {
|
||||||
case UI_Element_Kind_Text: {
|
case UI_Element_Kind_Text: {
|
||||||
// TODO: wrap text
|
// TODO: wrap text
|
||||||
// FIXME: properly use font size
|
// FIXME: properly use font size
|
||||||
e.layout.size[1] = 16
|
e.layout.size.y = 16
|
||||||
}
|
}
|
||||||
case UI_Element_Kind_Image: {
|
case UI_Element_Kind_Image: {
|
||||||
// TODO
|
// TODO
|
||||||
}
|
}
|
||||||
|
case UI_Element_Kind_Custom: { }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
case Exact: { e.layout.size[1] = int(v) }
|
case Exact: { e.layout.size.y = int(v) }
|
||||||
case Fit: {
|
case Fit: {
|
||||||
child_index := e.first
|
child_index := e.first
|
||||||
for child_index != nil {
|
for child_index != nil {
|
||||||
|
@ -152,12 +161,12 @@ close_element :: proc(state: ^State, loc := #caller_location) {
|
||||||
switch e.layout.dir {
|
switch e.layout.dir {
|
||||||
case .RightToLeft: fallthrough
|
case .RightToLeft: fallthrough
|
||||||
case .LeftToRight: {
|
case .LeftToRight: {
|
||||||
e.layout.size[1] = math.max(e.layout.size[1], child.layout.size[1])
|
e.layout.size.y = math.max(e.layout.size.y, child.layout.size.y)
|
||||||
}
|
}
|
||||||
|
|
||||||
case .BottomToTop: fallthrough
|
case .BottomToTop: fallthrough
|
||||||
case .TopToBottom: {
|
case .TopToBottom: {
|
||||||
e.layout.size[1] += child.layout.size[1]
|
e.layout.size.y += child.layout.size.y
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -167,11 +176,13 @@ close_element :: proc(state: ^State, loc := #caller_location) {
|
||||||
case Grow: { /* Done in the Grow pass */ }
|
case Grow: { /* Done in the Grow pass */ }
|
||||||
}
|
}
|
||||||
|
|
||||||
grow_children(state, curr)
|
|
||||||
|
|
||||||
state.current_open_element = e.parent
|
state.current_open_element = e.parent
|
||||||
|
|
||||||
|
return e.layout
|
||||||
} else {
|
} else {
|
||||||
log.error("'close_element' has unmatched 'open_element' at", loc)
|
log.error("'close_element' has unmatched 'open_element' at", loc)
|
||||||
|
|
||||||
|
return UI_Layout{}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -239,12 +250,21 @@ grow_children :: proc(state: ^State, index: int) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_, x_growing := child.layout.kind.x.(Grow)
|
||||||
|
_, y_growing := child.layout.kind.y.(Grow)
|
||||||
|
|
||||||
|
if x_growing || y_growing {
|
||||||
|
grow_children(state, child_index.?)
|
||||||
|
}
|
||||||
|
|
||||||
child_index = child.next
|
child_index = child.next
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
compute_layout_2 :: proc(state: ^State) {
|
compute_layout_2 :: proc(state: ^State) {
|
||||||
|
grow_children(state, 0)
|
||||||
|
|
||||||
for i in 0..<state.num_curr {
|
for i in 0..<state.num_curr {
|
||||||
e := &state.curr_elements[i]
|
e := &state.curr_elements[i]
|
||||||
|
|
||||||
|
@ -256,7 +276,8 @@ compute_layout_2 :: proc(state: ^State) {
|
||||||
|
|
||||||
switch parent.layout.dir {
|
switch parent.layout.dir {
|
||||||
case .LeftToRight: {
|
case .LeftToRight: {
|
||||||
e.layout.pos[0] = prev.layout.pos[0]+prev.layout.size[0] /* TODO: + child_gap */
|
e.layout.pos.x = prev.layout.pos.x+prev.layout.size.x /* TODO: + child_gap */
|
||||||
|
e.layout.pos.y = parent.layout.pos.y
|
||||||
}
|
}
|
||||||
case .RightToLeft: {
|
case .RightToLeft: {
|
||||||
// TODO:
|
// TODO:
|
||||||
|
@ -264,13 +285,34 @@ compute_layout_2 :: proc(state: ^State) {
|
||||||
}
|
}
|
||||||
|
|
||||||
case .TopToBottom: {
|
case .TopToBottom: {
|
||||||
e.layout.pos[1] = prev.layout.pos[1]+prev.layout.size[1] /* TODO: + child_gap */
|
e.layout.pos.x = parent.layout.pos.x
|
||||||
|
e.layout.pos.y = prev.layout.pos.y+prev.layout.size.y /* TODO: + child_gap */
|
||||||
}
|
}
|
||||||
case .BottomToTop: {
|
case .BottomToTop: {
|
||||||
// TODO:
|
// TODO:
|
||||||
// e.layout.pos[1] = prev.layout.pos[1]-prev.layout.size[1] /* TODO: - child_gap */
|
// e.layout.pos[1] = prev.layout.pos[1]-prev.layout.size[1] /* TODO: - child_gap */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
switch parent.layout.dir {
|
||||||
|
case .LeftToRight: {
|
||||||
|
e.layout.pos.x = parent.layout.pos.x /* TODO: + padding */
|
||||||
|
e.layout.pos.y = parent.layout.pos.y
|
||||||
|
}
|
||||||
|
case .RightToLeft: {
|
||||||
|
// TODO:
|
||||||
|
// e.layout.pos[0] = prev.layout.pos[0]-prev.layout.size[0] /* TODO: - padding */
|
||||||
|
}
|
||||||
|
|
||||||
|
case .TopToBottom: {
|
||||||
|
e.layout.pos.x = parent.layout.pos.x
|
||||||
|
e.layout.pos.y = parent.layout.pos.y /* TODO: + padding */
|
||||||
|
}
|
||||||
|
case .BottomToTop: {
|
||||||
|
// TODO:
|
||||||
|
// e.layout.pos[1] = prev.layout.pos[1]-prev.layout.size[1] /* TODO: - padding */
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -305,6 +347,9 @@ new_draw :: proc(state: ^State, core_state: ^core.State) {
|
||||||
case UI_Element_Kind_Image: {
|
case UI_Element_Kind_Image: {
|
||||||
// TODO
|
// TODO
|
||||||
}
|
}
|
||||||
|
case UI_Element_Kind_Custom: {
|
||||||
|
v.fn(core_state, e^, v.user_data)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue