feat(ui): ludic.ui grows toward HTML, CSS and React (Phase 0.U1-U4)
- Natives: ui_native(tag, measure, draw) makes an element the program draws itself; ui_fire runs its on-<event> with event.value. input, select and textarea have simple defaults. - React: - keyed <each>, <let>, <provide> context through components, <fragment>; - named slots, default props on <component>; - on-mount / on-unmount; - inline text inside text elements. - CSS: - custom properties and var(); - position relative/absolute/fixed with insets and z-index; - em/rem/vw/vh and @media; - wrapping text and ellipsis, overflow; - + and ~ combinators, :nth-child(an+b), :checked, :active. - Developing: errors with file:line, ui_errors(), ui_reload() keeping state, and an inspector-style ui_dump. - view fields infer the type of a literal or a named function's result. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
66a2bc2214
commit
637d07400e
39 changed files with 42012 additions and 40795 deletions
|
|
@ -1,17 +1,18 @@
|
|||
# frame.ludic - a screen shown: built from the view's model, laid out, drawn, and its presses
|
||||
# run once the frame is drawn, so nothing the view does can change a frame half way through it
|
||||
var fr_was_down: bool = false
|
||||
var fr_pressed: []UiNode = new []UiNode
|
||||
var fr_down_now: bool = false
|
||||
|
||||
export function ui_show(screen: string, view: UiView, x: float, y: float, w: float, h: float) -> void {
|
||||
ui_viewport(w, h)
|
||||
let root = ui_nodes(screen, view)
|
||||
if root == null { return }
|
||||
ui_place(root, x, y, w, h)
|
||||
fr_pressed = new []UiNode
|
||||
nt_fired_clear()
|
||||
fr_pointer(root)
|
||||
if ui_be != null and ui_be.text != null { fr_draw(root) }
|
||||
let pressed = fr_pressed
|
||||
for i in 0 .. len(pressed) { ui_press(pressed[i]) }
|
||||
lc_run(screen)
|
||||
nt_fired_run()
|
||||
}
|
||||
# the screen's nodes for this frame, not yet laid out - for a test, or a host that places them
|
||||
export function ui_nodes(screen: string, view: UiView) -> UiNode {
|
||||
|
|
@ -21,6 +22,7 @@ export function ui_nodes(screen: string, view: UiView) -> UiNode {
|
|||
return null
|
||||
}
|
||||
let t = lib_screens[si]
|
||||
lc_begin()
|
||||
ui_view = view
|
||||
let e = env_new(null)
|
||||
if view != null and view.model != null { e.model = view.model() } else { e.model = Value.object() }
|
||||
|
|
@ -34,15 +36,22 @@ export function ui_nodes(screen: string, view: UiView) -> UiNode {
|
|||
root.akeys = new []string
|
||||
root.avals = new []string
|
||||
root.vals = new []Val
|
||||
root.tag = "screen"
|
||||
for i in 0 .. len(t.keys) {
|
||||
if t.keys[i] != "name" { el_keep(root, t.keys[i], ui_eval(t.vals[i], e)) }
|
||||
}
|
||||
for i in 0 .. len(root.akeys) { el_apply(root, root.akeys[i], root.vals[i]) }
|
||||
bd_kids(t.kids, e, screen, root.children)
|
||||
cs_tree(root)
|
||||
return root
|
||||
}
|
||||
# the room vw, vh and @media measure against; ui_show sets it to the screen's rectangle
|
||||
export function ui_viewport(w: float, h: float) -> void {
|
||||
ly_vp_w = w
|
||||
ly_vp_h = h
|
||||
}
|
||||
export function ui_place(root: UiNode, x: float, y: float, w: float, h: float) -> void {
|
||||
ly_vp_x = x
|
||||
ly_vp_y = y
|
||||
root.w = UI_FILL
|
||||
root.h = UI_FILL
|
||||
var fg = 15658734
|
||||
|
|
@ -54,6 +63,8 @@ export function ui_place(root: UiNode, x: float, y: float, w: float, h: float) -
|
|||
export function ui_press(n: UiNode) -> void {
|
||||
if n.act != null and n.enabled { act_run(n.act, n.env) }
|
||||
}
|
||||
# any event, as if the element had fired it - for a test
|
||||
export function ui_event(n: UiNode, name: string, value: Val) -> void { nt_run(n, name, value) }
|
||||
# the pointer: what it is over is :hover next frame (the element and all around it, as in CSS),
|
||||
# and without a renderer's own button a press on the deepest pressable thing is a press
|
||||
var fr_hover: []string = new []string
|
||||
|
|
@ -68,10 +79,14 @@ function fr_pointer(root: UiNode) -> void {
|
|||
let keys = new []string
|
||||
fr_under(root, px, py, keys)
|
||||
fr_hover = keys
|
||||
if ui_be.button != null or ui_be.pointer_down == null { return }
|
||||
let hit = fr_hit(root, px, py)
|
||||
if ui_be.pointer_down == null { return }
|
||||
let down = ui_be.pointer_down()
|
||||
if hit != null and down and not fr_was_down { push(fr_pressed, hit) }
|
||||
fr_down_now = down
|
||||
if ui_be.button != null { return }
|
||||
let hit = fr_hit(root, px, py)
|
||||
if hit != null and down and not fr_was_down and hit.enabled {
|
||||
if hit.kind == UI_NATIVE { fm_press(hit) } else { ui_fire(hit, "press", Value.null()) }
|
||||
}
|
||||
fr_was_down = down
|
||||
}
|
||||
function fr_under(n: UiNode, px: float, py: float, keys: []string) -> void {
|
||||
|
|
@ -89,7 +104,7 @@ function fr_hit(n: UiNode, px: float, py: float) -> UiNode {
|
|||
i -= 1
|
||||
}
|
||||
}
|
||||
if n.act != null { return n }
|
||||
if n.act != null or (n.kind == UI_NATIVE and n.on_names != null and len(n.on_names) > 0) { return n }
|
||||
return null
|
||||
}
|
||||
export function ui_hit(root: UiNode, px: float, py: float) -> UiNode { return fr_hit(root, px, py) }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue