🎉 JointJS has new documentation! ðŸ¥³

JointJS+ bpmn2

shapes.bpmn2

The BPMN plugin provides you with a set of Business Process Model and Notation 2.0 shapes. They are designed to be easily configurable with the ui.Inspector plugin.

The plugin consists of flow shapes (Activities, Events, Gateways), connection objects (Flows), several icons and artifacts (DataObjects, Groups, Annotation). It also covers models introduced in version 2.0: Conversations and Connections.

Install

Include joint.shapes.bpmn.js file to your HTML:

<script src="joint.shapes.bpmn2.js"></script>
shapes.bpmn2.Activity

A rectangular Activity shape with icons.

source code

Supported attrs properties:

Selector Node Description
root SVGGElement Container for all shape nodes
background SVGRectElement Rectangle background of the shape
border SVGPathElement Border of the shape (see built-in border styles and border types)
icon SVGImageElement Image containing the icon (see list of available icons)
label SVGTextElement Text inside the shape
markers SVGGElement Container for marker icons (see list of available markers)

Usage:

const activity = new joint.shapes.bpmn2.Activity({
    attrs: {
        'background': { fill: '#6764A7' },
        'icon': { iconType: 'receive' },
        'label': { text: 'My Activity' },
        'markers': {
            iconTypes: ['ad-hoc', 'loop'],
            iconsFlow: 'column',
            iconColor: '#ffffff'
        }
    }
});
shapes.bpmn2.Activity.ACTIVITY_MARKER_ICONS

Static property containing several marker icons that can be used with the Activity shape.

none No image.
parallel
sequential
sub-process
compensation
ad-hoc
loop

Add custom icons by defining them in the joint.shapes.bpmn2.Activity.ACTIVITY_MARKER_ICONS static property.

// define myIcon
joint.shapes.bpmn2.Activity.ACTIVITY_MARKER_ICONS['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
activity.attr('markers/iconTypes', ['myIcon']);

Markers handling

The marker value is stored as a data attribute on the marker icon (SVG path) element. An interaction with the marker icon can be caught and handled on the joint.dia.Paper. In the example bellow the model's marker name is displayed on interaction with the icon.

paper.on('element:marker:pointerdown', function(cellView, evt) {
    const markerName = evt.target.dataset.iconType;

    if (markerName) {
        alert(markerName);
    }
});
shapes.bpmn2.Activity.ACTIVITY_TYPE_ICONS

Static property including Activity type icons that can be used within the shapes.

none No image.
receive Receive
send Send
business-rule Business Rule
service Service
script Script
manual Manual
user User

Add custom icons by defining them in the joint.shapes.bpmn2.Activity.ACTIVITY_TYPE_ICONS static property.

// define myIcon
joint.shapes.bpmn2.Activity.ACTIVITY_TYPE_ICONS['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
activity.attr('icon/iconType', 'myIcon');
shapes.bpmn2.Activity.attributes.borderStyle
Set the style of the border.

solid Solid style border (default)
dashed Dashed style border
dotted Dotted style border

Usage:

activity.attr('border/borderStyle', 'dashed');

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        border: {
            borderStyle: 'dashed'
        }
    }
});
shapes.bpmn2.Activity.attributes.borderType
Set the border type.

single Single line border (default)
thick Single line border but thicker
double Double line border

Usage:

activity.attr('border/borderType', 'double');

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        border: {
            borderType: 'double'
        }
    }
});
shapes.bpmn2.Activity.attributes.iconColor
Set the icon or marker icons color.

Usage:

activity.attr('icon/iconColor', '#6764A7');

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        icon: {
            iconType: 'send',
            iconColor: '#6764A7'
        }
    }
});

activity.attr('markers/iconColor', '#6764A7');

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconColor: '#6764A7'
        }
    }
});
shapes.bpmn2.Activity.attributes.iconsFlow
Set the marker icons flow, available values are:

row Marker icons will be displayed in a row (default)
column Marker icons will be displayed in a column

Usage:

activity.attr('markers/iconsFlow', 'column');

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconsFlow: 'column'
        }
    }
});
shapes.bpmn2.Activity.attributes.iconSize
Set the markers icon size.

Usage:

activity.attr('markers/iconSize', 24);

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconSize: 24
        }
    }
});
shapes.bpmn2.Activity.attributes.iconsOrigin
Set the marker icons origin:

