fix(modeling): fix selection during reconnection with replacement

Closes #896

lib/features/modeling/behavior/ReplaceConnectionBehavior.js

@@ -11,10 +11,12 @@ import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
 import { is } from '../../../util/ModelUtil';
 
 
-export default function ReplaceConnectionBehavior(eventBus, modeling, bpmnRules) {
+export default function ReplaceConnectionBehavior(eventBus, modeling, bpmnRules, injector) {
 
   CommandInterceptor.call(this, eventBus);
 
+  var dragging = injector.get('dragging', false);
+
   function fixConnection(connection) {
 
     var source = connection.source,
@@ -111,6 +113,30 @@ export default function ReplaceConnectionBehavior(eventBus, modeling, bpmnRules)
 
     // replace connection in context to reconnect end/start
     context.connection = replacement;
+
+    if (dragging) {
+      cleanDraggingSelection(connection, replacement);
+    }
+  }
+
+  // monkey-patch selection saved in dragging in order to not re-select non-existing connection
+  function cleanDraggingSelection(oldConnection, newConnection) {
+    var context = dragging.context(),
+        previousSelection = context && context.payload.previousSelection,
+        index;
+
+    // do nothing if not dragging or no selection was present
+    if (!previousSelection || !previousSelection.length) {
+      return;
+    }
+
+    index = previousSelection.indexOf(oldConnection);
+
+    if (index === -1) {
+      return;
+    }
+
+    previousSelection.splice(index, 1, newConnection);
   }
 
   // lifecycle hooks
@@ -159,5 +185,6 @@ inherits(ReplaceConnectionBehavior, CommandInterceptor);
 ReplaceConnectionBehavior.$inject = [
   'eventBus',
   'modeling',
-  'bpmnRules'
+  'bpmnRules',
+  'injector'
 ];

test/spec/features/modeling/behavior/ReplaceConnectionBehaviorSpec.js

@@ -14,6 +14,7 @@ import {
 import modelingModule from 'lib/features/modeling';
 import moveModule from 'diagram-js/lib/features/move';
 import coreModule from 'lib/core';
+import bendpointsModule from 'diagram-js/lib/features/bendpoints';
 
 import {
   createCanvasEvent as canvasEvent
@@ -448,6 +449,71 @@ describe('features/modeling - replace connection', function() {
 
     });
 
+
+    describe('dragging selection cleanup', function() {
+
+      var processDiagramXML = require('./ReplaceConnectionBehavior.message-sequence-flow.bpmn');
+
+      beforeEach(bootstrapModeler(processDiagramXML, {
+        modules: testModules.concat(bendpointsModule)
+      }));
+
+
+      it('should select the new connection if replaced one was selected before',
+        inject(function(bendpointMove, dragging, elementRegistry, selection) {
+
+          // given
+          var participant2 = elementRegistry.get('Participant_2'),
+              connection = elementRegistry.get('SequenceFlow_1');
+
+
+          selection.select([ connection ]);
+
+          // when
+          bendpointMove.start(canvasEvent(connection.waypoints[0]), connection, 0);
+
+          dragging.hover({
+            element: participant2
+          });
+
+          dragging.move(canvasEvent({ x: participant2.x + 200, y: participant2.y }));
+          dragging.end();
+
+
+          // then
+          expect(selection.get()).to.deep.eql(participant2.outgoing.slice(-1));
+        })
+      );
+
+
+      it('should not interfere with connection to other element',
+        inject(function(bendpointMove, dragging, elementRegistry, selection) {
+
+          // given
+          var participant2 = elementRegistry.get('Participant_2'),
+              connection = elementRegistry.get('SequenceFlow_1');
+
+
+          selection.select([ participant2 ]);
+
+          // when
+          bendpointMove.start(canvasEvent(connection.waypoints[0]), connection, 0);
+
+          dragging.hover({
+            element: participant2
+          });
+
+          dragging.move(canvasEvent({ x: participant2.x + 200, y: participant2.y }));
+          dragging.end();
+
+
+          // then
+          expect(selection.get()).to.deep.eql([ participant2 ]);
+        })
+      );
+
+    });
+
   });
 
 });