ludic.ui: emit click reaches on-click, and a select's < steps back
From the user's play: clicking an item in the pack opened nothing, and the wardrobe's picks did not respond - both are a component whose button says `emit click` (ItemCell, LookCell, ListRow), answered by its user's on-click. An on-* attribute's name is kept as a browser would have it, so on-click is on-press (tpl_event), and the emit looked for "click" and found nothing. An emitted name now goes through the same tpl_event. And a settings cycler's left arrow did the right one's job: any press let go on a select stepped it forward. ct_activate_at steps back when it is let go over the select's .ui-prev; Enter and the rest of the select still step forward. Goldens ui_emit_click (the mouse and a press both reach on-click; with the toolchain before this, neither does) and ui_select_arrows (1 -> 0 on <, then 2 on > >; before this, 1 -> 2 on <). The 33 ui examples pass. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
a299117858
commit
e476a9d975
12 changed files with 129 additions and 2 deletions
40
examples/library/ui_emit_click.ludic
Normal file
40
examples/library/ui_emit_click.ludic
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
# ui_emit_click.ludic - a component whose button says `emit click` is answered by its user's
|
||||||
|
# on-click, by the mouse or a press: on-click is kept as on-press, and the emit once looked for
|
||||||
|
# "click" and found nothing (the pack's items and the wardrobe's picks did not respond)
|
||||||
|
import "ludic.ui"
|
||||||
|
import "ui_emit_click_parts/Cell.ludic"
|
||||||
|
import "ui_emit_click_parts/Pick.ludic"
|
||||||
|
program UiEmitClick {
|
||||||
|
numbers float
|
||||||
|
function frame(ui_st: mut UiState, x: float, y: float, down: bool) -> UiNode {
|
||||||
|
let i = new UiInput
|
||||||
|
i.x = x
|
||||||
|
i.y = y
|
||||||
|
i.down = down
|
||||||
|
ui_input(ui_st, i)
|
||||||
|
ui_show(ui_st, "Pick", null, 0.0, 0.0, 400.0, 400.0)
|
||||||
|
let root: UiNode = ui_nodes(ui_st, "Pick", null)
|
||||||
|
ui_place(ui_st, root, 0.0, 0.0, 400.0, 400.0)
|
||||||
|
return root
|
||||||
|
}
|
||||||
|
function first_text(n: UiNode) -> string {
|
||||||
|
if n.text != "" { return n.text }
|
||||||
|
for i in 0 .. len(n.children) { let t = first_text(n.children[i]); if t != "" { return t } }
|
||||||
|
return ""
|
||||||
|
}
|
||||||
|
entry (ui_st: mut UiState) {
|
||||||
|
var root = frame(ui_st, -1.0, -1.0, false)
|
||||||
|
root = frame(ui_st, -1.0, -1.0, false)
|
||||||
|
let b = root.children[0].children[2].children[0]
|
||||||
|
let x = b.x + b.cw / 2.0
|
||||||
|
let y = b.y + b.ch / 2.0
|
||||||
|
root = frame(ui_st, x, y, false)
|
||||||
|
root = frame(ui_st, x, y, true)
|
||||||
|
root = frame(ui_st, x, y, false)
|
||||||
|
root = frame(ui_st, x, y, false)
|
||||||
|
let clicked = first_text(root)
|
||||||
|
ui_press(ui_st, root.children[0].children[1].children[0])
|
||||||
|
root = frame(ui_st, x, y, false)
|
||||||
|
print(`{clicked} | pressed: {first_text(root)}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
1
examples/library/ui_emit_click_parts/Cell.lss
Normal file
1
examples/library/ui_emit_click_parts/Cell.lss
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
.cell { width: 100px; height: 40px }
|
||||||
3
examples/library/ui_emit_click_parts/Cell.ludic
Normal file
3
examples/library/ui_emit_click_parts/Cell.ludic
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
component Cell {
|
||||||
|
prop caption: string = ""
|
||||||
|
}
|
||||||
3
examples/library/ui_emit_click_parts/Cell.xml
Normal file
3
examples/library/ui_emit_click_parts/Cell.xml
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<div class="item">
|
||||||
|
<button class="cell" on-click="emit click"><p>{caption}</p></button>
|
||||||
|
</div>
|
||||||
1
examples/library/ui_emit_click_parts/Pick.lss
Normal file
1
examples/library/ui_emit_click_parts/Pick.lss
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
div { width: 400px }
|
||||||
4
examples/library/ui_emit_click_parts/Pick.ludic
Normal file
4
examples/library/ui_emit_click_parts/Pick.ludic
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
component Pick {
|
||||||
|
state got: int = -1
|
||||||
|
on pick(i: int) { got = i }
|
||||||
|
}
|
||||||
5
examples/library/ui_emit_click_parts/Pick.xml
Normal file
5
examples/library/ui_emit_click_parts/Pick.xml
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<div>
|
||||||
|
<p>got {got}</p>
|
||||||
|
<Cell caption="a" on-click="pick(1)"/>
|
||||||
|
<Cell caption="b" on-click="pick(2)"/>
|
||||||
|
</div>
|
||||||
51
examples/library/ui_select_arrows.ludic
Normal file
51
examples/library/ui_select_arrows.ludic
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
# ui_select_arrows.ludic - a select is a cycler: a press let go on its < steps back and on its >
|
||||||
|
# (or anywhere else on it, or Enter) forward. The < once stepped forward too.
|
||||||
|
import "ludic.ui"
|
||||||
|
program UiSelectArrows {
|
||||||
|
numbers float
|
||||||
|
state SelState { v: int = 1 }
|
||||||
|
view V (sel_st: mut SelState) {
|
||||||
|
v = sel_st.v
|
||||||
|
on set(x: int) { sel_st.v = x }
|
||||||
|
}
|
||||||
|
const PAGE: string = "<ui><screen name='s'><select label='Every' value='{v}' on-change='set(event.value)'><option value='{0}'>Off</option><option value='{1}'>5</option><option value='{2}'>15</option><option value='{3}'>30</option></select></screen></ui>"
|
||||||
|
function frame(ui_st: mut UiState, x: float, y: float, down: bool) -> UiNode {
|
||||||
|
let i = new UiInput
|
||||||
|
i.x = x
|
||||||
|
i.y = y
|
||||||
|
i.down = down
|
||||||
|
ui_input(ui_st, i)
|
||||||
|
ui_show(ui_st, "s", view_v(), 0.0, 0.0, 400.0, 400.0)
|
||||||
|
let root: UiNode = ui_nodes(ui_st, "s", view_v())
|
||||||
|
ui_place(ui_st, root, 0.0, 0.0, 400.0, 400.0)
|
||||||
|
return root
|
||||||
|
}
|
||||||
|
function part(n: UiNode, cls: string) -> UiNode {
|
||||||
|
for i in 0 .. len(n.children) {
|
||||||
|
if List.contains(n.children[i].classes, cls) { return n.children[i] }
|
||||||
|
let f = part(n.children[i], cls)
|
||||||
|
if f != null { return f }
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
function click(ui_st: mut UiState, cls: string) -> void {
|
||||||
|
let root = frame(ui_st, -1.0, -1.0, false)
|
||||||
|
let p = part(root, cls)
|
||||||
|
let x = p.x + p.cw / 2.0
|
||||||
|
let y = p.y + p.ch / 2.0
|
||||||
|
frame(ui_st, x, y, false)
|
||||||
|
frame(ui_st, x, y, true)
|
||||||
|
frame(ui_st, x, y, false)
|
||||||
|
frame(ui_st, x, y, false)
|
||||||
|
}
|
||||||
|
entry (ui_st: mut UiState, sel_st: SelState) {
|
||||||
|
ui_backend(ui_st, new UiBackend)
|
||||||
|
ui_load_text(ui_st, PAGE, "s.xml")
|
||||||
|
frame(ui_st, -1.0, -1.0, false)
|
||||||
|
click(ui_st, "ui-prev")
|
||||||
|
let a = sel_st.v
|
||||||
|
click(ui_st, "ui-next")
|
||||||
|
click(ui_st, "ui-next")
|
||||||
|
print(`prev {a} next next {sel_st.v}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -26,7 +26,7 @@ function act_parse(src: string, err: []string) -> UiAct {
|
||||||
push(a.exprs, px_cond(r))
|
push(a.exprs, px_cond(r))
|
||||||
} else if act_keyword(r, "emit") {
|
} else if act_keyword(r, "emit") {
|
||||||
push(a.kinds, A_EMIT)
|
push(a.kinds, A_EMIT)
|
||||||
push(a.names, rd_name(r))
|
push(a.names, tpl_event(rd_name(r))) # `emit click` reaches on-click, which is kept as press
|
||||||
push(a.exprs, null)
|
push(a.exprs, null)
|
||||||
} else {
|
} else {
|
||||||
push(a.kinds, A_CALL)
|
push(a.kinds, A_CALL)
|
||||||
|
|
|
||||||
|
|
@ -65,3 +65,20 @@ function ct_is_int(s: string, i: int) -> bool {
|
||||||
}
|
}
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
# a press let go over a control: on a select's < it steps back, anywhere else on it forward (the <
|
||||||
|
# stepped forward too, so a cycler's left arrow did the right one's job)
|
||||||
|
function ct_activate_at(ui_st: mut UiState, n: UiNode, x: float, y: float) -> void {
|
||||||
|
if ct_type(n) == "select" and ct_over_part(n, "ui-prev", x, y) {
|
||||||
|
ct_step(ui_st, n, -1)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
ct_activate(ui_st, n)
|
||||||
|
}
|
||||||
|
function ct_over_part(n: UiNode, cls: string, x: float, y: float) -> bool {
|
||||||
|
for i in 0 .. len(n.children) {
|
||||||
|
let c = n.children[i]
|
||||||
|
if sel_has(c.classes, cls) and x >= c.x and y >= c.y and x < c.x + c.cw and y < c.y + c.ch { return true }
|
||||||
|
}
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ function fr_pointer(ui_st: mut UiState, root: UiNode) -> void {
|
||||||
if not i.down and ui_st.in_was_down {
|
if not i.down and ui_st.in_was_down {
|
||||||
let was = fr_node(root, ui_st.fr_press_key)
|
let was = fr_node(root, ui_st.fr_press_key)
|
||||||
if was != null { ui_fire(ui_st, was, "up", ui_st.fc_none) }
|
if was != null { ui_fire(ui_st, was, "up", ui_st.fc_none) }
|
||||||
if hit != null and hit.key == ui_st.fr_press_key and hit.enabled { ct_activate(ui_st, hit) }
|
if hit != null and hit.key == ui_st.fr_press_key and hit.enabled { ct_activate_at(ui_st, hit, i.x, i.y) }
|
||||||
ui_st.fr_press_key = ""
|
ui_st.fr_press_key = ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1244,6 +1244,8 @@ function cmd_dev_test() -> int {
|
||||||
controller_case("library/ui_focus_tip", "", "b 14,38 | Drop it 27,45 | Give it away 27,77 | b 14,38", "ui_focus_tip.ludic (L11: a title shows for the keyboard's focus after half a second, and goes back to the pointer when it moves)")
|
controller_case("library/ui_focus_tip", "", "b 14,38 | Drop it 27,45 | Give it away 27,77 | b 14,38", "ui_focus_tip.ludic (L11: a title shows for the keyboard's focus after half a second, and goes back to the pointer when it moves)")
|
||||||
controller_case("library/ui_theme", "", "accent #ff0000 gap 7", "ui_theme.ludic (L11: a component with no stylesheet reads the theme's :root variables from the screen around it)")
|
controller_case("library/ui_theme", "", "accent #ff0000 gap 7", "ui_theme.ludic (L11: a component with no stylesheet reads the theme's :root variables from the screen around it)")
|
||||||
controller_case("library/ui_box", "", "scale 1.5 | panel 35,75 150x90 | missing 1", "ui_box.ludic (L11: ui_scale and ui_box, the interface's scale and an element's laid-out box, read from outside)")
|
controller_case("library/ui_box", "", "scale 1.5 | panel 35,75 150x90 | missing 1", "ui_box.ludic (L11: ui_scale and ui_box, the interface's scale and an element's laid-out box, read from outside)")
|
||||||
|
controller_case("library/ui_emit_click", "", "got 2 | pressed: got 1", "ui_emit_click.ludic (L11: a component's `emit click` reaches its user's on-click, by the mouse and by a press)")
|
||||||
|
controller_case("library/ui_select_arrows", "", "prev 0 next next 2", "ui_select_arrows.ludic (L11: a select's < steps back and its > forward)")
|
||||||
controller_case("library/ui_submit", "", "[hi] chat '' | [hi][yo][Ada] chat '' name 'Ada'", "ui_submit.ludic (L11: on-submit on a text field by Enter or A, clear-on-submit, the focus kept)")
|
controller_case("library/ui_submit", "", "[hi] chat '' | [hi][yo][Ada] chat '' name 'Ada'", "ui_submit.ludic (L11: on-submit on a text field by Enter or A, clear-on-submit, the focus kept)")
|
||||||
controller_case("library/ui_zoom", "", "plain 100 pad 10 text 16 h 20 | half 50 pad 5 text 8 h 10 | half of twice 100 | fit 50 em 16", "ui_zoom.ludic (L11: zoom scales a subtree's lengths, text and layout, multiplies, and takes min() and a length over a length)")
|
controller_case("library/ui_zoom", "", "plain 100 pad 10 text 16 h 20 | half 50 pad 5 text 8 h 10 | half of twice 100 | fit 50 em 16", "ui_zoom.ludic (L11: zoom scales a subtree's lengths, text and layout, multiplies, and takes min() and a length over a length)")
|
||||||
controller_case("library/ui_hold", "", "31 frames 500 ms t 500 | 121 frames 500 ms t 500 | pad 16 frames 250 ms t 250 | dududu", "ui_hold.ludic (L11: on-hold every frame a button is held, by the pointer or A, with dt and t on the clock at any rate)")
|
controller_case("library/ui_hold", "", "31 frames 500 ms t 500 | 121 frames 500 ms t 500 | pad 16 frames 250 ms t 250 | dududu", "ui_hold.ludic (L11: on-hold every frame a button is held, by the pointer or A, with dt and t on the clock at any rate)")
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue