Autocolor element by certain property

Developers Modeler
1

Hi! Is it possible to make an element being colored depending on some property in properties panel? Would be awesome if you provide some code example/how-to

2

You could try something like this. This will autoColor based on the type of activity (UserTask,ServiceTask, or ScriptTask) You can probably extend it to fit your use case.

autoColor.css

.djs-palette .entry:hover,
[class^="bpmn-icon-"]:hover:before,
[class*=" bpmn-icon-"]:hover:before {
    color: var(--palette-entry-hover-color);
}

.bpmn-icon-user-task:before {
    color: #198c19;
}

.bpmn-icon-service-task:before {
    color: #ae3f3f;
}

.bpmn-icon-script-task:before {
    color: #ff7f50;
}

autoColor.js

import './autoColor.css';

const shapeColors = {
    'bpmn:UserTask': { 
        fill: '#ebf2eb',
        stroke: '#198c19',
    },
    'bpmn:ServiceTask': { 
        fill: '#f6ebeb',
        stroke: '#ae3f3f',
    },    
    'bpmn:ScriptTask': { 
        fill: '#f5d3c7',
        stroke: '#f85a21',
    },
};


function AutoColor(
    eventBus
) {
    eventBus.on('shape.added', function({ element }) {
        const colors = shapeColors[element.type];
        if (colors) {
            Object.assign(element.businessObject.di, colors);
            // force async rerender
            setTimeout(() => eventBus.fire('element.changed', { element }), 0);
        }
    });
}

AutoColor.$inject = [
    'eventBus',
];


export const autoColorModule = {
    __init__: ['autoColor'],
    'autoColor': ['type', AutoColor],
};