jonobr1 / jonobr1/react-two.js
[Parity] Add declarative gradient stops and resource composition
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 15
- Forks
- 2
- Avg merge
- 7h 7m
- Merged PRs (30d)
- 3
Description
Summary
Make gradients usable without constructing Two.Stop manually or round-tripping a callback ref through React state.
The current LinearGradient and RadialGradient wrappers accept a stops array, but there is no exported Stop component or hook and no declarative relationship between a gradient resource and a shape. The current README example supplies plain stop objects; Two.js expects Two.Stop instances and throws when it tries to bind those objects.
Desired capabilities
A final API may use components, hooks, resource props, or a combination, but it should support an ergonomic equivalent of:
<LinearGradient x1={0} y1={0} x2={1} y2={1}>
<Stop offset={0} color="red" />
<Stop offset={1} color="blue" />
</LinearGradient>
Consumers should also be able to assign the resulting resource to fill or stroke without a fragile callback-ref + state pattern.
Related work
- #1 introduced the Texture component.
- #12 tracks asynchronous texture loading and caching.
- Shared ownership, replacement, and disposal semantics should align with the scene reconciliation work.
Acceptance criteria
- Export a typed declarative representation of
Two.Stop. - Support adding, removing, updating, and reordering stops through React.
- Provide an ergonomic, documented way to connect a gradient to
fillorstroke. - Support shared gradients without disposing a resource still used by another shape.
- Dispose renderer/GPU/SVG resources when the owning React resource unmounts.
- Work across SVG, Canvas, and WebGL renderers.
- Replace the invalid plain-object README example with an executable example.
- Add tests for stop updates, stop ordering, shared resources, replacement, and cleanup.
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 current LinearGradient and RadialGradient wrappers, the README gradient example, and the related scene reconciliation work. Trace how stops and gradient resources are currently passed to shapes, then review the acceptance criteria as the definition of done. Tests should cover stop updates and ordering, shared resources, replacement, cleanup, and SVG, Canvas, and WebGL renderers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- computer-graphics, documentation, frontend, testing
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100