Block Reference

Every building block an object may be composed of, with its properties, their types, defaults and ranges. This page is generated from the live registry, so it cannot drift from what the compiler will accept.

How to read this page

• Primitives and modifiers and behaviours list properties; a node sets them as constants under properties, or as bindings under bindings for the same names. A binding always wins.
• Components list parameters; a node sets them under parameters, each one a constant or a binding.
• A default written "token:stroke.accent" is read through the design tokens, so it follows the board's preset rather than being a fixed colour.
• A range column reading min 0, max 1 clamps the value; one listing alternatives is the set the value must come from.
• Every drawing block also carries fill, stroke, strokeWidth, strokeDash, strokeLinecap, opacity and visible.

The same catalogue is available to an agent at runtime through list_building_blocks, search_building_blocks and get_building_block_schema, which read the registry directly.

Limits

Primitives

The blocks that draw. A node names one as its type, and sets these under properties as constants or under bindings as declarative values.

arc circle clip-box ellipse group image line path polygon polyline rect ring text

arc — Arc

Circular arc or annular sector measured clockwise from the start angle.

Capabilities: fillable strokable radial angular

circle — Circle

Circle defined by a centre point and a radius.

Capabilities: fillable strokable radial

clip-box — Clip box

Container showing only the part of its children that falls inside it.

Capabilities: container sizable

Accepts children.

ellipse — Ellipse

Ellipse defined by a centre point and two radii.

Capabilities: fillable strokable radial

group — Group

Container that positions, rotates and scales its children as one unit.

Capabilities: container

Accepts children.

image — Image

Bitmap or SVG image placed in a box. Only https:, data: and same-origin relative sources are allowed.

Capabilities: sizable media

line — Line

Straight line segment between two points.

Capabilities: strokable linear

path — Path

Raw SVG path data. Commands are restricted to the standard path grammar.

Capabilities: fillable strokable

polygon — Polygon

Closed sequence of connected points.

Capabilities: fillable strokable

polyline — Polyline

Open sequence of connected points.

Capabilities: strokable linear

rect — Rectangle

Axis-aligned rectangle with optional corner radius.

Capabilities: fillable strokable sizable

ring — Ring

Full annulus between an inner and an outer radius.

Capabilities: fillable strokable radial

text — Text

Single line of text anchored at a point.

Capabilities: fillable textual

Modifiers

Applied to a node and everything under it, in the order the modifiers array lists them.

fill mirror opacity repeat rotate scale stroke translate visibility z-order

fill — Fill

Overrides the fill colour of a node.

Capabilities: style

mirror — Mirror

Mirrors a node about a horizontal or vertical axis through an anchor point.

Capabilities: transform

opacity — Opacity

Sets the opacity of a node or group.

Capabilities: style

repeat — Repeat

Repeats the node it is applied to, offsetting each copy by an angle step, a translation or a scale. The copy index is available to bindings as the parameter $index.

Capabilities: layout structural

rotate — Rotate

Rotates a node clockwise around an anchor point, in degrees.

Capabilities: transform angular

scale — Scale

Scales a node around an anchor point.

Capabilities: transform

stroke — Stroke

Overrides the stroke colour, width and dash pattern of a node.

Capabilities: style

translate — Translate

Moves a node or group by an offset.

Capabilities: transform

visibility — Visibility

Shows or hides a node, typically bound to a model condition.

Capabilities: style conditional

z-order — Z order

Sorts siblings; higher values are drawn on top.

Capabilities: layout

Behaviours

What the reader can do to a node, and what that writes. Listed on the node under behaviours.

clickable drag-angle drag-axis-tick drag-circle-point drag-rotate draggable follow-pointer forget hoverable keep-time play-note press-and-slide remember resizable respond-to-simulation rotatable selectable tooltip track-pointer

clickable — Clickable

Writes a value into a model variable or into a component parameter when the node is clicked. The value is a binding like any other, so a key can write what the model or the object itself currently holds rather than only a constant.