left-top Sets the origin to top left
left-bottom Sets the origin to left bottom
right-top Sets the origin to right top
right-bottom Sets the origin to right bottom
top Sets the origin to top middle
bottom Sets the origin to bottom middle (default)
right Sets the origin to right middle
left Sets the origin to left middle
center Sets the origin to center

Usage:

activity.attr('markers/iconsOrigin', 'center');

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconsOrigin: 'center'
        }
    }
});
shapes.bpmn2.Activity.attributes.iconType
Set the main icon.

Usage:

activity.attr('icon/iconType', 'send');

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        icon: {
            iconType: 'send'
        }
    }
});
shapes.bpmn2.Activity.attributes.iconTypes
Set the marker icons. Property has to be an array of strings. Note: an array is required.

Usage:

activity.attr('markers/iconTypes', ['parallel', 'sequential'], { rewrite: true }); // pass 'rewrite' option to replace markers, instead of merging them with existing ones

const task = new joint.shapes.bpmn2.Activity({
    attrs: {
        markers: {
            iconTypes: ['parallel', 'sequential']
        }
    }
});
shapes.bpmn2.Annotation

A rectangular shape with label.

source code



Supported attrs properties:



Selector Node Description
root SVGGElement Container for all shape nodes
body SVGRectElement Rectangle body of the shape
border SVGPathElement Border of the shape (see border configuration)
label SVGTextElement Annotation text

Usage:

const group = new joint.shapes.bpmn2.Annotation({
    attrs: {
        'body': {
            stroke: '#fe854f'
        },
        'label': {
            text: 'Group'
        }
    }
});
shapes.bpmn2.Annotation.attributes.annotationD
Change the annotation border length. annotationD is an object with the following properties:

Property Type Description
size Number Thickness of Annotation border
side String ('left' | 'top' | 'right' | 'bottom') Side on which to render Annotation border

Usage:

annotation.attr('border/annotationD', { size: 30, side: 'bottom' });

const task = new joint.shapes.bpmn2.Annotation({
    attrs: {
        border: {
            annotationD: {
                size: 30,
                side: 'bottom'
            }
        }
    }
});
shapes.bpmn2.Conversation

A polygon shape with label and markers.

source code



Supported attrs properties:



Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPolygonElement Polygon body of the shape
markers SVGGElement Container for marker icons (see list of available markers)
label SVGTextElement Shape text

Usage:

const conversation = new joint.shapes.bpmn2.Conversation({
    attrs: {
        'body': {
            fill: '#ffc2a7',
            stroke: '#fe854f'
        },
        'label': {
            text: 'My Conversation'
        }
    }
});
shapes.bpmn2.Conversation.CONVERSATION_MARKER_ICONS

The joint.shapes.bpmn2.Conversation.CONVERSATION_MARKER_ICONS static property includes icons that can be used within the shapes.

none No image.
parallel
sequential
sub-process
compensation
ad-hoc
loop

Add custom icons by defining them in the joint.shapes.bpmn2.Conversation.CONVERSATION_MARKER_ICONS static property.

joint.shapes.bpmn2.Conversation.CONVERSATION_MARKER_ICONS['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
conversation.attr('markers/iconTypes', ['myIcon']);

Markers handling

The marker value is stored as a data attribute on the marker icon (SVG path) element. An interaction with the marker icon can be caught and handled on the joint.dia.Paper. In the example bellow the model's marker name is displayed on interaction with the icon.

paper.on('element:marker:pointerdown', function(cellView, evt) {

    const markerName = evt.target.dataset.iconType;

    if (markerName) {
        alert(markerName);
    }
});
shapes.bpmn2.Conversation.attributes.iconColor
Set the marker icons color.

Usage:

conversation.attr('markers/iconColor', '#6764A7');

const task = new joint.shapes.bpmn2.Conversation({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconColor: '#6764A7'
        }
    }
});
shapes.bpmn2.Conversation.attributes.iconsFlow
Set the marker icons flow, available values are:

row Marker icons will be displayed in a row (default)
column Marker icons will be displayed in a column

Usage:

conversation.attr('markers/iconsFlow', 'column');

const task = new joint.shapes.bpmn2.Conversation({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconsFlow: 'column'
        }
    }
});
shapes.bpmn2.Conversation.attributes.iconSize
Set the marker icons size.

Usage:

conversation.attr('markers/iconSize', 24);

const task = new joint.shapes.bpmn2.Conversation({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconSize: 24
        }
    }
});
shapes.bpmn2.Conversation.attributes.iconsOrigin
Set the marker icons origin, available values are:

