BPMN shapes

The shapes.bpmn2 namespace provides you with a set of Business Process Model and Notation 2.0 shapes.

In this section we will provide markup selectors for all bpmn shapes, so you can style them accordingly.

Elements

Activity

A rectangular Activity shape with icons.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container of all 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)

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

Static properties

ACTIVITY_MARKER_ICONS

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

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

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

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

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

The marker is triggering 'element:marker:*' paper events.

ACTIVITY_TYPE_ICONS

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

Name	Image
none	No image
receive
send
business-rule
service
script
manual
user

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

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

// later on in the code
activity.attr('icon/iconType', 'myIcon');

Special presentation attributes

borderRadius

Set the border radius of the shape.

activity.attr('border/borderRadius', 20);

borderStyle

Set the style of the border.

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

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

borderType

Set the border type.

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

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

iconColor

Set the icon or marker icons color.

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

iconsFlow

Set the marker icons flow, available values are:

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

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

iconSize

Set the markers icon size.

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

iconsOrigin

Set the marker icons origin:

Name	Description
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

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

iconType

Set the main icon. See icon types.

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

iconTypes

Set the marker icons. See icon types. Attribute has to be an array of strings. Note: an array is required.

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

Annotation

An annotation shape.

Supported attrs properties:

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

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

Special presentation 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	'left' | 'top' | 'right' | 'bottom'	side on which to render annotation border

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

Choreography

A choreography shape.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container for all shape nodes
body	SVGPathElement	Rectangular body of the shape
content	HTMLDivElement	Text content inside of the initiating participant.
participants	SVGGElement	The wrapping groups around participants
participantsBodies	SVGRectElement	Participant rectangular bodies
participantsLabels	SVGTextElement	Participant labels.
initiatingParticipant	SVGGElement	The wrapping group around the initiating participant.
initiatingParticipantBody	SVGRectElement	Initiating participant body.
initiatingParticipantLabel	SVGTextElement	Initiating participant label.
subProcess	SVGPathElement	The sub-process icon.

const choreography = new shapes.bpmn2.Choreography({
    attrs: {
        body: {
            fill: '#ffc2a7',
            stroke: '#fe854f'
        },
        content: {
            html: 'Choreography'
        },
        participantsBodies: {
            fill: 'lightblue'
        }
    },
    participants: ['Participant 1', 'Participant 2'],
    initiatingParticipant: 1
});

Model attributes

participants

An array of participant names.

const participants: string[] = choreography.get('participants');
choreography.set('participants', ['Participant 1', 'Participant 2']);

participantHeight

The height of a single participant.

const participantHeight: number = choreography.get('participantHeight');
choreography.set('participantHeight', 20);

initiatingParticipant

An index or the name of the initiating participant.

const initiatingParticipant: string | number = choreography.get('initiatingParticipant');
choreography.set('initiatingParticipant', 'Participant 2');

CompositePool

An abstract rectangle shape which can accomodate embedded Swimlanes and Phases.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container for all shape nodes
body	SVGRectElement	Rectangle body of the shape

Methods

addPhase()

addPhase(phase: P, orthogonalCoord?: number): void;

Adds the provided phase so that it starts at the specified orthogonalCoord coordinate. If no orthogonalCoord is provided, the Phase is added at the end of the CompositePool as the last Phase.

The method throws an exception when it is not overridden:

Abstract method `compositePool.addPhase()`. Needs to be implemented by a child class.

addSwimlane()

addSwimlane(swimlane: S, index?: number): void;

Adds the provided swimlane at the specified index in the array of Swimlanes. If no index is provided, the Swimlane is added at the end of the CompositePool as the last Swimlane.

The method throws an exception when it is not overridden:

Abstract method `compositePool.addSwimlane()`. Needs to be implemented by a child class.

adjustToContainElements()

adjustToContainElements(swimlane: S): void;

Adjust the provided swimlane to resolve any border overlaps of its embedded elements:

• If any embedded element lies partially or completely outside the Swimlane's bounding box, expand the Swimlane to contain it (while respecting the contentMargin model attribute). The other Swimlanes shift to accomodate the expanded Swimlane, if necessary.
  note

  The relative position of all other elements within their respective Swimlanes is preserved during this operation (i.e. when a Swimlane is shifted, all contained elements are shifted with it.)

• If any embedded element overlaps a Phase boundary (the line separating two Phases), shift the Phase boundary so that the element is wholly contained by the Phase that originally contained the element's center (while respecting the contentMargin model attribute).
  note

  The relative position of all other elements within their respective Phases is preserved during this operation (i.e. when a Phase boundary is shifted, all contained elements are shifted with it).

The method throws an exception when it is not overridden:

Abstract method `compositePool.adjustToContainElements()`. Needs to be implemented by a child class.

changePhaseSize()

changePhaseSize(phase: P, direction: dia.OrthogonalDirection, dim: number | null, options?: dia.ModelSetOptions): void;

Resizes the specified phase in the provided direction so that it ends up with the provided dim size in the corresponding dimension. This operation may expand or shrink the Phase, depending on its current size. The CompositePool and Swimlanes adjust accordingly in order to accomodate the new size of the Phase.

note

For example, providing 100 as the dim value means the following:

• When resizing in the left direction: The left border of the Phase is shifted so that the Phase ends up with width of 100, keeping the right border where it was.
• When resizing in the top direction: The top border of the Phase is shifted so that the Phase ends up with height of 100, keeping the bottom border where it was.
• When resizing in the right direction: The right border of the Phase is shifted so that the Phase ends up with width of 100, keeping the left border where it was.
• When resizing in the bottom direction: The bottom border of the Phase is shifted so that the Phase ends up wiht a height of 100, keeping the top border where it was.

