feat(ui): pointer events for natives and elements, with capture; on-down and on-up; hits in painting order

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Orkun ÇAKILKAYA 2026-09-24 21:48:02 +03:00
parent d2b0413c30
commit 0aad2294ec
20 changed files with 349 additions and 46 deletions

View file

@ -0,0 +1,7 @@
.page { width: 400px; gap: 4px }
.box { width: 200px; height: 100px; position: relative }
.map { width: 200px; height: 100px }
.zoom { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; padding: 0 }
.pad { width: 100px; height: 50px }
.hold { width: 80px; height: 30px }
.hold:active { background: #ff0000 }

View file

@ -0,0 +1,12 @@
# Chart.ludic - a native map with a zoom button over it, a pad that takes pointer events in markup,
# and a hold button that says when it goes down and comes up
component Chart {
state zoomed: int = 0
state px: float = -1.0
state dragx: float = 0.0
state ups: int = 0
state wh: float = 0.0
state holding: bool = false
state held: int = 0
state clicked: int = 0
}

View file

@ -0,0 +1,9 @@
<div class="page">
<div class="box">
<chartmap class="map"/>
<button class="zoom" on-click="set zoomed = zoomed + 1">+</button>
</div>
<div class="pad" on-pointerdown="set px = event.x" on-drag="set dragx = dragx + event.dx" on-pointerup="set ups = ups + 1" on-wheel="set wh = wh + event.wheel"></div>
<button class="hold" on-down="set holding = true" on-up="set holding = false; set held = held + 1" on-click="set clicked = clicked + 1">Hold</button>
<p>zoomed {zoomed} pad {px} {dragx} {ups} {wh} hold {holding} {held} {clicked}</p>
</div>