Plushie.Canvas.Interactive (Plushie v0.7.0)

Interactive canvas element.

An interactive is a named group that responds to user input. It requires an explicit id (first positional argument) and supports click, hover, drag, focus, and accessibility fields.

On the wire this encodes as type: "group" (the renderer has no separate interactive type). The split is purely an SDK-side API improvement: group is structural, interactive is for elements that respond to user input.

Example

interactive "btn", on_click: true, cursor: "pointer" do
  rect(0, 0, 100, 40, fill: "#3498db")
end

Summary

Types

option()

t()

Functions

a11y(widget, descriptor)

Accessibility annotations (role, label, etc.).

build(widget)

Converts this widget struct to a ui_node() map.

clip(widget, descriptor)

Clip rectangle.

cursor(widget, descriptor)

CSS cursor on hover (e.g. "pointer", "grab").

drag_axis(widget, descriptor)

Constrain drag to an axis.

drag_bounds(widget, descriptor)

Drag boundary constraints.

draggable(widget, descriptor)

Enable drag events.

extend(widget, children)

Appends multiple children to the widget.

focus_ring_radius(widget, descriptor)

Focus ring corner radius in pixels.

focus_style(widget, descriptor)

Style overrides when focused.

focusable(widget, descriptor)

Add to the Tab focus order.

hit_rect(widget, descriptor)

Explicit hit test rectangle.

hover_style(widget, descriptor)

Style overrides on hover.

new(id)

Creates a new element without an explicit ID (auto-assigned by parent container).

new(id, opts)

Creates a new element with the given ID and keyword options.

on_click(widget, descriptor)

Enable click events.

on_hover(widget, descriptor)

Enable hover events.

pressed_style(widget, descriptor)

Style overrides when pressed.

push(widget, child)

Appends a child to the widget.

show_focus_ring(widget, descriptor)

Show the default focus ring.

tooltip(widget, descriptor)

Tooltip text on hover.

transforms(widget, descriptor)

List of transform descriptors.

type_name()

Returns the element type string for the wire protocol.

with_options(widget, opts)

Applies keyword options to an existing widget struct.

Types

option()

@type option() ::
  ((((((((((((((({:transforms, term()} | {:clip, term()})
                | {:on_click, boolean()})
               | {:on_hover, boolean()})
              | {:draggable, boolean()})
             | {:drag_axis, :x | :y | :both})
            | {:drag_bounds,
               %Plushie.Canvas.DragBounds{
                 max_x: term(),
                 max_y: term(),
                 min_x: term(),
                 min_y: term()
               }
               | keyword()
               | map()})
           | {:cursor, String.t() | atom()})
          | {:hit_rect,
             %Plushie.Canvas.HitRect{h: term(), w: term(), x: term(), y: term()}
             | keyword()
             | map()})
         | {:tooltip, String.t() | atom()})
        | {:hover_style,
           %Plushie.Canvas.ShapeStyle{
             fill: term(),
             opacity: term(),
             stroke: term()
           }
           | keyword()
           | map()})
       | {:pressed_style,
          %Plushie.Canvas.ShapeStyle{
            fill: term(),
            opacity: term(),
            stroke: term()
          }
          | keyword()
          | map()})
      | {:focus_style,
         %Plushie.Canvas.ShapeStyle{
           fill: term(),
           opacity: term(),
           stroke: term()
         }
         | keyword()
         | map()})
     | {:show_focus_ring, boolean()})
    | {:focus_ring_radius, number()})
   | {:a11y, term()})
  | {:focusable, boolean()}

t()

@type t() :: %Plushie.Canvas.Interactive{
  a11y:
    term()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  children: [Plushie.Widget.ui_node()],
  clip:
    term()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  cursor:
    (String.t() | atom())
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  drag_axis:
    (:x | :y | :both)
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  drag_bounds:
    %Plushie.Canvas.DragBounds{
      max_x: term(),
      max_y: term(),
      min_x: term(),
      min_y: term()
    }
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  draggable:
    boolean()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  focus_ring_radius:
    number()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  focus_style:
    %Plushie.Canvas.ShapeStyle{fill: term(), opacity: term(), stroke: term()}
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  focusable:
    boolean()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  hit_rect:
    %Plushie.Canvas.HitRect{h: term(), w: term(), x: term(), y: term()}
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  hover_style:
    %Plushie.Canvas.ShapeStyle{fill: term(), opacity: term(), stroke: term()}
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  id: String.t() | nil,
  on_click:
    boolean()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  on_hover:
    boolean()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  pressed_style:
    %Plushie.Canvas.ShapeStyle{fill: term(), opacity: term(), stroke: term()}
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  show_focus_ring:
    boolean()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  tooltip:
    (String.t() | atom())
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil,
  transforms:
    term()
    | Plushie.Animation.Transition.t()
    | Plushie.Animation.Spring.t()
    | Plushie.Animation.Sequence.t()
    | nil
}

