Skip to content

Commit 4c46ef4

Browse files
rcqlsrcqls
authored
add BoxLayout, fix scrolling (#501)
1 parent c7c115c commit 4c46ef4

28 files changed

+1559
-103
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ examples/**/*
1111
!examples/**/*.vab
1212
!examples/android
1313
!examples/assets
14+
!examples/layout
15+
!examples/component
1416
fmt_verify_all
1517

1618
# Ignore editor files

‎bin/vui_edit.v

+2-2
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ fn main() {
6262
on_file_changed: fn [mut app] (mut mf uic.MenuFileComponent) {
6363
mf.layout.ui.window.set_title('V UI Edit: ${mf.file}')
6464
// reinit textbox scrollview
65-
mut tb := mf.layout.ui.window.textbox('edit')
65+
mut tb := mf.layout.ui.window.get_or_panic[ui.TextBox]('edit')
6666
tb.scrollview.set(0, .btn_y)
6767
ui.scrollview_reset(mut tb)
6868
tv := mf.treeview_component()
@@ -81,7 +81,7 @@ fn main() {
8181
}
8282
on_save: fn (mf &uic.MenuFileComponent) {
8383
// println("save $mf.file")
84-
tb := mf.layout.ui.window.textbox('edit')
84+
tb := mf.layout.ui.window.get_or_panic[ui.TextBox]('edit')
8585
// println("text: <${*tb.text}>")
8686
os.write_file(mf.file, tb.text) or {}
8787
}

‎examples/7guis/circledrawer.v

+1
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,7 @@ fn main() {
166166
ui.canvas_plus(
167167
bg_color: gx.white
168168
bg_radius: .025
169+
clipping: true
169170
on_draw: app.draw_circles
170171
on_click: app.click_circles
171172
on_mouse_move: app.mouse_move_circles

‎examples/demo_event.v

+3-10
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,8 @@
11
import ui
22
import gx
33

4-
struct App {
5-
mut:
6-
window &ui.Window = unsafe { nil }
7-
info string = '....'
8-
}
9-
104
fn main() {
11-
mut app := &App{}
12-
app.window = ui.window(
5+
window := ui.window(
136
width: 600
147
height: 600
158
title: 'V UI: Event'
@@ -60,12 +53,12 @@ fn main() {
6053
id: 'info'
6154
mode: .multiline | .read_only
6255
bg_color: gx.hex(0xfcf4e4ff)
63-
text: &app.info
56+
// text: &app.info
6457
text_size: 24
6558
),
6659
]
6760
),
6861
]
6962
)
70-
ui.run(app.window)
63+
ui.run(window)
7164
}

‎examples/demo_label.v

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import ui
2+
3+
fn main() {
4+
ui.run(ui.window(
5+
width: 300
6+
height: 100
7+
title: 'Name'
8+
children: [
9+
ui.column(
10+
// margin_: 20
11+
widths: ui.stretch
12+
heights: ui.compact
13+
children: [
14+
ui.label(
15+
text: 'Centered text'
16+
justify: [0.5, 0.75]
17+
// text_align: .center
18+
),
19+
]
20+
),
21+
]
22+
))
23+
}

‎examples/demo_text_width_additive.v

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import ui
2+
import gx
3+
4+
fn main() {
5+
win := ui.window(
6+
width: 1000
7+
height: 600
8+
title: 'V UI: Test text_width_additive'
9+
mode: .resizable
10+
children: [
11+
ui.column(
12+
widths: ui.stretch
13+
heights: [ui.compact, ui.stretch]
14+
margin_: 5
15+
spacing: 10
16+
children: [
17+
ui.textbox(
18+
id: 'text'
19+
placeholder: 'Type text here to show textwidth below...'
20+
text_size: 20
21+
on_change: fn (tb_text &ui.TextBox) {
22+
mut tb := tb_text.ui.window.get_or_panic[ui.TextBox]('info')
23+
// that's weird text_width is not additive function
24+
ustr := tb_text.text.runes()
25+
mut total_twa, mut total_tw, mut total_ts := 0.0, 0.0, 0.0
26+
mut out := "text_width_additive vs text_width vs text_size:'\n\n"
27+
for i in 0 .. ustr.len {
28+
twa := ui.DrawTextWidget(tb).text_width_additive(ustr[i..(i + 1)].string())
29+
total_twa += twa
30+
tw := ui.DrawTextWidget(tb).text_width(ustr[i..(i + 1)].string())
31+
total_tw += tw
32+
ts, _ := ui.DrawTextWidget(tb).text_size(ustr[i..(i + 1)].string())
33+
total_ts += ts
34+
full_twa := ui.DrawTextWidget(tb).text_width_additive(ustr[..i + 1].string())
35+
full_tw := ui.DrawTextWidget(tb).text_width(ustr[..i + 1].string())
36+
full_ts, _ := ui.DrawTextWidget(tb).text_size(ustr[..i + 1].string())
37+
out += '${i}) ${ustr[i..(i + 1)].string()} (${twa} vs ${tw} vs ${ts}) (${total_twa} == ${full_twa} vs ${total_tw} == ${full_tw} vs ${total_ts} == ${full_ts}) \n'
38+
}
39+
tb.set_text(out)
40+
}
41+
),
42+
ui.textbox(
43+
id: 'info'
44+
mode: .multiline | .read_only
45+
bg_color: gx.hex(0xfcf4e4ff)
46+
// text: &app.info
47+
text_size: 24
48+
),
49+
]
50+
),
51+
]
52+
)
53+
ui.run(win)
54+
}

‎examples/layout/box_layout.v

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import ui
2+
import gx
3+
4+
const (
5+
win_width = 400
6+
win_height = 300
7+
)
8+
9+
fn main() {
10+
ui.run(ui.window(
11+
width: win_width
12+
height: win_height
13+
title: 'V UI: Rectangles inside BoxLayout'
14+
mode: .resizable
15+
children: [
16+
ui.box_layout(
17+
id: 'bl'
18+
children: {
19+
'id1: (0,0) ++ (30,30)': ui.rectangle(
20+
color: gx.rgb(255, 100, 100)
21+
)
22+
'id2: (30,30) -> (-30.5,-30.5)': ui.rectangle(
23+
color: gx.rgb(100, 255, 100)
24+
)
25+
'id3: (0.5,0.5) -> (1,1)': ui.rectangle(
26+
color: gx.rgb(100, 100, 255)
27+
)
28+
'id4: (-30.5, -30.5) ++ (30,30)': ui.rectangle(
29+
color: gx.white
30+
)
31+
}
32+
),
33+
]
34+
))
35+
}

‎examples/layout/box_layout_inside_row.v

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import ui
2+
import gx
3+
4+
const (
5+
win_width = 400
6+
win_height = 300
7+
)
8+
9+
fn main() {
10+
window := ui.window(
11+
width: win_width
12+
height: win_height
13+
title: 'V UI: Rectangles inside BoxLayout'
14+
mode: .resizable
15+
children: [
16+
ui.row(
17+
margin_: 20
18+
widths: ui.stretch
19+
heights: ui.stretch
20+
children: [
21+
ui.box_layout(
22+
id: 'bl'
23+
children: {
24+
'id1: (0,0) ++ (0.3,0.3)': ui.rectangle(
25+
color: gx.rgb(255, 100, 100)
26+
)
27+
'id2: (0.3,0.3) ++ (0.4,0.4)': ui.rectangle(
28+
color: gx.rgb(100, 255, 100)
29+
)
30+
'id3: (0.7,0.7) ++ (0.3,0.3)': ui.rectangle(
31+
color: gx.rgb(100, 100, 255)
32+
)
33+
}
34+
),
35+
]
36+
),
37+
]
38+
)
39+
ui.run(window)
40+
}

‎examples/layout/box_layout_with_textbox.v

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import ui
2+
import gx
3+
4+
const (
5+
win_width = 400
6+
win_height = 300
7+
)
8+
9+
struct App {
10+
mut:
11+
text string
12+
}
13+
14+
fn make_tb(mut app App, has_row bool) ui.Widget {
15+
tb := ui.textbox(
16+
mode: .multiline
17+
bg_color: gx.yellow
18+
text: &app.text
19+
)
20+
return if has_row {
21+
ui.Widget(ui.row(
22+
widths: ui.stretch
23+
children: [
24+
tb,
25+
]
26+
))
27+
} else {
28+
ui.Widget(tb)
29+
}
30+
}
31+
32+
fn main() {
33+
mut with_row := false
34+
$if with_row ? {
35+
with_row = true
36+
}
37+
mut app := App{
38+
text: 'blah blah blah\n'.repeat(10)
39+
}
40+
ui.run(ui.window(
41+
width: win_width
42+
height: win_height
43+
title: 'V UI: Rectangles inside BoxLayout'
44+
mode: .resizable
45+
children: [
46+
ui.box_layout(
47+
id: 'bl'
48+
children: {
49+
'id1: (0,0) ++ (30,30)': ui.rectangle(
50+
color: gx.rgb(255, 100, 100)
51+
)
52+
'id2: (30,30) -> (-30.5,-30.5)': ui.rectangle(
53+
color: gx.rgb(100, 255, 100)
54+
)
55+
'id3: (0.5,0.5) -> (1,1)': make_tb(mut app, with_row)
56+
'id4: (-30.5, -30.5) ++ (30,30)': ui.rectangle(
57+
color: gx.white
58+
)
59+
}
60+
),
61+
]
62+
))
63+
}

‎examples/demo_canvaslayout.v renamed to ‎examples/layout/canvas_layout.v

+11-2
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,16 @@ import gx
33
import os
44

55
const (
6-
win_width = 500
6+
win_width = 550
77
win_height = 385
88
)
99

1010
fn main() {
11-
mut logo := os.resource_abs_path(os.join_path('assets/img', 'logo.png'))
11+
mut logo := os.resource_abs_path(os.join_path('../assets/img', 'logo.png'))
1212
$if android {
1313
logo = 'img/logo.png'
1414
}
15+
mut text := 'gcghchc\n fvfyfy' + 'titi\n'.repeat(10)
1516
mut window := ui.window(
1617
width: win_width
1718
height: win_height
@@ -163,6 +164,14 @@ fn main() {
163164
menu.hidden = !menu.hidden
164165
}
165166
)),
167+
ui.at(300, 30, ui.textbox(
168+
id: 'tb'
169+
width: 150
170+
height: 100
171+
mode: .multiline
172+
bg_color: gx.yellow
173+
text: &text
174+
)),
166175
]
167176
),
168177
]

