DiagramConnectorSegment

23 Sep 20252 minutes to read

Defines the behavior of orthogonal segments

Properties

allowDrag boolean

Defines the segment to be drag or not

Defaults to true

direction Direction

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