test(modeling): ensure layout is done after element removal

* adjust test suite to pass with diagram-js@3.2
* verify new cropping behavior
* verify #940 is fixed

test/spec/features/modeling/DeleteShape.cropping.bpmn

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_0ab2xkc" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="3.2.1">
+  <bpmn:process id="Process_0e2pbo0" isExecutable="false">
+    <bpmn:startEvent id="StartEvent_010w5he">
+      <bpmn:outgoing>SequenceFlow_1</bpmn:outgoing>
+    </bpmn:startEvent>
+    <bpmn:task id="Task_0wdyv45">
+      <bpmn:incoming>SequenceFlow_2</bpmn:incoming>
+    </bpmn:task>
+    <bpmn:sequenceFlow id="SequenceFlow_1" sourceRef="StartEvent_010w5he" targetRef="Task_A" />
+    <bpmn:task id="Task_A" name="A">
+      <bpmn:incoming>SequenceFlow_1</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_2</bpmn:outgoing>
+    </bpmn:task>
+    <bpmn:sequenceFlow id="SequenceFlow_2" sourceRef="Task_A" targetRef="Task_0wdyv45" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_0e2pbo0">
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_010w5he">
+        <dc:Bounds x="156" y="81" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Task_0wdyv45_di" bpmnElement="Task_0wdyv45">
+        <dc:Bounds x="392" y="59" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="SequenceFlow_1_di" bpmnElement="SequenceFlow_1">
+        <di:waypoint x="192" y="99" />
+        <di:waypoint x="242" y="99" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="Task_A_di" bpmnElement="Task_A">
+        <dc:Bounds x="242" y="59" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="SequenceFlow_2_di" bpmnElement="SequenceFlow_2">
+        <di:waypoint x="342" y="99" />
+        <di:waypoint x="392" y="99" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/spec/features/modeling/DeleteShapeSpec.js

@@ -7,15 +7,15 @@ import modelingModule from 'lib/features/modeling';
 import coreModule from 'lib/core';
 
 
+var testModules = [ coreModule, modelingModule ];
+
+
 describe('features/modeling - #removeShape', function() {
 
   var diagramXML = require('../../../fixtures/bpmn/sequence-flows.bpmn');
 
-  var testModules = [ coreModule, modelingModule ];
-
   beforeEach(bootstrapModeler(diagramXML, { modules: testModules }));
 
-
   describe('shape handling', function() {
 
     it('should execute', inject(function(elementRegistry, modeling) {
@@ -71,3 +71,34 @@ describe('features/modeling - #removeShape', function() {
   });
 
 });
+
+
+describe('features/modeling - #removeShape', function() {
+
+  var diagramXML = require('./DeleteShape.cropping.bpmn');
+
+  beforeEach(bootstrapModeler(diagramXML, { modules: testModules }));
+
+
+  it('should crop waypoints on undo/redo', inject(
+    function(elementRegistry, commandStack, modeling) {
+
+      // given
+      var taskShape = elementRegistry.get('Task_A'),
+          sequenceFlowConnection = elementRegistry.get('SequenceFlow_1'),
+          incomingFlow = taskShape.incoming[0],
+          outgoingFlow = taskShape.outgoing[0],
+          expectedStart = incomingFlow.waypoints[0],
+          expectedEnd = outgoingFlow.waypoints[1];
+
+      // when
+      modeling.removeShape(taskShape);
+      commandStack.undo();
+      commandStack.redo();
+
+      // then
+      expect(sequenceFlowConnection).to.have.waypoints([ expectedStart, expectedEnd ]);
+    }
+  ));
+
+});

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

@@ -246,7 +246,7 @@ describe('modeling/behavior - drop on connection', function() {
             gfx: sequenceFlowGfx
           });
 
-          dragging.move(canvasEvent({ x: 150, y: 0 }));
+          dragging.move(canvasEvent({ x: 149, y: 0 }));
 
           dragging.end();
 
@@ -268,17 +268,17 @@ describe('modeling/behavior - drop on connection', function() {
           // split target at insertion point
           expect(sequenceFlow).to.have.waypoints(flatten([
             originalWaypoints.slice(0, 2),
-            { x: 341, y: 192 }
+            { x: 340, y: 192 }
           ]));
 
-          expect(sequenceFlow).to.have.endDocking({ x: 341, y: 210 });
+          expect(sequenceFlow).to.have.endDocking({ x: 340, y: 210 });
 
           expect(targetConnection).to.have.waypoints(flatten([
-            { x: 341, y: 228 },
+            { x: 340, y: 228 },
             originalWaypoints.slice(2)
           ]));
 
-          expect(targetConnection).to.have.startDocking({ x: 341, y: 210 });
+          expect(targetConnection).to.have.startDocking({ x: 340, y: 210 });
         }
       ));
 
@@ -307,7 +307,7 @@ describe('modeling/behavior - drop on connection', function() {
             gfx: rootElementGfx
           });
 
-          dragging.move(canvasEvent({ x: 150, y: 0 }));
+          dragging.move(canvasEvent({ x: 149, y: 0 }));
           dragging.end();
 
           // then
@@ -328,17 +328,17 @@ describe('modeling/behavior - drop on connection', function() {
           // split target at insertion point
           expect(sequenceFlow).to.have.waypoints(flatten([
             originalWaypoints.slice(0, 2),
-            { x: 341, y: 192 }
+            { x: 340, y: 192 }
           ]));
 
-          expect(sequenceFlow).to.have.endDocking({ x: 341, y: 210 });
+          expect(sequenceFlow).to.have.endDocking({ x: 340, y: 210 });
 
           expect(targetConnection).to.have.waypoints(flatten([
-            { x: 341, y: 228 },
+            { x: 340, y: 228 },
             originalWaypoints.slice(2)
           ]));
 
-          expect(targetConnection).to.have.startDocking({ x: 341, y: 210 });
+          expect(targetConnection).to.have.startDocking({ x: 340, y: 210 });
         }
       ));
 
@@ -361,17 +361,17 @@ describe('modeling/behavior - drop on connection', function() {
             gfx: sequenceFlowGfx
           });
 
-          dragging.move(canvasEvent({ x: 150, y: -130 }));
+          dragging.move(canvasEvent({ x: 149, y: -130 }));
           dragging.end();
 
           // then
           // split target but don't keep insertion point
           expect(sequenceFlow).to.have.waypoints(flatten([
             originalWaypoints.slice(0, 2),
-            { x: 341, y: 241 }
+            { x: 340, y: 241 }
           ]));
 
-          expect(sequenceFlow).to.have.endDocking({ x: 341, y: 281 });
+          expect(sequenceFlow).to.have.endDocking({ x: 340, y: 281 });
         }
       ));
 

