jonobr1 / jonobr1/react-two.js

[Parity] Add a Primitive escape hatch for existing and custom Two.js objects

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

Nobody has claimed this yet.

enhancement
Dominant language
TypeScript
Stars
15
Forks
2
Avg merge
7h 7m
Merged PRs (30d)
3

Description

Summary

Add a generic React component for attaching an existing Two.js object to the declarative scene graph.

A primitive escape hatch makes custom Two.Shape subclasses, extras, clones, and objects restored with fromObject(...) usable without waiting for a bespoke wrapper or imperatively calling parent.add(...).

Proposed API sketch

const object = useMemo(() => Two.Group.fromObject(snapshot), [snapshot]);

<Primitive object={object} />

The exact name and ownership API are open for design.

Related work

  • #10 should still provide a first-class typed Arc component.
  • This should use the same ordering, reparenting, event registration, and cleanup semantics as built-in components.

Acceptance criteria

  • Attach a supplied Two.js Shape or Group to the current React parent.
  • Remove and reparent it correctly as React ownership changes.
  • Preserve React sibling ordering.
  • Forward a ref to the supplied object.
  • Define whether the wrapper owns/disposes the object, with an explicit option if both owned and borrowed objects are supported.
  • Define how prop overrides and event handlers apply to primitives.
  • Allow React children when the supplied object is a Group, or clearly document why this is unsupported.
  • Support an Arc-extra or custom Shape example.
  • Support a Group.fromObject(...) scene restoration example.
  • Add lifecycle, ordering, borrowed-resource, and custom-object tests.

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 tracing the existing built-in component lifecycle and the proposed API, focusing on ordering, reparenting, events, cleanup, and ref behavior. Done means the ownership and prop semantics are defined, custom and restored objects work, and the lifecycle, ordering, borrowed-resource, and custom-object tests described in the issue pass.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
computer-graphics, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.