Shapes

Shapes are the drawable leaves of the tree. The library ships eight:

Shape	Geometry props
Rect	width, height, cornerRadius
Circle	radius
Ellipse	radiusX, radiusY
Line	points, closed, tension
RegularPolygon	sides, radius
Star	numPoints, innerRadius, outerRadius
Text	text, font, fontSize, …
Image	src / image, width, height, fit

Shared props

Every shape accepts:

• All transform & identity props (x, y, scale, rotation, offset, opacity, visible, id, …).
• All styling props: fill, stroke, strokeWidth, gradients, dashes, shadows, lineCap / lineJoin, and globalCompositeOperation.
• All event handlers and interaction flags (draggable, listening, …).

The pages in this section only document each shape's geometry props; assume the shared props above are available everywhere.

Fill vs. stroke

A shape with neither a fill nor a stroke draws nothing. Provide at least one:

<Circle x={80} y={80} radius={40} fill="#8a2be2" />                 {/* filled */}
<Circle x={200} y={80} radius={40} stroke="#8a2be2" strokeWidth={6} /> {/* outlined */}

Fill vs. stroke

Local coordinates

Geometry is defined in the shape's local space; the node's x/y (and any ancestor transforms) place it on screen. For example, a Circle's center is its local origin, while a Rect is laid out from its top-left corner. Each shape page notes its origin.