feat(editors): resize properties panel along with editor

Closes #1080
camunda · Jan 11, 2019 · 88a7852 · 88a7852
1 parent 600ef2a
commit 88a7852
Show file tree

Hide file tree

Showing 9 changed files with 213 additions and 7 deletions.
diff --git a/client/src/app/tabs/bpmn/BpmnEditor.js b/client/src/app/tabs/bpmn/BpmnEditor.js
@@ -131,10 +131,14 @@ export class BpmnEditor extends CachedComponent {
     propertiesPanel.detach();
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     if (!this.state.importing) {
       this.checkImport();
     }
+
+    if (prevProps.layout.propertiesPanel !== this.props.layout.propertiesPanel) {
+      this.triggerAction('resize');
+    }
   }
 
   ifMounted = (fn) => {
@@ -493,8 +497,10 @@ export class BpmnEditor extends CachedComponent {
     const modeler = this.getModeler();
 
     const canvas = modeler.get('canvas');
+    const eventBus = modeler.get('eventBus');
 
     canvas.resized();
+    eventBus.fire('propertiesPanel.resized');
   }
 
   render() {

diff --git a/client/src/app/tabs/bpmn/__tests__/BpmnEditorSpec.js b/client/src/app/tabs/bpmn/__tests__/BpmnEditorSpec.js
@@ -622,6 +622,58 @@ describe('<BpmnEditor>', function() {
 
   });
 
+
+  describe('editor resize', function() {
+
+    afterEach(sinon.restore);
+
+
+    it('should resize editor and properties panel on layout change', async function() {
+
+      // given
+      const eventBusStub = sinon.stub({ fire() {} }),
+            canvasStub = sinon.stub({ resized() {} });
+
+      const cache = new Cache();
+
+      cache.add('editor', {
+        cached: {
+          modeler: new BpmnModeler({
+            eventBus: eventBusStub,
+            canvas: canvasStub
+          })
+        }
+      });
+
+      const {
+        instance
+      } = await renderEditor(diagramXML, {
+        cache
+      });
+
+      const mockLayout = {
+        propertiesPanel: {
+          open: true,
+          width: 500
+        }
+      };
+
+      eventBusStub.fire.resetHistory();
+      canvasStub.resized.resetHistory();
+
+      // when
+      const prevProps = instance.props;
+
+      instance.props = { ...prevProps, layout: mockLayout };
+      instance.componentDidUpdate(prevProps);
+
+      // expect
+      expect(canvasStub.resized).to.be.called;
+      expect(eventBusStub.fire).to.be.calledOnceWith('propertiesPanel.resized');
+    });
+
+  });
+
 });
 
 

diff --git a/client/src/app/tabs/cmmn/CmmnEditor.js b/client/src/app/tabs/cmmn/CmmnEditor.js
@@ -96,10 +96,14 @@ export class CmmnEditor extends CachedComponent {
     modeler[fn]('error', 1500, this.handleError);
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     if (!this.state.importing) {
       this.checkImport();
     }
+
+    if (prevProps.layout.propertiesPanel !== this.props.layout.propertiesPanel) {
+      this.triggerAction('resize');
+    }
   }
 
   undo = () => {
@@ -299,14 +303,14 @@ export class CmmnEditor extends CachedComponent {
   }
 
   triggerAction = (action, context) => {
-    const {
-      modeler
-    } = this.getCached();
-
     if (action === 'resize') {
       return this.resize();
     }
 
+    const {
+      modeler
+    } = this.getCached();
+
     // TODO(nikku): handle all editor actions
     modeler.get('editorActions').trigger(action, context);
   }
@@ -335,8 +339,10 @@ export class CmmnEditor extends CachedComponent {
     } = this.getCached();
 
     const canvas = modeler.get('canvas');
+    const eventBus = modeler.get('eventBus');
 
     canvas.resized();
+    eventBus.fire('propertiesPanel.resized');
   }
 
   render() {

diff --git a/client/src/app/tabs/cmmn/__tests__/CmmnEditorSpec.js b/client/src/app/tabs/cmmn/__tests__/CmmnEditorSpec.js
@@ -402,6 +402,58 @@ describe('<CmmnEditor>', function() {
 
   });
 
+
+  describe('editor resize', function() {
+
+    afterEach(sinon.restore);
+
+
+    it('should resize editor and properties panel on layout change', async function() {
+
+      // given
+      const eventBusStub = sinon.stub({ fire() {} }),
+            canvasStub = sinon.stub({ resized() {} });
+
+      const cache = new Cache();
+
+      cache.add('editor', {
+        cached: {
+          modeler: new CmmnModeler({
+            eventBus: eventBusStub,
+            canvas: canvasStub
+          })
+        }
+      });
+
+      const {
+        instance
+      } = await renderEditor(diagramXML, {
+        cache
+      });
+
+      const mockLayout = {
+        propertiesPanel: {
+          open: true,
+          width: 500
+        }
+      };
+
+      eventBusStub.fire.resetHistory();
+      canvasStub.resized.resetHistory();
+
+      // when
+      const prevProps = instance.props;
+
+      instance.props = { ...prevProps, layout: mockLayout };
+      instance.componentDidUpdate(prevProps);
+
+      // expect
+      expect(canvasStub.resized).to.be.called;
+      expect(eventBusStub.fire).to.be.calledOnceWith('propertiesPanel.resized');
+    });
+
+  });
+
 });
 
 