test/spec/features/modeling/behavior/RemoveElementBehavior.diagonal.bpmn

@@ -0,0 +1,54 @@
+<?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:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.0.1">
+  <bpmn:process id="Process_1" isExecutable="false">
+    <bpmn:startEvent id="StartEvent1">
+      <bpmn:outgoing>SequenceFlow1</bpmn:outgoing>
+    </bpmn:startEvent>
+    <bpmn:task id="Task1">
+      <bpmn:incoming>SequenceFlow1</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow2</bpmn:outgoing>
+    </bpmn:task>
+    <bpmn:sequenceFlow id="SequenceFlow1" sourceRef="StartEvent1" targetRef="Task1" />
+    <bpmn:endEvent id="EndEvent1">
+      <bpmn:incoming>SequenceFlow2</bpmn:incoming>
+    </bpmn:endEvent>
+    <bpmn:sequenceFlow id="SequenceFlow2" sourceRef="Task1" targetRef="EndEvent1" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
+      <bpmndi:BPMNShape id="StartEvent1_di" bpmnElement="StartEvent1">
+        <dc:Bounds x="204" y="36" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="177" y="72" width="90" height="20" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Task1_di" bpmnElement="Task1">
+        <dc:Bounds x="407" y="73" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="SequenceFlow1_di" bpmnElement="SequenceFlow1">
+        <di:waypoint x="240" y="54" />
+        <di:waypoint x="324" y="54" />
+        <di:waypoint x="324" y="113" />
+        <di:waypoint x="407" y="113" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="278.5" y="44" width="90" height="20" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="EndEvent1_di" bpmnElement="EndEvent1">
+        <dc:Bounds x="650" y="199" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="622" y="72" width="90" height="20" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="SequenceFlow2_di" bpmnElement="SequenceFlow2">
+        <di:waypoint x="507" y="113" />
+        <di:waypoint x="579" y="113" />
+        <di:waypoint x="579" y="217" />
+        <di:waypoint x="650" y="217" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="533" y="44" width="90" height="20" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

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

@@ -187,6 +187,44 @@ describe('features/modeling - remove element behavior', function() {
 
     });
 
+
+    describe('connections layout', function() {
+
+      var processDiagramXML = require('./RemoveElementBehavior.diagonal.bpmn');
+
+      beforeEach(bootstrapModeler(processDiagramXML, { modules: testModules }));
+
+
+      it('should layout connection', inject(function(modeling, elementRegistry) {
+
+        // given
+        var task = elementRegistry.get('Task1');
+        var sequenceFlow1 = elementRegistry.get('SequenceFlow1');
+
+        // when
+        modeling.removeShape(task);
+
+        // then
+        var waypoints = sequenceFlow1.waypoints;
+
+        // SequenceFlow2 should be deleted
+        expect(elementRegistry.get('SequenceFlow2')).to.be.undefined;
+        expect(elementRegistry.get(task.id)).to.be.undefined;
+
+        // source and target have one connection each
+        expect(elementRegistry.get('StartEvent1').outgoing.length).to.be.equal(1);
+        expect(elementRegistry.get('EndEvent1').incoming.length).to.be.equal(1);
+
+        // connection has Manhattan layout
+        expect(waypoints).to.have.length(4);
+        expect(waypoints[0].y).to.eql(waypoints[1].y);
+        expect(waypoints[1].x).to.eql(waypoints[2].x);
+        expect(waypoints[2].y).to.eql(waypoints[3].y);
+
+      }));
+
+    });
+
   });