How to set different colors to each flow type?

[Pusteblume]

Hi, I want to change the colour (stroke) of connections between two elements for each different connection type.
For example, I want the Sequence Flow Connection line to be red and the Default Flow Connection Line to be blue.

I tried overriding the DrawConnection method, but it doesn’t get called.

Is there a better method or have I done something wrong?

P.S. I wanna define the colors on Application initialization and not draw programmatically a line with a specific colour (stroke).

[philippfromme]

Are these colors supposed to be exported as part of the XML as well?

[Pusteblume]

The colors must be shown inside the XML, so yes

[philippfromme]

Then you’ll have to set colors on newly created connections (Example: Assign Color Example - CodeSandbox) and also on existing connections during import and export.

[Pusteblume]

export default class MyCommandInterceptor extends CommandInterceptor {
	constructor(eventBus, modeling) {
		super(eventBus);

		this.postExecuted(["connection.create"], ({ context }) => {
			const { connection } = context;

			if (is(connection, "bpmn:SequenceFlow")) {
				modeling.setColor(connection, { stroke: "red" });
			} else if (is(connection, "bpmn:MessageFlow")) {
				modeling.setColor(connection, { stroke: "yellow" });
			} else {
				modeling.setColor(connection, {stroke: "green"});
			}
		});
	}
}

MyCommandInterceptor.$inject = ["eventBus", "modeling"];

I seems the type of the flow doesn’t change as my connections are always red. Do you know how to solve this?

[philippfromme]

Have you tried using different types of connections?

[Pusteblume]

Yes, I have. I have tried three different types, namely the Sequence Flow, Default Flow and Conditional Flow as seen in the picture below, which are all red.

Furthermore, as you can see in the picture of the XML file, all connections have the same BPMN type: sequenceFlow.

How can I differentiate between these three and maybe future custom connection types?

PS: I can’t use the same connection you used for the blue connection as I have a custom palette and removed most of the native BPMN elements.

[philippfromme]

I updated the example to set the color based on these properties: Assign Color Example - CodeSandbox

[Pusteblume]

Thank you, this worked!