Shapes library

Package: vyuh_diagram_extension_shapes, library package:vyuh_diagram_extension_shapes/vyuh_diagram_extension_shapes.dart. Optional commercial extension; import it alongside vyuh_diagram_flutter in a Flutter application, or alongside core in Dart.

Public entry points

• ShapesExtension({only, tools = true}), id vyuh.shapes: installs every shape with one palette tool each. only limits it to the listed shape types; tools: false installs the shapes without palette tools. It installs TableExtension() for entity sections and RichTextExtension(tool: false) for their rich rows, unless the application installs its own.
• ShapesExtension.library: the ShapeLibrary (id shapes, name Shapes).
• DiagramShapes: the shape type constants, plus the DiagramShapes.entitySecondary value key.

Register the library

import 'package:vyuh_diagram_extension_editor/vyuh_diagram_extension_editor.dart';
import 'package:vyuh_diagram_extension_shapes/vyuh_diagram_extension_shapes.dart';
import 'package:vyuh_diagram_extension_table/vyuh_diagram_extension_table.dart';
import 'package:vyuh_diagram_extension_table_flutter/vyuh_diagram_extension_table_flutter.dart';
import 'package:vyuh_diagram_flutter/vyuh_diagram_flutter.dart';

final controller = DiagramController(
  configuration: DiagramConfiguration(
    extensions: [
      EditorExtension(),
      TableFlutterExtension(),
      ShapesExtension(only: [DiagramShapes.decision, DiagramShapes.entity]),
    ],
  ),
);

The entity's sections are table content. Add TableFlutterExtension(), which installs TableExtension(), for the table's interactive row controls. Use ShapesExtension.library.shape(type) to reuse one definition in your own extension.

Shapes

Shape	Type	Notes
Start	DiagramShapes.start	Circle with a play icon.
End	DiagramShapes.end	Circle with an X.
Decision	DiagramShapes.decision	Diamond with a centered label.
Subprocess	DiagramShapes.subprocess	Rectangle with inner side bars.
Preparation	DiagramShapes.preparation	Hexagon with a centered label.
Extract	DiagramShapes.extract	Triangle with a centered label.
Junction	DiagramShapes.junction	Small circle with a one-letter label.
Parallelogram	DiagramShapes.parallelogram	Slanted sides, for data in and out.
Trapezoid	DiagramShapes.trapezoid	Wide at the top, for a manual operation.
Cylinder	DiagramShapes.cylinder	A drum with a curved rim, for stored data.
Document	DiagramShapes.document	A page with its top-right corner folded.
Entity	DiagramShapes.entity	Tag and title over a primary section and an optional secondary section.
Arrow	DiagramShapes.arrow	Block arrow with direction (right, left, up, down), doubleHeaded, shaft, head and headWidth values.
Star	DiagramShapes.star	points (integer 3 to 20) and innerRadius values.
Arc / Pie	DiagramShapes.arc	startAngle and sweepAngle values; closeToCenter makes a pie.
Callout	DiagramShapes.callout	Speech callout with pointer and depth values.

Decision, preparation and extract are regular polygons whose side count is their sides value (4, 6 and 3 by default), so their sides and corner radius are editable like the core polygon's. createShape fills in the default; an authored ShapeElement supplies values: {'sides': n} itself.

Rectangles, ellipses, polygons, cards and frames are core shapes and need no extension. A flowchart process is a core rectangle or card; a card carries an optional tag, a title and a plain-text description, with ports on each side.

Arrows, stars, arcs and callouts are adjustable: their outline is derived from their values, and each value has an on-canvas adjustment control with magnetic snap stops (Shift constrains to the stops). See the adjustable shapes example.

Entity sections

An entity models a class, a record or an ER entity. Its header holds an optional tag (shown only while it has text, for example a class annotation) and a single-line title. Below it, the primary section lists rows such as attributes. The secondary section, for example methods, shows only while the entity's DiagramShapes.entitySecondary value is on.

Rows are single-line; adding rows grows the shape. Only the whole shape resizes: sections have no row or column resize handles, and columns cannot be added. Relationships attach anywhere on the outline (ShapeConnectionDefinition.outline()), as class and ER edges do.

Entity verbs

An entity's own verbs are declared on its ShapeDefinition(verbs: [...]), and DiagramEntityVerbs adds typed wrappers for them to the controller: the card verbs setTitle and setTag (setTag(id, null) hides the tag), and showSecondarySection(id, shown), which sets the DiagramShapes.entitySecondary value. Each section's rows are its table part's verbs, addressed as primary.insertRow or secondary.insertRow; the typed table wrappers take part: 'primary'. See tables.

controller.edits.setTitle(entityId, 'Order');
controller.edits.showSecondarySection(entityId, true);
controller.edits.insertRow(entityId, at: 1, part: 'primary');

Shape affordances

The entity declares its on-canvas controls in ShapeDefinition.affordances: diagramTagAffordance (the core card's optional tag) and a ShapeValueToggleAffordance for showSecondarySection. When an entity is selected, the editor shows an add or remove tag button beside its title, performing addSlot or removeSlot, and an add or remove secondary section button, performing showSecondarySection with the opposite of the current value.

Each performs a verb, so it supports undo, and shows only while that verb is available. EditorExtension() draws affordances. See shape affordances.

Create instances with controller.edits.createShape(..., at: ...), which reports the new ID in id. Definitions own their anatomy: outline, body, values, ports and behavior. Register a new type to customize a definition; do not overwrite installed IDs. Shared Flutter rendering and codecs consume the ordinary resolved primitives, so no separate library-specific painter is needed.

See shapes API for the shared verbs and configuration.