Not getting the color in the renderer

Developers Modeler
1

I have created a custom element which I am rendering as svg-image in my CustomRenderer. This is working. Now I want to Now I want to use the ColorPicker. I have now installed an extension in the CustomRenderer to read the color from the business object and adjust the svg accordingly. Unfortunately I don’t get a value for tp:color after setting the color via ColorPicker.
Is something missing here or am I doing something wrong?

Here is my Renderer

export default function RegularBPMNRenderer(eventBus) {
    BaseRenderer.call(this, eventBus, 1500);

    this.canRender = function (element) {
        return is(element, 'regularBPMN:Entity') || is(element, 'regularBPMN:Resource');
    };
    this.drawShape = function (parent, shape) {
        let url = '';
        if (is(shape, "regularBPMN:Resource")) {
            url = Resource.dataURL;
        } else if (is(shape, "regularBPMN:Entity")) {
            url = Entity.dataURL;
        }
        var entityGfx = svgCreate('image', {
            x: 0,
            y: 0,
            width: shape.width,
            height: shape.height,
            href: url
        });
        svgAppend(parent, entityGfx);
        var bo, color;
        bo = getBusinessObject(shape);
        color = bo.get('tp:color');

        if (color) {
            svgAttr(entityGfx, 'fill', color);
        }
        return entityGfx;
    };
}

Thanks for your help.

2

What does your model extension look like?

3

Here is my model extension for the Resource-Element (I have removed my other parts):

{
    "name": "RegularBPMN",
    "prefix": "regularBPMN",
    "uri": "http://regularBPMN",
    "xml": {
      "tagAlias": "lowerCase"
    },
    "associations": [],
    "types": [
      {
        "name": "Resource",
        "superClass": [
          "LogicObject"
        ],
        "properties": [
          {
            "name": "color",
            "isAttr": true,
            "type": "String"
          }
        ]
      }
    ]
  }
4

Without seeing the rest of the extension (e.g. how is LogicObject defined) we can’t help you. Is there a reason you’re using a fully custom mechanism for color? It’s actually supported out of the box: GitHub - bpmn-io/bpmn-js-color-picker: A simple color picker for your BPMN elements.

5

sorry, I have removed to much. Hiere is the LogicObject:

      {
        "name": "LogicObject",
        "isAbstract": true,
        "superClass": [
          "bpmn:FlowNode"
        ]
      },

I am using the built in ColorPicker, but I think, it will write the selected color to the property tp:color and then I have to implement in my custom-render-class the rendering with the selected color of my custom elements - isn’t this right? My custom elements are drawing as svg-graphics. should the built in ColorPicker be able to colorize my custom elements? Right now, it do not. Do I have to something take into account that this will work out of the box for my custom elements?

6

You can set the color of an element using Modeling#setColor (e.g. modeling.setColor(task, { stroke: 'red', fill: 'green' });). This information will be persisted in the DI:

<bpmndi:BPMNShape
  id="_BPMNShape_StartEvent_2"
  bpmnElement="StartEvent_1"
  bioc:stroke="#ff0000"
  bioc:fill="#008000"
  color:background-color="#008000"
  color:border-color="#ff0000">

bioc attributes will also be set for legacy reasons.

CodeSandbox: Set color example - CodeSandbox

7

I don’t know if we’re talking about the same thing. I try to describe my request again.
I created my own element, which I draw using CustomRenderer (drawShape). This works perfectly so far. Now I have activated the BpmnColorPickerModule, which offers the possibility to choose the color via ContextPad.
Now I have to somehow get the selected color so that I can color my element accordingly in the drawShape of my CustomRenderer. That’s where I stand now - i.e. I’m looking for a way to get the selected color.
I’ve now tried it like this:

    drawShape(parent, shape) {

        // ... drawing logic for my custom element

        var bo, color;
        bo = getBusinessObject(shape);
        color = bo.get('tp:color');

but color is always undefined - even after I’ve selected the color via ColorPicker.
You know what I mean?

8

Hi Philipp

I’ve now tried it again. It is correct: The information is stored in the DI:

      <bpmndi:BPMNShape id="Resource_1c381at_di" bpmnElement="Resource_1c381at" bioc:stroke="#8e24aa" bioc:fill="#e1bee7" color:background-color="#e1bee7" color:border-color="#8e24aa">
        <dc:Bounds x="180" y="340" width="40" height="40" />
        <bpmndi:BPMNLabel />
      </bpmndi:BPMNShape>

Unfortunately, I don’t know how I can get my custom element to be colored accordingly. Can you help me with that? Specifically: how do I get the color in the renderer and can I color my SVG?

Thats my current drawShape-Method in the CustomRenderer:

    drawShape(parent, shape) {
        let url = '';
        if (is(shape, "regularBPMN:Resource")) {
            url = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyMTdweCIgaGVpZ2h0PSIxMzFweCIgdmlld0JveD0iLTAuNSAtMC41IDIxNyAxMzEiPjxkZWZzLz48Zz48ZWxsaXBzZSBjeD0iMTA4IiBjeT0iNjUiIHJ4PSIxMDgiIHJ5PSI2NSIgZmlsbD0icmdiKDI1NSwgMjU1LCAyNTUpIiBzdHJva2U9InJnYigwLCAwLCAwKSIgcG9pbnRlci1ldmVudHM9ImFsbCIvPjxlbGxpcHNlIGN4PSIxMDgiIGN5PSI2NSIgcng9IjQwIiByeT0iNDAiIGZpbGw9IiNhMDUyMmQiIHN0cm9rZT0iIzZkMWYwMCIgcG9pbnRlci1ldmVudHM9ImFsbCIvPjwvZz48L3N2Zz4=';
        } else if (is(shape, "regularBPMN:Entity")) {
            url = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZlcnNpb249IjEuMSIgd2lkdGg9IjQ3cHgiIGhlaWdodD0iNTFweCIgdmlld0JveD0iLTAuNSAtMC41IDQ3IDUxIj48ZGVmcy8+PGc+PHBhdGggZD0iTSAwIDAgTCA0NiAyNSBMIDAgNTAgWiIgZmlsbD0iIzAwOGEwMCIgc3Ryb2tlPSIjMDA1NzAwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHBvaW50ZXItZXZlbnRzPSJhbGwiLz48L2c+PC9zdmc+';
        }
        var svg = svgCreate('image', {
            x: 0,
            y: 0,
            width: shape.width,
            height: shape.height,
            href: url
        });
        svgAppend(parent, svg);

        return svg;
    };

Thank you very much for your help!