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

feat(ui): a popover's align along its side, and within= for the bounds it flips against

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Orkun ÇAKILKAYA 2026-09-24 21:48:58 +03:00
parent 0aad2294ec
commit d163bad406
10 changed files with 101 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

20
examples/library/ui_popover_align.ludic Normal file
View file

@ -0,0 +1,20 @@
# ui_popover_align.ludic — anchored popovers aligned along their side (start, center, end), kept
# within a named container (within="panel") and, by default, within the scroll box they are in,
# flipping to the other side against it rather than against the screen.
import "ludic.ui"
import "ui_popover_align_parts/Menus.ludic"
program UiPopoverAlign {
numbers float
function at(n: UiNode, base: UiNode) -> string { return `{int(n.x - base.x)},{int(n.y - base.y)}` }
entry {
ui_backend(new UiBackend)
ui_show("Menus", null, 0.0, 0.0, 400.0, 400.0)
let root: UiNode = ui_nodes("Menus", null)
ui_place(root, 0.0, 0.0, 400.0, 400.0)
let panel = root.children[0].children[0]
let list = root.children[0].children[1]
let b = list.children[1]
let p3 = list.children[2]
print(`centred, flipped in the panel {at(panel.children[1], panel)} | end below {at(panel.children[2], panel)} | above b in the list {int(p3.y + p3.ch - b.y)} inside {p3.y >= list.y}`)
}
}

8
examples/library/ui_popover_align_parts/Menus.lss Normal file
View file

@ -0,0 +1,8 @@
.page { width: 400px; height: 400px }
.panel { width: 200px; height: 150px; position: relative }
.a { position: absolute; left: 150px; top: 50px; width: 40px; height: 20px; padding: 0 }
.p1 { width: 60px; height: 40px }
.p2 { width: 80px; height: 30px }
.list { overflow: auto; width: 150px; height: 100px }
.gap { height: 60px }
.p3 { width: 50px; height: 40px }

3
examples/library/ui_popover_align_parts/Menus.ludic Normal file
View file

@ -0,0 +1,3 @@
# Menus.ludic - popovers anchored inside a panel and inside a scroll box, aligned along their side
component Menus {
}

12
examples/library/ui_popover_align_parts/Menus.xml Normal file
View file

@ -0,0 +1,12 @@
<div class="page">
<div id="panel" class="panel">
<button id="a" class="a">a</button>
<div popover anchor="a" placement="right" align="center" within="panel" class="p1"></div>
<div popover anchor="a" placement="bottom" align="end" class="p2"></div>
</div>
<div class="list">
<p class="gap">x</p>
<button id="b">b</button>
<div popover anchor="b" placement="bottom" class="p3"></div>
</div>
</div>