Viewer Flow(connection) styles changes

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
Screenshot_1

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?

Wow, i just found a mistake in my solution “add custom marker to the defs tag”. Need to change this

const redTriangleMarkerPath = document.createElementNS(svgSpecUrl, 'marker');

to this

const redTriangleMarkerPath = document.createElementNS(svgSpecUrl, 'path');

and uncomment the styles.

But is this a good solution or is there a better?

When using the modeler you can set an element’s color through

modeling.setColor(myElement, { fill: 'red', stroke: 'green' });

The viewer doesn’t have this API but you can achieve the same using low-level APIs. Have a look at this example: https://github.com/bpmn-io/bpmn-js-token-simulation/blob/master/lib/features/preserve-element-colors/PreserveElementColors.js#L52

1 Like

Thank you so much. I like your solution more

1 Like