workshopsoft/ludic
2
0
Fork 0
Code Issues Pull requests Projects Releases 26 Packages Wiki Activity Actions

feat(ui): number and key fields, notes, anchored popovers, text-shadow, and pictures as painted

Browse source 
- <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>
This commit is contained in:
Orkun ÇAKILKAYA 2026-09-24 19:55:20 +03:00
parent 7d8f34de17
commit 9f59000f5b
39 changed files with 732 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

65
LANGUAGE.md
View file

@ -324,7 +324,12 @@ component Counter {
- **The template** has one root (use `<fragment>` for several). A component is used by its name as
a tag. `set count = 0` in an action sets its state, and `emit close` runs what its parent passed
as `on-close`. `class`, `style` and `id` on a component's tag land on its root element, styled by
the parent's sheet as well as its own.
the parent's sheet as well as its own; when that root is itself a component, every user in turn
passes theirs down (the outermost's `id` wins). The rules of all those sheets that match the root
are weighed together by specificity, as one sheet's are, and a user's rule wins a tie.
- **A component's names.** An event may be called anything, `set` included (`on set(v: int)`,
pressed as `set(4)`; `set x = ...` is still the action). A `string` prop given a number reads it
as text (`label="{3}"` is `"3"`). Two components of one name are an error that names both files.
- **Compiled in.** The compiler reads the template and the styles from beside the declaration and
inlines each `@import` (a path starting with `/` is from the project's root), so a missing
template fails the build and nothing has to ship beside the program. `ui_reload()` reads the
@ -368,12 +373,21 @@ applies to both:
- **The box model and flex.** Sizes are border boxes.
- `padding` and `margin` take one to four lengths, or one side by name (`padding-left`).
- `border` is `2px solid #ffcc00`, or `border-width` and `border-color`.
- A length is `12`, `12px`, `50%`, `fit`/`auto` or `fill`.
- A length is `12`, `12px`, `50%`, `fit`/`auto`, `fill` or `calc()`. `width: 0` and `height: 0`
are 0, not unset.
- `calc()` takes `+`, `-`, `*` and `/` and brackets over `px`, `em`, `rem`, `vw`, `vh`, plain
numbers and `var()`; in a `width` or `height` it may also hold a percentage of the room
(`calc(50% - 10px)`).
- `flex-grow` (or `flex`) shares out the spare room along `flex-direction`, and `fill` is a share
of 1. `justify-content` takes `flex-start`/`start`, `center`, `end`, `space-between`,
`space-around` or `space-evenly`.
- `align-items` and `align-self` take `start`, `center`, `end` or `stretch`. `flex-wrap: wrap`
breaks a row into lines, and `min-`/`max-width`/`-height` bound it.
- `flex-shrink` gives up room when a line's children want more than it has, each in proportion
to its shrink times its size, and none below its min size, a fixed size or its content. A scroll
box shrinks (and scrolls) and a box in a column shrinks as far as the scroll boxes in it let it,
so a list in a column takes the room its siblings leave with no height of its own. `flex: 1 0`
is the grow and the shrink. `order` rearranges a box's children without touching the tree.
- `gap`, `text-align`, `display: none`, `background(-color)`, `color`, `opacity` and `font-size`
are CSS's.
@ -411,8 +425,8 @@ applies to both:
neither takes room in the flow.
- Units: `em`, `rem`, `vw` and `vh`.
- `@media (min-width: ..) and (max-height: ..) { ... }`.
- Text wraps between words to fit its box; `white-space: nowrap` keeps one line and
`text-overflow: ellipsis` cuts it.
- Text wraps between words to fit its box - in a row, in the room its siblings leave it;
`white-space: nowrap` keeps one line and `text-overflow: ellipsis` cuts it.
- `overflow: auto|scroll|hidden` makes a box scroll.
- Selectors also take `+` and `~`, `:nth-child(2n+1)`, `:checked` and `:active`.
- **More React.**
@ -435,31 +449,51 @@ applies to both:
- A test drives all of it with `ui_input(i)`.
- **Controls are built in**, each made of plain parts a stylesheet styles (`.ui-label`,
`.ui-track`, `.ui-knob`, `.ui-fill`, `.ui-thumb`, `.ui-field`, `.ui-value`, `.ui-caret`,
`.ui-prev`, `.ui-next`):
`.ui-prev`, `.ui-next`; a track is a row, and a range's fill is as tall as its track):
- `<button>`;
- `<input type="checkbox|radio" label checked>`;
- `<input type="range" label min max step value>`, dragged or stepped with the arrows;
- `<input type="range" label min max step value>`, dragged or stepped with the arrows. Its value
shows with `decimals="{2}"`, as `format="percent"` of the way from min to max, and with a
`unit=" s"` after it;
- `<select label value>` with `<option value>`s;
- `<input type="text" label value maxlength>`, which takes typing, and Backspace takes a letter
back;
- `<input type="key" label value>`, which takes the next key pressed.
- `<input type="number" label min max step value>`: typed digits (a minus when min allows one, a
point when step has a fraction) replace the value, Enter or leaving the field commits them held
between min and max, and the left and right arrows step it (`decimals`, `unit` as a range's);
- `<input type="key" label value shown>`: 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
(0), and `shown` is what it says for its value instead of the keyboard's label. While it
listens `ui_capturing()` is true, so the program can leave its own keys alone.
Any control's `note="..."` is a line of help under its label: `.ui-labels > .ui-label +
.ui-note`.
Each reports with `on-change` and `event.value`, and plays `sound="..."` (or "click") through
the program's `ui_sounds`.
- **Popovers, tooltips and bars.**
- `<div popover on-close="...">` sits absolutely in its parent and draws on the top layer. While
it is up, the pointer and Tab stay inside it, and a press outside it or Esc closes it.
- `title="..."` shows a tooltip (`.ui-tooltip`) after the pointer rests for half a second.
- `anchor="cell"` puts a popover beside the element with that id (the nearest, looking out from
the popover), and a bare `anchor` beside the element before it. `placement` is `right` (the
default), `left`, `bottom` or `top`, its margin on that side is the gap, and where it would
leave the screen it opens to the other side and is kept on it.
- `title="..."` shows a tooltip (`.ui-tooltip`) after the pointer rests for half a second. A
newline or a written `\n` in it starts another line (`.ui-tooltip-text` each).
- `<progress value max>` and `<meter value min max>` fill (`.ui-fill`) as far as their value.
- **Natives** are for what markup cannot say. `ui_native("minimap", measure, draw)` makes
`<minimap>` an element the program draws itself, laid out and styled like any other. It reports
with `ui_fire(n, "change", value)` and reads its attributes with `ui_attr` / `ui_attr_on`.
with `ui_fire(n, "change", value)` and reads its attributes with `ui_attr` / `ui_attr_on`. Its
draw reads `ui_opacity()`, the opacity it is drawn at (every group `opacity` around it, its own
included).
- **Renderers.** `ui_backend(b)` takes any renderer with `rect`, `text` and `measure`, and uses
`round`, `ring`, `image`, `nine`, `clip`, `scale` and `now` when it has them.
Importing `ludic.ui/render3d.ludic` makes render3d's overlay the renderer:
- images by path, and cells of an atlas named with `ui_atlas(prefix, texture, cols, rows,
names)` as `<img src="prefix:name">` (or `prefix:12`);
- nine-slices for `border-image`;
names)` as `<img src="prefix:name">` (or `prefix:12`). A path is read as sRGB, the interface's
own space, so its colours arrive as painted. A file that changes on disk (or appears) is loaded
again within half a second, and `ui_image_reload(path)` asks for it at once;
- nine-slices for `border-image`, sliced by the texture's own width and height;
- a scale from the screen's height (`ui_render3d_scale` for the player's interface size).
`ui_translator(fn)`, `ui_sounds(fn)` and `ui_clock(fn)` hand the runtime the program's
@ -468,8 +502,13 @@ applies to both:
- Colours: `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`, `rgb()`, `rgba()` and the basic names,
usually through `var(--...)` from a theme.
- Boxes: `border-radius`, `box-shadow` (sharp, offset), `background-image: url(...)`, and
`border-image: url(...) slice / width` as a nine-slice. A nine-slice is tinted by the
background colour, so one rounded texture serves every colour.
`border-image: url(...) slice / width` as a nine-slice. With no background colour a nine-slice
is drawn as painted, as CSS draws one; with one it is tinted by it, so one rounded texture serves
every colour, and `transparent` (or any colour with no alpha) leaves nothing to see.
- Text: `text-shadow: x y blur colour` draws the text again under itself, offset (the blur is
drawn sharp), and is inherited.
- Pictures: an `<img>` of a file is drawn as it is; a cell of an atlas is a glyph and takes the
`color` around it, as text does. An `<img>` with a `color` of its own is tinted by it.
- Motion: `opacity` fades the element and everything inside it. `@keyframes` with `animation:
name 0.25s [infinite] [alternate]` animate numeric properties from when the element first
appeared, and `transition: opacity 0.2s` eases a changed opacity.

22
changes/defaults-views-templates.md
View file

@ -53,6 +53,28 @@ The runtime is a UI framework, not only a template engine:
- importing `ludic.ui/render3d.ludic` installs the backend, and atlases take rows;
- hooks for the program's language, sounds and clock.
What a game's screens found missing, now in `ludic.ui`:
- `<input type="number" min max step>`: typed digits, Enter or leaving it commits them clamped, the
arrows step it;
- `<input type="key">` listens for any key (Tab and the arrows included) once Enter or a click starts
it; Esc stops it, Backspace clears it, `shown` names the value, and `ui_capturing()` tells the host;
- `note="..."` under any control's label (`.ui-note`); a range's `decimals`, `format="percent"` and
`unit`; a track laid out as a row, with the range's fill as tall as it;
- popovers anchored beside an element (`anchor="id"`, or a bare `anchor` for the element before it,
`placement`), flipped to the other side and kept on the screen;
- `flex-shrink` (a scroll box in a column takes the room its siblings leave), `flex: grow shrink`,
`order`, and text in a row wrapping in the room its siblings leave;
- `calc()` over px, %, em, rem, vw, vh and `var()`; `width: 0` and `height: 0` mean 0;
- `text-shadow`; tooltips of several lines; `ui_opacity()` for a native's draw;
- `border-image` drawn as painted with no background colour, tinted by one, and not at all under
`transparent`; a picture file drawn untinted (an atlas cell still takes `color`);
- the render3d backend loads a picture again when its file changes (`ui_image_reload`), draws a path
with a drive letter as a path, and slices a nine-slice by its texture's own width and height;
- a component root that is itself a component takes every user's class, style and id, and the
sheets that style it are weighed together by specificity;
- a component's event may be called `set`; a `string` prop given a number reads it as text; two
components of one name are an error naming both files.
render3d gains `tex_width` / `tex_height`, and the XML reader keeps text runs among elements in
order (`mixed`).

83
examples/library/ui_inputs.ludic Normal file
View file

@ -0,0 +1,83 @@
# ui_inputs.ludic — more of ludic.ui's controls, driven by the keys: a number field takes typed digits
# (Enter or leaving it commits them, held between min and max) and steps with the arrows; a key field
# listens for the next key (Tab included), Esc stops it listening and Backspace unbinds it; a range
# shows its value as a percentage or with decimals and a unit; a label carries a note; an action may
# call an event named set; and a string prop given a number reads it as text.
import "ludic.ui"
import "ui_inputs_parts/Form.ludic"
import "ui_inputs_parts/Tag.ludic"
program UiInputs {
numbers float
function frame(i: UiInput) -> UiNode {
ui_input(i)
ui_show("Form", null, 0.0, 0.0, 400.0, 400.0)
let root: UiNode = ui_nodes("Form", null)
ui_place(root, 0.0, 0.0, 400.0, 400.0)
return root.children[0]
}
function keys(tab: bool, shift: bool, enter: bool, left: bool) -> UiInput {
let i = new UiInput
i.tab = tab
i.shift = shift
i.enter = enter
i.left = left
if tab { i.key = Key.Tab }
if enter { i.key = Key.Enter }
return i
}
function typed(s: string) -> UiInput {
let i = new UiInput
i.typed = s
return i
}
function shown_state(page: UiNode) -> string { return page.children[len(page.children) - 1].text }
function last(n: UiNode) -> string { return n.children[len(n.children) - 1].text }
entry {
ui_backend(new UiBackend)
var page = frame(new UiInput)
frame(keys(true, false, false, false))
frame(typed("12"))
page = frame(keys(false, false, true, false))
let shown = page.children[0].children[1].children[0].text
let a = shown_state(page)
frame(typed("99"))
page = frame(keys(true, false, false, false))
let b = shown_state(page)
frame(keys(true, true, false, false))
page = frame(keys(false, false, false, true))
let c = shown_state(page)
let note = page.children[0].children[0].children[1].text
frame(keys(true, false, false, false))
let space = page.children[1].children[1].children[0].text
frame(keys(false, false, true, false))
let cap = ui_capturing()
page = frame(keys(true, false, false, false))
let d = shown_state(page)
frame(keys(false, false, true, false))
let esc = new UiInput
esc.escape = true
esc.key = Key.Escape
page = frame(esc)
let e = shown_state(page)
let back = new UiInput
back.backspace = true
page = frame(back)
let f = shown_state(page)
frame(keys(true, false, false, false))
let right = new UiInput
right.right = true
page = frame(right)
page = frame(new UiInput)
let button = page.children[4]
let click = new UiInput
click.x = button.x + 2.0
click.y = button.y + 2.0
click.down = true
frame(click)
let up = new UiInput
up.x = click.x
up.y = click.y
page = frame(up)
print(`count {shown} {a} | {b} | {c} | {note} | {space} listening {cap} {d} | {e} | {f} | {last(page.children[2])} {last(page.children[3])} | {shown_state(page)} | {page.children[5].text}`)
}
}

2
examples/library/ui_inputs_parts/Form.lss Normal file
View file

@ -0,0 +1,2 @@
.page { width: 400px; gap: 4px }
input { width: fill }

9
examples/library/ui_inputs_parts/Form.ludic Normal file
View file

@ -0,0 +1,9 @@
# Form.ludic - a number, a key binding, two ranges with their values formatted, a note under a label,
# and an event called set
component Form {
state count: int = 5
state bind: int = 32
state vol: float = 0.5
state said: int = 0
on set(v: int) { said = v }
}

9
examples/library/ui_inputs_parts/Form.xml Normal file
View file

@ -0,0 +1,9 @@
<div class="page">
<input type="number" label="Count" note="How many to carry" min="{0}" max="{20}" value="{count}" on-change="set count = event.value"/>
<input type="key" label="Jump" value="{bind}" shown="{bind == 32 ? 'Space bar' : ''}" on-change="set bind = event.value"/>
<input type="range" label="Volume" min="{0}" max="{1}" step="{0.1}" value="{vol}" format="percent" on-change="set vol = event.value"/>
<input type="range" label="Delay" min="{0}" max="{2}" step="{0.25}" value="{0.5}" decimals="{2}" unit=" s"/>
<button on-click="set(9)">Nine</button>
<Tag text="{7}"/>
<p>{count} {bind} {vol} {said}</p>
</div>

4
examples/library/ui_inputs_parts/Tag.ludic Normal file
View file

@ -0,0 +1,4 @@
# Tag.ludic - a string prop, which a number given to it arrives in as text
component Tag {
prop text: string = "none"
}

1
examples/library/ui_inputs_parts/Tag.xml Normal file
View file

@ -0,0 +1 @@
<p>{text}!</p>

65
examples/library/ui_look.ludic Normal file
View file

@ -0,0 +1,65 @@
# 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)}`)
}
}