Capabilities: interaction writes-model

drag-angle — Drag angle

Lets the user drag the node around an anchor point and writes the resulting angle back into a model variable, using the same angle-to-value mapping the node was bound with. Naming a length as well makes the node reach the pointer rather than only point at it: how far the pointer stands from the anchor is written as the length, in the units the node is drawn in, so one drag both turns the thing and stretches it.

Capabilities: interaction angular writes-model

drag-axis-tick — Drag axis tick

Rescales an axis by dragging one of its ticks: the tick follows the pointer and the far end of the axis moves with it, writing the object's own maximum. An axis standing on zero is pulled from the middle, naming no minimum property and handing nought over as the minimum value, so what it writes is how far the drawing reaches from the origin. The same interaction, and the same arithmetic, the chart's axes have. An axis whose ticks are placed by the logarithm of their value is dragged in decades rather than in values, and one that says how many parts it is cut into rather than how much one part is worth keeps the part and writes the count, so its numbers stay the same distance apart and there are more or fewer of them.

Capabilities: interaction

drag-circle-point — Drag a point round a circle

Drags a point round a circle and writes back everything the circle is read for at once: the angle the point stands at, how far out it stands, how far across and how far up it is, the tangent of that angle and the length of the arc it has swept. Each of them goes into the term its row names, or into the object's own parameter when that row holds a plain number instead, and a row the model works out for itself is left alone — so a circle whose angle a definition gives is still dragged where it writes the point. Asking for a number of divisions makes the angle land on one of them: the point follows the pointer while it is held and lands on the nearest division, exactly, the moment it is let go. The whole drag is one edit.

Capabilities: interaction angular writes-model

drag-rotate — Drag rotate

Lets the user turn the node around an anchor point by dragging it. The variable moves by the angle the pointer travels, so the grabbed point follows the pointer instead of jumping to it, which is what a rose, a bezel or a dial ring needs.

Capabilities: interaction angular writes-model

draggable — Draggable

The object can be moved with the move handle. Provided by the host shape for every component.

Capabilities: interaction

follow-pointer — Follow pointer

Reports where the pointer is over the node, in the units the node is scaled in, so a drawing can show the value under the cursor. What is reported is not kept: it lasts as long as the pointer is over the node, and the model is not touched.

Capabilities: interaction

forget — Forget

Empties one of the object's memories when the node is clicked.

Capabilities: interaction memory

hoverable — Hoverable

The node reacts to pointer hover with the standard highlight cursor.

Capabilities: interaction

keep-time — Keep time

A transport key for a reading of the clock: play sets it counting real time from wherever it stands, pause holds it there, and stop ends the run and clears it. A key set to toggle is both — it starts a clock standing still and holds a clock that is counting, so one key does the work of two. What is counted is written into the four parts of the reading — the hours, the minutes, the seconds and the thousandths — each into the term that part names, or into the object's own property when it names a plain number instead. The whole run is one edit.

Capabilities: interaction writes-model

play-note — Play a note

A key of an instrument: it sounds its own pitch for as long as it is held, and stops when it is let go. Several keys sound together, whether they are held by several fingers or by several computer keys at once, and sliding across them plays them in turn. The object reports the notes it is holding into a parameter of its own, so its drawing can show which keys are down and what it publishes can be worked out from the chord. Nothing is written down: a file remembers no note left sounding.

Capabilities: interaction sound

press-and-slide — Press and slide

A control the reader holds down: pressing keeps the value where it is, sliding the pointer up raises it and down lowers it, by however far it travelled, and letting go lets the value fall back to its resting value a step at a time. It is what a pedal or a throttle needs — nothing is written by pressing alone, and the whole gesture, the fall back included, is one edit.

Capabilities: interaction linear writes-model

remember — Remember

