sartography
/
bpmn-js
mirror of https://github.com/sartography/bpmn-js.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(bpmnrenderer) add support for data objects 

* DataObject
* InputData
* OutputData
* DataAssociation
* DataStore

closes #21
This commit is contained in:
jdotzki 2014-04-02 12:55:18 +02:00
parent 2eedfcbd2c
commit 62def97a2b
3 changed files with 212 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
example/index.html
View File

@ -12,7 +12,7 @@
<div class="message intro">
<div class="note">
Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.
Drop BPMN diagram from your desktop or <a id="js-create-diagram">create a new diagram</a> to get started.
</div>
</div>

106
lib/draw/BpmnRenderer.js
View File

@ -92,6 +92,21 @@ function BpmnRenderer(events, styles) {
'stroke-linecap': 'round',
'stroke-dasharray': '1,0'
}));
addMarker('data-association-end',
paper
.path('M 0 0 L 10 5 L 0 10')
.attr({
'fill': 'white',
'stroke': 'Black'
})
.marker(0, 0, 10, 10, 10, 5)
.attr({
markerUnits: 'strokeWidth',
markerWidth: 10,
markerHeight: 6,
orient: 'auto',
overflow: 'visible'
}));
}
function drawCircle(p, width, height, offset) {
@ -145,6 +160,16 @@ function BpmnRenderer(events, styles) {
}));
}
function drawPath(p, d) {
var path = p.path(d).attr(styles.style([ 'no-fill' ],{
'stroke-width': 2,
'stroke': 'Black'
}));
return path;
}
function as(type) {
return function(p, data) {
return handlers[type](p, data);
@ -244,19 +269,95 @@ function BpmnRenderer(events, styles) {
'stroke-dasharray': '3,3'
});
},
'bpmn:DataInputAssociation': function(p, data) {
var polyline = drawLine(p, data.waypoints);
return polyline.attr({
'stroke-dasharray': '2,4',
'marker-end': marker('data-association-end')
});
},
'bpmn:DataOutputAssociation': function(p, data) {
var polyline = drawLine(p, data.waypoints);
return polyline.attr({
'stroke-dasharray': '2,4',
'marker-end': marker('data-association-end')
});
},
'bpmn:MessageFlow': function(p, data) {
var polyline = drawLine(p, data.waypoints);
return polyline.attr({
'marker-end': marker('messageflow-end'),
'marker-start': marker('messageflow-start'),
'stroke-dasharray': '3,4'
'stroke-dasharray': '1,3'
});
},
'bpmn:DataObjectReference': function(p, data) {
var DATA_OBJECT_PATH = 'm 0.4910 0.7310 39.2144 -1 9.8036 9.8363 0 49.1817-49.0180 0 0-59.0180m 39.2144 0 0 9.8363 9.8036 0';
var dataObject = drawPath(p, DATA_OBJECT_PATH);
return dataObject;
},
'bpmn:DataInput': function(p, data) {
var DATA_INPUT__ARROW = 'm -1.5357,2.8074 9,0 0,-3 5,5 -5,5 0,-3 -9,0 z';
//page
var dataObject = renderer('bpmn:DataObjectReference')(p, data);
//arrow
var dataInput = drawPath(p, DATA_INPUT__ARROW);
dataInput.attr('stroke-width', 1);
dataInput.transform('matrix(1.00000000,0.00000000,0.00000000,1.00000000,7.00000000,7.00000000)');
return dataObject;
},
'bpmn:DataOutput': function(p, data) {
var DATA_INPUT__ARROW = 'm -1.5357,2.8074 9,0 0,-3 5,5 -5,5 0,-3 -9,0 z';
//page
var dataObject = renderer('bpmn:DataObjectReference')(p, data);
//arrow
var dataInput = drawPath(p, DATA_INPUT__ARROW);
dataInput.attr({
'stroke-width': 1,
'fill': 'Black'
});
dataInput.transform('matrix(1.00000000,0.00000000,0.00000000,1.00000000,7.00000000,7.00000000)');
return dataObject;
},
'bpmn:DataStoreReference': function(p, data) {
var DATA_STORE_PATH = 'm 59.5253 15.2984c 0 1.9490-3.4477 6.4288-29.7791 6.4288-26.3304 ' +
'0-29.2715-4.5986-29.2715-6.3336m 0-4.5633c 0 1.7360 2.9411 6.3346 29.2715 6.3346 ' +
'26.3314 0 29.7791-4.4799 29.7791-6.4288M 0.4747 6.2670c 0 2.3062 2.9411 6.3346 ' +
'29.2715 6.3346 26.3314 0 29.7791-3.8390 29.7791-6.4298m 0 9.81V 10.9265M 0.4975 ' +
'6.1728V 10.9265M 59.5253 10.7361v 4.7536M 0.4975 10.7361v 4.7536M 29.7224 0.5507c ' +
'19.0607 0 29.8029 2.9931 29.8029 5.6221 0 2.6280 0 44.2549 0 47.3441 0 ' +
'3.0893-15.6386 6.0844-29.8944 6.0844-14.2557 0-29.1563-2.8999-29.1563-6.1805 ' +
'0-3.2797 0-44.8751 0-47.1538 0-2.2787 10.1880-5.7163 29.2477-5.7163z'
//arrow
var dataStore = drawPath(p, DATA_STORE_PATH);
dataStore.attr({
'stroke-width': 1,
'fill': 'Black',
'stroke-miterlimit': 4,
'stroke-linejoin': 'miter',
'stroke-linecap': 'butt',
'stroke-opacity': 1,
'stroke': 'rgb(34, 34, 34)',
'stroke-dasharray': 'none',
'fill-opacity': 0
});
return dataStore;
}
};
function drawShape(parent, data) {
var type = data.type;
var h = handlers[type];
@ -268,7 +369,6 @@ function BpmnRenderer(events, styles) {
}
function drawConnection(parent, data) {
var type = data.type;
var h = handlers[type];

108
test/fixtures/bpmn/data-objects.bpmn vendored Normal file
View File

@ -0,0 +1,108 @@
<?xml version="1.0" encoding="UTF-8"?>
<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">
<bpmn:collaboration id="_Collaboration_4">
<bpmn:participant id="_Participant_4" name="Pool" processRef="Process_1"/>
<bpmn:participant id="Participant_1" name="Pool" processRef="Process_2"/>
</bpmn:collaboration>
<bpmn:process id="Process_1" isExecutable="false">
<bpmn:ioSpecification id="InputOutputSpecification_1">
<bpmn:dataInput id="DataInput_1"/>
<bpmn:dataOutput id="DataOutput_1"/>
</bpmn:ioSpecification>
<bpmn:dataObject id="DataObject_1" name="Data Object 1"/>
<bpmn:dataStoreReference id="_DataStoreReference_2" name="Data Store" dataStoreRef="DataStore_1"/>
<bpmn:task id="Task_1">
<bpmn:dataInputAssociation id="DataInputAssociation_3">
<bpmn:sourceRef>DataObjectReference_1</bpmn:sourceRef>
</bpmn:dataInputAssociation>
<bpmn:dataOutputAssociation id="DataOutputAssociation_1">
<bpmn:targetRef>_DataStoreReference_2</bpmn:targetRef>
</bpmn:dataOutputAssociation>
<bpmn:dataOutputAssociation id="DataOutputAssociation_2">
<bpmn:targetRef>DataOutput_1</bpmn:targetRef>
</bpmn:dataOutputAssociation>
<bpmn:dataOutputAssociation id="DataOutputAssociation_3">
<bpmn:targetRef>DataObjectReference_1</bpmn:targetRef>
</bpmn:dataOutputAssociation>
</bpmn:task>
<bpmn:dataStoreReference id="_DataStoreReference_3" name="Data Store 2" dataStoreRef="DataStore_2"/>
<bpmn:dataObjectReference id="DataObjectReference_1" name="Data Object" dataObjectRef="DataObject_1"/>
</bpmn:process>
<bpmn:dataStore id="DataStore_1" name="Data Store 1"/>
<bpmn:dataStore id="DataStore_2" name="Data Store 2"/>
<bpmn:process id="Process_2" isExecutable="false">
<bpmn:task id="Task_2">
<bpmn:dataInputAssociation id="DataInputAssociation_1">
<bpmn:sourceRef>_DataStoreReference_2</bpmn:sourceRef>
</bpmn:dataInputAssociation>
</bpmn:task>
</bpmn:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="_Collaboration_4">
<bpmndi:BPMNShape id="_BPMNShape_DataObjectReference_2" bpmnElement="DataObjectReference_1">
<dc:Bounds height="50.0" width="36.0" x="396.0" y="231.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="22.0" width="75.0" x="377.0" y="286.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_DataStoreReference_2" bpmnElement="_DataStoreReference_2">
<dc:Bounds height="50.0" width="50.0" x="762.0" y="72.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="22.0" width="68.0" x="753.0" y="127.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_DataInput_2" bpmnElement="DataInput_1">
<dc:Bounds height="50.0" width="36.0" x="355.0" y="84.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="0.0" width="0.0" x="373.0" y="139.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_DataOutput_2" bpmnElement="DataOutput_1">
<dc:Bounds height="50.0" width="36.0" x="480.0" y="84.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="0.0" width="0.0" x="498.0" y="139.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_Task_11" bpmnElement="Task_1">
<dc:Bounds height="80.0" width="100.0" x="516.0" y="216.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_Participant_4" bpmnElement="_Participant_4" isHorizontal="true">
<dc:Bounds height="277.0" width="529.0" x="132.0" y="60.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_DataStoreReference_3" bpmnElement="_DataStoreReference_3">
<dc:Bounds height="50.0" width="50.0" x="209.0" y="78.0"/>
<bpmndi:BPMNLabel>
<dc:Bounds height="22.0" width="79.0" x="195.0" y="133.0"/>
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="BPMNEdge_DataOutputAssociation_1" bpmnElement="DataOutputAssociation_1" sourceElement="_BPMNShape_Task_11" targetElement="_BPMNShape_DataStoreReference_2">
<di:waypoint xsi:type="dc:Point" x="616.0" y="220.0"/>
<di:waypoint xsi:type="dc:Point" x="762.0" y="115.0"/>
</bpmndi:BPMNEdge>
<bpmndi:BPMNShape id="_BPMNShape_Participant_5" bpmnElement="Participant_1" isHorizontal="true">
<dc:Bounds height="165.0" width="600.0" x="888.0" y="28.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="_BPMNShape_Task_12" bpmnElement="Task_2">
<dc:Bounds height="80.0" width="100.0" x="1029.0" y="68.0"/>
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="BPMNEdge_DataInputAssociation_1" bpmnElement="DataInputAssociation_1" sourceElement="_BPMNShape_DataStoreReference_2" targetElement="_BPMNShape_Task_12">
<di:waypoint xsi:type="dc:Point" x="812.0" y="98.0"/>
<di:waypoint xsi:type="dc:Point" x="1029.0" y="106.0"/>
</bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="BPMNEdge_DataOutputAssociation_2" bpmnElement="DataOutputAssociation_2" sourceElement="_BPMNShape_Task_11" targetElement="_BPMNShape_DataOutput_2">
<di:waypoint xsi:type="dc:Point" x="547.0" y="216.0"/>
<di:waypoint xsi:type="dc:Point" x="510.0" y="134.0"/>
</bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="BPMNEdge_DataInputAssociation_3" bpmnElement="DataInputAssociation_3" sourceElement="_BPMNShape_DataObjectReference_2" targetElement="_BPMNShape_Task_11">
<di:waypoint xsi:type="dc:Point" x="432.0" y="244.0"/>
<di:waypoint xsi:type="dc:Point" x="478.0" y="215.0"/>
<di:waypoint xsi:type="dc:Point" x="516.0" y="233.0"/>
</bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="BPMNEdge_DataOutputAssociation_3" bpmnElement="DataOutputAssociation_3" sourceElement="_BPMNShape_Task_11" targetElement="_BPMNShape_DataObjectReference_2">
<di:waypoint xsi:type="dc:Point" x="516.0" y="277.0"/>
<di:waypoint xsi:type="dc:Point" x="471.0" y="296.0"/>
<di:waypoint xsi:type="dc:Point" x="432.0" y="269.0"/>
</bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>