bpmn-io\lib PLUGIN ARCHITECTURE

Each module is a plugin (plugin architecture)

get()
bootstrap()
Injector invoke()
Diagram Dependencies
(dd)

BpmnModdle
Viewer

Navigated __depends__
Modeler
Viewer
__init__
modules Module
field: [‘type’, Module]
Modeling Module
field: [‘type’, Module]
Modules
...
…
Additional Module
Modules field: [‘type’, Module]
PLUGINS
 MODULE INSTANTIATION

Modeler Viewer Diagram Injector

create
create

bootstrap()
init classes

collect all
dependent
modules

new Injector(modules)

Initate each module

 DRAWING

BPMN di bpmndi
EventBus BaseRenderer
Element Element

businessObject svg group element (<g>)

Canvas
Layers
Shape
id svg group element (<g>)
Modeler Canvas
id Viewport
Graphic
Object (<div>)

BPMN Container
Root
Definition Shape
Element
children

BPMN BPMNDI Canvas

Elmeents Elements Shapes
 BPMN XML IMPORT

Canvas Shapes
Element Tree
Definitions
(ModdleElement)
BpmnModdle Bpmn
Moddle
is used to Importer
read BPMN Process
XML file into (ModdleElement)
a hierarchy of Bpmn
objects. Moddle
Task Exclusive Gateway
ModdleElement) (ModdleElement)
…
Element Tree Object (ModdleElement)

corresponding to BPMNDI elements

corresponding to BPMN elements
diagram-js\lib\model CANVAS SHAPES

id
type
businessObject BPMN Element
label (from the
children
Base labels ElementTree)
host incoming
attachers outgoing id
collapsed type
businessObject
hidden
source
x
Shape Connection target
y
width hidden
height waypoints = [{x,y},{x,y}…]

labelTarget
Root Label
type
Canvas Shape Objects

corresponding the BPMN element in the XML file

 Canvas Shape Types
BpmnRender.js: draws shapes according to the shape types.

• bpmn:Event • bpmn:Activity
• bpmn:StartEvent • bpmn:Task
• bpmn:MessageEventDefinition • bpmn:ServiceTask
• bpmn:TimerEventDefinition • bpmn:UserTask
• bpmn:EscalationEventDefinition • bpmn:ManualTask
• bpmn:ConditionalEventDefinition • bpmn:SendTask
• bpmn:LinkEventDefinition • bpmn:ReceiveTask
• bpmn:ErrorEventDefinition • bpmn:ScriptTask
• bpmn:CancelEventDefinition • bpmn:BusinessRuleTask
• bpmn:CompensateEventDefinition • bpmn:SubProcess
• bpmn:SignalEventDefinition • bpmn:AdHocSubProcess
• bpmn:MultipleEventDefinition • bpmn:Transaction
• bpmn:ParallelMultipleEventDefinition • bpmn:CallActivity
• bpmn:EndEvent • bpmn:Participant
• bpmn:TerminateEventDefinition • bpmn:Lane
• bpmn:IntermediateEvent • bpmn:InclusiveGateway
• bpmn:IntermediateCatchEvent • bpmn:ExclusiveGateway
• bpmn:IntermediateThrowEvent • ….
 XML IMPORT Canvas Shapes

BpmnImporter

BpmnTreeWalker
SAX Parser
BaseHandler
Depth-first
traversal on the
XML tags and
BodyHandler NoopHandler handler tree
(stored in a
stack)

BaseElement Reference Value BaseElement

Handler Handler Handler Handler Reader

ElementHand
GenericElement ler
Handler

RootElement
Handler
 XML IMPORT
Bpmn- Sax XX BpmnTree Bpmn Element Graphics Element Event Bpmn
Modeler Reader Canvas Bus Renderer
Moddle Parser Handler Walker Importer Factory Factory Registry

importXML
fromXML

parse
handleXX

ElementTree
render(ElementTree)
handleDefinitions (ElementTree)
add(element)
createShape/Connection

addShape/Connection

createGraphics

add(element, graphics)

drawShape

fireEvent (“render”)

notify(“render”)
drawShape
XML EXPORT

Writer

ElementSerializer BodySerializer

TypeSerializer ValueSerializer

ReferenceSerializer
 XML EXPORT
Bpmn- Element XX Formating Saving
Modeler Writer
Moddle Serializer Serializer Writer Writer

exportXML (definitions)
toXML

serializeTo

serializeTo

append

write
 EVENT MANAGEMENT

Event Notifier

4. return value 2. fire(“eventName”)

EventBus

3. invoke listeners 1. on(“eventName”, callback) // register

Event Listener
 BPMN RENDERING
lib\draw
lib\util
BaseRender

DefaultRender BpmnRenderer TextRenderer

BpmnRendererUtils BpmnRendererUtils

RenderUtils

tinySVG
diagram-js\lib\command
bpmn-js\modelling\cmd

MODELLING COMMAND MANAGEMENT

registerHandler

CommandStack CommandHandler
BaseModeling register handlers

handlers XXHandler

Modeling handlers
Canvas
 MODELLING RULES/CONSTRAINTS

canExecute
ContextPad Rules
canExecute canExecute

Palette CommandStack

for a command X when executing, fire these events:

commandStack.X.canExecute|preExecute|preExecuted
execute|executed|postExecute|postExecuted

EventBus
listen to X.canExecute| X = connection.start, connection.create, connection.reconnectStart,
preExecute| connection.reconnectEnd, connection.updateWaypoints, shape.resize, elements.move,
preExecuted| shape.create, shape.attach, element.copy, element.paste, elements.paste
execute|
executed| provide hooks into command
postExecute| CommandInterceptor execution through eventBus
postExecuted
listeners
addRule (i.e. hook into canExecute event)

RuleProvider
addRule
BpmnRules provide a list of modelling rules
 RULES CHECKING
Palette Command Command
Rules EventBus Listerner
ContextPad Stack Handler

canExecute()

canExecute()

fire(“canExecute”)

handlerFunction

canExecute

execute if allowed
 COMMAND EXECUTION INTERCEPTORS

Update the whole model CommandInterceptor

after element changes
BpmnUpdater

AppendBehavior CopyPasteBehavior RemoveElementBehavior …

These classess implement preExecute, preExecuted, execute,

executed, postExecute, postExecuted handlers that hook into
the corresponding events fired from the corresponding
command execution.

modelling\behavior module
depends

This module is used as a

ModellingModule Façade to modelling actions