ludic/examples/library/ui_scrollbar.ludic
Orkuncakilkaya a4c7a756f0 feat(ui): a scrollbar held where it was taken, a popover that keeps the mouse, easing that lands
- the scrollbar is .ui-scrollbar with a .ui-thumb, styled by the default sheet or a theme; a press
  on the thumb holds it at the point it was taken and the pointer moves it in proportion, a press on
  the track jumps the thumb's middle there and holds it, and neither presses what is under the bar
  (it used to centre the thumb on the pointer and press the row beneath as well);
- while a popover is up only scroll boxes inside it take the pointer, and a press outside it that
  closes it forgets any press in progress;
- a transition ends exactly on its value (it stopped a rounding error short, at every frame rate).

Tests: ui_popover_mouse, ui_scrollbar, ui_ease (60/120/180/240 Hz).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-24 21:39:28 +03:00

52 lines
1.8 KiB
Text

# ui_scrollbar.ludic — a scroll box's bar held and dragged: a press on the thumb holds it where it
# was taken, the pointer held moves it in proportion, letting go leaves it; a press on the track
# jumps the thumb's middle there; the wheel still scrolls; and the rows under the bar are never pressed.
import "ludic.ui"
import "ui_scrollbar_parts/Long.ludic"
program UiScrollbar {
numbers float
var bx: float = 0.0
var by: float = 0.0
function frame(i: UiInput) -> UiNode {
ui_input(i)
ui_show("Long", null, 0.0, 0.0, 400.0, 400.0)
let root: UiNode = ui_nodes("Long", null)
ui_place(root, 0.0, 0.0, 400.0, 400.0)
return root.children[0]
}
# the pointer at (bx + x, by + y), held or not; how far the box is scrolled then
function at(x: float, y: float, down: bool) -> int {
let i = new UiInput
i.x = bx + x
i.y = by + y
i.down = down
return int(frame(i).children[0].scroll_y)
}
function wheel(x: float, y: float) -> int {
let i = new UiInput
i.x = bx + x
i.y = by + y
i.wheel = 1.0
frame(i)
return int(frame(new UiInput).children[0].scroll_y)
}
entry {
ui_backend(new UiBackend)
let list = frame(new UiInput).children[0]
bx = list.x
by = list.y
let grab = at(195.0, 10.0, true)
let moved = at(195.0, 40.0, true)
let far = at(195.0, 300.0, true)
let back = at(195.0, 25.0, true)
let kept = at(195.0, 25.0, false)
at(0.0 - bx - 1.0, 0.0 - by - 1.0, false)
let jump = at(195.0, 80.0, true)
at(195.0, 80.0, false)
let wheeled = wheel(50.0, 50.0)
at(50.0, 20.0, true)
at(50.0, 20.0, false)
let page = frame(new UiInput)
print(`grab {grab} moved {moved} far {far} back {back} kept {kept} | jump {jump} | wheel {wheeled} | {page.children[1].text}`)
}
}