1

I'm working with jointJs and Rappid. I know how to draw a bpmn diagram, as the photo I have attached. I'm drawing the elements, but I'm having some problems with rows (flows). Is there any way to add a flow label or name? As I added on my image in red color.

I have seen this in their documentation, but I can't see anything about labels

var flow = new joint.shapes.bpmn.Flow({
source: { id: task.id },
target: { id: annotation.id },
flowType: 'association'

});

enter image description here

Thanks,

Zuri
  • 312
  • 3
  • 18

1 Answers1

1

You may want to look into dia.Link.prototype.labels, since BPMN Flows are just Links extensions (joint.shapes.bpmn.Flow = joint.dia.Link.extend({).

An example to your flow:

flow.label(0, // the label's index (you can have multiple labels per link/flow)
  {
    position: .5, // place it halfway on the link (0-1)
    attrs: {
        text: { fill: 'red', text: 'Label' }
    }
  }
);
CPHPython
  • 12,379
  • 5
  • 59
  • 71
  • Thanks! I'm going to try it in my code. I'm working with json data, but I suppose that it will be similar to generate – Zuri Jan 23 '18 at 11:44
  • @Zuri you can invoke this `label` function right after the flow object is initialized. – CPHPython Jan 24 '18 at 09:14
  • @CHPython I know how to do it with functions and initializating flow object but I can't find the way to do it in the JSON – Zuri Jan 25 '18 at 08:24
  • 1
    @Zuri According to [Roman's answer in here](https://stackoverflow.com/a/48251982/6225838) currently there is no way to define them through JSON directly, but if you're using the `ui.Inspector` Roman also provided an alternative that declares hidden fields in the link itself and sets a `defaultValue` for each CSS property, which automatically styles the link when it's placed on the paper. This worked for me. – CPHPython Jan 25 '18 at 11:54