Hello,
I want to change the Stroke Width of my Flows.
My code currently looks like this:
export default class CustomRenderer extends BaseRenderer {
constructor(config, eventBus, bpmnRenderer, textRenderer, styles) {
super(eventBus, HIGH_PRIORITY);
...
const drawConnection = this.bpmnRenderer.drawConnection
const customConnectionColor = function(visuals, connection){
const color = 'red';
const result = drawConnection.call(bpmnRenderer, visuals, connection);
// identify element through markerEnd and find element in document for further usage
const elementId = visuals.childNodes[0].style.markerEnd.split('"')[1];
const marker = document.querySelector(elementId);
// marker = arrow tip
marker.childNodes[0].style.fill = color;
marker.childNodes[0].style.stroke = color;
// visuals = line of arrow
visuals.childNodes[0].style.stroke = color;
visuals.childNodes[0].style.strokeWidth = '20px';
return result;
}
bpmnRenderer.drawConnection = customConnectionColor
}
However, I don’t think that this is a very clean way, therefore I want to modify the code to be able to implement it into this file instead:
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 });
}
});
}
}
How can I implement the logic into the second file?
I have tried to set strokeWidth through different methods but none seem to work.