diff --git a/client/src/app/tabs/dmn/DmnEditor.js b/client/src/app/tabs/dmn/DmnEditor.js
@@ -78,10 +78,14 @@ export class DmnEditor extends CachedComponent {
     modeler.detach();
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     if (!this.state.importing) {
       this.checkImport();
     }
+
+    if (prevProps.layout.propertiesPanel !== this.props.layout.propertiesPanel) {
+      this.triggerAction('resize');
+    }
   }
 
   ifMounted = (fn) => {
@@ -384,6 +388,10 @@ export class DmnEditor extends CachedComponent {
   }
 
   triggerAction = (action, options) => {
+    if (action === 'resize') {
+      return this.resize();
+    }
+
     const {
       modeler
     } = this.getCached();
@@ -393,6 +401,26 @@ export class DmnEditor extends CachedComponent {
       .trigger(action);
   }
 
+  resize = () => {
+    const {
+      modeler
+    } = this.getCached();
+
+    const view = modeler.getActiveView();
+
+    if (view.type !== 'drd') {
+      return;
+    }
+
+    const viewer = modeler.getActiveViewer();
+
+    const canvas = viewer.get('canvas');
+    const eventBus = viewer.get('eventBus');
+
+    canvas.resized();
+    eventBus.fire('propertiesPanel.resized');
+  }
+
   getXML() {
     const {
       modeler

diff --git a/client/src/app/tabs/dmn/__tests__/DmnEditorSpec.js b/client/src/app/tabs/dmn/__tests__/DmnEditorSpec.js
@@ -390,6 +390,59 @@ describe('<DmnEditor>', function() {
 
   });
 
+
+  describe('editor resize', function() {
+
+    afterEach(sinon.restore);
+
+
+    it('should resize editor and properties panel on layout change', async function() {
+
+      // given
+      const eventBusStub = sinon.stub({ fire() {} }),
+            canvasStub = sinon.stub({ resized() {} });
+
+      const cache = new Cache();
+
+      cache.add('editor', {
+        cached: {
+          modeler: new DmnModeler({
+            eventBus: eventBusStub,
+            canvas: canvasStub
+          })
+        }
+      });
+
+      const {
+        instance
+      } = await renderEditor(diagramXML, {
+        cache
+      });
+
+      const mockLayout = {
+        propertiesPanel: {
+          open: true,
+          width: 500
+        }
+      };
+
+      eventBusStub.fire.resetHistory();
+      canvasStub.resized.resetHistory();
+
+      // when
+      const prevProps = instance.props;
+
+      instance.props = { ...prevProps, layout: mockLayout };
+      instance.componentDidUpdate(prevProps);
+
+      // expect
+      expect(canvasStub.resized).to.be.called;
+      expect(eventBusStub.fire).to.be.calledOnceWith('propertiesPanel.resized');
+    });
+
+  });
+
+
 });
 
 

diff --git a/client/test/mocks/bpmn-js/Modeler.js b/client/test/mocks/bpmn-js/Modeler.js
@@ -26,6 +26,9 @@ export default class Modeler {
 
   _getDefaultModules() {
     return {
+      eventBus: {
+        fire() {}
+      },
       canvas: {
         resized() {}
       },

diff --git a/client/test/mocks/cmmn-js/Modeler.js b/client/test/mocks/cmmn-js/Modeler.js
@@ -15,6 +15,9 @@ export default class Modeler {
 
   _getDefaultModules() {
     return {
+      eventBus: {
+        fire() {}
+      },
       canvas: {
         resized() {}
       },

diff --git a/client/test/mocks/dmn-js/Modeler.js b/client/test/mocks/dmn-js/Modeler.js
@@ -17,6 +17,9 @@ class Viewer {
 
   _getDefaultModules() {
     return {
+      eventBus: {
+        fire() {}
+      },
       canvas: {
         resized() {}
       },