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.

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)
  Tooltip(String)
  A11y(node.PropValue)
  HitRect(x: Float, y: Float, w: Float, h: Float)
}

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)
```
```
Tooltip(String)
```
```
A11y(node.PropValue)
```

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

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

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).
```
Y(Float)
```
Vertical position offset (used by group shapes).

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.

group

</>

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

Create a group of shapes, optionally positioned at (x, y). Groups allow composing multiple shapes into a unit that can be positioned, styled, and made interactive together.

Use X(f) and Y(f) shape opts to position the group. Use interactive() to make the group respond to events.

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,
  opts: List(InteractiveOpt),
) -> node.PropValue

Mark a shape as interactive by adding an “interactive” field. The id option is required.

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.

pop_clip

</>

pub fn pop_clip() -> node.PropValue

Pop the most recent clipping rectangle.

pop_transform

</>

pub fn pop_transform() -> node.PropValue

Pop (restore) the previously saved transform state from the stack.

push_clip

</>

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

Push a clipping rectangle. All shapes until the matching pop_clip are clipped to this region. Clip regions nest via intersection.

push_transform

</>

pub fn push_transform() -> node.PropValue

Push (save) the current transform state onto the stack.

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

Rotate the canvas coordinate system (angle in radians).

scale

</>

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

Scale the canvas coordinate system.

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

Translate the canvas coordinate system.