fix(drop-on-sequence-flow): ensure correct behaviour

Closes #667

lib/features/modeling/behavior/DropOnFlowBehavior.js

@@ -8,11 +8,18 @@ var CommandInterceptor = require('diagram-js/lib/command/CommandInterceptor');
 
 var getApproxIntersection = require('diagram-js/lib/util/LineIntersection').getApproxIntersection;
 
-
 function copy(obj) {
   return assign({}, obj);
 }
 
+function getMid(bounds) {
+
+  return {
+    x: Math.round(bounds.x + bounds.width / 2),
+    y: Math.round(bounds.y + bounds.height / 2)
+  };
+}
+
 function DropOnFlow(eventBus, bpmnRules, modeling) {
 
   CommandInterceptor.call(this, eventBus);
@@ -59,35 +66,38 @@ function DropOnFlow(eventBus, bpmnRules, modeling) {
     }
   }
 
-  eventBus.on('shape.move.move', 250, function(event) {
+  this.preExecute('elements.move', function(context) {
 
-    var context = event.context,
-        target = context.target,
-        targetFlow = context.targetFlow,
-        shape = context.shape,
-        shapes = context.shapes;
+    var parent = context.newParent,
+        shapes = context.shapes,
+        shape,
+        shapeMid,
+        delta = context.delta;
 
-    if (shapes.length === 1 && bpmnRules.canInsert(shape, target)) {
-      context.targetFlow = target;
-      context.target = target.parent;
-    } else if (targetFlow) {
-      context.targetFlow = context.flowParent = null;
-    }
-  });
+    if (bpmnRules.canInsert(shapes, parent)) {
 
-  eventBus.on('shape.move.end', 250, function(event) {
+      shape = shapes[0];
+      shapeMid = getMid(shape);
 
-    var context = event.context,
-        shape = context.shape,
-        targetFlow = context.targetFlow,
-        position = {
-          x: shape.x + (shape.width / 2),
-          y: shape.y + (shape.height / 2)
+      context.targetFlow = parent;
+      context.newParent = parent.parent;
+      context.position = {
+        x: shapeMid.x + delta.x,
+        y: shapeMid.y + delta.y
       };
+    }
+  }, true);
+
+  this.postExecuted('elements.move', function(context) {
+
+    var shapes = context.shapes,
+        targetFlow = context.targetFlow,
+        position = context.position;
 
     if (targetFlow) {
-      insertShape(shape, targetFlow, position);
+      insertShape(shapes[0], targetFlow, position);
     }
+
   }, true);
 
   this.preExecute('shape.create', function(context) {

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

@@ -283,7 +283,7 @@ describe('modeling/behavior - drop on connection', function() {
         // no incoming connection
         expect(startEventShape.incoming.length).to.equal(0);
 
-        // no outgoing edges
+        // 1 outgoing connection
         expect(startEventShape.outgoing.length).to.equal(1);
         expect(startEventShape.outgoing[0]).to.eql(sequenceFlow);
 
@@ -294,6 +294,45 @@ describe('modeling/behavior - drop on connection', function() {
         ]));
       }));
 
+
+      it('should undo',
+        inject(function(modeling, elementRegistry, dragging, selection, move, commandStack) {
+
+          // given
+          var startEventShape = elementRegistry.get('StartEvent_foo');
+
+          var sequenceFlow = elementRegistry.get('SequenceFlow'),
+              sequenceFlowGfx = elementRegistry.getGraphics(sequenceFlow),
+              originalWaypoints = sequenceFlow.waypoints;
+
+          selection.select(startEventShape);
+
+          move.start(canvasEvent({ x: 0, y: 0 }), startEventShape);
+
+          dragging.hover({
+            element: sequenceFlow,
+            gfx: sequenceFlowGfx
+          });
+
+          dragging.move(canvasEvent({ x: -215, y: 0 }));
+
+          dragging.end();
+
+          // when
+          commandStack.undo();
+
+          // then
+
+          // no incoming connection
+          expect(startEventShape.incoming.length).to.equal(0);
+
+          // no outgoing edges
+          expect(startEventShape.outgoing.length).to.equal(0);
+
+          // split target at insertion point
+          expect(sequenceFlow).to.have.waypoints(flatten([ originalWaypoints ]));
+        }));
+
     });
 
   });