Port layouts

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

JointJS also contains mechanisms to define one's own custom port layouts.

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).

name	string	'absolute'
args	object	x number | 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 angle number The 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.

name	string	'line'
args	object	start object The line start point. By default, it is the top-left point of the shape's bounding box. x number | 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 end object The line end point. By default, it is the bottom-right point of the shape's bounding box. x number | 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 angle number The 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.

name	string	Can be either 'left', 'right', 'top', 'bottom'.
args	object	x number | 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 dx number An extra value added to the port's x and y coordinates calculated by the layout function. dy angle number The 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.

name	string	Can be either 'ellipseSpread' or 'ellipse'.
args	object	x number | 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 dx number An extra value added to the port's x and y coordinates calculated by the layout function. dy dr number An extra value added to the port's distance from the ellipse center calculated by the layout function. startAngle number The starting angle of the layout function. The default is 0. step number The angular distance between subsequent ports. The default is: 360 / portsCount for the 'ellipseSpread' layout, 20 for the 'ellipse' layout. compensateRotation boolean Should 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
    }
}