fix(auto-resize): resize collapsed element when it is expanded

* AutoResize will now be activated whenever a collapsed element is expanded unless the auto resizing is explicitly deactivated Closes #287
bpmn-io · Oct 11, 2018 · c82dca0 · c82dca0
1 parent 1efb277
commit c82dca0
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 0 deletions.
diff --git a/lib/features/auto-resize/AutoResize.js b/lib/features/auto-resize/AutoResize.js
@@ -78,6 +78,22 @@ export default function AutoResize(eventBus, elementRegistry, modeling, rules) {
       self._expand(elements, parentId);
     });
   });
+
+  this.postExecuted([ 'shape.toggleCollapse' ], function(event) {
+    var context = event.context,
+        hints = context.hints,
+        shape = context.shape;
+
+    if (hints && (hints.root === false || hints.autoResize === false)) {
+      return;
+    }
+
+    if (shape.collapsed) {
+      return;
+    }
+
+    self._expand(shape.children || [], shape);
+  });
 }
 
 AutoResize.$inject = [

diff --git a/test/spec/features/auto-resize/AutoResizeSpec.js b/test/spec/features/auto-resize/AutoResizeSpec.js
@@ -331,6 +331,96 @@ describe('features/auto-resize', function() {
 
   });
 
+  describe('collapsed shape', function() {
+
+    var collapsedShape, hiddenContainedChild;
+
+    beforeEach(bootstrapDiagram({
+      modules: [
+        modelingModule,
+        autoResizeModule,
+        customAutoResizeModule,
+        createModule
+      ]
+    }));
+
+    beforeEach(inject(function(elementFactory, canvas) {
+      rootShape = elementFactory.createRoot({
+        id: 'root'
+      });
+
+      canvas.setRootElement(rootShape);
+
+      collapsedShape = elementFactory.createShape({
+        id: 'collapsedShape',
+        x: 110, y: 110, width: 200, height: 200,
+        collapsed: true
+      });
+
+      canvas.addShape(collapsedShape, rootShape);
+    }));
+
+    it('should resize element which is expanded',
+      inject(function(elementFactory, canvas, modeling, autoResize) {
+        // given
+        var autoResizeSpy = sinon.spy(autoResize, '_expand');
+
+        hiddenContainedChild = elementFactory.createShape({
+          id: 'hiddenContainedChild',
+          x: 120, y: 120, width: 400, height: 400,
+          hidden: true
+        });
+
+        canvas.addShape(hiddenContainedChild, collapsedShape);
+
+        // when
+        modeling.toggleCollapse(collapsedShape);
+
+        // then
+        expect(collapsedShape).to.have.bounds({ x: 110, y: 110, width: 420, height: 420 });
+        expect(hiddenContainedChild).to.have.bounds({ x: 120, y: 120, width: 400, height: 400 });
+        expect(autoResizeSpy).to.be.called;
+      })
+    );
+
+    it('should resize element which is expanded even if it has no children',
+      inject(function(modeling, autoResize) {
+        // given
+        var autoResizeSpy = sinon.spy(autoResize, '_expand');
+
+        // when
+        modeling.toggleCollapse(collapsedShape);
+
+        // then
+        expect(collapsedShape).to.have.bounds({ x: 110, y: 110, width: 200, height: 200 });
+        expect(autoResizeSpy).to.be.called;
+      })
+    );
+
+    describe('hints', function() {
+
+      it('should not resize on autoResize=false hint',
+        inject(function(eventBus, modeling, autoResize) {
+          // given
+          var autoResizeSpy = sinon.spy(autoResize, '_expand');
+
+          eventBus.on('commandStack.shape.toggleCollapse.preExecute', function(event) {
+            event.context.hints = { autoResize: false };
+          });
+
+          // when
+          modeling.toggleCollapse(collapsedShape);
+
+          // then
+          expect(collapsedShape).to.have.bounds({ x: 110, y: 110, width: 200, height: 200 });
+          expect(autoResizeSpy).to.not.be.called;
+        })
+      );
+
+    });
+
+  });
+
 
   it('should provide extension points', inject(function(autoResize, modeling) {