Appends a row to one of the object's memories when the node is clicked. A row carries a label and two numbers, all of them bindings, so a key records what the object held at the moment it was pressed.

Capabilities: interaction memory

resizable — Resizable

The object can be resized with the corner handles. Provided by the host shape for every component.

Capabilities: interaction

respond-to-simulation — Respond to simulation updates

Marks the object as redrawing on every simulation tick. Components with model bindings get this automatically.

Capabilities: simulation

rotatable — Rotatable

The object can be rotated with the rotation handle. Provided by the host shape for every component.

Capabilities: interaction

selectable — Selectable

The object can be selected on the board. Provided by the host shape for every component.

Capabilities: interaction

tooltip — Tooltip

Shows a native tooltip with a fixed or bound text when the pointer rests on the node.

Capabilities: interaction textual

track-pointer — Track pointer

Records where the pointer is while it is dragged over the node, one sample every sampling interval, into one of the object's memories. The sample is written in the units the node is scaled in, so what is recorded is a pair of values rather than a pair of pixels — and when the memory names model terms, the run becomes the values those terms take, iteration by iteration. Nothing is recorded until the pointer travels: a click that never moves leaves the memory alone, and a drag opens its run at the point the pointer went down.

Capabilities: interaction memory writes-model

Components

Ready-made assemblies. A node names one as its type and sets these under parameters.

calculator circular-gauge clock compass dial-face key-cap label-ring mechanical-wave memory-list memory-trace mouse-tracker orbit-system oscilloscope piano piano-keyboard plot-axes plot-crosshair plot-grid pointer-hand pointer-ring protractor rotating-vector ruler seven-segment-display speedometer steering-wheel thermometer tick-ring trigonometric-circle

calculator — Calculator

Calculator whose working is held by the object itself: four functions on a narrow one, and a scientific pad of powers, roots, trigonometry and logarithms beside the digits once it is wide enough to hold one. Term keys load the value a model variable has at the iteration on screen, the result can be written back into a model variable, and every completed operation is kept in a history the object remembers and can be read back from.

Capabilities: interaction textual reads-model writes-model memory

circular-gauge — Circular gauge

Ring gauge that fills clockwise in proportion to a model variable.

Capabilities: radial angular reads-model

clock — Clock

Clock reading the hour, minute, second and millisecond a model gives it, or reading the model's own time as a count of seconds, shown either as a face with a hand for each or as a digital readout of the same time. The seconds and the milliseconds can each be left out, and what is left out goes from the face and from the readout alike. Run by its own keys it is a stopwatch: one key starts and holds it, one takes a lap, and one ends the run — and the laps it has taken are kept in a list of their own under the face.

Capabilities: radial angular reads-model textual interaction memory

compass — Compass

Compass rose with cardinal labels, a needle whose heading comes from a model variable and a rose that a second variable can turn. The needle and the rim of the rose can be dragged to write those variables back.

Capabilities: radial angular reads-model interaction writes-model

dial-face — Dial face

Circular face with an optional bezel ring, used as the background of clocks, gauges and compasses.

Capabilities: radial background

key-cap — Key cap

Rounded key with a centred label. It carries no interaction of its own: put it inside a group and give that group the behaviour the key performs, so the same cap serves a keypad, a legend or a toolbar.

Capabilities: sizable textual

label-ring — Label ring

Numeric or text labels placed evenly around a centre, always drawn upright.

Capabilities: radial angular textual

mechanical-wave — Mechanical wave

A mechanical wave drawn as a chain of oscillators, each taking up the motion of the source as late as its distance from it. It repeats what a term of the model has been doing, one oscillator to each iteration of the run, or works its own wave out and hands the model the oscillator it is read at.

Capabilities: reads-model writes-model oscillation

memory-list — Memory list

The rows of a memory drawn as a list, newest first, with the label on the left and the number on the right. Rows can carry actions, so choosing one puts what it holds back into the object.

Capabilities: memory textual interaction

