jonobr1 / jonobr1/react-two.js

[Parity] Add declarative gradient stops and resource composition

Open
#31 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

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 fill or stroke.
  • 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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.