Decorator

23 Sep 20251 minute to read

Decorators are used to decorate the end points of the connector with some predefined path geometry

Properties

height number

Sets the height of the decorator

Defaults to 10

pathData string

Defines the geometry of the decorator shape

Defaults to ’’

pivot PointModel

Defines the position of the decorator with respect to the source/target point of the connector

shape DecoratorShapes

<div id='diagram'></div>

let connectors: ConnectorModel[] = [{
  id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 },
  sourceDecorator: {
   style: { fill: 'black' },
   shape: 'Arrow',
   pivot: { x: 0, y: 0.5 }},
  targetDecorator: {
   shape: 'Diamond',
   style: { fill: 'blue' },
   pivot: { x: 0, y: 0.5 }}
 },];
let diagram: Diagram = new Diagram({
...
connectors: connectors
...
});
diagram.appendTo('#diagram');

style ShapeStyleModel

Defines the appearance of the decorator

Defaults to new ShapeStyle()

width number

Sets the width of the decorator

Defaults to 10