memory-trace — Memory trace

The path the rows of a memory draw, mapped from the values they hold to the pixels of a plot with the same origin and scale the recording used.

Capabilities: memory linear

mouse-tracker — Mouse tracker

Records where the pointer goes across the plot, against a horizontal and a vertical axis. Every drag adds to what is already there, drawn as a line of its own, so several of them build one recording made of separate runs. A click records nothing: the plot is only written to by a gesture that travels. The run is measurements: name a variable for each axis and it takes the value of sample n at iteration n, so the model's own player replays the gesture and everything reading those variables moves with it. A variable the model works out for itself is read rather than written: the gesture says where the model's input now stands, the definitions say what comes out of it, and that is the value the line is drawn through and the value the run remembers, so a recording made against a definition is in the model's own coordinates. The marker showing the sample on screen can be any character from the catalogue, placed by its pivot point.

Capabilities: interaction memory linear writes-model textual

orbit-system — Orbit system

Central body with up to four orbiting bodies whose angular positions come from model variables or from simulation time and an orbital period.

Capabilities: radial angular reads-model

oscilloscope — Oscilloscope

A screen the model's waves are read on. Each row of the list names a wave the model defined over element indices and draws it across a graticule, in a colour of its own, so as many of them as the reader names stand one over another. A row naming a term the model holds no elements of — one an object writes a point at a time — is read over the run instead, a point to each row: the trace fills the screen from the left as the run goes, and once the run has passed the right-hand edge the screen travels with it, so a term that was never a wave is drawn as the wave its points make and goes on being drawn where the model has got to. Resting the pointer on the screen stands a cursor on it and reads every trace where it crosses, and a mark left by a click measures the distance from there to the cursor — a wavelength taken crest to crest, and the wavenumber that follows from it.

Capabilities: reads-model linear textual interaction

piano — Piano

A piano keyboard played with the pointer or with the computer keys, several notes at a time, that hands the model the sound of the chord it is holding, a point of it on every row of the run.

Capabilities: writes-model interaction sound

piano-keyboard — Piano keyboard

A run of piano keys, drawn and tuned from the note each one carries: the naturals share the width between them and the sharps ride over the seams. Every key sounds its own pitch while it is held, by pointer or by the computer key that plays it, and the keys that are down are drawn lit. Nothing is written on a key: a keyboard is read by where a key sits, not by a letter painted on it.

Capabilities: interaction sound

plot-axes — Plot axes

Horizontal and vertical axis of a plot box, with tick marks and numbered labels. Any object that shows a value against a scale reads the same way a chart does.

Capabilities: layout textual

plot-crosshair — Plot crosshair

Dashed lines from a point out to both axes, with the value it stands at read on a badge against each one — the way a chart answers where a point is.

Capabilities: layout textual

plot-grid — Plot grid

Grid inside a plot box: one line at every tick of both axes, drawn the way the chart draws its own.

Capabilities: layout

pointer-hand — Pointer hand

A clock hand, gauge needle or compass pointer that rotates clockwise around an anchor. Angle 0 points up.

Capabilities: angular rotation interaction

pointer-ring — Pointer ring

Directions marked around a dial, one marker per row: a row names an angle, or a pair of values read as a vector — how far across and how far up. Each marker stands where the tick for its direction stands, so it is read against the same scale.

Capabilities: radial angular reads-model

protractor — Protractor

A scale bent round a vertex to measure an angle against: a band of degrees numbered at every division, divided ten ways between one number and the next, standing on the arms it is read between. It is laid over whatever is being measured — a vector, a body's path, a drawing — and resting the pointer on it reads the angle from its zero. How far round it goes is its own, so the same object is a half circle, a quadrant or a whole dial, and the numbers the two ends read are its own too, so a protractor can be marked in degrees, in turns, or in whatever the model measures its angles in.

Capabilities: radial angular scale interaction

rotating-vector — Rotating vector

