Redrawing the component if some action occurs

[pro100efim]

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:

Render element when something else happens

Hi, I have a problem I hope some of you can help to solve. I created a custom render for an element, that depends on the name assigned to element’s outgoing connections. For example, the element should be green if there is an outgoing arrow named “Y”, red otherwise. I defined this condition inside the drawShape function, but it’s not called frequently enough: is there a solution to check the state of connections and re-render the element when I add or rename a connection (for example, when I ed…

[philippfromme]

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.

[pro100efim]

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

[pro100efim]

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) {
        super(eventBus)

        this.elementRegistry = elementRegistry

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

[pro100efim]

@pro100efim

CustomCommandInterceptor

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?