How do I change the looks of arrow from custom line menu?

Developers Modeler
1

Hello Guys, I am very new at BPMN and don’t have any idea what to do next :frowning:

How do I change the appearance of the arrow based on the custom line menu selection I made?

right now I just copied the one from color picker plugin (to create custom menu) plugin link

Image Sample

PopupMenuProvider.prototype.getEntries = function(element) {
  var self = this;

  var colors = [{
    label: 'One to one',
    fill: 'white',
    stroke: 'black'
  }, {
    label: 'One to many',
    fill: '#BBDEFB',
    stroke: '#1E88E5'
  }, {
    label: 'Many to many',
    fill: '#FFE0B2',
    stroke: '#FB8C00'
  }, {
    label: 'Indeterminate',
    fill: '#C8E6C9',
    stroke: '#43A047'
  }];

  var entries = colors.map(function(color) {
    return {
      label: color.label,
      id: color.label.toLowerCase() + '-line',
      className: 'custom-line-' + color.label.toLowerCase().replace(/\s/g, ''),
      action: createAction(self._modeling, element, color)
    };
  });

  return entries;
};


function createAction(modeling, element, color) {
  return function() {
    modeling.setColor(element, color);
  };
}

not sure how to change or use the action part to change the appearance of a line :frowning:

Thank you !

2

How does this look like? Can you share a screenshot + what you already tried out (your custom extension).

3

Yes sir I have my screenshot link above. that’s what I have so far

4

image

This is the image sir I just want to change the appearance based on the selections on pop up (for arrows only)

for example I select “Indeterminate” then it’ll be dashed line without arrow head and same with the others

hopefully someone can help me with this one :(. it’s fine with me if it broke the diagram flow.

thank you !

5

Thanks for providing more information, now I get what you want to achieve. If you want to update the appearance of the connections (“lines”) you will have to create custom elements + custom renderers for these. You should start by making yourself aware of what custom elements mean in bpmn-js land.

Here you can find some examples: