Widget properties

Loading interactive example…Open in new tab ↗

Opening the live canvas…

The selected controls card advertises progress, mode, and count through its shape definition. DiagramInspector creates the corresponding property controls; the live widget reads the same values. There is no separate form model to synchronize.

Definition / API	Contract
NumberValueField	Numeric bounds and integer constraints are validated at canonical publication.
TextValueField.allowedValues	Declares the mode choices.
ShapeDefinition.values	Supplies defaults and field grammar for both verbs and inspector.
controller.edits.setValues(id, values)	Merges registered values in one admitted edit.
DiagramInspector(controller: controller)	Edits selected elements through the editors their anatomy and values declare.

Change progress or mode in the inspector, then use the widget. Set ready updates both fields together; Undo restores both. Locking the card prevents edits through either surface. Text properties are absent because this node's body has no text part. The inspector moves below the canvas on narrow example embeds.

Source

actions: {
  'Select card': (s) => s.select(['controls']),
  'Set ready': (s) => s.edits.setValues('controls', {
    'mode': 'Ready',
    'progress': 100,
  }).requireAllowed(),
},

The fixture, registry and controls are shared with Widgets inside shapes.