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:
Orkun ÇAKILKAYA 2026-09-29 12:32:45 +03:00
parent a299117858
commit e476a9d975
12 changed files with 129 additions and 2 deletions

View 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)}`)
}
}

View file

@ -0,0 +1 @@
.cell { width: 100px; height: 40px }

View file

@ -0,0 +1,3 @@
component Cell {
prop caption: string = ""
}

View file

@ -0,0 +1,3 @@
<div class="item">
<button class="cell" on-click="emit click"><p>{caption}</p></button>
</div>

View file

@ -0,0 +1 @@
div { width: 400px }

View file

@ -0,0 +1,4 @@
component Pick {
state got: int = -1
on pick(i: int) { got = i }
}

View 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>

View 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}`)
}
}