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>
65 lines
3 KiB
Text
65 lines
3 KiB
Text
# ui_look.ludic — what ludic.ui draws, through a backend that writes each call down: a component
|
|
# whose root is another component, styled by every sheet above it by specificity; text-shadow under
|
|
# text; a native reading the opacity it is drawn at (ui_opacity); border-image as painted, tinted by
|
|
# a background colour, and gone under `transparent`; a picture drawn as it is and an atlas cell in
|
|
# the text's colour; a tooltip of two lines; and popovers placed beside their anchors, one flipped.
|
|
import "ludic.ui"
|
|
import "ui_look_parts/Look.ludic"
|
|
import "ui_look_parts/Middle.ludic"
|
|
import "ui_look_parts/Inner.ludic"
|
|
import "ui_look_parts/Menu.ludic"
|
|
program UiLook {
|
|
numbers float
|
|
var said: []string = new []string
|
|
var seen: float = 0.0
|
|
function rec_rect(x: float, y: float, w: float, h: float, c: int, a: float) -> void { }
|
|
function rec_text(x: float, y: float, s: string, size: float, c: int, a: float) -> void { push(said, `text {s} {int(x)},{int(y)} {ui_hex(c)}`) }
|
|
function rec_image(src: string, x: float, y: float, w: float, h: float, c: int, a: float) -> void { push(said, `image {src} {ui_hex(c)}`) }
|
|
function rec_nine(src: string, slice: float, x: float, y: float, w: float, h: float, dst: float, c: int, a: float) -> void { push(said, `nine {int(w)} {ui_hex(c)}`) }
|
|
function gauge_measure(n: UiNode, avail: float) -> void { }
|
|
function gauge_draw(n: UiNode) -> void { seen = ui_opacity() }
|
|
function count(s: string) -> int {
|
|
var n = 0
|
|
for i in 0 .. len(said) {
|
|
if Text.starts_with(said[i], s) { n += 1 }
|
|
}
|
|
return n
|
|
}
|
|
function has(s: string) -> string {
|
|
for i in 0 .. len(said) {
|
|
if Text.starts_with(said[i], s) { return said[i] }
|
|
}
|
|
return "-"
|
|
}
|
|
function show(name: string, i: UiInput) -> UiNode {
|
|
ui_input(i)
|
|
said = new []string
|
|
ui_show(name, null, 0.0, 0.0, 400.0, 300.0)
|
|
let root: UiNode = ui_nodes(name, null)
|
|
ui_place(root, 0.0, 0.0, 400.0, 300.0)
|
|
return root.children[0]
|
|
}
|
|
entry {
|
|
let b = new UiBackend
|
|
b.rect = fn rec_rect
|
|
b.text = fn rec_text
|
|
b.image = fn rec_image
|
|
b.nine = fn rec_nine
|
|
ui_backend(b)
|
|
ui_native("gauge", fn gauge_measure, fn gauge_draw)
|
|
var page = show("Look", new UiInput)
|
|
let inner = page.children[0]
|
|
let tip = page.children[7]
|
|
let rest = new UiInput
|
|
rest.x = tip.x + 2.0
|
|
rest.y = tip.y + 2.0
|
|
for f in 0 .. 40 { page = show("Look", rest) }
|
|
print(`root {inner.tag}.{inner.classes[0]}.{inner.classes[1]}.{inner.classes[2]} pad {int(inner.pt)} margin {int(inner.mt)} color {ui_hex(inner.fg)}`)
|
|
print(`{has("text Hi")} | {has("text Hi 0")} | opacity {seen} | {has("nine 40 #ffffff")} {has("nine 40 #ff0000")} of {count("nine")}`)
|
|
print(`{has("image photo")} | {has("image icon")} | {has("text first")} | {has("text second")}`)
|
|
let menu = show("Menu", new UiInput)
|
|
let a = menu.children[1]
|
|
let c = menu.children[3]
|
|
print(`by id at {int(a.x)},{int(a.y)} | flipped at {int(c.x)},{int(c.y)} {int(c.cw)}x{int(c.ch)}`)
|
|
}
|
|
}
|