Skip to content

[Parity] Add declarative gradient stops and resource composition #31

Description

@jonobr1

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

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions