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

fix(BpmnRenderer): adjust sequenceFlow strokeWidth + cleanup 

Closes #70
This commit is contained in:
Nico Rehwaldt 2014-05-27 18:48:38 +02:00
parent 4bcb8ff468
commit ba94724225
1 changed files with 89 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
lib/draw/BpmnRenderer.js
View File

@ -55,9 +55,8 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
}) })
.marker(0, 0, 10, 10, 10, 5) .marker(0, 0, 10, 10, 10, 5)
.attr({ .attr({
markerUnits: 'strokeWidth', markerWidth: 6,
markerWidth: 11, markerHeight: 6,
markerHeight: 11,
orient: 'auto', orient: 'auto',
overflow: 'visible' overflow: 'visible'
})); }));
@ -71,11 +70,10 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
strokeWidth: 1, strokeWidth: 1,
strokeDasharray: '1,0' strokeDasharray: '1,0'
}) })
.marker(0, 0, 10, 10, 4, 4) .marker(0, 0, 12, 12, 6, 6)
.attr({ .attr({
markerUnits: 'strokeWidth', markerWidth: 10,
markerWidth: 14, markerHeight: 10,
markerHeight: 14,
orient: 'auto', orient: 'auto',
overflow: 'visible' overflow: 'visible'
})); }));
@ -90,39 +88,25 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
strokeLinecap: 'round', strokeLinecap: 'round',
strokeDasharray: '1,0' strokeDasharray: '1,0'
}) })
.marker(0, 0, 10, 10, 11, 5) .marker(0, 0, 12, 12, 12, 6)
.attr({ .attr({
markerUnits: 'strokeWidth', markerWidth: 10,
markerWidth: 12, markerHeight: 10,
markerHeight: 12,
orient: 'auto', orient: 'auto',
overflow: 'visible' overflow: 'visible'
})); }));
addMarker('directed-association-end',
paper
.path('M 0 0 L 10 5 L 0 10 Z')
.attr('class', 'djs-connection-marker')
.marker(0, 0, 10, 10, 10, 5)
.attr({
stroke: 'black',
fill: 'none',
strokeWidth: 1.5,
strokeLinecap: 'round',
strokeDasharray: '1,0'
}));
addMarker('data-association-end', addMarker('data-association-end',
paper paper
.path('M 0 0 L 10 5 L 0 10') .path('M 0 0 L 10 5 L 0 10')
.attr({ .attr({
fill: 'white', fill: 'white',
stroke: 'Black' stroke: 'black'
}) })
.marker(0, 0, 10, 10, 10, 5) .marker(0, 0, 10, 10, 10, 5)
.attr({ .attr({
markerUnits: 'strokeWidth', markerWidth: 8,
markerWidth: 16, markerHeight: 6,
markerHeight: 9.6,
orient: 'auto', orient: 'auto',
overflow: 'visible', overflow: 'visible',
strokeWidth: 1, strokeWidth: 1,
@ -133,40 +117,35 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
paper paper
.path('M 0,0 7.089123,3.1832974 0.00383366,6.1129516 -7.0814464,3.1832966 z') .path('M 0,0 7.089123,3.1832974 0.00383366,6.1129516 -7.0814464,3.1832966 z')
.attr({ .attr({
fill: 'White', fill: 'white',
stroke: 'Black' stroke: 'black'
}) })
.marker(0, 0, 15, 15, 0, 0) .marker(0, 0, 15, 15, -8, 3)
.attr({ .attr({
markerUnits: 'strokeWidth', markerWidth: 10,
markerWidth: 12, markerHeight: 10,
markerHeight: 12,
orient: 'auto', orient: 'auto',
overflow: 'visible', overflow: 'visible',
strokeWidth: 1, strokeWidth: 1,
strokeDasharray: '1,0', strokeDasharray: '1,0'
refX: -8,
refY: 3.15
})); }));
addMarker('conditional-default-flow-marker', addMarker('conditional-default-flow-marker',
paper paper
.path('M 3,0 10,11') .path('M 3,0 10,11')
.attr({ .attr({
fill: 'Black', fill: 'black',
stroke: 'Black' stroke: 'black'
}) })
.marker(0, 0, 15, 15, 0, 0) .marker(0, 0, 10, 10, -6, 5.5)
.attr({ .attr({
markerUnits: 'strokeWidth', markerWidth: 7,
markerWidth: 14, markerHeight: 7,
markerHeight: 13,
orient: 'auto', orient: 'auto',
overflow: 'visible', overflow: 'visible',
strokeWidth: 1, strokeWidth: 1,
strokeDasharray: '1,0', strokeDasharray: '1,0',
refX: -4, strokeLinecap: 'round'
refY: 5.5
})); }));
} }
@ -189,9 +168,9 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
offset = offset || 0; offset = offset || 0;
attrs = computeStyle(attrs, { attrs = computeStyle(attrs, {
stroke: 'Black', stroke: 'black',
strokeWidth: 1, strokeWidth: 2,
fill: 'White' fill: 'white'
}); });
var cx = width / 2, var cx = width / 2,
@ -210,9 +189,9 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
offset = offset || 0; offset = offset || 0;
attrs = computeStyle(attrs, { attrs = computeStyle(attrs, {
stroke: 'Black', stroke: 'black',
strokeWidth: 2, strokeWidth: 2,
fill: 'White' fill: 'white'
}); });
return p.rect(offset, offset, width - offset * 2, height - offset * 2, r).attr(attrs); return p.rect(offset, offset, width - offset * 2, height - offset * 2, r).attr(attrs);
@ -226,9 +205,9 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var points = [x_2, 0, width, y_2, x_2, height, 0, y_2 ]; var points = [x_2, 0, width, y_2, x_2, height, 0, y_2 ];
attrs = computeStyle(attrs, { attrs = computeStyle(attrs, {
stroke: 'Black', stroke: 'black',
strokeWidth: 2, strokeWidth: 2,
fill: 'White' fill: 'white'
}); });
return p.polygon(points).attr(attrs); return p.polygon(points).attr(attrs);
@ -238,9 +217,9 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var points = flattenPoints(waypoints); var points = flattenPoints(waypoints);
attrs = computeStyle(attrs, [ 'no-fill' ], { attrs = computeStyle(attrs, [ 'no-fill' ], {
stroke: 'Black', stroke: 'black',
strokeWidth: 2, strokeWidth: 2,
fill: 'White' fill: 'white'
}); });
return p.polyline(points).attr(attrs); return p.polyline(points).attr(attrs);
@ -249,8 +228,8 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
function drawPath(p, d, attrs) { function drawPath(p, d, attrs) {
attrs = computeStyle(attrs, [ 'no-fill' ], { attrs = computeStyle(attrs, [ 'no-fill' ], {
strokeWidth: 1, strokeWidth: 2,
stroke: 'Black' stroke: 'black'
}); });
return p.path(d).attr(attrs); return p.path(d).attr(attrs);
@ -390,8 +369,8 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
} }
}); });
var fill = isThrowing ? 'Black' : 'None'; var fill = isThrowing ? 'black' : 'none';
var stroke = isThrowing ? 'White' : 'Black'; var stroke = isThrowing ? 'white' : 'black';
var messagePath = drawPath(p, pathData, { var messagePath = drawPath(p, pathData, {
strokeWidth: 1, strokeWidth: 1,
@ -436,7 +415,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
} }
}); });
var fill = isThrowing ? 'Black' : 'None'; var fill = isThrowing ? 'black' : 'none';
return drawPath(p, pathData, { return drawPath(p, pathData, {
strokeWidth: 1, strokeWidth: 1,
@ -487,7 +466,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
} }
}); });
var fill = isThrowing ? 'Black' : 'None'; var fill = isThrowing ? 'black' : 'none';
return drawPath(p, pathData, { return drawPath(p, pathData, {
strokeWidth: 1, strokeWidth: 1,
@ -506,7 +485,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
} }
}); });
var fill = isThrowing ? 'Black' : 'None'; var fill = isThrowing ? 'black' : 'none';
return drawPath(p, pathData, { return drawPath(p, pathData, {
strokeWidth: 1, strokeWidth: 1,
@ -525,7 +504,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
} }
}); });
var fill = isThrowing ? 'Black' : 'None'; var fill = isThrowing ? 'black' : 'none';
return drawPath(p, pathData, { return drawPath(p, pathData, {
strokeWidth: 1, strokeWidth: 1,
@ -544,7 +523,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
} }
}); });
var fill = isThrowing ? 'Black' : 'None'; var fill = isThrowing ? 'black' : 'none';
return drawPath(p, pathData, { return drawPath(p, pathData, {
strokeWidth: 1, strokeWidth: 1,
@ -563,7 +542,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
} }
}); });
var fill = isThrowing ? 'Black' : 'None'; var fill = isThrowing ? 'black' : 'none';
return drawPath(p, pathData, { return drawPath(p, pathData, {
strokeWidth: 1, strokeWidth: 1,
@ -598,7 +577,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
'bpmn:TerminateEventDefinition': function(p, data) { 'bpmn:TerminateEventDefinition': function(p, data) {
var circle = drawCircle(p, data.width, data.height, 8, { var circle = drawCircle(p, data.width, data.height, 8, {
strokeWidth: 4, strokeWidth: 4,
fill: 'Black' fill: 'black'
}); });
return circle; return circle;
@ -636,7 +615,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var servicePathBG = drawPath(p, pathDataBG, { var servicePathBG = drawPath(p, pathDataBG, {
strokeWidth: 1, strokeWidth: 1,
fill: 'None' fill: 'none'
}); });
var fillPathData = pathMap.getScaledPath('TASK_TYPE_SERVICE_FILL', { var fillPathData = pathMap.getScaledPath('TASK_TYPE_SERVICE_FILL', {
@ -649,7 +628,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var serviceFillPath = drawPath(p, fillPathData, { var serviceFillPath = drawPath(p, fillPathData, {
strokeWidth: 0, strokeWidth: 0,
stroke: 'none', stroke: 'none',
fill: 'White' fill: 'white'
}); });
var pathData = pathMap.getScaledPath('TASK_TYPE_SERVICE', { var pathData = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
@ -661,7 +640,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var servicePath = drawPath(p, pathData, { var servicePath = drawPath(p, pathData, {
strokeWidth: 1, strokeWidth: 1,
fill: 'White' fill: 'white'
}); });
return task; return task;
@ -681,7 +660,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var userPath = drawPath(p, pathData, { var userPath = drawPath(p, pathData, {
strokeWidth: 0.5, strokeWidth: 0.5,
fill: 'None' fill: 'none'
}); });
var pathData2 = pathMap.getScaledPath('TASK_TYPE_USER_2', { var pathData2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {
@ -693,7 +672,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var userPath2 = drawPath(p, pathData2, { var userPath2 = drawPath(p, pathData2, {
strokeWidth: 0.5, strokeWidth: 0.5,
fill: 'None' fill: 'none'
}); });
var pathData3 = pathMap.getScaledPath('TASK_TYPE_USER_3', { var pathData3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {
@ -705,7 +684,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var userPath3 = drawPath(p, pathData3, { var userPath3 = drawPath(p, pathData3, {
strokeWidth: 0.5, strokeWidth: 0.5,
fill: 'Black' fill: 'black'
}); });
return task; return task;
@ -722,8 +701,8 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var userPath = drawPath(p, pathData, { var userPath = drawPath(p, pathData, {
strokeWidth: 0.25, strokeWidth: 0.25,
fill: 'None', fill: 'none',
stroke: 'Black' stroke: 'black'
}); });
return task; return task;
@ -744,8 +723,8 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var sendPath = drawPath(p, pathData, { var sendPath = drawPath(p, pathData, {
strokeWidth: 1, strokeWidth: 1,
fill: 'Black', fill: 'black',
stroke: 'White' stroke: 'white'
}); });
return task; return task;
@ -899,7 +878,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
}, },
'bpmn:Lane': function(p, data) { 'bpmn:Lane': function(p, data) {
var rect = drawRect(p, data.width, data.height, 0, { var rect = drawRect(p, data.width, data.height, 0, {
fill: 'None' fill: 'none'
}); });
var semantic = getSemantic(data); var semantic = getSemantic(data);
@ -916,7 +895,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var circle = drawCircle(p, data.width, data.height, data.height * 0.24, { var circle = drawCircle(p, data.width, data.height, data.height * 0.24, {
strokeWidth: 2.5, strokeWidth: 2.5,
fill: 'None' fill: 'none'
}); });
return diamond; return diamond;
@ -937,7 +916,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var exclusivePath = drawPath(p, pathData, { var exclusivePath = drawPath(p, pathData, {
strokeWidth: 1, strokeWidth: 1,
fill: 'Black' fill: 'black'
}); });
return diamond; return diamond;
@ -958,7 +937,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var complexPath = drawPath(p, pathData, { var complexPath = drawPath(p, pathData, {
strokeWidth: 1, strokeWidth: 1,
fill: 'Black' fill: 'black'
}); });
return diamond; return diamond;
@ -979,7 +958,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var parallelPath = drawPath(p, pathData, { var parallelPath = drawPath(p, pathData, {
strokeWidth: 1, strokeWidth: 1,
fill: 'Black' fill: 'black'
}); });
return diamond; return diamond;
@ -992,7 +971,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var outerCircle = drawCircle(p, data.width, data.height, data.height * 0.20, { var outerCircle = drawCircle(p, data.width, data.height, data.height * 0.20, {
strokeWidth: 1, strokeWidth: 1,
fill: 'None' fill: 'none'
}); });
var type = semantic.eventGatewayType; var type = semantic.eventGatewayType;
@ -1013,7 +992,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var eventPath = drawPath(p, pathData, { var eventPath = drawPath(p, pathData, {
strokeWidth: 2, strokeWidth: 2,
fill: 'None' fill: 'none'
}); });
} }
@ -1033,7 +1012,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var parallelPath = drawPath(p, pathData); var parallelPath = drawPath(p, pathData);
parallelPath.attr({ parallelPath.attr({
strokeWidth: 1, strokeWidth: 1,
fill: 'None' fill: 'none'
}); });
} else if((type === 'Exclusive') && instantiate) { } else if((type === 'Exclusive') && instantiate) {
@ -1043,7 +1022,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var innerCircle = drawCircle(p, data.width, data.height, data.height * 0.26); var innerCircle = drawCircle(p, data.width, data.height, data.height * 0.26);
innerCircle.attr({ innerCircle.attr({
strokeWidth: 1, strokeWidth: 1,
fill: 'None' fill: 'none'
}); });
drawEvent(); drawEvent();
} }
@ -1083,28 +1062,21 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
return path; return path;
}, },
'bpmn:Association': function(p, data) { 'bpmn:Association': function(p, data) {
var polyline = drawLine(p, data.waypoints);
// TODO(nre): style according to directed state // TODO(nre): style according to directed state
return polyline.attr({ return drawLine(p, data.waypoints, {
strokeDasharray: '3,3' strokeDasharray: '3,3'
}); });
}, },
'bpmn:DataInputAssociation': function(p, data) { 'bpmn:DataInputAssociation': function(p, data) {
var polyline = drawLine(p, data.waypoints); return drawLine(p, data.waypoints, {
strokeDasharray: '2,4',
return polyline.attr({
strokeDasharray: '1,4',
strokeWidth: '1',
markerEnd: marker('data-association-end') markerEnd: marker('data-association-end')
}); });
}, },
'bpmn:DataOutputAssociation': function(p, data) { 'bpmn:DataOutputAssociation': function(p, data) {
var polyline = drawLine(p, data.waypoints); return drawLine(p, data.waypoints, {
strokeDasharray: '2,4',
return polyline.attr({
strokeDasharray: '1,4',
strokeWidth: '1',
markerEnd: marker('data-association-end') markerEnd: marker('data-association-end')
}); });
}, },
@ -1116,8 +1088,9 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var path = drawPath(p, pathData, { var path = drawPath(p, pathData, {
markerEnd: marker('messageflow-end'), markerEnd: marker('messageflow-end'),
markerStart: marker('messageflow-start'), markerStart: marker('messageflow-start'),
strokeDasharray: '3', strokeDasharray: '10',
strokeWidth : 1 strokeLinecap: 'round',
strokeWidth: 1
}); });
if (!!di.messageVisibleKind) { if (!!di.messageVisibleKind) {
@ -1133,11 +1106,11 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var messageAttrs = { strokeWidth: 1 }; var messageAttrs = { strokeWidth: 1 };
if (di.messageVisibleKind === 'initiating') { if (di.messageVisibleKind === 'initiating') {
messageAttrs.fill = 'White'; messageAttrs.fill = 'white';
messageAttrs.stroke = 'Black'; messageAttrs.stroke = 'black';
} else { } else {
messageAttrs.fill = '#888'; messageAttrs.fill = '#888';
messageAttrs.stroke = 'White'; messageAttrs.stroke = 'white';
} }
drawPath(p, markerPathData, messageAttrs); drawPath(p, markerPathData, messageAttrs);
@ -1189,7 +1162,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
// arrow // arrow
var dataInput = drawPath(p, arrowPathData, { var dataInput = drawPath(p, arrowPathData, {
strokeWidth: 1, strokeWidth: 1,
fill: 'Black' fill: 'black'
}); });
return dataObject; return dataObject;
@ -1207,8 +1180,8 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
}); });
var dataStore = drawPath(p, DATA_STORE_PATH, { var dataStore = drawPath(p, DATA_STORE_PATH, {
strokeWidth: 1, strokeWidth: 2,
fill: 'Black', fill: 'black',
strokeMiterlimit: 4, strokeMiterlimit: 4,
'stroke-linejoin': 'miter', 'stroke-linejoin': 'miter',
strokeLinecap: 'butt', strokeLinecap: 'butt',
@ -1225,8 +1198,15 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
var semantic = getSemantic(data), var semantic = getSemantic(data),
cancel = semantic.cancelActivity; cancel = semantic.cancelActivity;
var outer = renderer('bpmn:Event')(p, data, cancel ? null : { strokeDasharray: '4' }); var outer = renderer('bpmn:Event')(p, data, cancel ? null : {
var inner = drawCircle(p, data.width, data.height, INNER_OUTER_DIST, cancel ? null : { strokeDasharray: '5' }); strokeLinecap: 'round',
strokeDasharray: '7,6'
});
var inner = drawCircle(p, data.width, data.height, INNER_OUTER_DIST, cancel ? null : {
strokeLinecap: 'round',
strokeDasharray: '6'
});
renderEventContent(data, p); renderEventContent(data, p);
@ -1236,7 +1216,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
return drawRect(p, data.width, data.height, TASK_BORDER_RADIUS, { return drawRect(p, data.width, data.height, TASK_BORDER_RADIUS, {
strokeWidth: 1, strokeWidth: 1,
strokeDasharray: '8,3,1,3', strokeDasharray: '8,3,1,3',
fill: 'None', fill: 'none',
pointerEvents: 'none' pointerEvents: 'none'
}); });
}, },
@ -1332,7 +1312,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
my: (data.height - 13) / data.height my: (data.height - 13) / data.height
} }
}); });
drawPath(p, compensationPath); drawPath(p, compensationPath, { strokeWidth: 1 });
}, },
'LoopMarker': function(p, data, position) { 'LoopMarker': function(p, data, position) {
var loopPath = pathMap.getScaledPath('MARKER_LOOP', { var loopPath = pathMap.getScaledPath('MARKER_LOOP', {
@ -1348,7 +1328,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
drawPath(p, loopPath, { drawPath(p, loopPath, {
strokeWidth: 1, strokeWidth: 1,
fill: 'None', fill: 'none',
strokeLinecap: 'round', strokeLinecap: 'round',
strokeMiterlimit: 0.5 strokeMiterlimit: 0.5
}); });
@ -1367,7 +1347,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
drawPath(p, loopPath, { drawPath(p, loopPath, {
strokeWidth: 1, strokeWidth: 1,
fill: 'Black' fill: 'black'
}); });
} }
}; };