Orkuncakilkaya
9f59000f5b
- <input type="number" min max step>: typed digits replace its value (a minus when min allows one, a point when step has a fraction), Enter or leaving the field commits them held between min and max, the left and right arrows step it. - <input type="key">: Enter or a click starts it listening and the next key is its value, Tab, the arrows and Enter included; Esc stops it listening, Backspace clears it, `shown` names the value, and ui_capturing() tells the host to leave its keys alone (through the frame that ended it). - note="..." under any control's label (.ui-labels > .ui-label + .ui-note); a range's (or number's) value with decimals, format="percent" and a unit. - A popover with `anchor="id"` (the nearest element of that id) or a bare `anchor` (the element before it) sits beside it by `placement` (right, left, bottom, top), its margin the gap, opens to the other side where it would leave the screen, and is kept on it. - A tooltip's title splits into lines at a newline or a written \n. - text-shadow, inherited, drawn sharp under the text. - ui_opacity(): the group opacity a native's draw is at. - border-image is drawn as painted with no background colour, tinted by one, and not at all when that colour is transparent (it drew a white nine-slice). - A picture file is drawn untinted, as a browser draws one; an atlas cell (prefix:name) still takes the color around it, and an <img> with its own color is tinted by it. - The render3d backend loads a picture again when its file changes or appears (a failed load was kept for ever), and at once after ui_image_reload(path); takes a path with a drive letter (C:/...) as a path rather than an atlas; and slices a nine-slice by its texture's own width and height. - ui_inputs.ludic and ui_look.ludic; LANGUAGE.md and the changeset say all of it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
88 lines
3.8 KiB
Text
88 lines
3.8 KiB
Text
# controls.ludic - what a control does: a button (or anything with on-click) is pressed, a checkbox
|
|
# flips, a radio chooses its value, a select steps through its options, a range moves by its step
|
|
# (or to where the pointer is on its track), a text field takes what is typed, a number field its
|
|
# digits, a key field the next key. Each says so with on-change and event.value, after the frame is drawn.
|
|
function ct_type(n: UiNode) -> string {
|
|
if n.tag == "select" { return "select" }
|
|
if n.tag != "input" { return "" }
|
|
let t = ui_attr_text(n, "type")
|
|
if t == "" { return "text" }
|
|
return t
|
|
}
|
|
function ct_takes_arrows(n: UiNode) -> bool { return ct_type(n) == "range" or ct_type(n) == "select" or ct_type(n) == "number" }
|
|
function ct_takes_space(n: UiNode) -> bool { return ct_type(n) == "text" }
|
|
function ct_change(n: UiNode, v: Val) -> void {
|
|
ui_sound(ct_sound(n))
|
|
ui_fire(n, "change", v)
|
|
}
|
|
function ct_sound(n: UiNode) -> string {
|
|
let s = ui_attr_text(n, "sound")
|
|
if s == "" { return "click" }
|
|
return s
|
|
}
|
|
function ct_activate(n: UiNode) -> void {
|
|
if not n.enabled { return }
|
|
let t = ct_type(n)
|
|
if t == "checkbox" { ct_change(n, vl_bool(not ui_attr_on(n, "checked"))) } else if t == "radio" { ct_change(n, ui_attr(n, "value")) } else if t == "select" { ct_step(n, 1) } else if t == "key" { ct_key_start(n) } else if t == "number" { ct_num_commit(n) } else if t == "" {
|
|
ui_sound(ct_sound(n))
|
|
ui_fire(n, "press", Value.null())
|
|
}
|
|
}
|
|
function ct_step(n: UiNode, d: int) -> void {
|
|
let t = ct_type(n)
|
|
if t == "select" and n.opts != null and len(n.opts) > 0 {
|
|
let at = (ct_option_at(n, n.opts) + d + len(n.opts)) % len(n.opts)
|
|
let ov = ui_attr(n.opts[at], "value")
|
|
if Value.kind(ov) == 0 { ct_change(n, Value.int(at)) } else { ct_change(n, ov) }
|
|
}
|
|
if t == "number" { ct_num_step(n, d) }
|
|
if t == "range" {
|
|
var step = Value.as_float(ui_attr(n, "step"))
|
|
if step <= 0.0 { step = 1.0 }
|
|
ct_range_set(n, Value.as_float(ui_attr(n, "value")) + step * float(d))
|
|
}
|
|
}
|
|
function ct_range_set(n: UiNode, v0: float) -> void {
|
|
let lo = Value.as_float(ui_attr(n, "min"))
|
|
let hi = Value.as_float(ui_attr(n, "max"))
|
|
let v = Math.clamp(v0, lo, Math.max(hi, lo))
|
|
if v != Value.as_float(ui_attr(n, "value")) { ui_fire(n, "change", Value.float(v)) }
|
|
}
|
|
# a range's track pressed or dragged: the value where the pointer is
|
|
function ct_press(n: UiNode, x: float, y: float) -> void {
|
|
if ct_type(n) != "range" { return }
|
|
for i in 0 .. len(n.children) {
|
|
let t = n.children[i]
|
|
if sel_has(t.classes, "ui-track") and t.cw > 0.0 {
|
|
let lo = Value.as_float(ui_attr(n, "min"))
|
|
let hi = Value.as_float(ui_attr(n, "max"))
|
|
var step = Value.as_float(ui_attr(n, "step"))
|
|
if step <= 0.0 { step = 1.0 }
|
|
let raw = lo + Math.clamp((x - t.x) / t.cw, 0.0, 1.0) * (hi - lo)
|
|
ct_range_set(n, lo + float(int((raw - lo) / step + 0.5)) * step)
|
|
}
|
|
}
|
|
}
|
|
function ct_drag(root: UiNode, key: string, x: float, y: float) -> void {
|
|
let n = fr_node(root, key)
|
|
if n != null { ct_press(n, x, y) }
|
|
}
|
|
# typing into a focused text field, or the key a key field is waiting for
|
|
function ct_typed(n: UiNode) -> void {
|
|
let t = ct_type(n)
|
|
if t == "key" { ct_key_typed(n) }
|
|
if t == "number" { ct_num_typed(n) }
|
|
if t != "text" or (in_now.typed == "" and not in_now.backspace) { return }
|
|
var s = ui_attr_text(n, "value")
|
|
if in_now.backspace and len(s) > 0 { s = s[0..ct_char_start(s)] }
|
|
var max = Value.as_int(ui_attr(n, "maxlength"))
|
|
if max <= 0 { max = 1000 }
|
|
if len(in_now.typed) > 0 and len(s) < max { s = s + in_now.typed[0..Math.min(len(in_now.typed), max - len(s))] }
|
|
ui_fire(n, "change", Value.str(s))
|
|
}
|
|
# where the last UTF-8 character starts, so Backspace takes a whole letter
|
|
function ct_char_start(s: string) -> int {
|
|
var i = len(s) - 1
|
|
while i > 0 and s[i] >= 128 and s[i] < 192 { i -= 1 }
|
|
return i
|
|
}
|