Add new element with custom icon and backgroud

Developers
1

I found the svg icon for TASK_TYPE_SEND, then I can edit the dimension in PathMap file, when I create a new element from Pallete or contextPad if the type is bpmn:Task.

Are there an option when create a Shape to make a my custom icon and the background color like the example image?

    const shape = elementFactory.createShape({
      type: 'bpmn:NewShape',
      icon: ...
      backgroud-color: ....
      businessObject: businessObject
    });

Regards

image

2

Hi @Cristian_Marin , welcome!

Did you already check out our custom elements example?

3

sure, I checked all the examples.
finally I’can do this

image
custom icon in palette, custom icon in context with background and dimention

But I need to do many things in the core library, The palette options are limited in the svg icons (hex), to fix that I add the font-awesome library and call the class in the my custom palette.

      'create.hello-task': {
        group: 'service-task',
        className: 'far fa-comment',
        action: {
          dragstart: createTask('Welcome'),
          click: createTask('Welcome')
        }
      },

Then in my custom contextPad I send my custom module

     const businessObject = bpmnFactory.create('bpmn:Welcome');
     const shape = elementFactory.createShape({
     type: 'bpmn:Welcome',
      ....

bpmnRenderer.js

    'bpmn:Welcome' : function(parentGfx, element) {

      var task = renderer('bpmn:Task')(parentGfx, element);
      var pathData;

      pathData = pathMap.getScaledPath('MY_CUSTOM_ICON', {
        xScaleFactor: 0.9,
        yScaleFactor: 0.9,
        containerWidth: 21,
        containerHeight: 14,
        position: {
          mx: 0.3,
          my: 0.4
        }
      });


      /* receive path */ drawPath(parentGfx, pathData, {
        strokeWidth: 1,
        fill: getFillColor(element, defaultFillColor),
        stroke: getStrokeColor(element, defaultStrokeColor)
      });

      return task;
    },

PathMap.js

    'MY_CUSTOM_ICON': {
      d: 'M7.5,2.25A7.246,7.246,0,0,0,0,9.214,6.626,6.626,0,0,0,1.67,13.59,8.818,8.818,0,0,1,.064,16.8a.3.3,0,0,0-.044.291.231.231,0,0,0,.214.161,6.248,6.248,0,0,0,4.119-1.721,7.951,7.951,0,0,0,3.146.65A7.246,7.246,0,0,0,15,9.214,7.246,7.246,0,0,0,7.5,2.25ZM3.75,10.286a1.01,1.01,0,0,1-.937-1.071A1.01,1.01,0,0,1,3.75,8.143a1.01,1.01,0,0,1,.938,1.071A1.01,1.01,0,0,1,3.75,10.286Zm3.75,0a1.01,1.01,0,0,1-.937-1.071A1.01,1.01,0,0,1,7.5,8.143a1.01,1.01,0,0,1,.938,1.071A1.01,1.01,0,0,1,7.5,10.286Zm3.75,0a1.01,1.01,0,0,1-.937-1.071,1.01,1.01,0,0,1,.938-1.071,1.01,1.01,0,0,1,.937,1.071A1.01,1.01,0,0,1,11.25,10.286Z',
      height: 24,
      width:  21,
      heightElements: [6, 24],
      widthElements: [12.5, 21]
    },

The library is very nice, but can help to develop comunity if can load the icons in new custom types in palette, context, menu, background color, etc without modify the core libraries. Thx Bpmn team!!!