shape

Canvas shape primitives for drawing on canvas widgets.

Shapes are plain PropValue maps (DictVal) placed as children of a canvas widget. The Rust binary interprets them as drawing instructions. Each shape is a flat map with a “type” key and shape-specific properties.

Types

InteractiveOpt

</>

Interactive shape options for hit testing and event handling. Options for interactive groups (elements). These are top-level fields on the group, not nested in an “interactive” sub-object.

pub type InteractiveOpt {
  InteractiveId(String)
  OnClick(Bool)
  OnHover(Bool)
  Draggable(Bool)
  DragAxis(String)
  DragBounds(
    x_min: Float,
    x_max: Float,
    y_min: Float,
    y_max: Float,
  )
  Cursor(String)
  HoverStyle(node.PropValue)
  PressedStyle(node.PropValue)
  FocusStyle(node.PropValue)
  ShowFocusRing(Bool)
  FocusRingRadius(Float)
  Tooltip(String)
  A11y(node.PropValue)
  HitRect(x: Float, y: Float, w: Float, h: Float)
  Focusable(Bool)
}

Constructors

```
InteractiveId(String)
```
```
OnClick(Bool)
```
```
OnHover(Bool)
```
```
Draggable(Bool)
```
```
DragAxis(String)
```

DragBounds(
  x_min: Float,
  x_max: Float,
  y_min: Float,
  y_max: Float,
)

```
Cursor(String)
```
```
HoverStyle(node.PropValue)
```
```
PressedStyle(node.PropValue)
```
```
FocusStyle(node.PropValue)
```
```
ShowFocusRing(Bool)
```
```
FocusRingRadius(Float)
```
```
Tooltip(String)
```
```
A11y(node.PropValue)
```

HitRect(x: Float, y: Float, w: Float, h: Float)

```
Focusable(Bool)
```

PathCommand

</>

Path commands for constructing freeform shapes.

pub type PathCommand {
  MoveTo(x: Float, y: Float)
  LineTo(x: Float, y: Float)
  BezierTo(
    cp1x: Float,
    cp1y: Float,
    cp2x: Float,
    cp2y: Float,
    x: Float,
    y: Float,
  )
  QuadraticTo(cpx: Float, cpy: Float, x: Float, y: Float)
  Arc(
    x: Float,
    y: Float,
    radius: Float,
    start_angle: Float,
    end_angle: Float,
  )
  ArcTo(
    x1: Float,
    y1: Float,
    x2: Float,
    y2: Float,
    radius: Float,
  )
  Ellipse(
    cx: Float,
    cy: Float,
    rx: Float,
    ry: Float,
    rotation: Float,
    start_angle: Float,
    end_angle: Float,
  )
  RoundedRect(
    x: Float,
    y: Float,
    w: Float,
    h: Float,
    radius: Float,
  )
  Close
}

Constructors

```
MoveTo(x: Float, y: Float)
```
```
LineTo(x: Float, y: Float)
```

BezierTo(
  cp1x: Float,
  cp1y: Float,
  cp2x: Float,
  cp2y: Float,
  x: Float,
  y: Float,
)

QuadraticTo(cpx: Float, cpy: Float, x: Float, y: Float)

Arc(
  x: Float,
  y: Float,
  radius: Float,
  start_angle: Float,
  end_angle: Float,
)

ArcTo(x1: Float, y1: Float, x2: Float, y2: Float, radius: Float)

Ellipse(
  cx: Float,
  cy: Float,
  rx: Float,
  ry: Float,
  rotation: Float,
  start_angle: Float,
  end_angle: Float,
)

RoundedRect(
  x: Float,
  y: Float,
  w: Float,
  h: Float,
  radius: Float,
)

```
Close
```

ShapeOpt

</>

Shape options for styling and positioning.

pub type ShapeOpt {
  Fill(String)
  Stroke(stroke: node.PropValue)
  Opacity(Float)
  FillRule(String)
  GradientFill(node.PropValue)
  Size(Float)
  Font(String)
  AlignX(String)
  AlignY(String)
  Rotation(Float)
  X(Float)
  Y(Float)
  Transforms(List(node.PropValue))
  ClipRect(node.PropValue)
}

Constructors

```
Fill(String)
```
```
Stroke(stroke: node.PropValue)
```
```
Opacity(Float)
```
```
FillRule(String)
```
```
GradientFill(node.PropValue)
```
```
Size(Float)
```
```
Font(String)
```
```
AlignX(String)
```
```
AlignY(String)
```
```
Rotation(Float)
```
```
X(Float)
```
Horizontal position offset (used by group shapes, desugared to translate).
```
Y(Float)
```
Vertical position offset (used by group shapes, desugared to translate).
```
Transforms(List(node.PropValue))
```
Ordered list of transforms for a group (translate, rotate, scale).
```
ClipRect(node.PropValue)
```
Clip rectangle for a group.

