feat(layouter): prefer straight layout for sub-process connections

Related to camunda/camunda-modeler#1758

lib/features/modeling/BpmnLayouter.js

@@ -98,6 +98,8 @@ BpmnLayouter.prototype.layoutConnection = function(connection, hints) {
       manhattanOptions = {
         preferredLayouts: getBoundaryEventPreferredLayouts(source, target, connectionEnd)
       };
+    } else if (isExpandedSubProcess(source) || isExpandedSubProcess(target)) {
+      manhattanOptions = getSubProcessManhattanOptions(source);
     } else if (is(source, 'bpmn:Gateway')) {
       manhattanOptions = {
         preferredLayouts: [ 'v:h' ]
@@ -177,6 +179,17 @@ function getMessageFlowPreserveDocking(source, target) {
   return null;
 }
 
+function getSubProcessManhattanOptions(source) {
+  return {
+    preferredLayouts: [ 'straight', 'h:h' ],
+    preserveDocking: getSubProcessPreserveDocking(source)
+  };
+}
+
+function getSubProcessPreserveDocking(source) {
+  return isExpandedSubProcess(source) ? 'target' : 'source';
+}
+
 function getConnectionDocking(point, shape) {
   return point ? (point.original || point) : getMid(shape);
 }

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

@@ -552,4 +552,119 @@ describe('features/modeling - layout', function() {
 
   });
 
+
+  describe('subProcess', function() {
+
+    var diagramXML = require('./LayoutSequenceFlowSpec.subProcess.bpmn');
+
+    var testModules = [ coreModule, modelingModule ];
+
+    beforeEach(bootstrapModeler(diagramXML, { modules: testModules }));
+
+
+    it('should layout straight between subProcesses (top -> bottom)', function() {
+
+      // when
+      var connection = connect('SubProcess_Center', 'SubProcess_Bottom'),
+          source = connection.source,
+          target = connection.target;
+
+      var expectedX = getMid(target).x;
+
+      // then
+      expect(connection).to.have.waypoints([
+        { x: expectedX, y: source.y + source.height },
+        { x: expectedX, y: target.y }
+      ]);
+    });
+
+
+    it('should layout straight between subProcesses (bottom -> top)', function() {
+
+      // when
+      var connection = connect('SubProcess_Bottom', 'SubProcess_Center'),
+          source = connection.source,
+          target = connection.target;
+
+      var expectedX = getMid(target).x;
+
+      // then
+      expect(connection).to.have.waypoints([
+        { x: expectedX, y: source.y },
+        { x: expectedX, y: target.y + target.height }
+      ]);
+    });
+
+
+    it('should layout straight between subProcess and task next to it (subProcess -> task)',
+      function() {
+
+        // when
+        var connection = connect('SubProcess_Center', 'Task_Right'),
+            source = connection.source,
+            target = connection.target;
+
+        var expectedY = getMid(target).y;
+
+        // then
+        expect(connection).to.have.waypoints([
+          { x: source.x + source.width, y: expectedY },
+          { x: target.x, y: expectedY }
+        ]);
+      }
+    );
+
+
+    it('should layout straight between subProcess and task next to it (task -> subProcess)',
+      function() {
+
+        // when
+        var connection = connect('Task_Right', 'SubProcess_Center'),
+            source = connection.source,
+            target = connection.target;
+
+        var expectedY = getMid(source).y;
+
+        // then
+        expect(connection).to.have.waypoints([
+          { x: source.x, y: expectedY },
+          { x: target.x + target.width, y: expectedY }
+        ]);
+      }
+    );
+
+
+    it('should layout straight between subProcess and task above (subProcess -> task)', function() {
+
+      // when
+      var connection = connect('SubProcess_Center', 'Task_Top'),
+          source = connection.source,
+          target = connection.target;
+
+      var expectedX = getMid(target).x;
+
+      // then
+      expect(connection).to.have.waypoints([
+        { x: expectedX, y: source.y },
+        { x: expectedX, y: target.y + target.height }
+      ]);
+    });
+
+
+    it('should layout straight between subProcess and task above (task -> subProcess)', function() {
+
+      // when
+      var connection = connect('Task_Top', 'SubProcess_Center'),
+          source = connection.source,
+          target = connection.target;
+
+      var expectedX = getMid(source).x;
+
+      // then
+      expect(connection).to.have.waypoints([
+        { x: expectedX, y: source.y + source.height },
+        { x: expectedX, y: target.y }
+      ]);
+    });
+  });
 });

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

@@ -0,0 +1,25 @@
+<?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:dc="http://www.omg.org/spec/DD/20100524/DC" id="Definitions_00dfyhw" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.7.1">
+  <bpmn:process id="Process_00i7uqd" isExecutable="true">
+    <bpmn:subProcess id="SubProcess_Center" />
+    <bpmn:subProcess id="SubProcess_Bottom" />
+    <bpmn:task id="Task_Right" />
+    <bpmn:task id="Task_Top" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_00i7uqd">
+      <bpmndi:BPMNShape id="Activity_0r2w32m_di" bpmnElement="SubProcess_Center" isExpanded="true">
+        <dc:Bounds x="270" y="270" width="350" height="200" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_0tbriov_di" bpmnElement="SubProcess_Bottom" isExpanded="true">
+        <dc:Bounds x="160" y="600" width="350" height="200" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_0fm36cc_di" bpmnElement="Task_Right">
+        <dc:Bounds x="780" y="270" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_16fbgsj_di" bpmnElement="Task_Top">
+        <dc:Bounds x="520" y="110" width="100" height="80" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>