Phasor arrow whose angle and length come from model variables, with an optional reference circle and projections. The arrow reaches the pointer that drags it: one drag both turns it and stretches it, writing the angle and the length back together, so where the reader leaves the tip is where the arrow points and how far it goes.

Capabilities: angular linear reads-model vector interaction writes-model

ruler — Ruler

A scale laid across the board to measure against: a body ruled from one end to the other, cut into as many numbered parts as it is asked for, with the space between each pair of numbers divided ten ways and the halfway mark drawn taller. Resting the pointer on it reads the value it stands at, and pulling one of the numbers stretches the scale under it the way a chart's axis is stretched, so the ruler is set against what it is measuring rather than typed in. Read logarithmically it is a slide rule instead: the decades are evenly spread, numbered 1, 10, 100, and each is divided by the marks for 2 to 9 standing where their logarithms put them.

Capabilities: linear scale interaction

seven-segment-display — Seven-segment display

A reading spelled out in seven-segment lamps, the way a digital clock, a meter or a stopwatch shows one. Digits, the colon, the point and the minus sign are drawn as bars; the bars a character does not light are left showing faintly, the way the unlit ones on a real panel are. The text is fitted to the box it is given, so it is placed by handing it a box rather than a font size.

Capabilities: sizable textual

speedometer — Speedometer

Sweeping dial with a scale, a needle bound to a model variable and a numeric readout.

Capabilities: radial angular reads-model scale audible

steering-wheel — Steering wheel

The controls a vehicle is driven with: a wheel turned by a model variable, drawn as a car wheel, a motorbike handlebar or a ship's helm, and the accelerator and brake of that same vehicle under it. The wheel, the pedals, and the brake among the pedals, can each be left out. Dragging the wheel turns it and writes back what it reads; the accelerator and the brake each press a value of its own up from zero, both above zero and both pressed the same way, each read the way the wheel is — a term, or a pair laid down along the bearing the wheel is turned to, forwards for the accelerator and back the other way for the brake.

Capabilities: radial angular linear reads-model scale interaction writes-model

thermometer — Thermometer

A temperature read as the height of a column: a bulb, a stem the liquid rises up, and a scale beside it marked every so many degrees. A dashed line carries the top of the column across to the scale, so the reading is placed against the marks the way a chart places a point against its axes. The column can be dragged to write the temperature back, and the marks and their numbers are the sizes the board's own axes are drawn to, so the scale stretches as the object is resized rather than the writing on it.

Capabilities: linear scale reads-model interaction writes-model audible

tick-ring — Tick ring

Evenly spaced radial tick marks around a centre, with optional longer major ticks.

Capabilities: radial angular scale

trigonometric-circle — Trigonometric circle

Circle with a point the reader drags round it, and everything the circle is read for drawn where it is read: the angle swept from the horizontal, the radius out to the point, the two projections that are its cosine and its sine, the tangent taken on the line standing at the radius, and the arc the point has travelled. Each of them names a term of its own — one the model works out for itself moves the point, one the model leaves free is the circle's to write — so the same object shows a model turning a circle and lets a reader turn one for the model. A free row is written both ways: by dragging the point, and by the circle itself on every row of a run, so a sine the model never works out is still plotted and tabulated like one it does. A dragged angle can be made to land on a whole number of parts of the circle rather than wherever the pointer left it, and the angle counts the turns: round one way it grows past a whole turn, round the other it falls through nothing and past a turn the other way, so what the circle hands the model is how far the point has been turned rather than where it stopped.

Capabilities: radial angular reads-model interaction writes-model textual

Design tokens

The board's own colours, widths, fonts, axis and crosshair numbers. Write one as a default with "token:stroke.accent", or read one with the binding { "token": "stroke.accent" } — never the literal value, so a preset restyles every object at once.

Values below are the standard preset. The presets are standard minimal scientific classroom high-contrast; each one overrides some of these and inherits the rest.