Connector API in React Diagram API component

Connectors are used to create links between nodes

Properties

addInfo

Object

Allows the user to save custom information/data about a node/connector

Defaults to undefined

annotations

PathAnnotationModel[]

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

let connectors: ConnectorModel[] = [{
  id: 'connector', type: 'Straight', sourcePoint: { x: 500, y: 100 }, targetPoint: { x: 600, y: 200 },
annotations: [{ content: 'No', offset: 0, alignment: 'After' }]
];
let diagram: Diagram = new Diagram({
...
connectors: connectors
...
});
diagram.appendTo('#diagram');

bridgeSpace

number

Defines the bridgeSpace of connector

Defaults to 10

connectionPadding

number

Sets the connector padding value

Defaults to 0

constraints

ConnectorConstraints

Defines the constraints of connector

• None - Interaction of the connectors cannot be done.
• Select - Selects the connector.
• Delete - Delete the connector.
• Drag - Drag the connector.
• DragSourceEnd - Drag the source end of the connector.
• DragTargetEnd - Drag the target end of the connector.
• DragSegmentThump - Drag the segment thumb of the connector.
• AllowDrop - Allow to drop a node.
• Bridging - Creates bridge on intersection of two connectors.
• InheritBridging - Creates bridge on intersection of two connectors.
• PointerEvents - Sets the pointer events.
• Tooltip - Displays a tooltip for the connectors.
• InheritToolTip - Displays a tooltip for the connectors.
• Interaction - Features of the connector used for interaction.
• ReadOnly - Enables ReadOnly

Defaults to ‘Default’

cornerRadius

number

Sets the corner radius of the connector

Defaults to 0

dragSize

SymbolSizeModel

Defines the size of a drop symbol

Defaults to undefined

excludeFromLayout

boolean

Defines whether the node should be automatically positioned or not. Applicable, if layout option is enabled.

Defaults to false

fixedUserHandles

ConnectorFixedUserHandleModel[]

Specifies the collection of the fixed user handle

Defaults to undefined

flip

string

Flip the element in Horizontal/Vertical directions

Defaults to None

hitPadding

number

Sets the connector padding value

Defaults to 10

id

string

Represents the unique id of nodes/connectors

Defaults to ”

margin

MarginModel

Defines the space to be left between the node and its immediate parent

Defaults to {}

previewSize

SymbolSizeModel

Defines the size of the symbol preview

Defaults to undefined

segments

[]

Defines the segments

Defaults to []

shape

ConnectorShapeModel | BpmnFlowModel | RelationShipModel | DiagramConnectorShapeModel

Defines the shape of the connector

Defaults to ‘Bpmn’

sourceDecorator

DecoratorModel

Defines the source decorator of the connector

Defaults to new Decorator()

sourceID

string

Sets the source node/connector object of the connector

Defaults to null

sourcePadding

number

Sets the source padding of the connector

Defaults to 0

sourcePoint

PointModel

Sets the beginning point of the connector

Defaults to new Point(0,0)

sourcePortID

string

Sets the unique id of the source port of the connector

Defaults to ”

style

StrokeStyleModel

Defines the appearance of the connection path

Defaults to ”

symbolInfo

SymbolPaletteInfoModel

Defines the symbol info of a connector

Defaults to undefined

targetDecorator

DecoratorModel

Defines the target decorator of the connector

Defaults to new Decorator()

targetID

string

Sets the target node/connector object of the connector

Defaults to null

targetPadding

number

Sets the target padding of the connector

Defaults to 0

targetPoint

PointModel

Sets the end point of the connector

Defaults to new Point(0,0)

targetPortID

string

Sets the unique id of the target port of the connector

Defaults to ”

tooltip

DiagramTooltipModel

defines the tooltip for the connector

Defaults to new DiagramToolTip();

type

string

Defines the type of the connector

• Straight - Sets the segment type as Straight
• Orthogonal - Sets the segment type as Orthogonal
• Bezier - Sets the segment type as Bezier

Defaults to ‘Straight’

visible

boolean

Sets the visibility of the node/connector

Defaults to true

wrapper

Container

Defines the UI of the connector

Defaults to null

zIndex

number

Defines the visual order of the node/connector in DOM

Defaults to -1