feat(label): improve positioning of sequence flow labels

closes #512

lib/util/LabelUtil.js

@@ -25,6 +25,39 @@ module.exports.hasExternalLabel = function(semantic) {
          is(semantic, 'bpmn:MessageFlow');
 };
 
+/**
+ * Get the position for sequence flow labels
+ *
+ * @param  {Array<Point>} waypoints
+ * @return {Point} the label position
+ */
+function getFlowLabelPosition(waypoints) {
+
+  // get the waypoints mid
+  var mid = waypoints.length / 2 - 1;
+
+  var first = waypoints[Math.floor(mid)];
+  var second = waypoints[Math.ceil(mid + 0.01)];
+
+  // get position
+  var position = getWaypointsMid(waypoints);
+
+  // calculate angle
+  var angle = Math.atan( (second.y - first.y) / (second.x - first.x) );
+
+  var x = position.x,
+      y = position.y;
+
+  if ( Math.abs(angle) < Math.PI / 2 ) {
+    y += DEFAULT_LABEL_SIZE.height / 2;
+  } else {
+    x += DEFAULT_LABEL_SIZE.width / 2;
+  }
+
+  return { x: x, y: y };
+}
+
+module.exports.getFlowLabelPosition = getFlowLabelPosition;
 
 /**
  * Get the middle of a number of waypoints
@@ -51,7 +84,7 @@ module.exports.getWaypointsMid = getWaypointsMid;
 function getExternalLabelMid(element) {
 
   if (element.waypoints) {
-    return getWaypointsMid(element.waypoints);
+    return getFlowLabelPosition(element.waypoints);
   } else {
     return {
       x: element.x + element.width / 2,

test/spec/util/LabelUtil.bpmn

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
+  <bpmn:process id="Process_1" isExecutable="false">
+    <bpmn:startEvent id="StartEvent_1" />
+    <bpmn:exclusiveGateway id="ExclusiveGateway_2" />
+    <bpmn:exclusiveGateway id="ExclusiveGateway_1" />
+    <bpmn:exclusiveGateway id="ExclusiveGateway_3" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
+        <dc:Bounds x="304" y="339" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="277" y="375" width="90" height="20" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="ExclusiveGateway_1pe81pr_di" bpmnElement="ExclusiveGateway_2" isMarkerVisible="true">
+        <dc:Bounds x="604" y="332" width="50" height="50" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="584" y="382" width="90" height="20" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="ExclusiveGateway_0risjnj_di" bpmnElement="ExclusiveGateway_1" isMarkerVisible="true">
+        <dc:Bounds x="297" y="70" width="50" height="50" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="277" y="120" width="90" height="20" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="ExclusiveGateway_0wbu2t7_di" bpmnElement="ExclusiveGateway_3" isMarkerVisible="true">
+        <dc:Bounds x="604" y="70" width="50" height="50" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="584" y="120" width="90" height="20" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/spec/util/LabelUtilSpec.js

@@ -0,0 +1,50 @@
+'use strict';
+
+require('../../TestHelper');
+
+/* global bootstrapModeler, inject */
+
+var coreModule = require('../../../lib/core'),
+    modelingModule = require('../../../lib/features/modeling');
+
+var ModelUtil = require('../../../lib/util/ModelUtil'),
+    LabelUtil = require('../../../lib/util/LabelUtil');
+
+
+describe('LabelUtil', function() {
+
+  var diagramXML = require('./LabelUtil.bpmn');
+
+  beforeEach(bootstrapModeler(diagramXML, { modules: [ coreModule, modelingModule ] }));
+
+
+  it('should correctly place horizontal label', inject(function(modeling, elementRegistry) {
+
+    // given
+    var element1 = elementRegistry.get('StartEvent_1'),
+        element2 = elementRegistry.get('ExclusiveGateway_2');
+
+    // when
+    var connection = modeling.connect(element1, element2);
+
+    // then
+    expect(connection.label.x).to.be.equal(427);
+    expect(connection.label.y).to.be.equal(357);
+  }));
+
+
+  it('should correctly place vertical label', inject(function(modeling, elementRegistry) {
+
+    // given
+    var element1 = elementRegistry.get('StartEvent_1'),
+        element2 = elementRegistry.get('ExclusiveGateway_1');
+
+    // when
+    var connection = modeling.connect(element1, element2);
+
+    // then
+    expect(connection.label.x).to.be.equal(322);
+    expect(connection.label.y).to.be.equal(219.5);
+  }));
+
+});