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): fix cross browser/svg viewer marker 

This hacks around marker behaviors in Safari+PhantomJS. By setting the
stroke dash array to bigger than the path length, the line is drawn
solid.

Related to #68
This commit is contained in:
Nico Rehwaldt 2014-06-02 15:37:14 +02:00
parent e50ca1bfac
commit bd70eced41
1 changed files with 77 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
lib/draw/BpmnRenderer.js
View File

@ -46,99 +46,88 @@ function BpmnRenderer(events, styles, bpmnRegistry, pathMap) {
function initMarkers(paper) {
addMarker('sequenceflow-end',
paper
.path('M 1 5 L 11 10 L 1 15 Z')
.attr({
fill: 'black',
strokeWidth: 1,
strokeLinecap: 'round',
strokeDasharray: 0
})
.marker(0, 0, 20, 20, 11, 10)
.attr({
markerWidth: 10,
markerHeight: 10
}));
function createMarker(id, options) {
var attrs = _.extend({
fill: 'black',
strokeWidth: 1,
strokeLinecap: 'round',
strokeDasharray: 'none'
}, options.attrs);
addMarker('messageflow-start',
paper
.circle(6, 6, 5)
.attr({
fill: 'white',
stroke: 'black',
strokeWidth: 1,
strokeDasharray: 0
})
.marker(0, 0, 20, 20, 6, 6)
.attr({
markerWidth: 20,
markerHeight: 20
}));
var ref = options.ref || { x: 0, y: 0 };
addMarker('messageflow-end',
paper
.path('M 1 5 L 11 10 L 1 15 Z')
.attr({
stroke: 'black',
fill: 'white',
strokeWidth: 1,
strokeLinecap: 'round',
strokeDasharray: 0
})
.marker(0, 0, 20, 20, 11, 10)
.attr({
markerWidth: 20,
markerHeight: 20
}));
var scale = options.scale || 1;
addMarker('data-association-end',
paper
.path('M 1 5 L 11 10 L 1 15')
.attr({
fill: 'white',
stroke: 'black',
strokeWidth: 1,
strokeLinecap: 'round',
strokeDasharray: 0
})
.marker(0, 0, 20, 20, 11, 10)
.attr({
markerWidth: 10,
markerHeight: 10
}));
// fix for safari / chrome / firefox bug not correctly
// resetting stroke dash array
if (attrs.strokeDasharray === 'none') {
attrs.strokeDasharray = [10000, 1];
}
addMarker('conditional-flow-marker',
paper
.path('M 0 10 L 8 6 L 16 10 L 8 14 Z')
.attr({
fill: 'white',
stroke: 'black',
strokeWidth: 1,
strokeLinecap: 'round',
strokeDasharray: 0
})
.marker(0, 0, 20, 20, -1, 10)
.attr({
markerWidth: 10,
markerHeight: 10
}));
var marker = options.element
.attr(attrs)
.marker(0, 0, 20, 20, ref.x, ref.y)
.attr({
markerWidth: 20 * scale,
markerHeight: 20 * scale
});
addMarker('conditional-default-flow-marker',
paper
.path('M 1 4 L 5 16')
.attr({
fill: 'black',
stroke: 'black',
strokeWidth: 1,
strokeLinecap: 'round',
strokeDasharray: 0
})
.marker(0, 0, 20, 20, -5, 10)
.attr({
markerWidth: 10,
markerHeight: 10
}));
return addMarker(id, marker);
}
createMarker('sequenceflow-end', {
element: paper.path('M 1 5 L 11 10 L 1 15 Z'),
ref: { x: 11, y: 10 },
scale: 0.5
});
createMarker('messageflow-start', {
element: paper.circle(6, 6, 5),
attrs: {
fill: 'white',
stroke: 'black'
},
ref: { x: 6, y: 6 }
});
createMarker('messageflow-end', {
element: paper.path('M 1 5 L 11 10 L 1 15 Z'),
attrs: {
fill: 'white',
stroke: 'black'
},
ref: { x: 11, y: 10 }
});
createMarker('data-association-end', {
element: paper.path('M 1 5 L 11 10 L 1 15'),
attrs: {
fill: 'white',
stroke: 'black'
},
ref: { x: 11, y: 10 },
scale: 0.5
});
createMarker('conditional-flow-marker', {
element: paper.path('M 0 10 L 8 6 L 16 10 L 8 14 Z'),
attrs: {
fill: 'white',
stroke: 'black'
},
ref: { x: -1, y: 10 },
scale: 0.5
});
createMarker('conditional-default-flow-marker', {
element: paper.path('M 1 4 L 5 16'),
attrs: {
stroke: 'black'
},
ref: { x: -5, y: 10 },
scale: 0.5
});
}
function computeStyle(custom, traits, defaultStyles) {