left-top Sets the origin to top left
left-bottom Sets the origin to left bottom
right-top Sets the origin to right top
right-bottom Sets the origin to right bottom
top Sets the origin to top middle
bottom Sets the origin to bottom middle (default)
right Sets the origin to right middle
left Sets the origin to left middle
center Sets the origin to center

Usage:

conversation.attr('markers/iconsOrigin', 'center');

const task = new joint.shapes.bpmn2.Conversation({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop'],
            iconsOrigin: 'center'
        }
    }
});
shapes.bpmn2.Conversation.attributes.iconTypes
Set the marker icons. Property has to be an array of strings. Note: an array is required.

Usage:

conversation.attr('markers/iconTypes', ['ad-hoc', 'loop'], { rewrite: true }); // pass 'rewrite' option to replace markers, instead of merging them with existing ones

const task = new joint.shapes.bpmn2.Conversation({
    attrs: {
        markers: {
            iconTypes: ['ad-hoc', 'loop']
        }
    }
});
shapes.bpmn2.DataAssocation

A dashed link.

source code



Supported attrs properties:



Selector Node Description
line SVGPathElement Visible connection of the link
wrapper SVGPathElement An invisible, interactive wrapper around the connection used to make clicking on the link easier.

Usage:

const dataAssociation1 = new joint.shapes.bpmn2.DataAssociation({
    source: { x: 250, y: 260 },
    target: { x: 700, y: 260 },
    attrs: {
        line: {
            stroke: '#30d0c6',
        }
    }
});
shapes.bpmn2.DataObject

A polygon shape with label.

source code



Supported attrs properties:



Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of the shape (see body configuration options)
label SVGTextElement Shape text
dataTypeIcon SVGImageElement Image containing the icon (see list of available icons)
collectionIcon SVGImageElement Image containing the collection icon (see list of available icons)

Usage:

const dataObject = new joint.shapes.bpmn2.DataObject({
    attrs: {
        'body': {
            fill: '#ffc2a7',
            stroke: '#fe854f'
        },
        'label': {
            text: 'Data Store'
        }
    }
});
shapes.bpmn2.DataObject.DATA_OBJECT_COLLECTION_ICONS

The joint.shapes.bpmn2.DataObject.DATA_OBJECT_COLLECTION_ICONS static property includes one icon that can be used within the shapes.

false No image.
true

Add custom icons by defining them in the joint.shapes.bpmn2.DataObject.DATA_OBJECT_COLLECTION_ICONS static property.

