Position and style a label on a connection

Developers
1

My use case is as follows:

I create a connection between a Gateway and a Task which will create a label by adding a name property using the updateProperties to add a label to the connection.

I now need to be able to do the following:

  1. How can i style the labels? I have a custom renderer but I am failing to understand how to call the renderLabel function within there

  2. How can I position these labels to the end of a connection just like the Conditions in my image?

CustomRenderer.prototype.canRender = function (element) {
  return ElementNodes.findNode(element.type) !== null;
};

CustomRenderer.prototype.drawShape = function (p, element) {
  return this.drawElementShape(p, element);
};

CustomRenderer.prototype.getShapePath = function (shape) {
  return this.getElementPath(shape);
};

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

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

CustomRenderer.prototype.getConnectionPath = function (connection) {
  const type = connection.type;

  if (type === 'custom:connection') {
    return this.getCustomConnectionPath(connection);
  }

image

2

Hello @kmullins!

Labels are special fellows and identified by type label:

CustomRenderer.prototype.canRender = function(element) {
  // I can render a label!
  return element.type === 'label';
};

CustomRenderer.prototype.drawShape = function(parentGfx, element) {
  if (element.type === 'label') {
    // I am drawing a label!
  }
};

If you look at bpmn-js, it does hook into label rendering with its very own facilities. You may need to clone some of that behavior in your custom renderer.