React
Demos
Support
Forum
Download
Search results

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

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

excludeFromLayout

boolean

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

Defaults to false

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 {}

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 ”

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

Previous
Next