From d18089db0a4afb5b431c8ee6ef107cb7bf89fa28 Mon Sep 17 00:00:00 2001 From: jdotzki Date: Wed, 21 May 2014 13:51:59 +0200 Subject: [PATCH] feat(bpmnrenderer): add rendering of message marker on message flows The marker will be placed in the middle of the message flow. close #23 --- lib/draw/BpmnRenderer.js | 43 ++++++- lib/draw/PathMap.js | 5 +- test/fixtures/bpmn/render/message-marker.bpmn | 112 ++++++++++++++++++ test/spec/browser/draw/BpmnRendererSpec.js | 10 ++ 4 files changed, 163 insertions(+), 7 deletions(-) create mode 100644 test/fixtures/bpmn/render/message-marker.bpmn diff --git a/lib/draw/BpmnRenderer.js b/lib/draw/BpmnRenderer.js index c0948aca..7c0654ac 100644 --- a/lib/draw/BpmnRenderer.js +++ b/lib/draw/BpmnRenderer.js @@ -325,6 +325,14 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) { ); } + function createPathFromWaypoints(waypoints) { + var linePathData = 'm ' + waypoints[0].x + ',' + waypoints[0].y; + for (var i = 1; i < waypoints.length; i++) { + linePathData += 'L' + waypoints[i].x + ',' + waypoints[i].y + ' '; + } + return linePathData; + } + var handlers = { 'bpmn:Event': function(p, data) { var circle = drawCircle(p, data.width, data.height); @@ -879,7 +887,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) { } else { attachTaskMarkers(p, data, ['SubProcessMarker']); } - + return rect; }, 'bpmn:AdHocSubProcess': function(p, data) { @@ -1109,9 +1117,9 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) { (source.$type === 'bpmn:InclusiveGateway' || source.$type === 'bpmn:ExclusiveGateway')) { - if(!!source.default - && source.default.$type === 'bpmn:SequenceFlow' - && source.default.id === data.id) { + if(!!source.default && + source.default.$type === 'bpmn:SequenceFlow' && + source.default.id === data.id) { polyline.attr({ 'marker-start': marker('conditional-default-flow-marker') }); @@ -1151,9 +1159,32 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) { }); }, 'bpmn:MessageFlow': function(p, data) { - var polyline = drawLine(p, data.waypoints); - return polyline.attr({ + var flowDi = bpmnRegistry.getDi(data); + + var linePathData = createPathFromWaypoints(data.waypoints); + var flowPath = drawPath(p, linePathData); + if(!!flowDi.messageVisibleKind) { + var midPoint = flowPath.getPointAtLength(flowPath.getTotalLength() / 2); + + var markerPathData = pathMap.getScaledPath('MESSAGE_FLOW_MARKER', { + abspos: { + x: midPoint.x, + y: midPoint.y + } + }); + var messageMarkerPath = drawPath(p, markerPathData); + var fill = flowDi.messageVisibleKind === 'initiating' ? 'White' : '#888'; + var stroke = flowDi.messageVisibleKind === 'initiating' ? 'Black' : 'White'; + + messageMarkerPath.attr({ + 'stroke-width': 1, + 'fill': fill, + 'stroke': stroke + }); + } + + return flowPath.attr({ 'marker-end': marker('messageflow-end'), 'marker-start': marker('messageflow-start'), 'stroke-dasharray': '3', diff --git a/lib/draw/PathMap.js b/lib/draw/PathMap.js index 39678e09..f288ca9c 100644 --- a/lib/draw/PathMap.js +++ b/lib/draw/PathMap.js @@ -301,7 +301,7 @@ function PathMap(Snap) { '-1.516,1.253 -1.882,2.19 -0.37000002,0.95 -0.17,2.01 -0.166,2.979 0.004,0.718 -0.27300002,1.345 ' + '-0.055,2.063 0.629,2.087 2.425,3.312 4.859,3.318 4.6179995,0.014 9.2379995,-0.139 13.8569995,-0.158 ' + '0.755,-0.004 1.171,-0.301 1.182,-1.033 0.012,-0.754 -0.423,-0.969 -1.183,-0.973 -1.778,-0.01 ' + - '-5.824,-0.004 -6.04,-0.004 10e-4,-0.084 0.003,-0.586 10e-4,-0.67 z', + '-5.824,-0.004 -6.04,-0.004 10e-4,-0.084 0.003,-0.586 10e-4,-0.67 z' }, 'TASK_TYPE_INSTANTIATING_SEND': { d: 'm {mx},{my} l 0,8.4 l 12.6,0 l 0,-8.4 z l 6.3,3.6 l 6.3,-3.6' @@ -335,6 +335,9 @@ function PathMap(Snap) { d: 'm {mx},{my} 0,12 20,0 0,-12 z' + 'm 0,8 l 20,0 ' + 'm -13,-4 l 0,8' + }, + 'MESSAGE_FLOW_MARKER': { + d: 'm {mx},{my} m -10.5 ,-7 l 0,14 l 21,0 l 0,-14 z l 10.5,6 l 10.5,-6' } }; diff --git a/test/fixtures/bpmn/render/message-marker.bpmn b/test/fixtures/bpmn/render/message-marker.bpmn new file mode 100644 index 00000000..67dec0f2 --- /dev/null +++ b/test/fixtures/bpmn/render/message-marker.bpmn @@ -0,0 +1,112 @@ + + + + + + + + + + + + + + + + + + + + + + + + Non Initiating + + + Normal message flow + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/test/spec/browser/draw/BpmnRendererSpec.js b/test/spec/browser/draw/BpmnRendererSpec.js index 44fedaf2..3cdc9d8a 100644 --- a/test/spec/browser/draw/BpmnRendererSpec.js +++ b/test/spec/browser/draw/BpmnRendererSpec.js @@ -16,6 +16,16 @@ describe('draw/BpmnRenderer', function() { document.getElementsByTagName('body')[0].appendChild(container); }); + it('should render message flow message marker', function(done) { + + var xml = fs.readFileSync(__dirname + '/../../../fixtures/bpmn/render/message-marker.bpmn', 'utf8'); + + var renderer = new Viewer(container); + + renderer.importXML(xml, function(err) { + done(err); + }); + }); it('should render pool collection marker', function(done) {