How to add custom svg image via custom renderer?

Developers Modeler
1

Hello,
I would like to add a custom svg icon to my tasks via custom renderer, however I have only this type of svg format:
m256,512 c-141,0 -256,-115 -256,-256 c0,-141 115,-256 256,-256 c141,0 256,115 256,256 c0,141 -115,256 -256,256 z m0,-491 c-129,0 -235,106 -235,235 c0,129 106,235 235,235 c129,0 235,-106 235,-235 c0,-129 -106,-235 -235,-235 z m122,245 l-192,96 c-3,1 -7,1 -10,-1 c-3,-2 -5,-5 -5,-9 l0,-192 c0,-4 2,-7 5,-9 c1,-1 3,-2 5,-2 c2,0 4,1 5,1 l192,96 c4,2 6,6 6,10 c0,4 -2,8 -6,10 z m-186,-89 l0,158

How can I convert it to this-like format?
m {mx},{my} l 0,{e.y1} l {e.x1},0 l 0,-{e.y1} z l {e.x0},{e.y0} l {e.x0},-{e.y0}

Is linking custom PathMap.js the right way to add an icon?

this.modeler = new BpmnModeler({
    container: canvas,
    propertiesPanel: {
        parent: '#js-properties-panel'
    },
    additionalModules: [
        propertiesPanelModule,
        propertiesProviderModule,
            {
                propertiesProvider: [ 'type', require('./bpmnProviders/TasPropertiesProvider') ],
                pathMap: [ 'type', require('./bpmnProviders/PathMap') ]
            }
    ]
});
2

Hi,

can you please provide more context? What do you want to achieve? Is there a going to be a custom type of task which will have this icon?

As for formatting your SVG path to the required format you’d have to at least replace the initial move command m 256, 512 to m {mx}, {my}. Otherwise the path would always be rendered at the same position.

As for bootstrapping the application with your custom path map please take a look at this example which bootstraps bpmn-js with custom modules.

3

Hello,
thank you for your response.
This and other similar icons would be added to any task in some cases (to the upper right corner), so my question is, whether I am supposed to link my PathMap.js with custom icons added and if yes how to convert the svg format - from some reason the custom icons are much more bigger than the other from PathMap.js. What is the format? Thank you very much!

My CustomRenderer.js contains something like this:

function CustomRenderer(eventBus, styles, pathMap) {
  BpmnRenderer.call(this, eventBus, styles, pathMap, 1200);

  var originalDrawShape = this.drawShape;
  var computeStyle = styles.computeStyle;

  var drawPath = function(p, d, attrs) {
    attrs = computeStyle(attrs, [ 'no-fill' ], {
      strokeWidth: 2,
      stroke: 'black'
    });
    return p.path(d).attr(attrs);
  }

  this.drawShape = function(visuals, element) {
    var bo, markerEnd;
    var result = originalDrawShape.call(this, visuals, element);
    bo = getBusinessObject(element);
    markerEnd = bo.get('tas:taskEnd');

    if (markerEnd === true) {
      var pathData = pathMap.getScaledPath('TASK_TYPE_END', {
        xScaleFactor: 1,
        yScaleFactor: 1,
        containerWidth: 21,
        containerHeight: 14,
        position: {
          mx: 3.285,
          my: 0.357
        }
      });

      drawPath(visuals, pathData, {
        strokeWidth: 1
      });
    }

    return result;
  };
}
4

I had exactly the same problem. I resized them in Inkscape to desired size. After that I pasted them into my custom PathMap.js. You wouldn’t have SVG icon size parametrized programmatically, but rezising in modeler works jut fine (see below). I also positioned them relatively in Inkscape from top left corner to change position on task canvas.

5

Thank you so much for the idea with Inkscape. I finally managed to resize my svg and it works.:slight_smile:

6

Could you please help me, I need to use bpmn-icon-data-input, I do not know how to get its relative SVG path. I have installed Inkscape but need to know how to use it?

7

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

8