Vue Diagram - customShapes.connectionPoints

An array of a shape's connection points.

Type:

Array<Object>

jQuery
JavaScript
$(function() {
    var diagram = $("#diagram").dxDiagram({
        customShapes: [{
            id: 0,
            connectionPoints: [
                { x: 0.5, y: 0 },
                { x: 0.9, y: 0.5 },
                { x: 0.5, y: 1 },
                { x: 0.1, y: 0.5 }
            ]
            // ...

Diagram - Connection Points

side

Specifies the direction of a connection point.

Type:

String

Accepted Values: 'north' | 'east' | 'south' | 'west'

x

Specifies the horizontal offset.

Type:

Number

This option specifies a fractional horizontal offset of a connection point toward the shape width.

  • If the x option is set to 0, the connection point matches the shape's left edge.
  • If the x option is set to 1, the connection point matches the shape's right edge.

y

Specifies the vertical offset.

Type:

Number

This option specifies a fractional vertical offset of a connection point toward the shape height.

  • If the y option is set to 0, the connection point matches the shape's bottom edge.
  • If the y option is set to 1, the connection point matches the shape's top edge.