Functions

build(widget)

@spec build(widget :: t()) :: Plushie.Widget.ui_node()

Converts this widget struct to a ui_node() map.

clip(widget, descriptor)

@spec clip(widget :: t(), value :: term() | nil) :: t()

Clip rectangle.

Accepts term().

cursor(widget, descriptor)

@spec cursor(widget :: t(), value :: (String.t() | atom()) | nil) :: t()

CSS cursor on hover (e.g. "pointer", "grab").

Accepts String.t() | atom().

drag_axis(widget, descriptor)

@spec drag_axis(widget :: t(), value :: (:x | :y | :both) | nil) :: t()

Constrain drag to an axis.

Accepts :x | :y | :both.

drag_bounds(widget, descriptor)

@spec drag_bounds(
  widget :: t(),
  value ::
    (%Plushie.Canvas.DragBounds{
       max_x: term(),
       max_y: term(),
       min_x: term(),
       min_y: term()
     }
     | keyword()
     | map())
    | nil
) :: t()

Drag boundary constraints.

Accepts %Plushie.Canvas.DragBounds{}.

draggable(widget, descriptor)

@spec draggable(widget :: t(), value :: boolean() | nil) :: t()

Enable drag events.

Accepts boolean().

extend(widget, children)

@spec extend(widget :: t(), children :: [Plushie.Widget.child()]) :: t()

Appends multiple children to the widget.

focus_ring_radius(widget, descriptor)

@spec focus_ring_radius(widget :: t(), value :: number() | nil) :: t()

Focus ring corner radius in pixels.

Accepts number().

focus_style(widget, descriptor)

@spec focus_style(
  widget :: t(),
  value ::
    (%Plushie.Canvas.ShapeStyle{fill: term(), opacity: term(), stroke: term()}
     | keyword()
     | map())
    | nil
) :: t()

Style overrides when focused.

Accepts %Plushie.Canvas.ShapeStyle{}.

focusable(widget, descriptor)

@spec focusable(widget :: t(), value :: boolean() | nil) :: t()

Add to the Tab focus order.

Accepts boolean().

hit_rect(widget, descriptor)

@spec hit_rect(
  widget :: t(),
  value ::
    (%Plushie.Canvas.HitRect{h: term(), w: term(), x: term(), y: term()}
     | keyword()
     | map())
    | nil
) :: t()

Explicit hit test rectangle.

Accepts %Plushie.Canvas.HitRect{}.

hover_style(widget, descriptor)

@spec hover_style(
  widget :: t(),
  value ::
    (%Plushie.Canvas.ShapeStyle{fill: term(), opacity: term(), stroke: term()}
     | keyword()
     | map())
    | nil
) :: t()

Style overrides on hover.

Accepts %Plushie.Canvas.ShapeStyle{}.

new(id)

@spec new(opts :: [option()]) :: t()

Creates a new element without an explicit ID (auto-assigned by parent container).

new(id, opts)

@spec new(id :: String.t(), opts :: [option()]) :: t()

Creates a new element with the given ID and keyword options.

on_click(widget, descriptor)

@spec on_click(widget :: t(), value :: boolean() | nil) :: t()

Enable click events.

Accepts boolean().

on_hover(widget, descriptor)

@spec on_hover(widget :: t(), value :: boolean() | nil) :: t()

Enable hover events.

Accepts boolean().

pressed_style(widget, descriptor)

@spec pressed_style(
  widget :: t(),
  value ::
    (%Plushie.Canvas.ShapeStyle{fill: term(), opacity: term(), stroke: term()}
     | keyword()
     | map())
    | nil
) :: t()

Style overrides when pressed.

Accepts %Plushie.Canvas.ShapeStyle{}.

push(widget, child)

@spec push(widget :: t(), child :: Plushie.Widget.child()) :: t()

Appends a child to the widget.

show_focus_ring(widget, descriptor)

@spec show_focus_ring(widget :: t(), value :: boolean() | nil) :: t()

Show the default focus ring.

Accepts boolean().

tooltip(widget, descriptor)

@spec tooltip(widget :: t(), value :: (String.t() | atom()) | nil) :: t()

Tooltip text on hover.

Accepts String.t() | atom().

transforms(widget, descriptor)

@spec transforms(widget :: t(), value :: term() | nil) :: t()

List of transform descriptors.

Accepts term().

type_name()

@spec type_name() :: String.t()

Returns the element type string for the wire protocol.

with_options(widget, opts)

@spec with_options(widget :: t(), opts :: [option()]) :: t()

Applies keyword options to an existing widget struct.