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