Port label layouts

layout.PortLabel import provides built-in label layout functions.

Built-in port label layouts

Inside/Outside

Places the label inside or outside of a rectangular shape. Where 'oriented' versions rotate the text towards the element center. The args object is optional.

name	string	Can be either 'inside', 'outside', 'insideOriented', or 'outsideOriented'.
args	object	offset number Offset in direction from the shape's center. Overridden by x and y values, if provided. x number Overrides the x value calculated by the layout function. y number Overrides the y value calculated by the layout function. angle number The port label rotation angle (in degrees in clockwise direction). Overrides the value calculated by the 'insideOriented' and 'outsideOriented' layout functions. attrs object JointJS-style attributes applied on label's DOM element and its children. The same notation as the attrs property on Element. Overridden by port group attrs, if provided.

label: {
    position: {
        name :'outsideOriented',
        args: {
            offset: 10,
            attrs: {}
        }
    }
}

Manual placement

It allows setting label position directly.

name	string	'manual'
args	object	x number Sets the label's x coordinate. y number Sets the label's y coordinate. angle number The port label rotation angle (in degrees in clockwise direction). attrs object JointJS-style attributes applied on label's DOM element and its children. The same notation as the attrs property on Element. Overridden by port group attrs, if provided.

label: {
    position: {
        name: 'manual',
        args: {
            x: 10,
            y: 20,
            angle: 45,
            attrs: {}
        }
    }
}

On Sides

Simple label layout suitable for rectangular shapes. It places the label on arbitrary side of a port. The args object is optional.

name	string	Can be either 'left', 'right', 'top', or 'bottom'.
args	object	x number Overrides the x value calculated by the layout function. y number Overrides the y value calculated by the layout function. angle number The port label rotation angle (in degrees in clockwise direction). attrs object JointJS-style attributes applied on label's DOM element and its children. The same notation as the attrs property on Element. Overridden by port group attrs, if provided.

label: {
    position: {
        name : 'right',
        args: {
            x: 0,
            y: 0,
            angle: 0,
            attrs: {}
        }
    }
}

Radial

Places the label outside of a circular shape. Where the 'oriented' version rotates the text towards the element center. The args object is optional.

name	string	Can be either 'radial', or 'radialOriented'.
args	object	offset number Offset in direction from the shape's center. Overridden by x and y values, if provided. x number Overrides the x value calculated by the layout function. y number Overrides the y value calculated by the layout function. angle number The port label rotation angle (in degrees in clockwise direction). Overrides the value calculated by the 'radialOriented' layout function. attrs number JointJS-style attributes applied on label's DOM element and its children. The same notation as the attrs property on Element. Overridden by port group attrs, if provided.

label: {
    position: {
        name :'radialOriented',
        args: {
            offset: 0,
            attrs: {}
        }
    }
}