ConnectorModel

23 Sep 20254 minutes to read

Interface for a class Connector

Properties

addInfo Object

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

allowNodeOverlap boolean

Specifies a value indicating whether to overlap the connector over with the source and target node.
If the LineRouting is enabled in the diagram, then allowNodeOverlap property will not work.

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');

bezierSettings BezierSettingsModel

Sets the bezier settings of editing the segments.

bridgeSpace number

Defines the bridgeSpace of connector

connectionPadding number

Sets the connector padding value

connectorSpacing number

Sets the distance between source node and connector

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

cornerRadius number

Sets the corner radius of the connector

dragSize SymbolSizeModel

Defines the size of a drop symbol

excludeFromLayout boolean

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

fixedUserHandles ConnectorFixedUserHandleModel[]

Specifies the collection of the fixed user handle

flip FlipDirection

Flip the element in Horizontal/Vertical directions

flipMode FlipMode

Allows you to flip only the node or along with port and label.
This functionality is applicable only for nodes.

hitPadding number

Sets the connector padding value

id string

Represents the unique id of nodes/connectors

margin MarginModel

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

maxSegmentThumb number

Sets the maximum segment thumb for the connector

ports PathPortModel[]

Defines the behavior of connection ports

previewSize SymbolSizeModel

Defines the size of the symbol preview

segmentThumbShape SegmentThumbShapes

Defines the shape for the connector segmentThumb
Rhombus - Sets the segmentThumb shape as Rhombus
Square - Sets the segmentThumb shape as Square
Rectangle - Sets the segmentThumb shape as Rectangle
Ellipse - Sets the segmentThumb shape as Ellipse
Arrow - Sets the segmentThumb shape as Arrow
Diamond - Sets the segmentThumb shape as Diamond
OpenArrow - Sets the segmentThumb shape as OpenArrow
Circle - Sets the segmentThumb shape as Circle
Fletch - Sets the segmentThumb shape as Fletch
OpenFetch - Sets the segmentThumb shape as OpenFetch
IndentedArrow - Sets the segmentThumb shape as Indented Arrow
OutdentedArrow - Sets the segmentThumb shape as Outdented Arrow
DoubleArrow - Sets the segmentThumb shape as DoubleArrow

segmentThumbSize number

Specifies the size of the segment thumb for individual connector. When not set, it defaults to matching the underlying path data

segments []

Defines the segments

shape ConnectorShapeModel|BpmnFlowModel|RelationShipModel|DiagramConnectorShapeModel

Defines the shape of the connector

sourceDecorator DecoratorModel

Defines the source decorator of the connector

sourceID string

Sets the source node/connector object of the connector

sourcePadding number

Sets the source padding of the connector

sourcePoint PointModel

Sets the beginning point of the connector

sourcePortID string

Sets the unique id of the source port of the connector

style StrokeStyleModel

Defines the appearance of the connection path

symbolInfo SymbolPaletteInfoModel

Defines the symbol info of a connector

targetDecorator DecoratorModel

Defines the target decorator of the connector

targetID string

Sets the target node/connector object of the connector

targetPadding number

Sets the target padding of the connector

targetPoint PointModel

Sets the end point of the connector

targetPortID string

Sets the unique id of the target port of the connector

tooltip DiagramTooltipModel

defines the tooltip for the connector

type Segments

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

visible boolean

Sets the visibility of the node/connector

wrapper GroupableView

Defines the UI of the connector

zIndex number

Defines the visual order of the node/connector in DOM