fix(modeling/BpmnLayouter): properly lay out boundary event connections

Closes #891

lib/features/modeling/BpmnLayouter.js

@@ -322,8 +322,12 @@ function getBoundaryEventTargetLayout(attachOrientation, targetOrientation, atta
     if (isHorizontalOrientation(attachOrientation)) {
       // orientation is 'right' or 'left'
 
-      // loop or opposite horizontal orientation
+      // loop or opposite horizontal orientation or same orientation
-      if (isLoop || isOppositeHorizontalOrientation(attachOrientation, targetOrientation)) {
+      if (
+        isLoop ||
+        isOppositeHorizontalOrientation(attachOrientation, targetOrientation) ||
+        isSame(attachOrientation, targetOrientation)
+      ) {
         return 'h';
       }
 
@@ -332,8 +336,12 @@ function getBoundaryEventTargetLayout(attachOrientation, targetOrientation, atta
     } else {
       // orientation is 'top' or 'bottom'
 
-      // loop or opposite vertical orientation
+      // loop or opposite vertical orientation or same orientation
-      if (isLoop || isOppositeVerticalOrientation(attachOrientation, targetOrientation)) {
+      if (
+        isLoop ||
+        isOppositeVerticalOrientation(attachOrientation, targetOrientation) ||
+        isSame(attachOrientation, targetOrientation)
+      ) {
         return 'v';
       }
 

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

@@ -5,9 +5,12 @@
     <bpmn:subProcess id="SubProcess" />
     <bpmn:task id="Task_Right" />
     <bpmn:boundaryEvent id="BoundaryEvent_TopLeft" attachedToRef="SubProcess" />
+    <bpmn:boundaryEvent id="BoundaryEvent_TopCenter" attachedToRef="SubProcess" />
     <bpmn:boundaryEvent id="BoundaryEvent_BottomRight" attachedToRef="SubProcess" />
+    <bpmn:boundaryEvent id="BoundaryEvent_BottomCenter" attachedToRef="SubProcess" />
     <bpmn:boundaryEvent id="BoundaryEvent_BottomLeft" attachedToRef="SubProcess" />
     <bpmn:boundaryEvent id="BoundaryEvent_TopRight" attachedToRef="SubProcess" />
+    <bpmn:boundaryEvent id="BoundaryEvent_RightCenter" attachedToRef="SubProcess" />
     <bpmn:task id="Task_Bottom" />
     <bpmn:task id="Task_Top" />
   </bpmn:process>
@@ -25,15 +28,24 @@
       <bpmndi:BPMNShape id="BoundaryEvent_0s0nl1k_di" bpmnElement="BoundaryEvent_TopLeft">
         <dc:Bounds x="282" y="320" width="36" height="36" />
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="BoundaryEvent_TopCenter_di" bpmnElement="BoundaryEvent_TopCenter">
+        <dc:Bounds x="432" y="282" width="36" height="36" />
+      </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="BoundaryEvent_0nomac7_di" bpmnElement="BoundaryEvent_BottomRight">
         <dc:Bounds x="632" y="450" width="36" height="36" />
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="BoundaryEvent_BottomCenter_di" bpmnElement="BoundaryEvent_BottomCenter">
+        <dc:Bounds x="432" y="482" width="36" height="36" />
+      </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="BoundaryEvent_1spolhy_di" bpmnElement="BoundaryEvent_BottomLeft">
         <dc:Bounds x="282" y="482" width="36" height="36" />
       </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="BoundaryEvent_13iwzlu_di" bpmnElement="BoundaryEvent_TopRight">
         <dc:Bounds x="632" y="282" width="36" height="36" />
       </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="BoundaryEvent_RightCenter_di" bpmnElement="BoundaryEvent_RightCenter">
+        <dc:Bounds x="632" y="372" width="36" height="36" />
+      </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="Task_0ygk7bh_di" bpmnElement="Task_Bottom">
         <dc:Bounds x="400" y="650" width="100" height="80" />
       </bpmndi:BPMNShape>

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

@@ -162,6 +162,54 @@ describe('features/modeling - layout', function() {
         ]);
       });
 
+
+      it('attached bottom center, orientation bottom', function() {
+        // when
+        var connection = connect('BoundaryEvent_BottomCenter', 'Task_Bottom');
+
+        expect(connection).to.have.waypoints([
+          { x: 450, y: 518 },
+          { x: 450, y: 650 }
+        ]);
+      });
+
+
+      it('attached top center, orientation top', function() {
+        // when
+        var connection = connect('BoundaryEvent_TopCenter', 'Task_Top');
+
+        expect(connection).to.have.waypoints([
+          { x: 450, y: 282 },
+          { x: 450, y: 80 }
+        ]);
+      });
+
+
+      it('attached right center, orientation right', function() {
+        // when
+        var connection = connect('BoundaryEvent_RightCenter', 'Task_Right');
+
+        expect(connection).to.have.waypoints([
+          { x: 668, y: 390 },
+          { x: 850, y: 390 }
+        ]);
+      });
+
+
+      it('attached right center, orientation left', function() {
+        // when
+        var connection = connect('BoundaryEvent_RightCenter', 'Task_Left');
+
+        expect(connection).to.have.waypoints([
+          { x: 668, y: 390 },
+          { x: 688, y: 390 },
+          { x: 688, y: 410 },
+          { x: 536, y: 410 },
+          { x: 536, y: 390 },
+          { x: 100, y: 390 }
+        ]);
+      });
+
     });
 
   });