BPMN JS add color to modeler elements

Developers
1

I want to integrate colour options to modeler elements

for that i uses https://github.com/bpmn-io/bpmn-js-in-color

I am using BPMN js version 3.0.4 but it will give following error

core.js:1673 ERROR TypeError: Object prototype may only be an Object or null: undefined
    at create (<anonymous>)
    at Function.Object.create (zone.js:2425)
    at inherits (inherits_browser.js:5)
    at Object../node_modules/bpmn-js-in-color/colors/ColorRenderer.js (ColorRenderer.js:52)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/bpmn-js-in-color/colors/index.js (index.js:9)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/bpmn-js-in-color/index.js (index.js:1)
    at __webpack_require__ (bootstrap:81)
    at SafeSubscriber._next

Screenshot-from-2019-03-19-22-18-09

2

Hi @kalantremahesh,

we will need further information to help you. Did you start to write your own Camunda Modeler plugin? Or do you use one of our examples (cf. Color Picker Example)?

3

I am using BPMN JS 3.0.4

4

We do not encourage you to use the bpmn-js-in-color example anymore. We’ve introduced an API for setting the color of elements:

const bpmnModeler = ...;
const modeling = bpmnModeler.get('modeling');

const elementsToColor = [ element1, element2 ];

modeling.setColor(elementsToColor, {
  stroke: 'green',
  fill: 'yellow'
});

You can build your color picker around that API.

5

Can you provide link of Colour API example, I need to set dynamic colour to camunda elements.
Thanks In advance…

6

There’s a general example showing different ways of coloring elements: https://github.com/bpmn-io/bpmn-js-examples/tree/master/colors#option-2-color-via-bpmn-20-extension

The only thing you need is Modeling#setColor.

7

Hello!

I have also successfully used the Modeling#setColor method.
But I have discovered a strange behavior, when I change the color of an element, the size of the corresponding label is changed. This resizing is then stored in the BPMN file, which is in my opinion not a clean behavior…

Is it possible to avoid this change in size?

8

Please do not necrobump old topics. Instead link to this thread from new topic.

9