Port layouts

layout.Port import provides special layout functions for the port layout.

Built-in port layouts

Absolute

It lays a port out at the given position (defined as x, y coordinates or percentage of the element dimensions).

name	string	'absolute'
args	object	x number | string Sets the port's x coordinate. It can be defined as a percentage string e.g. '50%', calc() expression or a number y angle number The port rotation angle.

{
    name: 'absolute',
    args: {
        x: '10%',
        y: 10,
        angle: 45
    }
}

Line

A layout which evenly spreads ports along a line defined by a start and end point.

name	string	'line'
args	object	start { x: number|string, y: number|string } The line starting point. x and y can be a percentage string e.g. '50%', calc() expression, or a number end The line end point

{
    name: 'line',
    args: {
        start: { x: 10, y: 10 },
        end: { x: 'calc(w)', y: '50%' }
    }
}

On sides

A simple layout suitable for rectangular shapes. It evenly spreads ports along a single side.

name	string	Can be either 'left', 'right', 'top', 'bottom'.
args	object	x number Overrides the x / y value calculated by the layout function. It can be defined as a percentage string e.g. '50%', calc() expression or a number y number dx number Added to the x value calculated by the layout function dy number Added to the y value calculated by the layout function angle number The port rotation angle.

{
    name: 'left',
    args: {
        x: 10,
        y: 10,
        angle: 30,
        dx: 1,
        dy: 1
    }
}

Radial

Suitable for circular shapes. The ellipseSpreads evenly spreads ports along an ellipse. The ellipse spreads ports from the point at startAngle leaving gaps between ports equal to step.

name	string	Can be either 'ellipse' or 'ellipseSpread'.
args	object	x number Overrides the x / y value calculated by the layout function. It can be defined as a percentage string e.g. '50%', calc() expression or a number y number dx number Added to the x value calculated by the layout function dy number Added to the y value calculated by the layout function dr number Added to the port delta rotation startAngle number Default value is 0. step number Default 360 / portsCount for the ellipseSpread, 20 for the ellipse compensateRotation boolean set compensateRotation: true when you need to have ports in the same angle as an ellipse tangent at the port position.

{
    name: 'ellipseSpread',
    args: {
        dx: 1,
        dy: 1,
        dr: 1,
        startAngle: 10,
        step: 10,
        compensateRotation: false
    }
}