DiagramConnectorSegment API in JavaScript (ES5) Diagram API control

Defines the behavior of orthogonal segments

Properties

allowDrag

boolean

Defines the segment to be drag or not

Defaults to true

direction

string

Sets the direction of orthogonal segment

• Left - Sets the direction type as Left
• Right - Sets the direction type as Right
• Top - Sets the direction type as Top
• Bottom - Sets the direction type as Bottom

Defaults to null

length

number

Defines the length of orthogonal segment

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

let connectors: ConnectorModel[] = [{
      id: 'link2', sourcePoint: { x: 0, y: 0 }, targetPoint: { x: 40, y: 40 }, type: 'Orthogonal',
      shape: {
          type: 'Bpmn',
          flow: 'Message',
          association: 'directional'
      }, style: {
          strokeDashArray: '2,2'
      },
      segments: [{ type: 'Orthogonal', length: 30, direction: 'Bottom' },
      { type: 'Orthogonal', length: 80, direction: 'Right' }]
  }];
let diagram: Diagram = new Diagram({
...
connectors: connectors
...
});
diagram.appendTo('#diagram');

Defaults to 0

point

PointModel

Sets the end point of the connector segment

Defaults to new Point(0,0)

point1

PointModel

Sets the first control point of the connector

Defaults to {}

point2

PointModel

Sets the second control point of the connector

Defaults to {}

type

string

Defines the type of the segment

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

Defaults to ‘Straight’

vector1

VectorModel

Defines the length and angle between the source point and the first control point of the diagram

Defaults to {}

vector2

VectorModel

Defines the length and angle between the target point and the second control point of the diagram

Defaults to {}