StrokeCap

</>

Stroke line cap style.

pub type StrokeCap {
  ButtCap
  RoundCap
  SquareCap
}

Constructors

```
ButtCap
```
```
RoundCap
```
```
SquareCap
```

StrokeDetailOpt

</>

Options for stroke detail (cap, join, dash).

pub type StrokeDetailOpt {
  StrokeCapOpt(StrokeCap)
  StrokeJoinOpt(StrokeJoin)
  StrokeDashOpt(segments: List(Float), offset: Float)
}

Constructors

```
StrokeCapOpt(StrokeCap)
```
```
StrokeJoinOpt(StrokeJoin)
```

StrokeDashOpt(segments: List(Float), offset: Float)

StrokeJoin

</>

Stroke line join style.

pub type StrokeJoin {
  MiterJoin
  RoundJoin
  BevelJoin
}

Constructors

```
MiterJoin
```
```
RoundJoin
```
```
BevelJoin
```

Values

circle

</>

pub fn circle(
  x: Float,
  y: Float,
  r: Float,
  opts: List(ShapeOpt),
) -> node.PropValue

Create a circle shape.

clip

</>

pub fn clip(
  x: Float,
  y: Float,
  w: Float,
  h: Float,
) -> node.PropValue

Create a clip rectangle for a group.

group

</>

pub fn group(
  children: List(node.PropValue),
  opts: List(ShapeOpt),
) -> node.PropValue

Create a group of shapes. Groups are the only container and interactive unit in the canvas. A group with an InteractiveId becomes an interactive element.

Use X(f) and Y(f) shape opts to position the group (desugared to a leading translate in the transforms array).

image

</>

pub fn image(
  source: String,
  x: Float,
  y: Float,
  w: Float,
  h: Float,
  opts: List(ShapeOpt),
) -> node.PropValue

Draw a raster image on the canvas at the given position and size.

interactive

</>

pub fn interactive(
  shape: node.PropValue,
  id: String,
  opts: List(InteractiveOpt),
) -> node.PropValue

Make a shape interactive by wrapping it in an interactive group.

If the shape is already a group, interactive fields are merged directly into it. If it’s a leaf shape (rect, circle, etc.), it’s automatically wrapped in a new group.

interactive_group

</>

pub fn interactive_group(
  id: String,
  children: List(node.PropValue),
  opts: List(InteractiveOpt),
) -> node.PropValue

Create an interactive group with an id and options. Sugar for group(children, []) |> interactive(id, opts).

line

</>

pub fn line(
  x1: Float,
  y1: Float,
  x2: Float,
  y2: Float,
  opts: List(ShapeOpt),
) -> node.PropValue

Create a line shape.

linear_gradient

</>

pub fn linear_gradient(
  from: #(Float, Float),
  to: #(Float, Float),
  stops: List(#(Float, String)),
) -> node.PropValue

Create a linear gradient fill value usable with GradientFill. Points are (x, y) tuples for start and end positions. Stops are (offset, color) tuples where offset is 0.0 to 1.0.

path

</>

pub fn path(
  commands: List(PathCommand),
  opts: List(ShapeOpt),
) -> node.PropValue

Create a path from a list of path commands.

rect

</>

pub fn rect(
  x: Float,
  y: Float,
  w: Float,
  h: Float,
  opts: List(ShapeOpt),
) -> node.PropValue

Create a rectangle shape.

rotate

</>

pub fn rotate(angle: Float) -> node.PropValue

Create a rotation transform (angle in radians).

scale

</>

pub fn scale(x: Float, y: Float) -> node.PropValue

Create a non-uniform scale transform.

scale_uniform

</>

pub fn scale_uniform(factor: Float) -> node.PropValue

Create a uniform scale transform.

stroke

</>

pub fn stroke(
  color: String,
  width: Float,
  opts: List(StrokeDetailOpt),
) -> node.PropValue

Build a stroke descriptor as a nested PropValue map.

Options: StrokeCap, StrokeJoin, StrokeDash.

svg

</>

pub fn svg(
  source: String,
  x: Float,
  y: Float,
  w: Float,
  h: Float,
) -> node.PropValue

Draw an SVG on the canvas at the given position and size.

text

</>

pub fn text(
  x: Float,
  y: Float,
  content: String,
  opts: List(ShapeOpt),
) -> node.PropValue

Create a text shape positioned at the given coordinates.

translate

</>

pub fn translate(x: Float, y: Float) -> node.PropValue

Create a translation transform for a group’s transforms list.