Providing null as the dim value is a special case. It uses the current size of the Phase as the dim value and adjusts the CompositePool and Swimlanes accordingly.

changeSize()

changeSize(direction: dia.OrthogonalDirection, dim: number | null, options?: dia.ModelSetOptions): void;

Resizes the CompositePool in the provided direction so that it ends up with the provided dim size in the corresponding dimension. This operation may expand or shrink the CompositePool, depending on its current size. The Swimlanes and Phases of the CompositePool adjust accordingly in order to accomodate the new size of the CompositePool.

note

For example, providing 100 as the dim value means the following:

• When resizing in the left direction: The left border of the CompositePool is shifted so that the CompositePool ends up with width of 100, keeping the right border where it was.
• When resizing in the top direction: The top border of the CompositePool is shifted so that the CompositePool ends up with height of 100, keeping the bottom border where it was.
• When resizing in the right direction: The right border of the CompositePool is shifted so that the CompositePool ends up with width of 100, keeping the left border where it was.
• When resizing in the bottom direction: The bottom border of the CompositePool is shifted so that the CompositePool ends up with a height of 100, keeping the top border where it was.

Providing null as the dim value is a special case. It uses the current size of the CompositePool as the dim value and adjusts contained Swimlanes and Phases accordingly.

changeSwimlaneSize()

changeSwimlaneSize(swimlane: S, direction: dia.OrthogonalDirection, dim: number | null, options?: dia.ModelSetOptions): void;

Resizes the specified swimlane in the provided direction so that it ends up with the provided dim size in the corresponding dimension. This operation may expand or shrink the Swimlane, depending on its current size. The CompositePool and Phases adjust accordingly in order to accomodate the new size of the Swimlane.

note

For example, providing 100 as the dim value means the following:

• When resizing in the left direction: The left border of the Swimlane is shifted so that the Swimlane ends up with width of 100, keeping the right border where it was.
• When resizing in the top direction: The top border of the Swimlane is shifted so that the Swimlane ends up with height of 100, keeping the bottom border where it was.
• When resizing in the right direction: The right border of the Swimlane is shifted so that the Swimlane ends up with width of 100, keeping the left border where it was.
• When resizing in the bottom direction: The bottom border of the Swimlane is shifted so that the Swimlane ends up wiht a height of 100, keeping the top border where it was.

Providing null as the dim value is a special case. It uses the current size of the Swimlane as the dim value and adjusts the CompositePool and Phases accordingly.

findPhaseFromOrthogonalCoord()

findPhaseFromOrthogonalCoord(orthogonalCoord: number): P | null;

Returns the Phase that contains the provided orthogonal coordinate within its bounding box (inclusive). If this CompositePool contains no Phases, or if the provided orthogonal coordinate lies outside the CompositePool's bounding box, returns null.

getElementsInOrthogonalRange()

getElementsInOrthogonalRange(orthogonalStartCoord: number, orthogonalEndCoord: number, options?: CompositePool.InRangeOptions): dia.Element[];

Returns all elements embedded in this CompositePool whose bounding box lies completely between orthogonalStartCoord and orthogonalEndCoord (exclusive). Set { partial: true } if you also want to include elements whose bbox only partially lies between these two orthogonal coordinates.

This method allows you to highlight elements which would belong to a newly-added phase, based on (for example) the position of the cursor (x, y):

const coords = { x, y };
const phaseBBox = phase.getBBox();
const phaseElements = pool.getElementsInOrthogonalRange(coords[oCoordinate], phaseBBox[oCoordinate] + phaseBBox[oDimension], { partial: false });
phaseElements.forEach((element) => {
    highlighters.addClass.add(
        element.findView(paper),
        'root',
        'target-phase-element',
        {
            className: 'hgl-phase-element',
        }
    );
});

getPhaseCoordinate()

getPhaseCoordinate(): CompositePool.Coordinate;

A convenience method that returns the name of the primary coordinate ('x' or 'y') of Phases in this CompositePool.

note

• In horizontal CompositePools, the primary coordinate of Phases is 'y'.
• In vertical CompositePools, the primary coordinate of Phases is 'x'.

getPhaseDimension()

getPhaseDimension(): CompositePool.Dimension;

A convenience method that returns the name of the primary dimension ('width' or 'height') of Phases in this CompositePool.

note

• In horizontal CompositePools, the primary dimension of Phases is 'height'.
• In vertical CompositePools, the primary dimension of Phases is 'width'.

getPhaseOrthogonalCoordinate()

getPhaseOrthogonalCoordinate(): CompositePool.Coordinate;

A convenience method that returns the name of the orthogonal coordinate ('x' or 'y') of Phases in this CompositePool.

note

• In horizontal CompositePools, the orthogonal coordinate of Phases is 'x'.
• In vertical CompositePools, the orthogonal coordinate of Phases is 'y'.

getPhaseOrthogonalDimension()

getPhaseOrthogonalDimension(): CompositePool.Dimension;

A convenience method that returns the name of the orthogonal dimension ('width' or 'height') of Phases in this CompositePool.

note

• In horizontal CompositePools, the primary dimension of Phases is 'width'.
• In vertical CompositePools, the primary dimension of Phases is 'height'.

getPhases()

getPhases(): P[];

