fix(bpmn-layouter): get preferred layout from orientation

Requires https://github.com/bpmn-io/diagram-js/pull/401

Closes #1121

lib/features/modeling/BpmnLayouter.js

@@ -81,7 +81,7 @@ BpmnLayouter.prototype.layoutConnection = function(connection, hints) {
 
     if (source === target) {
       manhattanOptions = {
-        preferredLayouts: [ 'b:l' ]
+        preferredLayouts: getLoopPreferredLayout(source, connection)
       };
     } else
 
@@ -264,6 +264,22 @@ function isHorizontalOrientation(orientation) {
   return orientation === 'right' || orientation === 'left';
 }
 
+function getLoopPreferredLayout(source, connection) {
+  var waypoints = connection.waypoints;
+
+  var orientation = waypoints && waypoints.length && getOrientation(waypoints[0], source);
+
+  if (orientation === 'top') {
+    return [ 't:r' ];
+  } else if (orientation === 'right') {
+    return [ 'r:b' ];
+  } else if (orientation === 'left') {
+    return [ 'l:t' ];
+  }
+
+  return [ 'b:l' ];
+}
+
 function getBoundaryEventPreferredLayouts(source, target, end) {
   var sourceMid = getMid(source),
       targetMid = getMid(target),

test/spec/features/modeling/layout/LayoutSequenceFlowSpec.flowElements.bpmn

@@ -1,10 +1,13 @@
 <?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" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn">
+<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" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.3.0-alpha.3">
   <bpmn:process id="Process_1" isExecutable="false">
     <bpmn:startEvent id="StartEvent_1" />
     <bpmn:exclusiveGateway id="ExclusiveGateway_1" />
     <bpmn:task id="Task_1">
       <bpmn:outgoing>SequenceFlow_1</bpmn:outgoing>
+      <bpmn:outgoing>SequenceFlow_2</bpmn:outgoing>
+      <bpmn:outgoing>SequenceFlow_3</bpmn:outgoing>
+      <bpmn:outgoing>SequenceFlow_4</bpmn:outgoing>
     </bpmn:task>
     <bpmn:intermediateThrowEvent id="IntermediateThrowEvent_1" />
     <bpmn:serviceTask id="ServiceTask_1">
@@ -14,6 +17,18 @@
     <bpmn:endEvent id="EndEvent_1" />
     <bpmn:businessRuleTask id="BusinessRuleTask_1" />
     <bpmn:sequenceFlow id="SequenceFlow_1" sourceRef="Task_1" targetRef="ServiceTask_1" />
+    <bpmn:task id="Task_2">
+      <bpmn:incoming>SequenceFlow_2</bpmn:incoming>
+    </bpmn:task>
+    <bpmn:sequenceFlow id="SequenceFlow_2" sourceRef="Task_1" targetRef="Task_2" />
+    <bpmn:task id="Task_3">
+      <bpmn:incoming>SequenceFlow_3</bpmn:incoming>
+    </bpmn:task>
+    <bpmn:sequenceFlow id="SequenceFlow_3" sourceRef="Task_1" targetRef="Task_3" />
+    <bpmn:task id="Task_4">
+      <bpmn:incoming>SequenceFlow_4</bpmn:incoming>
+    </bpmn:task>
+    <bpmn:sequenceFlow id="SequenceFlow_4" sourceRef="Task_1" targetRef="Task_4" />
   </bpmn:process>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
@@ -57,14 +72,39 @@
         <dc:Bounds x="790" y="180" width="100" height="80" />
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="SequenceFlow_1_di" bpmnElement="SequenceFlow_1">
-        <di:waypoint xsi:type="dc:Point" x="382" y="241" />
+        <di:waypoint x="382" y="241" />
-        <di:waypoint xsi:type="dc:Point" x="559" y="241" />
+        <di:waypoint x="559" y="241" />
-        <di:waypoint xsi:type="dc:Point" x="559" y="138" />
+        <di:waypoint x="559" y="138" />
-        <di:waypoint xsi:type="dc:Point" x="628" y="138" />
+        <di:waypoint x="628" y="138" />
         <bpmndi:BPMNLabel>
           <dc:Bounds x="460" y="158.5" width="90" height="20" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="Task_05onbv9_di" bpmnElement="Task_2">
+        <dc:Bounds x="120" y="430" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="SequenceFlow_1gkn3z9_di" bpmnElement="SequenceFlow_2">
+        <di:waypoint x="332" y="260" />
+        <di:waypoint x="332" y="470" />
+        <di:waypoint x="220" y="470" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="Task_03oj6hc_di" bpmnElement="Task_3">
+        <dc:Bounds x="120" y="77" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="SequenceFlow_1w44kjx_di" bpmnElement="SequenceFlow_3">
+        <di:waypoint x="282" y="220" />
+        <di:waypoint x="250" y="220" />
+        <di:waypoint x="250" y="117" />
+        <di:waypoint x="220" y="117" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="Task_1ftm468_di" bpmnElement="Task_4">
+        <dc:Bounds x="446" y="-70" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="SequenceFlow_12vhayc_di" bpmnElement="SequenceFlow_4">
+        <di:waypoint x="332" y="180" />
+        <di:waypoint x="332" y="-30" />
+        <di:waypoint x="446" y="-30" />
+      </bpmndi:BPMNEdge>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
 </bpmn:definitions>

test/spec/features/modeling/layout/LayoutSequenceFlowSpec.js

@@ -10,6 +10,8 @@ import {
   reconnectEnd
 } from './Helper';
 
+import { getMid } from 'diagram-js/lib/layout/LayoutUtil';
+
 import modelingModule from 'lib/features/modeling';
 import coreModule from 'lib/core';
 
@@ -306,6 +308,85 @@ describe('features/modeling - layout', function() {
         ]);
       });
 
