- <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>
76 lines
2.6 KiB
Text
76 lines
2.6 KiB
Text
# popover_anchor.ludic - a popover beside what it belongs to: `<div popover anchor="cell">` sits beside
|
|
# the element with that id (the nearest one, looking out from the popover), and a bare `anchor` beside
|
|
# the element just before it. `placement` is right (the default), left, bottom or top; its margin on
|
|
# that side is the gap. Where it would leave the screen it goes to the other side, and it is kept on it.
|
|
function pp_anchor_all(n: UiNode) -> void {
|
|
if n.children == null { return }
|
|
for i in 0 .. len(n.children) {
|
|
let c = n.children[i]
|
|
if c.popover and Value.kind(ui_attr(c, "anchor")) != 0 { pp_anchor(c, pp_anchor_of(n, i)) }
|
|
pp_anchor_all(c)
|
|
}
|
|
}
|
|
# the element a popover (the i-th child of `parent`) is anchored to, or null
|
|
function pp_anchor_of(parent: UiNode, i: int) -> UiNode {
|
|
let pop = parent.children[i]
|
|
let id = ui_attr_text(pop, "anchor")
|
|
if id == "" or id == "true" {
|
|
var k = i - 1
|
|
while k >= 0 and parent.children[k].popover { k -= 1 }
|
|
if k < 0 { return null }
|
|
return parent.children[k]
|
|
}
|
|
var at = parent
|
|
while at != null {
|
|
let f = pp_by_id(at, id, pop)
|
|
if f != null { return f }
|
|
at = at.parent
|
|
}
|
|
ui_err(`anchor="{id}": no element has that id`)
|
|
return null
|
|
}
|
|
function pp_by_id(n: UiNode, id: string, skip: UiNode) -> UiNode {
|
|
if n == skip { return null }
|
|
if n.id == id { return n }
|
|
if n.children == null { return null }
|
|
for i in 0 .. len(n.children) {
|
|
let f = pp_by_id(n.children[i], id, skip)
|
|
if f != null { return f }
|
|
}
|
|
return null
|
|
}
|
|
function pp_anchor(p: UiNode, a: UiNode) -> void {
|
|
if a == null { return }
|
|
let side = ui_attr_text(p, "placement")
|
|
let w = p.cw
|
|
let h = p.ch
|
|
var x = a.x
|
|
var y = a.y
|
|
if side == "top" or side == "bottom" {
|
|
let below = a.y + a.ch + p.mt
|
|
let above = a.y - h - p.mb
|
|
y = pp_side(side == "top", above, below, h, ly_vp_y, ly_vp_h)
|
|
x = a.x + p.ml
|
|
} else {
|
|
let right = a.x + a.cw + p.ml
|
|
let left = a.x - w - p.mr
|
|
x = pp_side(side == "left", left, right, w, ly_vp_x, ly_vp_w)
|
|
y = a.y + p.mt
|
|
}
|
|
x = Math.max(ly_vp_x, Math.min(x, ly_vp_x + ly_vp_w - w))
|
|
y = Math.max(ly_vp_y, Math.min(y, ly_vp_y + ly_vp_h - h))
|
|
ly_place(p, x, y, w, h)
|
|
sc_apply(p)
|
|
}
|
|
# where along one axis: the side asked for (`low` first when `first_low`), else the other when the
|
|
# first leaves the screen and the other does not
|
|
function pp_side(first_low: bool, low: float, high: float, size: float, v0: float, vsize: float) -> float {
|
|
let low_fits = low >= v0
|
|
let high_fits = high + size <= v0 + vsize
|
|
if first_low {
|
|
if low_fits or not high_fits { return low }
|
|
return high
|
|
}
|
|
if high_fits or not low_fits { return high }
|
|
return low
|
|
}
|