Skip to main content

Port layouts

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

Built-in port layouts​

Absolute​

A layout function which lays all ports at a given point (defined as x, y coordinates or percentage of the element dimensions).

namestring

'absolute'

argsobject
xnumber | string

The port's x and y coordinates. They can be provided in the form of:

  • a number (e.g. 5),
  • a percentage string (e.g. '50%'),
  • a calc() expression (e.g. 'calc(w / 2)').
y
anglenumberThe port's rotation angle.
{
name: 'absolute',
args: {
x: '10%',
y: 10,
angle: 45
}
}

Line​

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

namestring

'line'

argsobject
startobject

The line start point. By default, it is the top-left point of the shape's bounding box.

xnumber | string

The line start's x and y coordinates. They can be provided in the form of:

  • a number (e.g. 5),
  • a percentage string (e.g. '50%'),
  • a calc() expression (e.g. 'calc(w / 2)').
y
endobject

The line end point. By default, it is the bottom-right point of the shape's bounding box.

xnumber | string

The line end's x and y coordinates. They can be provided in the same form as line start's coordinates (see above).

y
anglenumberThe port's rotation angle.
{
name: 'line',
args: {
start: { x: 10, y: 10 },
end: { x: 'calc(w)', y: '50%' },
angle: 45
}
}

On sides​

Simple layout functions suitable for rectangular shapes. They spread ports evenly along a single side of the shape.

The 'left' layout is the default port layout function.

namestring

Can be either 'left', 'right', 'top', 'bottom'.

argsobject
xnumber | string

The port's x and y coordinates (overriding the x and y coordinates calculated by the layout function). They can be provided in the form of:

  • a number (e.g. 5),
  • a percentage string (e.g. '50%'),
  • a calc() expression (e.g. 'calc(w / 2)').
y
dxnumberAn extra value added to the port's x and y coordinates calculated by the layout function.
dy
anglenumberThe port's rotation angle.
{
name: 'left',
args: {
x: 10,
y: 10,
angle: 30,
dx: 1,
dy: 1
}
}

Radial​

Layout functions suitable for circular shapes.

  • The 'ellipseSpread' layout spreads ports evenly along an ellipse.
  • The 'ellipse' layout spreads ports from the point defined by startAngle leaving gaps between ports equal to step.
namestring

Can be either 'ellipseSpread' or 'ellipse'.

argsobject
xnumber | string

The port's x and y coordinates (overriding the x and y coordinates calculated by the layout function). They can be provided in the form of:

  • a number (e.g. 5),
  • a percentage string (e.g. '50%'),
  • a calc() expression (e.g. 'calc(w / 2)').
y
dxnumberAn extra value added to the port's x and y coordinates calculated by the layout function.
dy
drnumberAn extra value added to the port's distance from the ellipse center calculated by the layout function.
startAnglenumberThe starting angle of the layout function. The default is 0.
stepnumber

The angular distance between subsequent ports. The default is:

  • 360 / portsCount for the 'ellipseSpread' layout,
  • 20 for the 'ellipse' layout.
compensateRotationbooleanShould each port be rotated to have the same angle as an ellipse tangent at the port's position? The default is false.
{
name: 'ellipseSpread',
args: {
dx: 1,
dy: 1,
dr: 1,
startAngle: 10,
step: 10,
compensateRotation: false
}
}

Stay in the know

Be where thousands of diagramming enthusiasts meet

Star us on GitHub