fix(bpmnrenderer): conditional flow marker
Sequence flows are rendered as a <path> instead as <polyline> so that the start and end markers have the correct orientation in Gecko based browsers.
This commit is contained in:
parent
4b135fd9e7
commit
1342c1aca0
|
@ -53,8 +53,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',
|
markerUnits: 'strokeWidth',
|
||||||
markerWidth: 10,
|
markerWidth: 11,
|
||||||
markerHeight: 6,
|
markerHeight: 11,
|
||||||
orient: 'auto',
|
orient: 'auto',
|
||||||
overflow: 'visible'
|
overflow: 'visible'
|
||||||
}));
|
}));
|
||||||
|
@ -136,8 +136,8 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
|
||||||
.marker(0, 0, 15, 15, 0, 0)
|
.marker(0, 0, 15, 15, 0, 0)
|
||||||
.attr({
|
.attr({
|
||||||
markerUnits: 'strokeWidth',
|
markerUnits: 'strokeWidth',
|
||||||
markerWidth: 14.296,
|
markerWidth: 12,
|
||||||
markerHeight: 7.238,
|
markerHeight: 12,
|
||||||
orient: 'auto',
|
orient: 'auto',
|
||||||
overflow: 'visible',
|
overflow: 'visible',
|
||||||
'stroke-width': 1,
|
'stroke-width': 1,
|
||||||
|
@ -156,8 +156,8 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
|
||||||
.marker(0, 0, 15, 15, 0, 0)
|
.marker(0, 0, 15, 15, 0, 0)
|
||||||
.attr({
|
.attr({
|
||||||
markerUnits: 'strokeWidth',
|
markerUnits: 'strokeWidth',
|
||||||
markerWidth: 14.296,
|
markerWidth: 14,
|
||||||
markerHeight: 7.238,
|
markerHeight: 13,
|
||||||
orient: 'auto',
|
orient: 'auto',
|
||||||
overflow: 'visible',
|
overflow: 'visible',
|
||||||
'stroke-width': 1,
|
'stroke-width': 1,
|
||||||
|
@ -333,9 +333,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
|
||||||
|
|
||||||
var handlers = {
|
var handlers = {
|
||||||
'bpmn:Event': function(p, data) {
|
'bpmn:Event': function(p, data) {
|
||||||
var circle = drawCircle(p, data.width, data.height);
|
return drawCircle(p, data.width, data.height);
|
||||||
|
|
||||||
return circle;
|
|
||||||
},
|
},
|
||||||
'bpmn:StartEvent': function(p, data) {
|
'bpmn:StartEvent': function(p, data) {
|
||||||
var circle = renderer('bpmn:Event')(p, data);
|
var circle = renderer('bpmn:Event')(p, data);
|
||||||
|
@ -637,9 +635,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
|
||||||
'bpmn:IntermediateThrowEvent': as('bpmn:IntermediateEvent'),
|
'bpmn:IntermediateThrowEvent': as('bpmn:IntermediateEvent'),
|
||||||
|
|
||||||
'bpmn:Activity': function(p, data) {
|
'bpmn:Activity': function(p, data) {
|
||||||
var rect = drawRect(p, data.width, data.height, TASK_BORDER_RADIUS);
|
return drawRect(p, data.width, data.height, TASK_BORDER_RADIUS);
|
||||||
|
|
||||||
return rect;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
'bpmn:Task': function(p, data) {
|
'bpmn:Task': function(p, data) {
|
||||||
|
@ -889,9 +885,7 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
|
||||||
return rect;
|
return rect;
|
||||||
},
|
},
|
||||||
'bpmn:AdHocSubProcess': function(p, data) {
|
'bpmn:AdHocSubProcess': function(p, data) {
|
||||||
var process = renderer('bpmn:SubProcess')(p, data);
|
return renderer('bpmn:SubProcess')(p, data);
|
||||||
|
|
||||||
return process;
|
|
||||||
},
|
},
|
||||||
'bpmn:Transaction': function(p, data) {
|
'bpmn:Transaction': function(p, data) {
|
||||||
var outer = renderer('bpmn:SubProcess')(p, data);
|
var outer = renderer('bpmn:SubProcess')(p, data);
|
||||||
|
@ -1098,13 +1092,14 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
|
||||||
return diamond;
|
return diamond;
|
||||||
},
|
},
|
||||||
'bpmn:SequenceFlow': function(p, data) {
|
'bpmn:SequenceFlow': function(p, data) {
|
||||||
var polyline = drawLine(p, data.waypoints);
|
var linePathData = createPathFromWaypoints(data.waypoints);
|
||||||
|
var flowPath = drawPath(p, linePathData);
|
||||||
|
|
||||||
var sequence = bpmnRegistry.getSemantic(data.id);
|
var sequence = bpmnRegistry.getSemantic(data.id);
|
||||||
|
|
||||||
// Conditional Flow Marker
|
// Conditional Flow Marker
|
||||||
if(!!sequence.conditionExpression) {
|
if(!!sequence.conditionExpression) {
|
||||||
polyline.attr({
|
flowPath.attr({
|
||||||
'marker-start': marker('conditional-flow-marker')
|
'marker-start': marker('conditional-flow-marker')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -1120,14 +1115,14 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
|
||||||
if(!!source.default &&
|
if(!!source.default &&
|
||||||
source.default.$type === 'bpmn:SequenceFlow' &&
|
source.default.$type === 'bpmn:SequenceFlow' &&
|
||||||
source.default.id === data.id) {
|
source.default.id === data.id) {
|
||||||
polyline.attr({
|
flowPath.attr({
|
||||||
'marker-start': marker('conditional-default-flow-marker')
|
'marker-start': marker('conditional-default-flow-marker')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return polyline.attr({
|
return flowPath.attr({
|
||||||
'marker-end': marker('sequenceflow-end')
|
'marker-end': marker('sequenceflow-end')
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue