Hello,
I want to change the Replace Menu if it’s called like that.
I want to have a custom icon and name representing the custom connection.
How can I do that?
Hello,
I want to change the Replace Menu if it’s called like that.
I want to have a custom icon and name representing the custom connection.
How can I do that?
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.
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:
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?
What are the semantics of your custom connection? What is it?
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.
Well, was this what you meant by semantic?