feat(grid-snapping): integrate auto resize

Related to camunda/camunda-modeler#1344
Related to camunda/camunda-modeler#1349

lib/features/auto-resize/BpmnAutoResize.js

@@ -27,11 +27,11 @@ inherits(BpmnAutoResize, AutoResize);
  * @param  {djs.model.Shape} target
  * @param  {Object} newBounds
  */
-BpmnAutoResize.prototype.resize = function(target, newBounds) {
+BpmnAutoResize.prototype.resize = function(target, newBounds, hints) {
 
   if (is(target, 'bpmn:Participant')) {
-    this._modeling.resizeLane(target, newBounds);
+    this._modeling.resizeLane(target, newBounds, null, hints);
   } else {
-    this._modeling.resizeShape(target, newBounds);
+    this._modeling.resizeShape(target, newBounds, null, hints);
   }
 };

lib/features/modeling/behavior/ToggleElementCollapseBehaviour.js

@@ -119,7 +119,9 @@ export default function ToggleElementCollapseBehaviour(
       newBounds = expandedBounds(shape, defaultSize);
     }
 
-    modeling.resizeShape(shape, newBounds);
+    modeling.resizeShape(shape, newBounds, null, {
+      autoResize: shape.collapsed ? false : 'nwse'
+    });
   });
 
 }

test/spec/features/grid-snapping/BpmnGridSnapping.bpmn

@@ -8,7 +8,20 @@
     <bpmn:association id="Association_0punwjh" sourceRef="Participant_1" targetRef="TextAnnotation_1" />
   </bpmn:collaboration>
   <bpmn:process id="Process_1" isExecutable="true">
-    <bpmn:subProcess id="SubProcess_1" name="SubProcess_1" />
+    <bpmn:subProcess id="SubProcess_1" name="SubProcess_1">
+      <bpmn:task id="Task_1" name="Task_1">
+        <bpmn:incoming>SequenceFlow_0e7hjjz</bpmn:incoming>
+        <bpmn:outgoing>SequenceFlow_0jhtpzs</bpmn:outgoing>
+      </bpmn:task>
+      <bpmn:startEvent id="StartEvent_1" name="StartEvent_1">
+        <bpmn:outgoing>SequenceFlow_0e7hjjz</bpmn:outgoing>
+      </bpmn:startEvent>
+      <bpmn:endEvent id="EndEvent_1" name="EndEvent_1">
+        <bpmn:incoming>SequenceFlow_0jhtpzs</bpmn:incoming>
+      </bpmn:endEvent>
+      <bpmn:sequenceFlow id="SequenceFlow_0e7hjjz" sourceRef="StartEvent_1" targetRef="Task_1" />
+      <bpmn:sequenceFlow id="SequenceFlow_0jhtpzs" sourceRef="Task_1" targetRef="EndEvent_1" />
+    </bpmn:subProcess>
   </bpmn:process>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_1">
@@ -25,6 +38,29 @@
         <di:waypoint x="646" y="100" />
         <di:waypoint x="706" y="70" />
       </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="Task_10ndd1c_di" bpmnElement="Task_1">
+        <dc:Bounds x="273" y="180" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="StartEvent_0ck0xbl_di" bpmnElement="StartEvent_1">
+        <dc:Bounds x="190" y="202" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="176" y="245" width="64" height="14" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="EndEvent_0fx80e1_di" bpmnElement="EndEvent_1">
+        <dc:Bounds x="420" y="202" width="36" height="36" />
+        <bpmndi:BPMNLabel>
+          <dc:Bounds x="408" y="245" width="60" height="14" />
+        </bpmndi:BPMNLabel>
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="SequenceFlow_0e7hjjz_di" bpmnElement="SequenceFlow_0e7hjjz">
+        <di:waypoint x="226" y="220" />
+        <di:waypoint x="273" y="220" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="SequenceFlow_0jhtpzs_di" bpmnElement="SequenceFlow_0jhtpzs">
+        <di:waypoint x="373" y="220" />
+        <di:waypoint x="420" y="220" />
+      </bpmndi:BPMNEdge>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
 </bpmn:definitions>

test/spec/features/grid-snapping/BpmnGridSnappingSpec.js

@@ -13,7 +13,13 @@ import {
   createCanvasEvent as canvasEvent
 } from '../../../util/MockEvents';
 
-import { isString } from 'min-dash';
+import { getMid } from 'diagram-js/lib/layout/LayoutUtil';
+
+import {
+  isString,
+  pick,
+  assign
+} from 'min-dash';
 
 var LOW_PRIORITY = 500;
 
@@ -43,7 +49,7 @@ describe('features/grid-snapping', function() {
   }));
 
 
-  describe('snap top-left', function() {
+  describe('snap top-left on move', function() {
 
     it('participant', inject(function(dragging, eventBus, move) {
 
@@ -151,6 +157,114 @@ describe('features/grid-snapping', function() {
 
   });
 
+
+  describe('auto resize <nwse> on toggle collapse', function() {
+
+    describe('collapsing', function() {
+
+      it('participant (no auto resize)', inject(function(bpmnReplace) {
+
+        // given
+        var bounds = assign(
+          getBounds(participant),
+          { height: 100 }
+        );
+
+        // when
+        var collapsedParticipant = bpmnReplace.replaceElement(participant,
+          {
+            type: 'bpmn:Participant',
+            isExpanded: false
+          }
+        );
+
+        // then
+        expect(getBounds(collapsedParticipant)).to.eql(bounds);
+      }));
+
+
+      it('sub process (no auto resize)', inject(function(bpmnReplace) {
+
+        // given
+        var mid = getMid(subProcess);
+
+        // when
+        var collapsedSubProcess = bpmnReplace.replaceElement(subProcess,
+          {
+            type: 'bpmn:SubProcess',
+            isExpanded: false
+          }
+        );
+
+        // then
+        expect(getMid(collapsedSubProcess)).to.eql(mid);
+        expect(collapsedSubProcess).to.include({
+          width: 100,
+          height: 80
+        });
+      }));
+
+    });
+
+
+    describe('expanding', function() {
+
+      it('participant (auto resize <nwse>)', inject(function(bpmnReplace) {
+
+        // given
+        var bounds = getBounds(participant);
+
+        var collapsedParticipant = bpmnReplace.replaceElement(participant,
+          {
+            type: 'bpmn:Participant',
+            isExpanded: false
+          }
+        );
+
+        // when
+        var expandedParticipant = bpmnReplace.replaceElement(collapsedParticipant,
+          {
+            type: 'bpmn:Participant',
+            isExpanded: true
+          }
+        );
+
+        // then
+        expect(getBounds(expandedParticipant)).to.eql(bounds);
+      }));
+
+
+      it('sub process (auto resize <nwse>)', inject(function(bpmnReplace) {
+
+        // given
+        var collapsedSubProcess = bpmnReplace.replaceElement(subProcess,
+          {
+            type: 'bpmn:SubProcess',
+            isExpanded: false
+          }
+        );
+
+        // when
+        var expandedSubProcess = bpmnReplace.replaceElement(collapsedSubProcess,
+          {
+            type: 'bpmn:SubProcess',
+            isExpanded: true
+          }
+        );
+
+        // then
+        expect(expandedSubProcess).to.include({
+          x: 140,
+          y: 120,
+          width: 360,
+          height: 210
+        });
+      }));
+
+    });
+
+  });
+
 });
 
 // helpers //////////
@@ -215,3 +329,7 @@ function position(event) {
     y: event.y
   };
 }
+
+function getBounds(shape) {
+  return pick(shape, [ 'x', 'y', 'width', 'height' ]);
+}