+
+      it('should NOT relayout loop', inject(function(elementRegistry) {
+
+        // given
+        var sequenceFlow = elementRegistry.get('SequenceFlow_1'),
+            task = elementRegistry.get('Task_1');
+
+        // when
+        reconnectEnd(sequenceFlow, task, getMid(task));
+
+        // then
+        expect(sequenceFlow).to.have.waypoints([
+          { x: 382, y: 241 },
+          { x: 559, y: 241 },
+          { x: 559, y: 220 },
+          { x: 382, y: 220 }
+        ]);
+      }));
+
+
+      it('should relayout loop (b:l)', inject(function(elementRegistry) {
+
+        // given
+        var sequenceFlow = elementRegistry.get('SequenceFlow_2'),
+            task = elementRegistry.get('Task_1');
+
+        // when
+        reconnectEnd(sequenceFlow, task, getMid(task));
+
+        // then
+        expect(sequenceFlow).to.have.waypoints([
+          { x: 332, y: 260 },
+          { x: 332, y: 280 },
+          { x: 262, y: 280 },
+          { x: 262, y: 220 },
+          { x: 282, y: 220 }
+        ]);
+      }));
+
+
+      it('should relayout loop (l:t)', inject(function(elementRegistry) {
+
+        // given
+        var sequenceFlow = elementRegistry.get('SequenceFlow_3'),
+            task = elementRegistry.get('Task_1');
+
+        // when
+        reconnectEnd(sequenceFlow, task, getMid(task));
+
+        // then
+        expect(sequenceFlow).to.have.waypoints([
+          { x: 282, y: 220 },
+          { x: 262, y: 220 },
+          { x: 262, y: 160 },
+          { x: 332, y: 160 },
+          { x: 332, y: 180 }
+        ]);
+      }));
+
+
+      it('should relayout loop (t:r)', inject(function(elementRegistry) {
+
+        // given
+        var sequenceFlow = elementRegistry.get('SequenceFlow_4'),
+            task = elementRegistry.get('Task_1');
+
+        // when
+        reconnectEnd(sequenceFlow, task, getMid(task));
+
+        // then
+        expect(sequenceFlow).to.have.waypoints([
+          { x: 332, y: 180 },
+          { x: 332, y: 160 },
+          { x: 402, y: 160 },
+          { x: 402, y: 220 },
+          { x: 382, y: 220 }
+        ]);
+      }));
+
     });