Redrawing the component if some action occurs

Hello everyone, I’m trying to achieve the following behavior, I have a settings window for each element, when assigning a certain setting, I would like to redraw the element for which the setting is being made


in case the field is filled, I would like to change the appearance of the arrow, for a start it would be nice to just change its color, but ideally correct its tip to double

My question is similar to this one, but unfortunately I didn’t manage to solve my problem:

The element is automatically rerendered when changing its properties through the appropriate API (Modeling#updateProperties and Modeling#updateModdleProperties). You’ll need a custom renderer to render the element differently.

Could you show some example, I’m not too good with bpmn, thanks!

So far I have been able to achieve the following solutions
but there is not a lot of wealth here, the logic of my application of keeping the script occurring on the server and the detection of the approach breaks when loading the saved script with the server.

export default class CustomCommandInterceptor extends CommandInterceptor {
    constructor(eventBus, modeling, elementRegistry) {

        this.elementRegistry = elementRegistry

        this.postExecuted(['element.updateLabel', 'element.updateProperties'], ({ context }) => {
            const { element } = context
            const outgoingGfx = elementRegistry.getGraphics(
            if (isConnection(element) && element.businessObject.$attrs['custom:trConditionValue']) {
                attr(outgoingGfx, 'stroke-dasharray', 5)
            } else {
                attr(outgoingGfx, 'stroke-dasharray', 0)

my final solution looks like this, I dissolve from CustomCommandInterceptor completely, focusing on CustomNodeRender

At the time of drawing the connection, I check the interesting state and if it is different, I make changes to the rendering

export default class CustomNodeRender extends BaseRenderer {
    constructor(eventBus, bpmnRenderer) {
        super(eventBus, 1500)

        this.bpmnRenderer = bpmnRenderer
    canRender = function (element) {
        return (
            !element.labelTarget &&          
                is(element, 'bpmn:SequenceFlow')
    drawConnection = function (parent, shape) {
        const connection = this.bpmnRenderer.handlers['bpmn:SequenceFlow'](parent, shape)
        if (shape.type === 'bpmn:SequenceFlow' && shape.businessObject.$attrs['custom:trConditionValue']) {
            svgAttr(connection, 'stroke-dasharray', 5)
            return connection
        return connection

the last question that interests me remains, how can I get a double tip for connection or do I want something? :slight_smile:

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.