feat(draw): render association start/end markers

Closes #454
This commit is contained in:
Nico Rehwaldt 2016-01-21 14:19:06 +01:00 committed by pedesen
parent 305b59e1f3
commit 2e4b97d4ce
3 changed files with 90 additions and 7 deletions

View File

@ -107,13 +107,25 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
ref: { x: 8.5, y: 5 }
});
createMarker('data-association-end', {
createMarker('association-start', {
element: svg.path('M 11 5 L 1 10 L 11 15'),
attrs: {
fill: 'none',
stroke: 'black',
strokeWidth: 1.5
},
ref: { x: 1, y: 10 },
scale: 0.5
});
createMarker('association-end', {
element: svg.path('M 1 5 L 11 10 L 1 15'),
attrs: {
fill: 'white',
stroke: 'black'
fill: 'none',
stroke: 'black',
strokeWidth: 1.5
},
ref: { x: 11, y: 10 },
ref: { x: 12, y: 10 },
scale: 0.5
});
@ -1080,23 +1092,33 @@ function BpmnRenderer(eventBus, styles, pathMap, priority) {
},
'bpmn:Association': function(p, element, attrs) {
var semantic = getSemantic(element);
attrs = assign({
strokeDasharray: '1,6',
strokeLinecap: 'round',
strokeLinejoin: 'round'
}, attrs || {});
// TODO(nre): style according to directed state
if (semantic.associationDirection === 'One' ||
semantic.associationDirection === 'Both') {
attrs.markerEnd = marker('association-end');
}
if (semantic.associationDirection === 'Both') {
attrs.markerStart = marker('association-start');
}
return drawLine(p, element.waypoints, attrs);
},
'bpmn:DataInputAssociation': function(p, element) {
return renderer('bpmn:Association')(p, element, {
markerEnd: marker('data-association-end')
markerEnd: marker('association-end')
});
},
'bpmn:DataOutputAssociation': function(p, element) {
return renderer('bpmn:Association')(p, element, {
markerEnd: marker('data-association-end')
markerEnd: marker('association-end')
});
},
'bpmn:MessageFlow': function(p, element) {

View File

@ -0,0 +1,55 @@
<?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" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
<bpmn:process id="Process_1" isExecutable="false">
<bpmn:task id="Task_0s7r08v">
<bpmn:outgoing>Association_None</bpmn:outgoing>
<bpmn:outgoing>Association_One</bpmn:outgoing>
<bpmn:outgoing>Association_Both</bpmn:outgoing>
</bpmn:task>
<bpmn:endEvent id="EndEvent_106rzzp">
<bpmn:incoming>SequenceFlow_064b5j6</bpmn:incoming>
<bpmn:incoming>SequenceFlow_0sdtitg</bpmn:incoming>
<bpmn:incoming>SequenceFlow_11iyafm</bpmn:incoming>
</bpmn:endEvent>
<bpmn:association id="Association_None" associationDirection="None" sourceRef="Task_0s7r08v" targetRef="EndEvent_106rzzp" />
<bpmn:association id="Association_One" associationDirection="One" sourceRef="Task_0s7r08v" targetRef="EndEvent_106rzzp" />
<bpmn:association id="Association_Both" associationDirection="Both" sourceRef="Task_0s7r08v" targetRef="EndEvent_106rzzp" />
</bpmn:process>
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
<bpmndi:BPMNShape id="Task_0s7r08v_di" bpmnElement="Task_0s7r08v">
<dc:Bounds x="316" y="161" width="100" height="80" />
</bpmndi:BPMNShape>
<bpmndi:BPMNShape id="EndEvent_106rzzp_di" bpmnElement="EndEvent_106rzzp">
<dc:Bounds x="565" y="291" width="36" height="36" />
<bpmndi:BPMNLabel>
<dc:Bounds x="538" y="327" width="90" height="20" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNShape>
<bpmndi:BPMNEdge id="Association_None_di" bpmnElement="Association_None">
<di:waypoint xsi:type="dc:Point" x="380" y="241" />
<di:waypoint xsi:type="dc:Point" x="406" y="315" />
<di:waypoint xsi:type="dc:Point" x="468" y="340" />
<di:waypoint xsi:type="dc:Point" x="566" y="314" />
<bpmndi:BPMNLabel>
<dc:Bounds x="444" y="255.5" width="90" height="20" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Association_One_di" bpmnElement="Association_One">
<di:waypoint xsi:type="dc:Point" x="416" y="209" />
<di:waypoint xsi:type="dc:Point" x="511" y="223" />
<di:waypoint xsi:type="dc:Point" x="572" y="296" />
<bpmndi:BPMNLabel>
<dc:Bounds x="444" y="255.5" width="90" height="20" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNEdge>
<bpmndi:BPMNEdge id="Association_Both_di" bpmnElement="Association_Both">
<di:waypoint xsi:type="dc:Point" x="414" y="233" />
<di:waypoint xsi:type="dc:Point" x="566" y="304" />
<bpmndi:BPMNLabel>
<dc:Bounds x="446" y="245" width="90" height="20" />
</bpmndi:BPMNLabel>
</bpmndi:BPMNEdge>
</bpmndi:BPMNPlane>
</bpmndi:BPMNDiagram>
</bpmn:definitions>

View File

@ -16,6 +16,12 @@ describe('draw - bpmn renderer', function() {
});
it('should render association markers', function(done) {
var xml = require('../../fixtures/bpmn/draw/associations.bpmn');
bootstrapViewer(xml)(done);
});
it('should render activity markers (combination)', function(done) {
var xml = require('../../fixtures/bpmn/draw/activity-markers-combination.bpmn');
bootstrapViewer(xml)(done);