joint.shapes.bpmn2.DataObject.DATA_OBJECT_COLLECTION_ICONS['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
dataObject.attr('collectionIcon/iconType', 'myIcon');
shapes.bpmn2.DataObject.DATA_OBJECT_TYPE_ICONS

The joint.shapes.bpmn2.DataObject.DATA_OBJECT_TYPE_ICONS static property includes icons that can be used within the shapes.

none No image.
input
output

Add custom icons by defining them in the joint.shapes.bpmn2.DataObject.DATA_OBJECT_TYPE_ICONS static property.

joint.shapes.bpmn2.DataObject.DATA_OBJECT_TYPE_ICONS['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
dataObject.attr('dataTypeIcon/iconType', 'myIcon');
shapes.bpmn2.DataObject.attributes.collection
Set the collection icon.

Usage:

dataObject.attr('collectionIcon/collection', 'true');

const task = new joint.shapes.bpmn2.DataObject({
    attrs: {
        collectionIcon: {
            collection: 'true'
        }
    }
});
shapes.bpmn2.DataObject.attributes.iconColor
Set the icon or collection icon color.

Usage:

dataObject.attr('collectionIcon/iconColor', '#6764A7');

const task = new joint.shapes.bpmn2.DataObject({
    attrs: {
        collectionIcon: {
            collection: 'true',
            iconColor: '#6764A7'
        }
    }
});

dataObject.attr('dataTypeIcon/iconColor', '#6764A7');

const task = new joint.shapes.bpmn2.DataObject({
    attrs: {
        dataTypeIcon: {
            iconType: 'input',
            iconColor: '#6764A7'
        }
    }
});
shapes.bpmn2.DataObject.attributes.iconType
Set the main icon.

Usage:

dataObject.attr('dataTypeIcon/iconType', 'input');

const task = new joint.shapes.bpmn2.DataObject({
    attrs: {
        dataTypeIcon: {
            iconType: 'input'
        }
    }
});
shapes.bpmn2.DataObject.attributes.objectD
Changes the fold of the shape.

Usage:

dataObject.attr('body/objectD', 30);

const task = new joint.shapes.bpmn2.DataObject({
    attrs: {
        body: {
            objectD: 30
        }
    }
});
shapes.bpmn2.DataStore

A polygon shape with label.

source code



Supported attrs properties:



Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPathElement Path body of the shape
top SVGEllipseElement Top ellipse element
label SVGTextElement Shape text

Usage:

const dataStore = new joint.shapes.bpmn2.DataStore({
    attrs: {
        'body': {
            fill: '#ffc2a7',
            stroke: '#fe854f'
        },
        'top': {
            fill: '#ffc2a7',
            stroke: '#fe854f'
        },
        'label': {
            text: 'Data Store'
        }
    }
});
shapes.bpmn2.DataStore.prototype.topRy
    dataStore.topRy()

Return the vertical radius of the exposed area of the DataStore base (the value of the body/lateralArea attribute; 10 by default).

dataStore.topRy(t, [opt])

Set the dataStore vertical radius of the exposed area of the cylinder base.

If the provided value is a percentage, it is relative to the refBBox.height of the shape. In practice, only values between '0%' and '50%' make sense. If the provided value is a number, it determines the vertical radius directly. Only values between 0 and half of refBBox.height make sense.

The function automatically sets the value of several attributes: body/lateralArea; and top/ry, top/cy, top/refRy and top/refCy. If these arguments need to be modified further, make sure to assign them only after calling dataStore.topRy.

Example usage:

const dataStore = new bpmn2.DataStore();
dataStore.resize(100, 200);
dataStore.position(525, 75);
dataStore.attr('root/title', 'joint.shapes.bpmn2.DataStore');
dataStore.attr('body/fill', 'lightgray');
dataStore.attr('top/fill', 'gray');
dataStore.attr('label/text', 'DataStore');
dataStore.topRy('10%');
dataStore.addTo(graph);
shapes.bpmn2.Event

A circular shape with icon and label.

source code



Supported attrs properties:



Selector Node Description
root SVGGElement Container for all shape nodes
background SVGEllipseElement Ellipse background of the shape
border SVGPathElement Border of the shape (see built-in border types)
icon SVGImageElement Image containing the icon (see list of available icons)
label SVGTextElement Shape text

Usage:

const group = new joint.shapes.bpmn2.Event({
    attrs: {
        'body': {
            stroke: '#fe854f'
        },
        'label': {
            text: 'Group'
        }
    }
});
shapes.bpmn2.Event.EVENT_ICONS

The joint.shapes.bpmn2.Event.EVENT_ICONS static property includes several icons that can be used within the shapes.

none No image.
message1
message2
timer1
conditional1
link1
link2
signal1
signal2
error1
error2
escalation1
escalation2
termination1
termination2
compensation1
compensation2
cancel1
cancel2
multiple1
multiple2
parallel1
parallel2

Add custom icons by defining them in the joint.shapes.bpmn2.Event.EVENT_ICONS static property.

joint.shapes.bpmn2.Event.EVENT_ICONS['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
event.attr('icon/iconType', 'myIcon');
shapes.bpmn2.Event.attributes.borderStyle
Set the style of the border.

solid Solid style border (default)
dashed Dashed style border
dotted Dotted style border

Usage:

event.attr('border/borderStyle', 'dashed');

const task = new joint.shapes.bpmn2.Event({
    attrs: {
        border: {
            borderStyle: 'dashed'
        }
    }
});
shapes.bpmn2.Event.attributes.borderType
Set the border type.

single Single line border (default)
thick Single line border but thicker
double Double line border

Usage:

event.attr('border/borderType', 'double');

const task = new joint.shapes.bpmn2.Event({
    attrs: {
        border: {
            borderType: 'double'
        }
    }
});
shapes.bpmn2.Event.attributes.iconColor
Set the icon color.

Usage:

event.attr('icon/iconColor', '#6764A7');

const task = new joint.shapes.bpmn2.Event({
    attrs: {
        icon: {
            iconType: 'message1',
            iconColor: '#6764A7'
        }
    }
});
shapes.bpmn2.Event.attributes.iconType
Set the icon.

Usage:

event.attr('icon/iconType', 'message1');

const task = new joint.shapes.bpmn2.Event({
    attrs: {
        icon: {
            iconType: 'message1'
        }
    }
});
shapes.bpmn2.Flow

A link with configurable flow.

source code



Supported attrs properties:



Selector Node Description
line SVGPathElement Visible connection of the link (see configuration options)
wrapper SVGPathElement An invisible, interactive wrapper around the connection used to make clicking on the link easier.

Usage:

const flow = new joint.shapes.bpmn2.Flow({
    source: { x: 250, y: 340 },
    target: { x: 700, y: 340 },
    attrs: {
        line: {
            flowType: 'message'
        }
    }
});
shapes.bpmn2.Flow.attributes.flowType

The joint.shapes.bpmn2.Flow link comes with 4 flow types:

sequence A simple link with no additional elements
default Adds crossed line at the source of the link
conditional Adds a rhombus at the source of the link
message Dashed link with circle at the source of the link

Usage:

const flow = new joint.shapes.bpmn2.Flow({
    source: { x: 100, y: 200 },
    target: { x: 500, y: 200 },
    attrs: {
        line: {
            flowType: 'message'
        }
    }
});
shapes.bpmn2.Flow.attributes.markerFill
Flow link accepts additional attribute for styling the fill of the markers.

Note: markerFill applies only to message and conditional flowTypes.

Usage:

flow.attr('line/markerFill', '#fe854f');

const flow = new joint.shapes.bpmn2.Flow({
    source: { x: 100, y: 200 },
    target: { x: 500, y: 200 },
    attrs: {
        line: {
            markerFill: '#fe854f',
            flowType: 'message'
        }
    }
});
shapes.bpmn2.Gateway

A polygon shape with icon.

source code



Supported attrs properties:



Selector Node Description
root SVGGElement Container for all shape nodes
body SVGPolygonElement Polygon body of the shape
label SVGTextElement Shape text
icon SVGImageElement Image containing the icon (see list of available icons)

Usage:

const gateway = new joint.shapes.bpmn2.Gateway({
    attrs: {
        'body': { fill: 'gold', stroke: 'black' },
        'icon': { iconType: 'exclusive' },
        'label': { text: 'My Activity' }
    }
});
shapes.bpmn2.Gateway.GATEWAY_ICONS

The joint.shapes.bpmn2.Gateway.GATEWAY_ICONS static property includes several icons that can be used within the shapes.

exclusive_blank No image.
exclusive
inclusive
parallel
event
exclusive_event
parallel_event
complex

Add custom icons by defining them in the joint.shapes.bpmn2.Gateway.GATEWAY_ICONS static property.

joint.shapes.bpmn2.Gateway.GATEWAY_ICONS['myIcon'] = 'pathToImage'; // or data URI

// later on in the code
gateway.attr('icon/iconType', 'myIcon');
shapes.bpmn2.Gateway.attributes.iconColor
Set the icon color.

Usage:

gateway.attr('icon/iconColor', '#6764A7');

const task = new joint.shapes.bpmn2.Gateway({
    attrs: {
        icon: {
            iconType: 'exclusive',
            iconColor: '#6764A7'
        }
    }
});
shapes.bpmn2.Gateway.attributes.iconType
Set the icon.

Usage:

gateway.attr('icon/iconType', 'exclusive');

const task = new joint.shapes.bpmn2.Gateway({
    attrs: {
        icon: {
            iconType: 'exclusive'
        }
    }
});
shapes.bpmn2.Group

A rectangle shape with label.

source code



Supported attrs properties:



Selector Node Description
root SVGGElement Container for all shape nodes
body SVGRectElement Rectangle body of the shape
wrapper SVGRectElement Rectangle wrapper of the shape
label SVGTextElement Shape text

Usage:

const group = new joint.shapes.bpmn2.Group({
    attrs: {
        'body': {
            stroke: '#fe854f'
        },
        'label': {
            text: 'Group'
        }
    }
});
shapes.bpmn2.HeaderedPool

A rectangle shape with nested lanes and an additional header. Inherits from joint.shapes.bpmn2.Pool shape and adds a header rectangle and headerLabel text label.

source code



Additional attrs properties

Selector Node Description
header SVGRectElement Rectangular header of the shape, positioned to the left of the shape's body
headerLabel SVGTextElement Text label inside the header

To adjust the appearance of a HeaderedPool element, use the Element.attr function:

const headeredPool = new joint.shapes.bpmn2.HeaderedPool();
headeredPool.resize(700, 400);
headeredPool.position(25, 200);
headeredPool.attr('root/magnet', false);
headeredPool.attr('laneHeaders/fill', '#3cb371');
headeredPool.attr('milestoneHeaders/fill', '#00fa9a');
headeredPool.attr('milestoneHeaders/stroke', '#333333');
headeredPool.attr('milestoneLines/stroke', '#3cb371');
headeredPool.attr('milestoneLines/strokeWidth', 2);
headeredPool.attr('milestoneLabels/fill', '#333333');
headeredPool.attr('milestoneLabels/fontStyle', 'italic');
headeredPool.attr('header/fill', '#00fa9a');
headeredPool.attr('headerLabel/text', 'Headered Pool');
headeredPool.attr('headerLabel/fill', '#ffffff');
headeredPool.addTo(graph);
shapes.bpmn2.HeaderedPool.prototype

All methods are inherited from the joint.shapes.bpmn2.Pool shape.

shapes.bpmn2.HeaderedPool.attributes

All configuration properties are inherited from the joint.shapes.bpmn2.Pool shape. They are set during shape definition with the Cell.define function, or anytime later with the Cell.set function:

headeredPool.set('padding', 20);
headeredPool.set('padding', { top: 10, right: 20, bottom: 5, left: 10 });
headeredPool.set('lanes', [
    {
        label: 'fixed lane',
        size: 80,
        headerSize: 40
    },
    {
        label: 'lane with sublanes',
        sublanes: [
            {
                // omit the label property or make it undefined to hide the header
            },
            {
                label: 'sublane 1'
            }
        ]
    }
]);
headeredPool.set('milestones', [
    {
        label: 'milestone'
    },
    {
        label: 'milestone with fixed width',
        size: 350
    }
]);
shapes.bpmn2.Pool

A rectangle shape with nested lanes.

source code



Supported attrs properties:



Selector Node Description
root SVGGElement Container for all shape nodes
body SVGRectElement Rectangle body of the shape
laneGroups SVGGElement Selector for all lane groups
laneHeaders SVGRectElement Selector for all lane rect headers
laneLabels SVGTextElement Selector for all lane text labels
lanes SVGRectElement Selector for all lane rect bodies
milestoneGroups SVGGElement Selector for all milestone groups
milestoneHeaders SVGRectElement Selector for all milestone rect headers
milestoneLabels SVGTextElement Selector for all milestone text labels
milestoneLines SVGLineElement Selector for all milestone lines

Usage:

const pool = new joint.shapes.bpmn2.Pool({
    position: { x: 100, y: 100 },
    attrs: {
        laneHeaders: {
            fill: '#3cb371'
        },
        milestoneHeaders: {
            fill: '#00fa9a',
            stroke: '#333333'
        },
        milestoneLines: {
            stroke: '#3cb371',
            strokeWidth: 1
        },
        milestoneLabels: {
            fill: '#333333',
            fontStyle: 'italic'
        }
    },
    milestonesSize: 30,
    milestones: [
        {
            label: 'milestone',
        },
        {
            label: 'fixed milestone',
            size: 200
        },
        {
            label: 'milestone',
        }
    ],
    headerSize: 30,
    lanes: [
        {
            label: 'lane',
        },
        {
            label: 'fixed lane',
            size: 100
        },
        {
            label: 'lane'
        }
    ]
});

To adjust the appearance of a Pool element, use the Element.attr function:

const pool = new joint.shapes.bpmn2.Pool();
pool.resize(700, 400);
pool.position(25, 200);
pool.attr('root/magnet', false);
pool.attr('laneHeaders/fill', '#3cb371');
pool.attr('milestoneHeaders/fill', '#00fa9a');
pool.attr('milestoneHeaders/stroke', '#333333');
pool.attr('milestoneLines/stroke', '#3cb371');
pool.attr('milestoneLines/strokeWidth', 2);
pool.attr('milestoneLabels/fill', '#333333');
pool.attr('milestoneLabels/fontStyle', 'italic');
pool.addTo(graph);
shapes.bpmn2.Pool.prototype

The Pool shape exposes functions that enable working with lanes and milestones:

shapes.bpmn2.Pool.prototype.getLaneBBox
pool.getLaneBBox(laneGroupId)

Get the bounding box of a lane group (header + lane) with laneGroupId id.

shapes.bpmn2.Pool.prototype.getLanePath
pool.getLanePath(laneGroupId)

Returns the path to the lane in attributes with laneGroupId id.

Example:

const path = pool.getLanePath('customId') + '/label';
pool.prop(path, 'new label', { rewrite: true });
shapes.bpmn2.Pool.prototype.getLanesFromPoint
pool.getLanesFromPoint(point)

Find lanes from a given point, where point is an object with x and y coordinates in the paper local coordinate system. Returns a sorted array of lane ids (from the most nested lane to the top parent) which bounding box contains the point.

Note: if lane has a custom id assigned, it will be returned instead.

shapes.bpmn2.Pool.prototype.getMilestoneBBox
pool.getMilestoneBBox(milestoneGroupId)

Get the bounding box of a milestone group (including its header) by milestoneGroupId id.

shapes.bpmn2.Pool.prototype.getMilestoneFromPoint
pool.getMilestoneFromPoint(point)

Find a milestone from a given point, where point is an object with x and y coordinates in the paper local coordinate system. Returns a string id of the milestone which bounding box contains point.

Note: if milestone has a custom id assigned, it will be returned instead.

shapes.bpmn2.Pool.prototype.getMinimalSize
pool.getMinimalSize()

Return the width and height of the minimal bounding box necessary to encompass all of the shape's content.

shapes.bpmn2.Pool.attributes

Configuration properties

Property Type Description
lanes object[] Lanes in the Pool. Each lane is contained in a group along with the header and has a unique id. Each lane may have optional properties:

Property Type Description
label string Text content of the lane's label (when left undefined the header with label will not be shown)
id string Custom id of the lane group
size number Size of the lane, when defined it will fix the lane height to the specified value
headerSize number Size of the lane header
sublanes object[] Nested lanes
milestones object[] Milestones in the Pool. Each milestone may have optional properties:

Property Type Description
label string Text content of the milestone's label
id string Custom id of the milestone group
size number Size of the milestone, when defined it will fix the milestone width to the specified value
milestonesSize number Height of all milestones
headerSize number Default size of all lane headers
padding object Padding within the Pool's body element, useful when creating another shapes based on Pool

Configuration properties are set during shape definition with the Cell.define function, or anytime later with the Cell.set function:

pool.set('padding', 20);
pool.set('padding', { top: 10, right: 20, bottom: 5, left: 10 });
pool.set('lanes', [
    {
        label: 'fixed lane',
        size: 80,
        headerSize: 40
    },
    {
        label: 'lane with sublanes',
        sublanes: [
            {
                id: 'customLane'
                // omit the label property or make it undefined to hide the header
            },
            {
                label: 'sublane 1'
            }
        ]
    }
]);
pool.set('milestones', [
    {
        label: 'milestone'
    },
    {
        label: 'milestone with fixed width',
        id: 'customMilestone',
        size: 350,
    }
]);

// change the attrs using custom id
pool.attr('lane_customLane/fill', '#3cb371');
pool.attr('milestoneLabel_customMilestone/fontSize', '18');

Id of lanes and milestones

Each lane and milestone group has a unique id that can be used to target those groups or individual elements within groups. Passing string to id property of a lane or milestone will create an alias to that given group. Note: custom id must be unique and the same id cannot be assigned for more than 1 milestone or 1 lane group.

Lane group id starts with a 'lanes' prefix and a combination of numbers that is based on position within an array and nest level (sublanes). Each lane group contains the following elements:
  • lane rectangle (prefix lane)
  • header rectangle (prefix header, note that header won't be added if label is undefined)
  • label text (prefix label, note that label won't be added if it is undefined)
For example let's consider this lanes structure:
lanes: [
    {
        label: 'lane' // group id: 'lanes_0', lane id: 'lane_0', header id: 'header_0', label id: 'label_0'
    },
    {
        label: 'lane with sublanes', // group id: 'lanes_1', lane id: 'lane_1', header id: 'header_1', label id: 'label_1'
        sublanes: [
            {
                label: 'sublane 1' // group id: 'lanes_1_0', lane id: 'lane_1_0', header id: 'header_1_0', label id: 'label_1_0'
            },
            {
                label: 'sublane 2' // group id: 'lanes_1_1', lane id: 'lane_1_1', header id: 'header_1_1', label id: 'label_1_1'
            }
        ]
    },
    // example with custom id
    {
        id: 'customId',
        label: 'lane with custom id', // group id: 'lanes_customId', lane id: 'lane_customId', header id: 'header_customId', label id: 'label_customId'
        sublanes: [
            {
                label: 'sublane 1' // group id: 'lanes_2_0', lane id: 'lane_2_0', header id: 'header_2_0', label id: 'label_2_0'
            },
            {
                id: 'sublaneId',
                label: 'sublane 2' // group id: 'lanes_sublaneId', lane id: 'lane_sublaneId', header id: 'header_sublaneId', label id: 'label_sublaneId'
            }
        ]
    }
]

Similarly, each milestone group id starts with a 'milestone' prefix. Milestone group contains the following elements:
  • header rectangle (prefix milestoneHeader)
  • label text (prefix milestoneLabel)
  • milestone line (prefix milestoneLine)
Example milestones structure:
milestones: [
    {
        label: 'milestone 1' // group id: 'milestone_0', header id: 'milestoneHeader_0', label id: 'milestoneLabel_0', line id: 'milestoneLine_0'
    },
    {
        label: 'milestone 2' // group id: 'milestone_1', header id: 'milestoneHeader_1', label id: 'milestoneLabel_1', line id: 'milestoneLine_1'
    },
    // example with custom id
    {
        id: 'customId',
        label: 'milestone 3' // group id: 'milestone_customId', header id: 'milestoneHeader_customId', label id: 'milestoneLabel_customId', line id: 'milestoneLine_customId'
    }
]
shapes.bpmn2.Pool.attributes.labelAlignment

Aligns the label to the specified side, relatively to the header:

left-top Sets the alignment to top left
left-bottom Sets the alignment to left bottom
right-top Sets the alignment to right top
right-bottom Sets the alignment to right bottom
top Sets the alignment to top middle
bottom Sets the alignment to bottom middle
right Sets the alignment to right middle (default for milestone labels)
left Sets the alignment to left middle
center Sets the alignment to center (default for lane labels)

Usage:

const pool = new joint.shapes.bpmn2.Pool({
    lanes: [
        {
            label: 'pool lane',
            id: 'firstLane'
        },
        {
            label: 'pool lane'
        }
    ],
    milestones: [
        {
            label: 'pool milestone',
            id: 'firstMilestone'
        },
        {
            label: 'pool milestone'
        }
    ],
    attrs: {
        laneLabels: {
            labelAlignment: 'left' // aligns all lane labels to the left side
        },
        milestoneLabels: {
            labelAlignment: 'center' // aligns all milestone labels in the center
        },

        label_firstLane: {
            labelAlignment: 'right' // align lane label with custom id
        },
        milestoneLabel_firstMilestone: {
            labelAlignment: 'right' // align milestone label with custom id
        }
    }
});

// align all labels
pool.attr('laneLabels/labelAlignment', 'left');
pool.attr('milestoneLabels/labelAlignment', 'center');

// align individual labels with custom id
pool.attr('label_firstLane/labelAlignment', 'right');
pool.attr('milestoneLabel_firstMilestone/labelAlignment', 'right');
shapes.bpmn2.Pool.attributes.labelMargin

Applies margin around the label. The util.normalizeSides is used to understand the provided value. A single number is applied as padding to all sides of the elements. An object may be provided to specify values for left, top, right, bottom, horizontal and/or vertical sides.

Usage:

const pool = new joint.shapes.bpmn2.Pool({
    headerSize: 32,
    milestonesSize: 32,
    lanes: [
        {
            label: 'pool lane',
            id: 'firstLane'
        },
        {
            label: 'pool lane'
        }
    ],
    milestones: [
        {
            label: 'pool milestone',
            id: 'firstMilestone'
        },
        {
            label: 'pool milestone'
        }
    ],
    attrs: {
        laneLabels: {
            labelMargin: 4 // adds 4px margin on all sides to all lane labels
        },
        milestoneLabels: {
            labelMargin: { vertical: 10 } // adds 10px top and 10px bottom margin to all milestone labels
        },

        // control margin of individual labels with custom id
        label_firstLane: {
            labelMargin: 0
        },
        milestoneLabel_firstMilestone: {
            labelMargin: { horizontal: 8 }
        }
    }
});

// add margin to all labels
pool.attr('laneLabels/labelMargin', 4);
pool.attr('milestoneLabels/labelMargin', { vertical: 6 });

// control the margin of individual labels with custom id
pool.attr('label_firstLane/labelMargin', 0);
pool.attr('milestoneLabel_firstMilestone/labelMargin', { vertical: 4, horizontal: 20 });