Returns a sorted array of Phases.

note

Phases are sorted according to phase orthogonal coordinate:

• In horizontal CompositePools, phases are sorted by x-coordinate from left to right.
• In vertical CompositePools, phases are sorted by y-coordinate from top to bottom.

getSwimlaneCoordinate()

getSwimlaneCoordinate(): CompositePool.Coordinate;

A convenience method that returns the name of the primary coordinate ('x' or 'y') of Swimlanes in this CompositePool.

note

• In horizontal CompositePools, the primary coordinate of Swimlanes is 'x'.
• In vertical CompositePools, the primary coordinate of Swimlanes is 'y'.

getSwimlaneDimension()

getSwimlaneDimension(): CompositePool.Dimension;

A convenience method that returns the name of the primary dimension ('width' or 'height') of Swimlanes in this CompositePool.

note

• In horizontal CompositePools, the primary dimension of Swimlanes is 'width'.
• In vertical CompositePools, the primary dimension of Swimlanes is 'height'.

getSwimlaneInsertIndexFromPoint()

getSwimlaneInsertIndexFromPoint(point: g.PlainPoint): number;

For the given point, this function returns the closest insert index among the current array of Swimlanes in this CompositePool.

This function is useful when dropping a new Swimlane into a CompositePools - it returns the most suitable index at which the new Swimlane should be inserted, based on (for example) the position of the cursor (x, y):

const insertIndex = pool.getSwimlaneInsertIndexFromPoint({ x, y });
pool.addSwimlane(swimlane, insertIndex);

getSwimlaneOrthogonalCoordinate()

getSwimlaneOrthogonalCoordinate(): CompositePool.Coordinate;

A convenience method that returns the name of the orthogonal coordinate ('x' or 'y') of Swimlanes in this CompositePool.

note

• In horizontal CompositePools, the orthogonal coordinate of Swimlanes is 'y'.
• In vertical CompositePools, the orthogonal coordinate of Swimlanes is 'x'.

getSwimlaneOrthogonalDimension()

getSwimlaneOrthogonalDimension(): CompositePool.Dimension;

A convenience method that returns the name of the orthogonal dimension ('width' or 'height') of Swimlanes in this CompositePool.

note

• In horizontal CompositePools, the orthogonal dimension of Swimlanes is 'height'.
• In vertical CompositePools, the orthogonal dimension of Swimlanes is 'width'.

getSwimlanes()

getSwimlanes(): S[];

Returns a sorted array of Swimlanes.

note

Swimlanes are sorted according to swimlane orthogonal coordinate:

• In horizontal CompositePools, swimlanes are sorted by y-coordinate from top to bottom.
• In vertical CompositePools, swimlanes are sorted by x-coordinate from left to right.

isHorizontal()

isHorizontal(): boolean;

An abstract method that is expected to return true when the CompositePool is horizontal and false when the CompositePool is vertical.

info

• A horizontal CompositePool (such as the built-in HorizontalPool shape) is one that embeds horizontal Swimlanes and vertical Phases.
• Conversely, a vertical CompositePool (such as the built-in VerticalPool shape) is one that embeds vertical Swimlanes and horizontal Phases.

The method throws an exception when it is not overridden:

Abstract method `compositePool.isHorizontal()`. Needs to be implemented by a child class.

removePhase()

removePhase(phase: P): void;

Removes the specified phase from the array of Phases. No elements are removed. The previous Phase expands to occupy the removed Phase's place; if the removed Phase was the first Phase in this CompositePool, the second Phase expands to occupy its place.

The method throws an exception when it is not overridden:

Abstract method `compositePool.removePhase()`. Needs to be implemented by a child class.

removeSwimlane()

removeSwimlane(swimlane: S): void;

Removes the specified swimlane from the array of Swimlanes, including all of its embedded elements. The next Swimlane moves to occupy the removed Swimlane's place.

The method throws an exception when it is not overridden:

Abstract method `compositePool.removeSwimlane()`. Needs to be implemented by a child class.

Static methods

isPool()

isPool(obj: any): boolean;

Returns true if the provided object is an instance of CompositePool.

Model attributes

contentMargin

The minimum margin between the embedded elements of the CompositePool and any Swimlane/Phase/CompositePool boundaries. It is 20 by default.

minimumLaneSize

The minimum dimension of Swimlane/Phase/CompositePool when it has no content. It is 60 by default.

padding

The padding around the contents of the CompositePool.

Types

The CompositePool namespace exports several helper types.

Coordinate

