From 88a7852e51a7c24d3a39bbeabf1d6e25f55daa89 Mon Sep 17 00:00:00 2001 From: Maciej Barelkowski Date: Tue, 8 Jan 2019 17:16:49 +0100 Subject: [PATCH] feat(editors): resize properties panel along with editor Closes #1080 --- client/src/app/tabs/bpmn/BpmnEditor.js | 8 ++- .../app/tabs/bpmn/__tests__/BpmnEditorSpec.js | 52 ++++++++++++++++++ client/src/app/tabs/cmmn/CmmnEditor.js | 16 ++++-- .../app/tabs/cmmn/__tests__/CmmnEditorSpec.js | 52 ++++++++++++++++++ client/src/app/tabs/dmn/DmnEditor.js | 30 ++++++++++- .../app/tabs/dmn/__tests__/DmnEditorSpec.js | 53 +++++++++++++++++++ client/test/mocks/bpmn-js/Modeler.js | 3 ++ client/test/mocks/cmmn-js/Modeler.js | 3 ++ client/test/mocks/dmn-js/Modeler.js | 3 ++ 9 files changed, 213 insertions(+), 7 deletions(-) diff --git a/client/src/app/tabs/bpmn/BpmnEditor.js b/client/src/app/tabs/bpmn/BpmnEditor.js index 5f261373d6..3dec280f7f 100644 --- 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 index fa8673d221..ffdea2fae1 100644 --- a/client/src/app/tabs/bpmn/__tests__/BpmnEditorSpec.js +++ b/client/src/app/tabs/bpmn/__tests__/BpmnEditorSpec.js @@ -622,6 +622,58 @@ describe('', 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 index 956bff52df..ae322cc3f4 100644 --- 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 index 5cabddaa26..7fba2438ad 100644 --- a/client/src/app/tabs/cmmn/__tests__/CmmnEditorSpec.js +++ b/client/src/app/tabs/cmmn/__tests__/CmmnEditorSpec.js @@ -402,6 +402,58 @@ describe('', 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 index 7d7c6aa802..db8d3fceb2 100644 --- 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 index 4def50de0f..1331613467 100644 --- a/client/src/app/tabs/dmn/__tests__/DmnEditorSpec.js +++ b/client/src/app/tabs/dmn/__tests__/DmnEditorSpec.js @@ -390,6 +390,59 @@ describe('', 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 index de69d9ffe7..fb955f4210 100644 --- 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 index d144b5768d..eedbb9e75a 100644 --- 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 index 7bd6eda84c..16cf18c78d 100644 --- 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() {} },