Change replace menu of connections

Developers
1

Hello,

I want to change the Replace Menu if it’s called like that.
ReplaceMenu

I want to have a custom icon and name representing the custom connection.
ReplaceMenu

How can I do that?

2

What is your use-case for custom flows?

I think Custom Elements might be something you want to look into: bpmn-js-examples/custom-elements at master · bpmn-io/bpmn-js-examples · GitHub
It is mostly tailored for Tasks, but can be adopted to work for connections as well.

3

I already know how to change the colors of the flows when they are rendered through this post: How to set different colors to each flow type?

Now I want to be able to replace the black sequence flow with my custom red flow via the replace menu.
It should look like this:
ReplaceMenu

The example you shared seems to only explain about the context pad but not about the replace menu (the box that pops up when you click on “change type”).
I want to be able to change the icon from the previous Flow to for example a red Sequence Flow and give it a custom name.

Hopefully this makes it more understandable. Do you have an idea how to do that?

4

What are the semantics of your custom connection? What is it?

5

CustomConnection.js:

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

		this.postExecuted(["connection.create"], ({ context }) => {
			const { connection } = context;
			const color = getColor(connection);
			if (color) {
				modeling.setColor(connection, { stroke: color });
			}
		});

		this.postExecuted(["element.updateProperties"], ({ context }) => {
			const { element, properties } = context;
			if (!isConnection(element)) {
				return;
			}
			const color = getColor(element);
			const { di } = properties;
			if (color && !di) {
				modeling.setColor(element, { stroke: color });
			}
		});
	}
}

CustomConnection.$inject = customConnectionList;

checkConnectionType.js:

export function isConnection(element) {
	const { waypoints } = element;
	return waypoints;
}

export function isConditional(sequenceFlow) {
	return getBusinessObject(sequenceFlow).get("conditionExpression");
}

export function isDefault(sequenceFlow) {
	return (
		getBusinessObject(sequenceFlow).get("sourceRef").get("default") ===
		getBusinessObject(sequenceFlow)
	);
}

Is this what you wanted? Because I’m not sure what you mean by semantics.

6

Well, was this what you meant by semantic?