feat(modeling): replace connection with correct type if rules allow

As a side effect, this corrects also the layout of the replacement.

Closes #1049

lib/features/modeling/behavior/ReplaceConnectionBehavior.js

@@ -83,6 +83,38 @@ export default function ReplaceConnectionBehavior(eventBus, modeling, bpmnRules)
     }
   }
 
+  function replaceReconnectedConnection(event) {
+
+    var context = event.context,
+        connection = context.connection,
+        allowed,
+        replacement;
+
+    if (context.newTarget) {
+      allowed = bpmnRules.canConnect(connection.source, context.newTarget);
+    } else {
+      allowed = bpmnRules.canConnect(context.newSource, connection.target);
+    }
+
+    if (!allowed || allowed.type === connection.type) {
+      return;
+    }
+
+    // temporarily connect old shapes with new connection
+    replacement = modeling.connect(connection.source, connection.target, {
+      type: allowed.type,
+      waypoints: connection.waypoints.slice()
+    });
+
+    // remove old connection
+    modeling.removeConnection(connection);
+
+    // replace connection in context to reconnect end/start
+    context.connection = replacement;
+  }
+
+  // lifecycle hooks
+
   this.postExecuted('elements.move', function(context) {
 
     var closure = context.closure,
@@ -91,15 +123,10 @@ export default function ReplaceConnectionBehavior(eventBus, modeling, bpmnRules)
     forEach(allConnections, fixConnection);
   }, true);
 
-  this.postExecuted([
+  this.preExecute([
     'connection.reconnectStart',
     'connection.reconnectEnd'
-  ], function(event) {
-
-    var connection = event.context.connection;
-
-    fixConnection(connection);
-  });
+  ], replaceReconnectedConnection);
 
   this.postExecuted('element.updateProperties', function(event) {
     var context = event.context,

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

@@ -16,19 +16,22 @@ import {
 } from '../../../../util/MockEvents';
 
 
+var testModules = [
+  bendpointsModule,
+  connectionPreviewModule,
+  connectModule,
+  coreModule,
+  createModule,
+  modelingModule
+];
+
+
 describe('features/modeling - layout connection', function() {
 
   var diagramXML = require('../../../../fixtures/bpmn/sequence-flows.bpmn');
 
   beforeEach(bootstrapModeler(diagramXML, {
-    modules: [
-      bendpointsModule,
-      connectionPreviewModule,
-      connectModule,
-      coreModule,
-      createModule,
-      modelingModule
-    ]
+    modules: testModules
   }));
 
 
@@ -393,19 +396,64 @@ describe('features/modeling - layout connection', function() {
     });
 
 
+    describe('connection preview with connection type replacement', function() {
+
+      var diagramXML = require('test/spec/features/modeling/behavior/ReplaceConnectionBehavior.message-sequence-flow.bpmn');
+
+      beforeEach(inject(function(dragging) {
+        dragging.setOptions({ manual: true });
+      }));
+
+      afterEach(inject(function(dragging) {
+        dragging.setOptions({ manual: false });
+      }));
+
+      beforeEach(bootstrapModeler(diagramXML, {
+        modules: testModules
+      }));
+
+
+      it('should correctly lay out connection preview when reconnecting with replacement',
+        inject(function(canvas, bendpointMove, dragging, elementRegistry) {
+
+          // given
+          var participant2 = elementRegistry.get('Participant_2'),
+              participant2Gfx = canvas.getGraphics(participant2),
+              sequenceFlow1 = elementRegistry.get('SequenceFlow_1');
+
+          // when
+          bendpointMove.start(canvasEvent(sequenceFlow1.waypoints[1]), sequenceFlow1, 1);
+
+          dragging.move(canvasEvent({ x: participant2.x + 100, y: participant2.y + 10 }));
+          dragging.hover({ element: participant2, gfx: participant2Gfx });
+          dragging.move(canvasEvent({ x: participant2.x + 105, y: participant2.y + 10 }));
+
+
+          var ctx = dragging.context();
+          var context = ctx.data.context;
+
+          var connectionPreview = context.getConnection(context.allowed);
+
+          var waypointsPreview = connectionPreview.waypoints.slice();
+
+          dragging.end();
+
+          var newWaypoints = participant2.incoming.slice(-1)[0].waypoints;
+
+          // then
+          expect(newWaypoints).to.exist;
+          expect(newWaypoints).to.deep.eql(waypointsPreview);
+        })
+      );
+    });
+
+
     describe('attaching event', function() {
 
       var diagramXML = require('test/spec/features/rules/BpmnRules.attaching.bpmn');
 
       beforeEach(bootstrapModeler(diagramXML, {
-        modules: [
-          bendpointsModule,
-          connectionPreviewModule,
-          connectModule,
-          coreModule,
-          createModule,
-          modelingModule
-        ]
+        modules: testModules
       }));