‎examples/dynamic_layout.v renamed to ‎examples/layout/dynamic_layout.v

File renamed without changes.

‎examples/demo_row_layout.v renamed to ‎examples/layout/row_layout.v

File renamed without changes.

‎examples/nested_scrollview_box_layout.v

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import ui
2+
import gx
3+
4+
const (
5+
win_width = 550
6+
win_height = 300
7+
8+
box_width = 110
9+
box_height = 90
10+
)
11+
12+
struct App {
13+
mut:
14+
box_text []string
15+
}
16+
17+
fn make_scroll_area(mut app App) ui.Widget {
18+
mut kids := map[string]ui.Widget{}
19+
for r in 0 .. 5 {
20+
for c in 0 .. 5 {
21+
id := 'box${r}_${c}'
22+
app.box_text << 'box${r}${c}\n...\n...\n...\n...\n...\n...\n...\n...\n...'
23+
kids['${id}: (${r * 110},${c * 90}) ++ (100,80)'] = ui.textbox(
24+
width: box_width
25+
height: box_height
26+
bg_color: gx.white
27+
is_multiline: true
28+
text: &app.box_text[app.box_text.len - 1]
29+
)
30+
}
31+
}
32+
33+
return ui.box_layout(
34+
id: 'bl'
35+
children: kids
36+
)
37+
}
38+
39+
fn win_key_down(w &ui.Window, e ui.KeyEvent) {
40+
if e.key == .escape {
41+
// TODO: w.close() not implemented (no multi-window support yet!)
42+
if w.ui.dd is ui.DrawDeviceContext {
43+
w.ui.dd.quit()
44+
}
45+
}
46+
}
47+
48+
fn main() {
49+
mut app := App{}
50+
kids := make_scroll_area(mut app)
51+
mut win := ui.window(
52+
width: win_width
53+
height: win_height
54+
title: 'V nested scrollviewsboxlayout inside '
55+
on_key_down: win_key_down
56+
mode: .resizable
57+
children: [
58+
// ui.column(
59+
// heights: ui.stretch
60+
// widths: ui.stretch
61+
// children: [
62+
kids,
63+
// ]
64+
// ),
65+
]
66+
)
67+
ui.run(win)
68+
}

0 commit comments

Comments
 (0)