jonobr1 / jonobr1/react-two.js
[Bug] Align pointer events with Two.js coordinates and scene order
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 15
- Forks
- 2
- Avg merge
- 7h 7m
- Merged PRs (30d)
- 3
Description
Summary
Follow up on the event system introduced in #16 and align pointer coordinates, hit ordering, bubbling, and missed-event behavior with the actual Two.js scene graph.
Known correctness gaps
- Hit testing uses top-left Two.js world coordinates, while
TwoEvent.pointsubtracts half the canvas width and height and reports a different coordinate space. - Shapes under different parent groups fall back to event-registration order rather than complete scene-graph draw order.
- A Group with handlers but no registered interactive child is tested through the Group bounding rectangle, which can report hits in empty areas.
onPointerMissedcurrently fires on a missed pointer-up; its relationship to click, pointer-down, and pointer-capture semantics is not defined.- Pointer capture is inferred from the renderer DOM element, but the synthetic Two.js event does not expose a clear capture API.
Two.js now has contains(...) and Group.getShapesAtPoint(...); the React event layer should use the upstream traversal where possible rather than maintain a competing partial ordering model.
Acceptance criteria
- Define and document whether event points are renderer, world, parent-local, or target-local coordinates.
- Return coordinates consistently for click, wheel, pointer, bubbling, and captured events.
- Resolve topmost targets from the complete current Two.js scene order, including nested and reordered groups.
- Define and test Group hit behavior for sparse, nested, transparent, invisible, clipped, and masked content.
- Define
onPointerMissedsemantics and test down/up/click/cancel sequences. - Provide a supported pointer-capture pattern for shape dragging.
- Keep bubbling and
stopPropagation()behavior deterministic. - Add renderer coverage for SVG, Canvas, and WebGL where behavior differs.
- Add tests that assert handler calls and event payloads, not only that the renderer element exists.
Related work
- Follow-up to #16.
- Scene ordering should remain consistent with #29.
- Mask-aware interaction relates to #9.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the event system introduced in #16 and the scene-order work in #29, then inspect the React event layer and Two.js APIs such as contains(...) and Group.getShapesAtPoint(...). Define the coordinate, hit-testing, bubbling, capture, and missed-event semantics before implementing them, and verify the acceptance criteria across SVG, Canvas, and WebGL with handler and payload assertions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100