Add direction to custom connections

Developers
1

currently in github there is an example of how to create a custom connection.

but do not have a direction (arrow ->), I would like to know how to add it to indicate the stream (current ----> target)

Sem%20t%C3%ADtulo

2

With markers like this:

if (type === 'sequenceflow-end') {
      var sequenceflowEnd = svgCreate('path');
      svgAttr(sequenceflowEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });

      addMarker(id, {
        element: sequenceflowEnd,
        ref: { x: 11, y: 10 },
        scale: 0.5,
        attrs: {
          fill: stroke,
          stroke: stroke
        }
      });
    }

Check BpmnRenderer for how they do it.

1 Like
3

I analyzed the link.

Hi, thanks for the help. my project is similar to customElements.

I tried to adptar the proposed solution, but it did not work, I also did not define or manipulate ‘-end’ anywhere else, and I also did not need to work with markers, currently I’m only working with custom elements and I’m not using xml, to add the direction of the line, how should I proceed?

CustomRenderer.prototype.drawConnection = function(p, element) {

  var type = element.type;

  if (type === 'custom:connection') {
    return this.drawCustomConnection(p, element);
  }

  if (type === 'custom:connection-end') {
    var sequenceflowEnd = svgCreate('path');
   
    svgAttr(sequenceflowEnd, { d: 'M 1 5 L 11 10 L 1 15 Z' });

    this.get('canvas').addMarker(element.id, {
      element: sequenceflowEnd,
      ref: { x: 11, y: 10 },
      scale: 0.5,
      attrs: {
        fill: 'none',
        stroke: 'black'
      }
    });
  }
};
4

Kindly let me know know the update on this

thanks