1
examples/library/ui_look_parts/Inner.lss Normal file
View file

@ -0,0 +1 @@
div.in { padding: 5px }

4
examples/library/ui_look_parts/Inner.ludic Normal file
View file

@ -0,0 +1,4 @@
# Inner.ludic - the innermost root: its own rule is more specific than Middle's, so it holds
component Inner {
state n: int = 0
}

1
examples/library/ui_look_parts/Inner.xml Normal file
View file

@ -0,0 +1 @@
<div class="in"><p>in</p></div>

9
examples/library/ui_look_parts/Look.lss Normal file
View file

@ -0,0 +1,9 @@
.page { width: 400px; gap: 2px }
.m { margin: 9px }
.shade { text-shadow: 2px 3px 4px #102030 }
.dim { opacity: 0.5 }
gauge { width: 10px; height: 10px }
.chip { width: 40px; height: 20px; border-image: url(chip.png) 8 }
.clear { background: transparent }
.red { background: #ff0000 }
.pics { flex-direction: row; color: #00ff00 }

5
examples/library/ui_look_parts/Look.ludic Normal file
View file

@ -0,0 +1,5 @@
# Look.ludic - what is drawn: a nested component's root styled by every sheet above it, a shadow
# under text, a native at its group's opacity, border-images, pictures, and a tooltip of two lines
component Look {
state n: int = 0
}

10
examples/library/ui_look_parts/Look.xml Normal file
View file

@ -0,0 +1,10 @@
<div class="page">
<Middle class="m"/>
<div class="shade"><p>Hi</p></div>
<div class="dim"><gauge class="dim"/></div>
<div class="chip clear"></div>
<div class="chip"></div>
<div class="chip red"></div>
<div class="pics"><img src="photo.png"/><img src="icon:tent"/></div>
<p class="tip" title="first line\nsecond line">rest here</p>
</div>

4
examples/library/ui_look_parts/Menu.lss Normal file
View file

@ -0,0 +1,4 @@
.page { width: 400px; height: 300px }
.cell { position: absolute; left: 20px; top: 50px; width: 60px; height: 30px }
.edge { position: absolute; left: 350px; top: 280px; width: 50px; height: 30px }
.verbs { width: 100px; margin-left: 4px; margin-right: 4px }

5
examples/library/ui_look_parts/Menu.ludic Normal file
View file

@ -0,0 +1,5 @@
# Menu.ludic - popovers beside what they belong to: one by the anchor's id, one beside the element
# before it, which has no room on its right and opens to the left
component Menu {
state n: int = 0
}

6
examples/library/ui_look_parts/Menu.xml Normal file
View file

@ -0,0 +1,6 @@
<div class="page">
<button id="cell" class="cell">Axe</button>
<div popover anchor="cell" class="verbs"><button>Drop</button></div>
<button class="edge">Rope</button>
<div popover anchor placement="right" class="verbs"><button>Give</button></div>
</div>

1
examples/library/ui_look_parts/Middle.lss Normal file
View file

@ -0,0 +1 @@
.i { padding: 3px; color: #ff0000 }

4
examples/library/ui_look_parts/Middle.ludic Normal file
View file

@ -0,0 +1,4 @@
# Middle.ludic - a component whose root is another component
component Middle {
state n: int = 0
}

1
examples/library/ui_look_parts/Middle.xml Normal file
View file

@ -0,0 +1 @@
<Inner class="i"/>

17
packages/ludic.ui/controls.ludic
View file

@ -1,8 +1,7 @@
# 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 key field the next
# key. Each says so with on-change and event.value, after the frame is drawn.
var ct_capture: string = ""
# (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 "" }
@ -10,7 +9,7 @@ function ct_type(n: UiNode) -> string {
if t == "" { return "text" }
return t
}
function ct_takes_arrows(n: UiNode) -> bool { return ct_type(n) == "range" or ct_type(n) == "select" }
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))
@ -24,7 +23,7 @@ function ct_sound(n: UiNode) -> string {
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_capture = n.key } else if t == "" {
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())
}
@ -36,6 +35,7 @@ function ct_step(n: UiNode, d: int) -> void {
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 }
@ -70,11 +70,8 @@ function ct_drag(root: UiNode, key: string, x: float, y: float) -> void {
# 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" and ct_capture == n.key and in_now.key != 0 and not in_now.enter {
ct_capture = ""
ct_change(n, Value.int(in_now.key))
return
}
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)] }

18
packages/ludic.ui/controls_build.ludic
View file

@ -1,8 +1,9 @@
# controls_build.ludic - a control's parts, made as plain child boxes a stylesheet can style:
# input[type=checkbox|radio] .ui-label .ui-track > .ui-knob
# input[type=range] .ui-label .ui-track > .ui-fill, .ui-thumb .ui-value
# input[type=text|key] .ui-label .ui-field > .ui-value (+ .ui-caret while focused)
# input[type=text|number|key] .ui-label .ui-field > .ui-value (+ .ui-caret while focused)
# select .ui-label .ui-prev .ui-value .ui-next (its <option>s hidden)
# with a note="...", the label is .ui-labels > .ui-label + .ui-note
function ct_part(n: UiNode, cls: string, text: string) -> UiNode {
let p = new UiNode
p.key = `{n.key}/{cls}`
@ -39,12 +40,11 @@ function ct_build(n: UiNode) -> void {
n.dir = UI_ROW
n.focusable = true
let t = ui_attr_text(n, "type")
let label = ui_attr_text(n, "label")
if label != "" { push(n.children, ct_part(n, "ui-label", ui_tr(label))) }
if n.tag == "select" {
ct_build_select(n)
return
}
ct_label(n)
if t == "checkbox" or t == "radio" {
let track = ct_part(n, "ui-track", "")
push(track.children, ct_part(n, "ui-knob", ""))
@ -69,13 +69,12 @@ function ct_build_range(n: UiNode) -> void {
push(track.children, fill)
push(track.children, ct_part(n, "ui-thumb", ""))
push(n.children, track)
push(n.children, ct_part(n, "ui-value", ui_attr_text(n, "value")))
push(n.children, ct_part(n, "ui-value", ct_value_text(n)))
}
function ct_build_select(n: UiNode) -> void {
let opts = n.children
n.children = new []UiNode
let label = ui_attr_text(n, "label")
if label != "" { push(n.children, ct_part(n, "ui-label", ui_tr(label))) }
ct_label(n)
var shown = ""
let at = ct_option_at(n, opts)
if at >= 0 { shown = opts[at].text }
@ -94,7 +93,8 @@ function ct_option_at(n: UiNode, opts: []UiNode) -> int {
return -1
}
function ct_field_text(n: UiNode) -> string {
if ui_attr_text(n, "type") != "key" { return ui_attr_text(n, "value") }
if ct_capture == n.key { return ui_tr("press a key...") }
return Input.key_label(Value.as_int(ui_attr(n, "value")))
let t = ui_attr_text(n, "type")
if t == "key" { return ct_key_text(n) }
if t == "number" { return ct_num_shown(n) }
return ui_attr_text(n, "value")
}

53
packages/ludic.ui/controls_key.ludic Normal file
View file

@ -0,0 +1,53 @@
# controls_key.ludic - <input type="key">, a key binding: Enter or a click starts listening, and then
# the next key pressed is its value - Tab, the arrows and Enter included, which move nothing while it
# listens. Esc stops listening and keeps the value; Backspace, when it is not listening, clears it (0).
# `shown` is what it says for its value (a host's own name for the key), else the keyboard's label.
var ct_capture: string = ""
var ct_capture_at: int = -1 # the frame listening began, whose own key started it
var ct_capture_seen: int = -1 # the last frame that began listening, for ui_capturing
function ct_key_start(n: UiNode) -> void {
ct_capture = n.key
ct_capture_at = an_frame
ct_capture_seen = an_frame
}
# while it listens, the frame's keys are the field's: nothing else reads them (fc_keys)
function ct_key_listening() -> bool { return ct_capture != "" and ct_capture_at != an_frame }
# the field listening, given this frame's key; false when there is none to give it to
function ct_key_capture(list: []UiNode) -> bool {
if ct_capture == "" { return false }
ct_capture_seen = an_frame
var n: UiNode = null
for i in 0 .. len(list) {
if list[i].key == ct_capture { n = list[i] }
}
if n == null {
ct_capture = ""
return false
}
if ct_capture_at == an_frame { return true }
if in_now.escape {
ct_capture = ""
return true
}
if in_now.key != 0 {
ct_capture = ""
ct_change(n, Value.int(in_now.key))
}
return true
}
# focused, not listening: Backspace unbinds it
function ct_key_typed(n: UiNode) -> void {
if ct_capture != n.key and in_now.backspace { ct_change(n, Value.int(0)) }
}
# a press anywhere but the field stops it listening
function ct_key_pressed_away(hit: UiNode) -> void {
if ct_capture != "" and (hit == null or hit.key != ct_capture) { ct_capture = "" }
}
function ct_key_text(n: UiNode) -> string {
if ct_capture == n.key { return ui_tr("press a key...") }
if Value.kind(ui_attr(n, "shown")) != 0 { return ui_tr(ui_attr_text(n, "shown")) }
return Input.key_label(Value.as_int(ui_attr(n, "value")))
}
# a key field is listening: the host should leave the keys alone until it is done (it stays true
# for the frame in which Esc or a key ended it, so that key is not read twice)
export function ui_capturing() -> bool { return ct_capture != "" or ct_capture_seen == an_frame }

73
packages/ludic.ui/controls_number.ludic Normal file
View file

@ -0,0 +1,73 @@
# controls_number.ludic - <input type="number" min max step>: digits typed into it (a minus when min
# allows one, a point when step has a fraction) replace its value with a draft, which Enter or leaving
# the field commits, held between min and max; Backspace takes a digit back (of the value, when it is
# the first key), and the left and right arrows step it. Each commit is one on-change with the
# number: an int when step and the value are whole.
var ct_num_key: string = ""
var ct_num_text: string = ""
function ct_num_bound(n: UiNode, key: string) -> bool { return Value.kind(ui_attr(n, key)) != 0 }
function ct_num_step_of(n: UiNode) -> float {
let s = Value.as_float(ui_attr(n, "step"))
if s <= 0.0 { return 1.0 }
return s
}
function ct_num_clamp(n: UiNode, v0: float) -> float {
var v = v0
if ct_num_bound(n, "max") { v = Math.min(v, Value.as_float(ui_attr(n, "max"))) }
if ct_num_bound(n, "min") { v = Math.max(v, Value.as_float(ui_attr(n, "min"))) }
return v
}
function ct_num_set(n: UiNode, v0: float) -> void {
let v = ct_num_clamp(n, v0)
let step = ct_num_step_of(n)
let was = ui_attr(n, "value")
if Value.kind(was) != 0 and Value.as_float(was) == v { return }
if step == float(int(step)) and v == float(int(v)) { ct_change(n, Value.int(int(v))) } else { ct_change(n, Value.float(v)) }
}
# Enter, or the focus leaving it: the draft becomes the value (a draft of nothing changes nothing)
function ct_num_commit(n: UiNode) -> void {
if ct_num_key != n.key { return }
let s = ct_num_text
ct_num_key = ""
if s == "" or s == "-" or s == "." or s == "-." { return }
ct_num_set(n, el_num(s))
}
function ct_num_step(n: UiNode, d: int) -> void {
var base = Value.as_float(ui_attr(n, "value"))
if ct_num_key == n.key and ct_num_text != "" and ct_num_text != "-" { base = el_num(ct_num_text) }
ct_num_key = ""
ct_num_set(n, base + ct_num_step_of(n) * float(d))
}
# what was typed this frame, the characters a number can hold; Backspace takes one back
function ct_num_typed(n: UiNode) -> void {
if fc_key != n.key or (in_now.typed == "" and not in_now.backspace) { return }
if ct_num_key != n.key {
ct_num_key = n.key
ct_num_text = ""
if in_now.typed == "" { ct_num_text = ui_attr_text(n, "value") }
}
if in_now.backspace and len(ct_num_text) > 0 { ct_num_text = ct_num_text[0..len(ct_num_text) - 1] }
let step = ct_num_step_of(n)
let lo = Value.as_float(ui_attr(n, "min"))
for i in 0 .. len(in_now.typed) {
let c = in_now.typed[i]
let digit = c >= 48 and c <= 57
let minus = c == 45 and ct_num_text == "" and (not ct_num_bound(n, "min") or lo < 0.0)
let point = c == 46 and step != float(int(step)) and not ui_has(ct_num_text, ".")
if (digit or minus or point) and len(ct_num_text) < 24 { ct_num_text = ct_num_text + in_now.typed[i..i + 1] }
}
}
# the focus has gone from the field being typed in: what was typed is kept
function ct_num_blur(root: UiNode) -> void {
if ct_num_key == "" or ct_num_key == fc_key { return }
let n = fr_node(root, ct_num_key)
if n == null {
ct_num_key = ""
return
}
ct_num_commit(n)
}
function ct_num_shown(n: UiNode) -> string {
if ct_num_key == n.key { return ct_num_text }
return ct_value_text(n)
}

46
packages/ludic.ui/controls_parts.ludic Normal file
View file

@ -0,0 +1,46 @@
# controls_parts.ludic - what a control shows besides its own parts: its label, with a `note` (a line
# of help under it) in .ui-labels > .ui-label + .ui-note, and a range's or a number's value as text:
# `decimals="1"` places, `format="percent"` its place between min and max, and a `unit` after it
function ct_label(n: UiNode) -> void {
let label = ui_attr_text(n, "label")
let note = ui_attr_text(n, "note")
if note == "" {
if label != "" { push(n.children, ct_part(n, "ui-label", ui_tr(label))) }
return
}
let both = ct_part(n, "ui-labels", "")
if label != "" { push(both.children, ct_part(n, "ui-label", ui_tr(label))) }
push(both.children, ct_part(n, "ui-note", ui_tr(note)))
push(n.children, both)
}
function ct_value_text(n: UiNode) -> string {
let v = ui_attr(n, "value")
if Value.kind(v) == 0 { return "" }
var f = Value.as_float(v)
let fmt = ui_attr_text(n, "format")
if fmt == "percent" {
let lo = Value.as_float(ui_attr(n, "min"))
var hi = Value.as_float(ui_attr(n, "max"))
if hi <= lo { hi = lo + 1.0 }
f = (f - lo) / (hi - lo) * 100.0
}
var s = ""
if Value.kind(ui_attr(n, "decimals")) != 0 { s = ct_fixed(f, Value.as_int(ui_attr(n, "decimals"))) } else if fmt == "percent" { s = string(int(Math.round(f))) } else { s = vl_text(v) }
if fmt == "percent" { s = s + "%" }
return s + ui_attr_text(n, "unit")
}
# a number with `places` digits after the point, rounded
function ct_fixed(f: float, places: int) -> string {
var k = 1
for i in 0 .. Math.max(places, 0) { k = k * 10 }
let neg = f < 0.0
let whole = int(Math.round(Math.abs(f) * float(k)))
var s = string(whole / k)
if places > 0 {
var frac = string(whole % k)
while len(frac) < places { frac = "0" + frac }
s = s + "." + frac
}
if neg and whole != 0 { s = "-" + s }
return s
}

29
packages/ludic.ui/draw.ludic
View file

@ -16,7 +16,7 @@ function fr_draw_in(n: UiNode) -> void {
fr_background(n)
fr_border(n)
if n.kind == UI_TEXT { fr_text(n) }
if n.kind == UI_IMAGE and ui_be.image != null { ui_be.image(n.src, n.x + n.pl + n.bl, n.y + n.pt + n.bt, n.cw - ly_hin(n), n.ch - ly_vin(n), n.rfg, fr_ga * n.rfg_a) }
if n.kind == UI_IMAGE and ui_be.image != null { fr_image(n) }
let clipped = n.kind == UI_SCROLL and ui_be.clip != null
if clipped { fr_clip_push(n.x, n.y, n.cw, n.ch) }
if n.children != null { fr_children(n) }
@ -24,8 +24,9 @@ function fr_draw_in(n: UiNode) -> void {
if n.kind == UI_SCROLL { sc_bar(n) }
if n.outline_w > 0.0 { fr_outline(n) }
}
# the shadow, then the background: a nine-slice tinted by the background colour, or the colour
# (rounded), then a picture over it
# the shadow, then the background: the colour (rounded), or a border-image's nine-slice - drawn as
# painted, as CSS draws one, or tinted by a background colour when there is one (so `transparent`,
# or any colour with no alpha, leaves nothing to see) - then a picture over it
function fr_background(n: UiNode) -> void {
if n.sh_c >= 0 { fr_fill(n, n.x + n.sh_x, n.y + n.sh_y, n.sh_c, fr_ga * n.sh_a) }
if n.bg >= 0 or n.bi_src != "" {
@ -35,7 +36,7 @@ function fr_background(n: UiNode) -> void {
c = 16777215
a = fr_ga
}
fr_fill(n, n.x, n.y, c, a)
if a > 0.0 { fr_fill(n, n.x, n.y, c, a) }
}
if n.bg_img != "" and ui_be.image != null { ui_be.image(n.bg_img, n.x, n.y, n.cw, n.ch, 16777215, fr_ga) }
}
@ -80,23 +81,3 @@ function fr_outline(n: UiNode) -> void {
}
fr_frame(n.x - o, n.y - o, n.cw + o * 2.0, n.ch + o * 2.0, n.outline_w, c, a)
}
# a text's lines (one, or the wrapped ones), each placed by text-align, the last cut by an ellipsis
function fr_text(n: UiNode) -> void {
let y = n.y + n.pt + n.bt
let a = n.rfg_a * fr_ga
if n.lines == null {
var s = n.text
if n.ellipsis { s = ly_ellipsis(s, n.rsize, n.cw - ly_hin(n)) }
ui_be.text(fr_line_x(n, s), y, s, n.rsize, n.rfg, a)
return
}
for i in 0 .. len(n.lines) { ui_be.text(fr_line_x(n, n.lines[i]), y + float(i) * n.rsize * 1.25, n.lines[i], n.rsize, n.rfg, a) }
}
# where a line starts: text-align within the room the box gives it
function fr_line_x(n: UiNode, s: string) -> float {
let x = n.x + n.pl + n.bl
if n.talign == UI_START { return x }
let spare = n.cw - ly_hin(n) - ly_text_w(s, n.rsize)
if n.talign == UI_CENTER { return x + spare / 2.0 }
return x + spare
}

61
packages/ludic.ui/draw_content.ludic Normal file
View file

@ -0,0 +1,61 @@
# draw_content.ludic - what is inside a box drawn: a text's lines, placed by text-align, each over its
# text-shadow, and a picture
# a text's lines (one, or the wrapped ones), each placed by text-align, the last cut by an ellipsis
function fr_text(n: UiNode) -> void {
let y = n.y + n.pt + n.bt
let a = n.rfg_a * fr_ga
let sh = fr_text_shadow(n)
if n.lines == null {
var s = n.text
if n.ellipsis { s = ly_ellipsis(s, n.rsize, n.cw - ly_hin(n)) }
fr_line(n, sh, fr_line_x(n, s), y, s, a)
return
}
for i in 0 .. len(n.lines) { fr_line(n, sh, fr_line_x(n, n.lines[i]), y + float(i) * n.rsize * 1.25, n.lines[i], a) }
}
# one line, over its shadow when it has one
function fr_line(n: UiNode, sh: UiNodeX, x: float, y: float, s: string, a: float) -> void {
if sh != null { ui_be.text(x + sh.tsh_x, y + sh.tsh_y, s, n.rsize, sh.tsh_c, sh.tsh_a * fr_ga) }
ui_be.text(x, y, s, n.rsize, n.rfg, a)
}
# text-shadow is inherited: the nearest element that says it, or null (none)
function fr_text_shadow(n: UiNode) -> UiNodeX {
var at = n
while at != null {
if at.ex != null and at.ex.tsh_set {
if at.ex.tsh_c < 0 { return null }
return at.ex
}
at = at.parent
}
return null
}
# the opacity a native's draw is at: every group opacity around it, its own included
export function ui_opacity() -> float { return fr_ga }
# where a line starts: text-align within the room the box gives it
function fr_line_x(n: UiNode, s: string) -> float {
let x = n.x + n.pl + n.bl
if n.talign == UI_START { return x }
let spare = n.cw - ly_hin(n) - ly_text_w(s, n.rsize)
if n.talign == UI_CENTER { return x + spare / 2.0 }
return x + spare
}
# an <img>: a picture file drawn as it is, as a browser draws one (unless the img sets its own
# color); a cell of an atlas ("icon:tent") is a glyph, and takes the color around it as text does
function fr_image(n: UiNode) -> void {
var c = 16777215
var a = fr_ga
if n.fg != UI_INHERIT or fr_is_cell(n.src) {
c = n.rfg
a = fr_ga * n.rfg_a
}
ui_be.image(n.src, n.x + n.pl + n.bl, n.y + n.pt + n.bt, n.cw - ly_hin(n), n.ch - ly_vin(n), c, a)
}
# prefix:name, and not a path (C:/... is a drive, not an atlas)
function fr_is_cell(src: string) -> bool {
for i in 0 .. len(src) {
if src[i] == 47 or src[i] == 92 { return false }
if src[i] == 58 { return i > 1 }
}
return false
}

2
packages/ludic.ui/dump.ludic
View file

@ -24,7 +24,7 @@ function dp_style(n: UiNode) -> string {
var s = ""
if n.size > 0.0 { s = s + ` font {int(n.size)}` }
if n.fg >= 0 { s = s + ` color {ui_hex(n.fg)}` }
if n.bg >= 0 { s = s + ` bg {ui_hex(n.bg)}` }
if n.bg >= 0 and n.bg_a > 0.0 { s = s + ` bg {ui_hex(n.bg)}` }
if n.alpha < 1.0 { s = s + ` opacity {n.alpha}` }
if n.pt + n.pr + n.pb + n.pl > 0.0 { s = s + ` pad {int(n.pt)} {int(n.pr)} {int(n.pb)} {int(n.pl)}` }
if n.mt + n.mr + n.mb + n.ml > 0.0 { s = s + ` margin {int(n.mt)} {int(n.mr)} {int(n.mb)} {int(n.ml)}` }

6
packages/ludic.ui/focus.ludic
View file

@ -1,6 +1,6 @@
# focus.ludic - the keyboard's place: focus moves through the controls in document order (Tab and
# Shift+Tab, or the arrows), Enter and Space activate what has it, and a pointer press focuses what
# it presses. A key that is gone from the screen leaves nothing focused.
# it presses; a key field that is listening has every key to itself. A key that is gone from the screen leaves nothing focused.
var fc_key: string = ""
var fc_visible: bool = false # focus came from the keyboard: :focus-visible, and the ring
var fc_list: []UiNode = new []UiNode
@ -28,8 +28,9 @@ function fc_move(step: int) -> void {
function fc_keys(root: UiNode) -> void {
fc_list = new []UiNode
let top = pp_top(root)
if top != null and in_now.escape { ui_fire(top, "close", Value.null()) }
if top != null { fc_collect(top) } else { fc_collect(root) }
if ct_key_capture(fc_list) { return }
if top != null and in_now.escape { ui_fire(top, "close", Value.null()) }
let i = in_now
if fc_find() < 0 { fc_autofocus() }
let at = fc_find()
@ -39,6 +40,7 @@ function fc_keys(root: UiNode) -> void {
let horizontal = n != null and ct_takes_arrows(n)
if i.up or (i.left and not horizontal) { fc_move(-1) }
if i.down_key or (i.right and not horizontal) { fc_move(1) }
ct_num_blur(root)
if n == null { return }
if i.enter or (i.space and not ct_takes_space(n)) { ct_activate(n) }
if horizontal and i.left { ct_step(n, -1) }

1
packages/ludic.ui/frame.ludic
View file

@ -70,6 +70,7 @@ export function ui_place(root: UiNode, x: float, y: float, w: float, h: float) -
ly_measure(root, w, ui_px(16.0), fg)
ly_place(root, x, y, w, h)
sc_apply(root)
pp_anchor_all(root)
}
# a press, as if the pointer had made it
export function ui_press(n: UiNode) -> void {

5
packages/ludic.ui/index.ludic
View file

@ -17,10 +17,14 @@ import "act.ludic"
import "native.ludic"
import "controls.ludic"
import "controls_build.ludic"
import "controls_parts.ludic"
import "controls_key.ludic"
import "controls_number.ludic"
import "input.ludic"
import "focus.ludic"
import "scroll.ludic"
import "popover.ludic"
import "popover_anchor.ludic"
import "tooltip.ludic"
import "life.ludic"
import "tpl.ludic"
@ -68,5 +72,6 @@ import "frame.ludic"
import "pointer.ludic"
import "screen_class.ludic"
import "draw.ludic"
import "draw_content.ludic"
import "draw_order.ludic"
import "dump.ludic"

1
packages/ludic.ui/pointer.ludic
View file

@ -18,6 +18,7 @@ function fr_pointer(root: UiNode) -> void {
if top != null and pp_pointer(top) { return }
let hit = fr_hit(scope, i.x, i.y)
if i.down and not in_was_down {
ct_key_pressed_away(hit)
fr_press_key = ""
if hit != null {
fr_press_key = hit.key

76
packages/ludic.ui/popover_anchor.ludic Normal file
View file

@ -0,0 +1,76 @@
# 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
}

3
packages/ludic.ui/render3d.ludic
View file

@ -6,9 +6,12 @@
# border-image: url(button.png) 14 a nine-slice background
module ludic_ui
import "render3d_image.ludic"
import "render3d_nine.ludic"
var r3u_user: float = 1.0
var r3u_tex_paths: []string = new []string
var r3u_tex_ids: []int = new []int
var r3u_tex_sizes: []int = new []int
var r3u_tex_seen: []float = new []float
var r3u_atlas: []string = new []string
var r3u_atlas_tex: []int = new []int
var r3u_atlas_cols: []int = new []int

52
packages/ludic.ui/render3d_image.ludic
View file

@ -1,20 +1,49 @@
# render3d_image.ludic - pictures for the render3d backend: a texture by path (loaded once, linear as
# the overlay wants, clamped at its edges), a cell of a named atlas, and a nine-slice for border-image
# render3d_image.ludic - pictures for the render3d backend: a texture by path (its sRGB bytes as they
# are, clamped at its edges, loaded again when the file changes) and a cell of a named atlas
module ludic_ui
function r3u_tex(path: string) -> int {
for i in 0 .. len(r3u_tex_paths) {
if r3u_tex_paths[i] == path { return r3u_tex_ids[i] }
if r3u_tex_paths[i] == path { return r3u_tex_fresh(i) }
}
push(r3u_tex_paths, path)
push(r3u_tex_ids, r3u_tex_load(path))
push(r3u_tex_sizes, Fs.size(path))
push(r3u_tex_seen, r3u_now())
return r3u_tex_ids[len(r3u_tex_ids) - 1]
}
# a picture is looked at again every half second: a file that has changed (or that was not there,
# and is now) is loaded again, so an <img> of a photograph written over the old one shows the new one
function r3u_tex_fresh(i: int) -> int {
let now = r3u_now()
if now - r3u_tex_seen[i] < 0.5 and now >= r3u_tex_seen[i] { return r3u_tex_ids[i] }
r3u_tex_seen[i] = now
let size = Fs.size(r3u_tex_paths[i])
if size == r3u_tex_sizes[i] and (r3u_tex_ids[i] != 0 or size < 0) { return r3u_tex_ids[i] }
if r3u_tex_ids[i] != 0 { gpu_tex_free(r3u_tex_ids[i]) }
r3u_tex_ids[i] = r3u_tex_load(r3u_tex_paths[i])
r3u_tex_sizes[i] = size
return r3u_tex_ids[i]
}
# the interface is drawn in sRGB, and a picture's bytes are sRGB, so they are taken as they are
# (not decoded to linear, which would darken it); clamped at its edges
function r3u_tex_load(path: string) -> int {
let t = tex_load(path, false)
if t != 0 {
gpu_tex_bind(GPU_TEX2D, t)
gpu_tex_param(GPU_TEX2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE)
gpu_tex_param(GPU_TEX2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE)
}
push(r3u_tex_paths, path)
push(r3u_tex_ids, t)
return t
}
# a picture the program has written again, loaded again the next time it is drawn
export function ui_image_reload(path: string) -> void {
for i in 0 .. len(r3u_tex_paths) {
if r3u_tex_paths[i] == path {
r3u_tex_seen[i] = -1000000.0
r3u_tex_sizes[i] = -2
}
}
}
function r3u_image(src: string, x: float, y: float, w: float, h: float, c: int, a: float) -> void {
var colon = -1
for i in 0 .. len(src) {
@ -22,11 +51,12 @@ function r3u_image(src: string, x: float, y: float, w: float, h: float, c: int,
}
if colon > 0 {
let prefix: string = src[0..colon]
let name: string = src[colon + 1..len(src)]
for k in 0 .. len(r3u_atlas) {
if r3u_atlas[k] == prefix { r3u_cell(k, name, x, y, w, h, c, a) }
if r3u_atlas[k] == prefix {
r3u_cell(k, src[colon + 1..len(src)], x, y, w, h, c, a)
return
}
}
return
}
let t = r3u_tex(src)
if t != 0 { ov_sub(t, int(x), int(y), int(w), int(h), 0.0, 0.0, 1.0, 1.0, r3u_r(c), r3u_g(c), r3u_b(c), a) }
@ -51,9 +81,3 @@ function r3u_cell(k: int, name: string, x: float, y: float, w: float, h: float,
let s = Math.min(w, h)
ov_sub(r3u_atlas_tex[k], int(x + (w - s) / 2.0), int(y + (h - s) / 2.0), int(s), int(s), u0, v0, u0 + 1.0 / float(cols), v0 + 1.0 / float(rows), r3u_r(c), r3u_g(c), r3u_b(c), a)
}
# border-image: the texture's `slice`-pixel corners kept, the rest stretched, drawn `dst` wide
function r3u_nine(src: string, slice: float, x: float, y: float, w: float, h: float, dst: float, c: int, a: float) -> void {
let t = r3u_tex(src)
if t == 0 { return }
ov_nine(t, tex_width(t), int(slice), int(x), int(y), int(w), int(h), int(dst), r3u_r(c), r3u_g(c), r3u_b(c), a)
}

29
packages/ludic.ui/render3d_nine.ludic Normal file
View file

@ -0,0 +1,29 @@
# render3d_nine.ludic - border-image for the render3d backend: a nine-slice of a texture
module ludic_ui
# border-image: the texture's `slice`-pixel corners kept, the rest stretched, drawn `dst` wide; the
# slice is a share of the texture's own width across and its own height down, so it need not be square
function r3u_nine(src: string, slice: float, x: float, y: float, w: float, h: float, dst: float, c: int, a: float) -> void {
let t = r3u_tex(src)
if t == 0 { return }
let su = slice / float(Math.max(tex_width(t), 1))
let sv = slice / float(Math.max(tex_height(t), 1))
let xs = r3u_four(x, x + dst, x + w - dst, x + w)
let ys = r3u_four(y, y + dst, y + h - dst, y + h)
let us = r3u_four(0.0, su, 1.0 - su, 1.0)
let vs = r3u_four(0.0, sv, 1.0 - sv, 1.0)
for j in 0 .. 3 {
for i in 0 .. 3 {
let x0 = int(xs[i])
let y0 = int(ys[j])
ov_sub(t, x0, y0, int(xs[i + 1]) - x0, int(ys[j + 1]) - y0, us[i], vs[j], us[i + 1], vs[j + 1], r3u_r(c), r3u_g(c), r3u_b(c), a)
}
}
}
function r3u_four(a: float, b: float, c: float, d: float) -> []float {
let out = new []float
push(out, a)
push(out, b)
push(out, c)
push(out, d)
return out
}

22
packages/ludic.ui/tooltip.ludic
View file

@ -1,5 +1,6 @@
# tooltip.ludic - an element's title="..." shown beside the pointer once it has rested on the
# element for half a second, in a box styled by .ui-tooltip (the default sheet's, or a theme's)
# element for half a second, in a box styled by .ui-tooltip (the default sheet's, or a theme's); a
# title of several lines (a newline, or \n) is one .ui-tooltip-text a line
var tt_key: string = ""
var tt_since: float = 0.0
var tt_text: string = ""
@ -37,7 +38,8 @@ function tt_draw(root: UiNode) -> void {
n.tag = "div"
n.parent = root
n.children = new []UiNode
push(n.children, ct_part(root, "ui-tooltip-text", tt_text))
let lines = tt_lines(tt_text)
for i in 0 .. len(lines) { push(n.children, ct_part(root, "ui-tooltip-text", lines[i])) }
cs_tree(n)
ly_measure(n, ly_vp_w * 0.4, ui_px(16.0), root.rfg)
let x = Math.min(tt_x + ui_px(16.0), ly_vp_x + ly_vp_w - n.mw)
@ -45,3 +47,19 @@ function tt_draw(root: UiNode) -> void {
ly_place(n, x, y, n.mw, n.mh)
fr_draw(n)
}
# a title's lines: apart at a newline, or at a written \n (which an attribute cannot hold otherwise)
function tt_lines(s: string) -> []string {
let out = new []string
var at = 0
var i = 0
while i < len(s) {
if s[i] == 10 or (s[i] == 92 and i + 1 < len(s) and s[i + 1] == 110) {
push(out, s[at..i])
if s[i] == 92 { i += 1 }
at = i + 1
}
i += 1
}
push(out, s[at..len(s)])
return out
}

2
tools/ludic-cli/test.ludic
View file

@ -760,7 +760,9 @@ function cmd_dev_test() -> int {
controller_case("library/ui_controls", "", "1 false 7 2 Adalove 70 1 false 8 2 Adalove 70; scrolled 40", "ui_controls.ludic (L11: focus and keys, the built-in controls, a range dragged, a box scrolled)")
controller_case("library/ui_anim", "", "0 100 100 | 49 50 100 | 100 100 61", "ui_anim.ludic (L11: @keyframes and animation, looping and alternating, and a transition)")
controller_case("library/ui_popover", "", "drop false | drop true | drop false | drop false | fill 60 of 200", "ui_popover.ludic (L11: a popover keeps the keys and closes on a press outside or Esc; progress fills)")
controller_case("library/ui_inputs", "", "count 12 12 32 0.5 0 | 20 32 0.5 0 | 19 32 0.5 0 | How many to carry | Space bar listening 1 19 9 0.5 0 | 19 9 0.5 0 | 19 0 0.5 0 | 60% 0.50 s | 19 0 0.6 9 | 7!", "ui_inputs.ludic (L11: number fields, key capture with Esc and Backspace, notes, range formats, an event named set, a string prop given a number)")
controller_case("library/ui_boxes", "", "list 120 of 200 | text at 32 152 wide, 3 lines, row 60 | zero 0x0 | half 140x36 pad 4 2 | order abc at 16 | fill 98x8 of 200x12", "ui_boxes.ludic (L11: flex-shrink to the leftover room, text wrapping beside its siblings, zero sizes, calc(), order, the range track as a row)")
controller_case("library/ui_look", "", "root div.in.i.m pad 5 margin 9 color #ff0000 text Hi 2,53 #102030 | text Hi 0,50 #eeeeee | opacity 0.25 | nine 40 #ffffff nine 40 #ff0000 of 2 image photo.png #ffffff | image icon:tent #00ff00 | text first line 29,205 #eeeeee | text second line 29,223 #eeeeee by id at 84,50 | flipped at 246,268 100x32", "ui_look.ludic (L11: nested components styled by specificity, text-shadow, ui_opacity, border-image tints, pictures, tooltip lines, anchored popovers)")
reject_case("rejected/view_untyped", "view Sums: say what type total is", "a view field that is not a bare global says its type")
reject_case("rejected/view_without_ui", "a view is shown by ludic.ui", "a view needs ludic.ui to show it")