jonobr1 / jonobr1/react-two.js

[Bug] Align pointer events with Two.js coordinates and scene order

Open
#34 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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.point subtracts 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.
  • onPointerMissed currently 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 onPointerMissed semantics 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.