I’m using bmpn-js/lib/Viewer ( which is exported as default ).
import BpmnViewer from 'bpmn-js';
I just need to display the diagrams with process progress( receiving as a separate request as an array of ids ), so i’m using bpmn-js-examples colors option 3, like this:
js
const bpmnView = new BpmnViewer({
height: '100%',
container: '#BPMView'
});
bpmnView.importXML(xml, err => {
// ...
const canvas = bpmnView.get('canvas');
const progressIdsArray = ['element1', 'element2', 'flow1']; // getting from separate request
progressIdsArray.forEach(key => canvas.addMarker(key, 'highlight'))
// ...
}
styles
.djs-element.highlight {
.djs-visual > :nth-child(1) {
stroke: $svg-highlight-stroke-color !important;
}
//&.djs-connection .djs-visual > path {
// marker-end: url(#sequenceflow-active) !important;
//}
}
And it works fine except for painting the arrow
I’m tried different solutions, like add custom marker to the defs tag
const svgSpecUrl = 'http://www.w3.org/2000/svg';
const setAttributes = (el, attrs) => Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key]));
const redTriangleMarker = document.createElementNS(svgSpecUrl, 'marker');
const redTriangleMarkerAttrs = {
id: "sequenceflow-active",
viewBox: "0 0 20 20",
refX: "11",
refY: "10",
markerWidth: "10",
markerHeight: "10",
orient: "auto"
};
setAttributes(redTriangleMarker, redTriangleMarkerAttrs);
const redTriangleMarkerPath = document.createElementNS(svgSpecUrl, 'marker');
const redTriangleMarkerPathAttrs = {
d: "M 1 5 L 11 10 L 1 15 Z",
style: "fill: red; stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1; stroke: red;"
};
setAttributes(redTriangleMarkerPath, redTriangleMarkerPathAttrs);
redTriangleMarker.appendChild(redTriangleMarkerPath);
const svgDefs = canvas.getContainer().getElementsByTagName('defs')[0];
if (!svgDefs) {
// TODO create defs
}
svgDefs.appendChild(redTriangleMarker);
but nothing work
how can i paint the arrow in red?