type Coordinate = 'x' | 'y';`

Dimension

type Dimension = 'width' | 'height';

InRangeOptions

interface InRangeOptions {
    partial?: boolean;
}

CompositePoolView

The view for CompositePool. It inherits from dia.ElementView. If you are extending the behavior of CompositePool shapes, and creating custom element definitions, it's necessary to use the CompositePoolView. The CompositePoolView is responsible for interactivity among other things, so it ensures your custom CompositePool behaves as expected.

import { shapes } from '@joint/plus';

class CustomCompositePool extends shapes.bpmn2.CompositePool {
    /* code of extended shape with type 'customNamespace.CustomCompositePool' */
}

const CustomCompositePoolView = shapes.bpmn2.CompositePoolView;

// example of a namespace
const namespace = {
    ...shapes,
    customNamespace: {
        CustomCompositePool,
        CustomCompositePoolView
    }
};

Conversation

A polygon shape with label and markers.

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

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

Static properties

CONVERSATION_MARKER_ICONS

The CONVERSATION_MARKER_ICONS static property includes icons that can be used within the shape.

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

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

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

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

The marker is triggering 'element:marker:*' paper events.

Special presentation attributes

iconColor

Set the marker icons color.

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

iconSize

Set the marker icons size.

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

iconTypes

Set the marker icons. Property has to be an array of strings. Note: an array is required.

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

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

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

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

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

DataObject

A polygon shape with label.

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)

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

Static properties

DATA_OBJECT_COLLECTION_ICONS

The DATA_OBJECT_COLLECTION_ICONS static property includes one icon that can be used within the shape.

false	No image.
true

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

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

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

DATA_OBJECT_TYPE_ICONS

The DATA_OBJECT_TYPE_ICONS static property includes icons that can be used within the shape.

none	No image.
input
output

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

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

// later on in the code
dataObject.attr('dataTypeIcon/iconType', 'myIcon');

Special presentation attributes

collection

Set the collection icon.

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

iconColor

Set the icon or collection icon color.

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

iconType

Set the main icon.

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

objectD

Changes the fold of the shape.

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

DataStore

A polygon shape with label.

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

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

Methods

topRy()

dataStore.topRy(t?: string | number, opt?: dia.ModelSetOptions): string | number;

If used without parameters, returns the vertical radius of the exposed area of the DataStore base (the value of the body/lateralArea attribute; 10 by default).

If first parameter is not undefined, sets the cylinder DataStore radius of the exposed area of the DataStore 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 cylinder.topRy.

Event

A circular shape with icon and label.

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

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

Static properties

EVENT_ICONS

The EVENT_ICONS static property includes several icons that can be used within the shape.

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 shapes.bpmn2.Event.EVENT_ICONS static property.

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

// later on in the code
event.attr('icon/iconType', 'myIcon');

Special presentation attributes

borderStyle

Set the style of the border.

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

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

borderType

Set the border type.

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

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

iconColor

Set the icon color.

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

iconType

Set the icon.

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

Gateway

A polygon shape with icon.

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)

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

Static properties

GATEWAY_ICONS

The 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 shapes.bpmn2.Gateway.GATEWAY_ICONS static property.

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

// later on in the code
gateway.attr('icon/iconType', 'myIcon');

Special presentation attributes

iconColor

Set the icon color.

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

iconType

Set the icon.

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

Group

A rectangle shape with label.

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

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

HeaderedHorizontalPool

A rectangle shape which can accomodate embedded HorizontalSwimlanes and VerticalPhases. Inherits from HorizontalPool shape and adds a header rectangle and headerText text label.

Additional supported attrs properties:

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

const headeredHorizontalPool = new shapes.bpmn2.HeaderedHorizontalPool({
    position: { x: 100, y: 100 },
    size: { width: 700, height: 400 },
    attrs: {
        header: {
            fill: '#00fa9a'
        },
        headerText: {
            text: 'Headered Horizontal Pool',
            fill: '#ffffff'
        }
    }
});
headeredHorizontalPool.addTo(graph);
headeredHorizontalPool.addSwimlane(new shapes.bpmn2.HorizontalSwimlane());
headeredHorizontalPool.addPhase(new shapes.bpmn2.VerticalPhase());

Model attributes

headerSide

The side ('left', 'top', 'right', 'bottom') of the CompositePool at which the header is rendered. It is 'left' by default.

headerTextMargin

The minimum margin between the text of the header and its boundaries. It is 5 by default.

padding

Inherited from CompositePool. It is { left: 40 } by default.

info

The HeaderedHorizontalPool automatically uses the padding value corresponding to headerSide as the header size (i.e. headerSize = padding[headerSide]).

Special presentation attributes

automaticHeaderAttributes

Should the x, y, width and height attributes of header be automatically assigned based on the header side and header size? It is true by default.

automaticHeaderTextAttributes

Should the transform, x and y attributes of headerText be automatically assigned based on the header side and header size? It is true by default.

This attribute automatically centers headerText within the header, and rotates it by -90 degrees (i.e. written from bottom to top) when the header side is 'left' or 'right', .

automaticHeaderTextWrap

Should the textWrap of headerText be automatically assigned based on the header side, header size and header text margin? It is true by default.

This attribute automatically prepares the textWrap object and calls the built-in logic:

• The textWrap.width and textWrap.height properties match the result of automaticHeaderTextAttributes.
• The textWrap.preserveSpaces and textWrap.ellipsis properties are set to true.

HeaderedHorizontalPoolView

The view for HeaderedHorizontalPool. It inherits from HorizontalPoolView. If you are extending the behavior of HeaderedHorizontalPool shapes, and creating custom element definitions, it's necessary to use the HeaderedHorizontalPoolView. The HeaderedHorizontalPoolView is responsible for interactivity among other things, so it ensures your custom HeaderedHorizontalPool behaves as expected.

import { shapes } from '@joint/plus';

class CustomHeaderedHorizontalPool extends shapes.bpmn2.HeaderedHorizontalPool {
    /* code of extended shape with type 'customNamespace.CustomHeaderedHorizontalPool' */
}

const CustomHeaderedHorizontalPoolView = shapes.bpmn2.HeaderedHorizontalPoolView;

// example of a namespace
const namespace = {
    ...shapes,
    customNamespace: {
        CustomHeaderedHorizontalPool,
        CustomHeaderedHorizontalPoolView
    }
};

HeaderedPool

warning

Deprecated. Use HeaderedHorizontalPool with embedded HorizontalSwimlanes and VerticalPhases.

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

Additional supported 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

const headeredPool = new 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');

HeaderedVerticalPool

A rectangle shape which can accomodate embedded VerticalSwimlanes and HorizontalPhases. Inherits from VerticalPool shape and adds a header rectangle and headerText text label.

Additional supported attrs properties:

Selector	Node	Description
header	SVGRectElement	Rectangular header of the shape, positioned to the top of the shape's body by default
headerText	SVGTextElement	Text label inside the header

const headeredVerticalPool = new shapes.bpmn2.HeaderedVerticalPool({
    position: { x: 100, y: 100 },
    size: { width: 400, height: 700 },
    attrs: {
        header: {
            fill: '#00fa9a'
        },
        headerText: {
            text: 'Headered Vertical Pool',
            fill: '#ffffff'
        }
    }
});
headeredVerticalPool.addTo(graph);
headeredVerticalPool.addSwimlane(new shapes.bpmn2.VerticalSwimlane());
headeredVerticalPool.addPhase(new shapes.bpmn2.HorizontalPhase());

Model attributes

headerSide

The side ('left', 'top', 'right', 'bottom') of the CompositePool at which the header is rendered. It is 'top' by default.

headerTextMargin

The minimum margin between the text of the header and its boundaries. It is 5 by default.

padding

Inherited from CompositePool. It is { top: 40 } by default.

info

The HeaderedVerticalPool automatically uses the padding value corresponding to headerSide (i.e. padding[headerSide]) as the header size.

Special presentation attributes

automaticHeaderAttributes

Should the x, y, width and height attributes of header be automatically assigned based on the header side and header size? It is true by default.

automaticHeaderTextAttributes

Should the transform, x and y attributes of headerText be automatically assigned based on the header side and header size? It is true by default.

This attribute automatically centers headerText within the header, and rotates it by -90 degrees (i.e. written from bottom to top) when the header side is 'left' or 'right', and centers it within the header.

automaticHeaderTextWrap

Should the textWrap of headerText be automatically assigned based on the header side, header size and header text margin? It is true by default.

This attribute automatically prepares the textWrap object and calls the built-in logic:

• The textWrap.width and textWrap.height properties match the result of automaticHeaderTextAttributes.
• The textWrap.preserveSpaces and textWrap.ellipsis properties are set to true.

HeaderedVerticalPoolView

The view for HeaderedVerticalPool. It inherits from VerticalPoolView. If you are extending the behavior of HeaderedVerticalPool shapes, and creating custom element definitions, it's necessary to use the HeaderedVerticalPoolView. The HeaderedVerticalPoolView is responsible for interactivity among other things, so it ensures your custom HeaderedVerticalPool behaves as expected.

import { shapes } from '@joint/plus';

class CustomHeaderedVerticalPool extends shapes.bpmn2.HeaderedVerticalPool {
    /* code of extended shape with type 'customNamespace.CustomHeaderedVerticalPool' */
}

const CustomHeaderedVerticalPoolView = shapes.bpmn2.HeaderedVerticalPoolView;

// example of a namespace
const namespace = {
    ...shapes,
    customNamespace: {
        CustomHeaderedVerticalPool,
        CustomHeaderedVerticalPoolView
    }
};

HorizontalPhase

A rectangle shape representing a single headered horizontal phase inside a VerticalPool, with a rectangular header positioned to the left of the shape's body by default. Inherits from Phase shape.

const horizontalPhase = new shapes.bpmn2.HorizontalPhase({
    attrs: {
        header: {
            fill: '#00fa9a'
        },
        headerText: {
            text: 'Horizontal Phase',
            fill: '#ffffff'
        }
    }
});
verticalPool.addPhase(horizontalPhase);

Model attributes

headerSide

Inherited from Phase. It is 'left' by default.

HorizontalPhaseView

The view for HorizontalPhase. It inherits from PhaseView. If you are extending the behavior of HorizontalPhase shapes, and creating custom element definitions, it's necessary to use the HorizontalPhaseView. The HorizontalPhaseView is responsible for interactivity among other things, so it ensures your custom HorizontalPhase behaves as expected.

import { shapes } from '@joint/plus';

class CustomHorizontalPhase extends shapes.bpmn2.HorizontalPhase {
    /* code of extended shape with type 'customNamespace.CustomHorizontalPhase' */
}

const CustomHorizontalPhaseView = shapes.bpmn2.HorizontalPhaseView;

// example of a namespace
const namespace = {
    ...shapes,
    customNamespace: {
        CustomHorizontalPhase,
        CustomHorizontalPhaseView
    }
};

HorizontalPool

A rectangle shape which can accomodate embedded HorizontalSwimlanes and VerticalPhases. Inherits from CompositePool shape.

const horizontalPool = new shapes.bpmn2.HorizontalPool({
    position: { x: 100, y: 100},
    size: { width: 700, height: 400 }
});
horizontalPool.addTo(graph);
horizontalPool.addSwimlane(new shapes.bpmn2.HorizontalSwimlane());
horizontalPool.addPhase(new shapes.bpmn2.VerticalPhase());

HorizontalPoolView

The view for HorizontalPool. It inherits from CompositePoolView. If you are extending the behavior of HorizontalPool shapes, and creating custom element definitions, it's necessary to use the HorizontalPoolView. The HorizontalPoolView is responsible for interactivity among other things, so it ensures your custom HorizontalPool behaves as expected.

import { shapes } from '@joint/plus';

class CustomHorizontalPool extends shapes.bpmn2.HorizontalPool {
    /* code of extended shape with type 'customNamespace.CustomHorizontalPool' */
}

const CustomHorizontalPoolView = shapes.bpmn2.HorizontalPoolView;

// example of a namespace
const namespace = {
    ...shapes,
    customNamespace: {
        CustomHorizontalPool,
        CustomHorizontalPoolView
    }
};

HorizontalSwimlane

A rectangle shape representing a single headered horizontal swimlane inside a HorizontalPool, with a rectangular header positioned to the left of the shape's body by default. Inherits from Swimlane shape.

const horizontalSwimlane = new shapes.bpmn2.HorizontalSwimlane({
    attrs: {
        header: {
            fill: '#00fa9a'
        },
        headerText: {
            text: 'Horizontal Swimlane',
            fill: '#ffffff'
        }
    }
});
horizontalPool.addSwimlane(horizontalSwimlane);

Model attributes

headerSide

Inherited from Swimlane. It is 'left' by default.

HorizontalSwimlaneView

The view for HorizontalSwimlane. It inherits from SwimlaneView. If you are extending the behavior of HorizontalSwimlane shapes, and creating custom element definitions, it's necessary to use the HorizontalSwimlaneView. The HorizontalSwimlaneView is responsible for interactivity among other things, so it ensures your custom HorizontalSwimlane behaves as expected.

import { shapes } from '@joint/plus';

class CustomHorizontalSwimlane extends shapes.bpmn2.HorizontalSwimlane {
    /* code of extended shape with type 'customNamespace.CustomHorizontalSwimlane' */
}

const CustomHorizontalSwimlaneView = shapes.bpmn2.HorizontalSwimlaneView;

// example of a namespace
const namespace = {
    ...shapes,
    customNamespace: {
        CustomHorizontalSwimlane,
        CustomHorizontalSwimlaneView
    }
};

Phase

An abstract rectangle shape representing a single headered phase inside a CompositePool.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container for all shape nodes
body	SVGRectElement	Rectangle body of the shape
header	SVGRectElement	Rectangular header of the shape
headerText	_SVGTextElement	Text label inside the header

Methods

getElements()

getElements(): dia.Element[];

Returns an array of all elements completely contained within this Phase's boundaries.

getElementsBBox()

getElementsBBox(): g.Rect | null;

Returns the bounding box (g.Rect) that surrounds all elements completely contained within this Phase's boundaries. If there are no such elements, returns null.

isCompatibleWithPool()

isCompatibleWithPool(pool: CompositePool): boolean;

Is this Phase compatible with the provided pool? Returns true when the results of phase.isHorizontal() and pool.isHorizontal() do not match (i.e. when the Phase is vertical and CompositePool is horizontal or vice versa).

isHorizontal()

isHorizontal(): boolean;

An abstract method that is expected to return true when the Phase is horizontal and false when the Phase is vertical.

info

• A horizontal Phase (such as the built-in HorizontalPhase shape) is one whose header is on the left. Horizontal Phases can be embedded into vertical CompositePools (such as the built-in VerticalPool shape).
• Conversely, a vertical Phase (such as the built-in VerticalPhase shape) is one whose header is on the top. Vertical Phases can be embedded into horizontal CompositePools (such as the built-in HorizontalPool shape).

The method throws an exception when it is not overridden:

Abstract method `phase.isHorizontal()`. Needs to be implemented by a child class.

Static methods

isPhase()

isPhase(obj: any): boolean;

Returns true if the provided object is an instance of Phase.

Model attributes

headerSide

The side ('left', 'top', 'right', 'bottom') of the Phase at which the header is rendered.

headerSize

The size of the header. It is 30 by default.

info

The Phase automatically uses the headerSize value as the padding on headerSide (i.e. padding[headerSide] = headerSize).

headerTextMargin

The minimum margin between the text of the header and its boundaries. It is 5 by default.

Special presentation attributes

automaticHeaderAttributes

Should the x, y, width and height attributes of header be automatically assigned based on the header side and header size? It is true by default.

automaticHeaderTextAttributes

Should the transform, x and y attributes of headerText be automatically assigned based on the header side and header size? It is true by default.

This attribute automatically centers headerText within the header, and rotates it by -90 degrees (i.e. written from bottom to top) when the header side is 'left' or 'right', .

automaticHeaderTextWrap

Should the textWrap of headerText be automatically assigned based on the header side, header size and header text margin? It is true by default.

This attribute automatically prepares the textWrap object and calls the built-in logic:

• The textWrap.width and textWrap.height properties match the result of automaticHeaderTextAttributes.
• The textWrap.preserveSpaces and textWrap.ellipsis properties are set to true.

PhaseView

The view for Phase. It inherits from dia.ElementView. If you are extending the behavior of Phase shapes, and creating custom element definitions, it's necessary to use the PhaseView. The PhaseView is responsible for interactivity among other things, so it ensures your custom Phase behaves as expected.

import { shapes } from '@joint/plus';

class CustomPhase extends shapes.bpmn2.Phase {
    /* code of extended shape with type 'customNamespace.CustomPhase' */
}

const CustomPhaseView = shapes.bpmn2.PhaseView;

// example of a namespace
const namespace = {
    ...shapes,
    customNamespace: {
        CustomPhase,
        CustomPhaseView
    }
};

Pool

warning

Deprecated. Use HorizontalPool with embedded HorizontalSwimlanes and VerticalPhases.

A rectangle shape with nested lanes.

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

const pool = new 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'
        }
    ]
});

Methods

getLaneBBox()

pool.getLaneBBox(laneGroupId: string): g.Rect | null;

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

getLanePath()

pool.getLanePath(laneGroupId: string): string[];

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

const path = pool.getLanePath('customId') + '/label';
pool.prop(path, 'new label', { rewrite: true });

getLanesFromPoint()

pool.getLanesFromPoint(point: dia.Point): string[];

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.

getLanesIds()

pool.getLanesIds()

Returns an array of all lane identifiers (in non-specific order).

getMilestoneBBox()

pool.getMilestoneBBox(milestoneGroupId: string): g.Rect | null;

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

getMilestoneFromPoint()

pool.getMilestoneFromPoint(point: dia.Point): string | null;

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.

getMinimalSize()

pool.getMinimalSize(): dia.Size;

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

getParentLaneId()

pool.getParentLaneId(laneGroupId)

Returns a parent lane id or null if the lane is a top-level lane.

Model attributes

lanes

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	Sublane	Nested lanes

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'
            }
        ]
    }
]);

milestones

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

pool.set('milestones', [
    {
        label: 'milestone'
    },
    {
        label: 'milestone with fixed width',
        id: 'customMilestone',
        size: 350,
    }
]);

milestonesSize

Height of all milestones

const milestonesSize: number = pool.get('milestonesSize');
pool.set('milestonesSize', 100);

headerSize

Default size of all lane headers

const headerSize: number = pool.get('headerSize');
pool.set('headerSize', 20);

padding

Padding within the Pool's body element, useful when creating another shapes based on Pool.

const padding: dia.Padding = pool.get('padding');
pool.set('padding', 20);
pool.set('padding', { top: 10, right: 20, bottom: 5, left: 10 });

Special presentation 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)

// 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');

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.

// 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 });

Types

Pool namespace exports several helper types.

Sublane

Interface, which describes lanes of a Pool shape (see lanes).

interface Sublane {
    label?: string;
    size?: number;
    id?: string;
    headerSize?: number;
    sublanes?: Sublane[];
}

Milestone

Interface, which describes milestones of a Pool shape (see milestones).

interface Milestone {
    label?: string;
    size?: number;
}

Swimlane

An abstract rectangle shape representing a single headered swimlane inside a CompositePool.

Supported attrs properties:

Selector	Node	Description
root	SVGGElement	Container for all shape nodes
body	SVGRectElement	Rectangle body of the shape
header	SVGRectElement	Rectangular header of the shape
headerText	_SVGTextElement	Text label inside the header

Methods

getElements()

getElements(): dia.Element[];

Returns an array of all elements embedded in this Swimlane.

getElementsBBox()

getElementsBBox(): g.Rect | null;

Returns the bounding box (g.Rect) that surrounds all elements embedded in this Swimlane. If there are no elements, returns null.

isCompatibleWithPool()

isCompatibleWithPool(pool: CompositePool): boolean;

Is this Swimlane compatible with the provided pool? Returns true when the results of swimlane.isHorizontal() and pool.isHorizontal() match (i.e. when the Swimlane and CompositePool are both horizontal or both vertical).

isHorizontal()

isHorizontal(): boolean;

An abstract method that is expected to return true when the Swimlane is horizontal and false when the Swimlane is vertical.

info

• A horizontal Swimlane (such as the built-in HorizontalSwimlane shape) is one whose header is on the left. Horizontal Swimlanes can be embedded into horizontal CompositePools (such as the built-in HorizontalPool shape).
• Conversely, a vertical Swimlane (such as the built-in VerticalSwimlane shape) is one whose header is on the top. Vertical Swimlanes can be embedded into vertical CompositePools (such as the built-in VerticalPool shape).

The method throws an exception when it is not overridden:

Abstract method `swimlane.isHorizontal()`. Needs to be implemented by a child class.

Static methods

isSwimlane()

isSwimlane(obj: any): boolean;

Returns true if the provided object is an instance of Swimlane.

Model attributes

contentMargin

The minimum margin between the embedded elements of the Swimlane and its boundaries. It is 20 by default.

headerSide

The side ('left', 'top', 'right', 'bottom') of the Swimlane at which the header is rendered.

headerSize

The size of the header. It is 30 by default.

info

The Swimlane automatically uses the headerSize value as the padding on headerSide (i.e. padding[headerSide] = headerSize).

headerTextMargin

The minimum margin between the text of the header and its boundaries. It is 5 by default.

Special presentation attributes

automaticHeaderAttributes

Should the x, y, width and height attributes of header be automatically assigned based on the header side and header size? It is true by default.

automaticHeaderTextAttributes

Should the transform, x and y attributes of headerText be automatically assigned based on the header side and header size? It is true by default.

This attribute automatically centers headerText within the header, and rotates it by -90 degrees (i.e. written from bottom to top) when the header side is 'left' or 'right', .

automaticHeaderTextWrap

Should the textWrap of headerText be automatically assigned based on the header side, header size and header text margin? It is true by default.

This attribute automatically prepares the textWrap object and calls the built-in logic:

• The textWrap.width and textWrap.height properties match the result of automaticHeaderTextAttributes.
• The textWrap.preserveSpaces and textWrap.ellipsis properties are set to true.

SwimlaneView

The view for Swimlane. It inherits from dia.ElementView. If you are extending the behavior of Swimlane shapes, and creating custom element definitions, it's necessary to use the SwimlaneView. The SwimlaneView is responsible for interactivity among other things, so it ensures your custom Swimlane behaves as expected.

import { shapes } from '@joint/plus';

class CustomSwimlane extends shapes.bpmn2.Swimlane {
    /* code of extended shape with type 'customNamespace.CustomSwimlane' */
}

const CustomSwimlaneView = shapes.bpmn2.SwimlaneView;

// example of a namespace
const namespace = {
    ...shapes,
    customNamespace: {
        CustomSwimlane,
        CustomSwimlaneView
    }
};

VerticalPhase

A rectangle shape representing a single headered vertical phase inside a HorizontalPool, with a rectangular header positioned to the top of the shape's body by default. Inherits from Phase shape.

const verticalPhase = new shapes.bpmn2.VerticalPhase({
    attrs: {
        header: {
            fill: '#00fa9a'
        },
        headerText: {
            text: 'Vertical Phase',
            fill: '#ffffff'
        }
    }
});
horizontalPool.addPhase(verticalPhase);

Model attributes

headerSide

Inherited from Phase. It is 'top' by default.

VerticalPhaseView

The view for VerticalPhase. It inherits from PhaseView. If you are extending the behavior of VerticalPhase shapes, and creating custom element definitions, it's necessary to use the VerticalPhaseView. The VerticalPhaseView is responsible for interactivity among other things, so it ensures your custom VerticalPhase behaves as expected.

import { shapes } from '@joint/plus';

class CustomVerticalPhase extends shapes.bpmn2.VerticalPhase {
    /* code of extended shape with type 'customNamespace.CustomVerticalPhase' */
}

const CustomVerticalPhaseView = shapes.bpmn2.VerticalPhaseView;

// example of a namespace
const namespace = {
    ...shapes,
    customNamespace: {
        CustomVerticalPhase,
        CustomVerticalPhaseView
    }
};

VerticalPool

A rectangle shape which can accomodate embedded VerticalSwimlanes and HorizontalPhases. Inherits from CompositePool shape.

const verticalPool = new shapes.bpmn2.VerticalPool({
    position: { x: 100, y: 100},
    size: { width: 400, height: 700 }
});
verticalPool.addTo(graph);
verticalPool.addSwimlane(new shapes.bpmn2.VerticalSwimlane());
verticalPool.addPhase(new shapes.bpmn2.HorizontalPhase());

VerticalPoolView

The view for VerticalPool. It inherits from CompositePoolView. If you are extending the behavior of VerticalPool shapes, and creating custom element definitions, it's necessary to use the VerticalPoolView. The VerticalPoolView is responsible for interactivity among other things, so it ensures your custom VerticalPool behaves as expected.

import { shapes } from '@joint/plus';

class CustomVerticalPool extends shapes.bpmn2.VerticalPool {
    /* code of extended shape with type 'customNamespace.CustomVerticalPool' */
}

const CustomVerticalPoolView = shapes.bpmn2.VerticalPoolView;

// example of a namespace
const namespace = {
    ...shapes,
    customNamespace: {
        CustomVerticalPool,
        CustomVerticalPoolView
    }
};

VerticalSwimlane

A rectangle shape representing a single headered vertical swimlane inside a VerticalPool, with a rectangular header positioned to the top of the shape's body by default. Inherits from Swimlane shape.

const verticalSwimlane = new shapes.bpmn2.VerticalSwimlane({
    attrs: {
        header: {
            fill: '#00fa9a'
        },
        headerText: {
            text: 'Vertical Swimlane',
            fill: '#ffffff'
        }
    }
});
verticalPool.addSwimlane(verticalSwimlane);

Model attributes

headerSide

Inherited from Swimlane. It is 'top' by default.

VerticalSwimlaneView

The view for VerticalSwimlane. It inherits from SwimlaneView. If you are extending the behavior of VerticalSwimlane shapes, and creating custom element definitions, it's necessary to use the VerticalSwimlaneView. The VerticalSwimlaneView is responsible for interactivity among other things, so it ensures your custom VerticalSwimlane behaves as expected.

import { shapes } from '@joint/plus';

class CustomVerticalSwimlane extends shapes.bpmn2.VerticalSwimlane {
    /* code of extended shape with type 'customNamespace.CustomVerticalSwimlane' */
}

const CustomVerticalSwimlaneView = shapes.bpmn2.VerticalSwimlaneView;

// example of a namespace
const namespace = {
    ...shapes,
    customNamespace: {
        CustomVerticalSwimlane,
        CustomVerticalSwimlaneView
    }
};

Links

AnnotationLink

A dashed link.

Supported attrs properties:

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

const annotationLink = new shapes.bpmn2.AnnotationLink({});
annotationLink.prop('source', { x: 450, y: 600 });
annotationLink.prop('target', { x: 400, y: 750 });
annotationLink.attr('line/stroke', '#fe854f');

ConversationLink

A double lined link.

Supported attrs properties:

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

const conversationLink = new shapes.bpmn2.ConversationLink({
    source: { x: 250, y: 260 },
    target: { x: 700, y: 260 },
    attrs: {
        line: {
            stroke: '#30d0c6',
        },
        outline: {
            stroke: '#5654a0'
        }
    }
});

DataAssociation

A dashed link.

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.

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

Flow

A link with configurable flow.

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.

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

Special presentation attributes

flowType

The 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

flow.attr('line/flowType', 'message');

markerFill

Flow link accepts additional attribute for styling the fill of the markers.

Note: markerFill applies only to message and conditional flowTypes.

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