feat(client): add global layout

Related to #866 Related to #911
camunda · Dec 1, 2018 · b0f4db0 · b0f4db0
1 parent 7abb394
commit b0f4db0
Show file tree

Hide file tree

Showing 10 changed files with 352 additions and 127 deletions.
diff --git a/client/src/app/App.js b/client/src/app/App.js
@@ -29,6 +29,10 @@ import History from './History';
 
 import css from './App.less';
 
+import {
+  merge
+} from 'min-dash';
+
 const log = debug('App');
 
 const tabLoaded = {
@@ -51,7 +55,17 @@ export class App extends Component {
       tabs: [],
       activeTab: EMPTY_TAB,
       dirtyTabs: {},
-      tabState: {}
+      tabState: {},
+      layout: {
+
+        // TODO get layout from workspace
+        minimap: {
+          open: true
+        },
+        propertiesPanel: {
+          open: true
+        }
+      }
     };
 
     // TODO(nikku): make state
@@ -317,6 +331,20 @@ export class App extends Component {
     this.props.onContextMenu(type);
   }
 
+  handleLayoutChanged = (newLayout) => {
+    const {
+      layout
+    } = this.state;
+
+    this.setState({
+      layout: merge(layout, newLayout)
+    });
+
+    console.log('App#onLayoutChanged', merge(layout, newLayout));
+
+    // TODO persist to workspace
+  }
+
   /**
    * Mark the active tab as shown.
    */
@@ -697,7 +725,8 @@ export class App extends Component {
 
     const {
       tabs,
-      tabState
+      tabState,
+      layout
     } = this.state;
 
     const Tab = this.state.Tab || EmptyTab;
@@ -804,9 +833,11 @@ export class App extends Component {
               <Tab
                 key={ activeTab.id }
                 tab={ activeTab }
+                layout={ layout }
                 onChanged={ this.handleTabChanged }
                 onError={ this.handleTabError }
                 onShown={ this.handleTabShown }
+                onLayoutChanged={ this.handleLayoutChanged }
                 onContextMenu={ this.openTabMenu }
                 ref={ this.tabRef }
               />

diff --git a/client/src/app/cached/WithCachedState.js b/client/src/app/cached/WithCachedState.js
@@ -42,7 +42,7 @@ export default function(Comp) {
 
         const initialCachedState =
           'createCachedState' in Comp
-            ? Comp.createCachedState()
+            ? Comp.createCachedState(this.props)
             : {};
 
         const {

diff --git a/client/src/app/tabs/MultiSheetTab.js b/client/src/app/tabs/MultiSheetTab.js
@@ -81,9 +81,12 @@ class MultiSheetTab extends CachedComponent {
   }
 
   handleError = (error) => {
-    const { tab } = this.props;
+    const {
+      onError,
+      tab
+    } = this.props;
 
-    this.props.onError(tab, error);
+    onError(tab, error);
   }
 
   handleContextMenu = (event, context) => {
@@ -102,6 +105,14 @@ class MultiSheetTab extends CachedComponent {
 
   }
 
+  handleLayoutChanged = (newLayout) => {
+    const {
+      onLayoutChanged
+    } = this.props;
+
+    onLayoutChanged(newLayout);
+  }
+
   triggerAction = async (action, options) => {
 
     const editor = this.editorRef.current;
@@ -199,7 +210,8 @@ class MultiSheetTab extends CachedComponent {
 
     let {
       id,
-      xml
+      xml,
+      layout
     } = this.props;
 
     if (!sheets) {
@@ -219,11 +231,13 @@ class MultiSheetTab extends CachedComponent {
             ref={ this.editorRef }
             id={ `${id}-${activeSheet.id}` }
             xml={ lastXML || xml }
+            layout={ layout }
             activeSheet={ activeSheet }
             onSheetsChanged={ this.sheetsChanged }
             onContextMenu={ this.handleContextMenu }
             onChanged={ this.handleChanged }
-            onError={ this.handleError } />
+            onError={ this.handleError }
+            onLayoutChanged={ this.handleLayoutChanged } />
         </TabContainer>
 
         <TabLinks

diff --git a/client/src/app/tabs/bpmn/BpmnEditor.js b/client/src/app/tabs/bpmn/BpmnEditor.js
@@ -25,6 +25,10 @@ import css from './BpmnEditor.less';
 
 import generateImage from '../../util/generateImage';
 
+import classNames from 'classnames';
+
+import { merge } from 'min-dash';
+
 const COLORS = [{
   title: 'White',
   fill: 'white',
@@ -57,7 +61,13 @@ export class BpmnEditor extends CachedComponent {
   constructor(props) {
     super(props);
 
-    this.state = {};
+    const {
+      layout
+    } = this.props;
+
+    this.state = {
+      layout
+    };
 
     this.ref = React.createRef();
     this.propertiesPanelRef = React.createRef();
@@ -148,9 +158,11 @@ export class BpmnEditor extends CachedComponent {
   }
 
   handleMinimapToggle = (event) => {
-    console.warn('minimap toggle', event.open);
-
-    // TODO(nikku): persist minimap toggle state
+    this.handleLayoutChange({
+      minimap: {
+        open: event.open
+      }
+    });
   }
 
   handleElementTemplateErrors = (event) => {
@@ -353,6 +365,36 @@ export class BpmnEditor extends CachedComponent {
     }
   }
 
+  handlePropertiesPanelToggle = () => {
+    const {
+      layout
+    } = this.state;
+
+    this.handleLayoutChange({
+      propertiesPanel: {
+        open: !layout.propertiesPanel.open
+      }
+    });
+  }
+
+  handleLayoutChange(newLayout) {
+    const {
+      onLayoutChanged
+    } = this.props;
+
+    const {
+      layout
+    } = this.state;
+
+    newLayout = merge(layout, newLayout);
+
+    this.setState({
+      layout: newLayout
+    });
+
+    onLayoutChanged(newLayout);
+  }
+
   resize = () => {
     const {
       modeler
@@ -364,11 +406,13 @@ export class BpmnEditor extends CachedComponent {
   }
 
   render() {
-
     const {
+      layout,
       loading
     } = this.state;
 
+    const propertiesPanelOpen = layout.propertiesPanel && layout.propertiesPanel.open;
+
     return (
       <div className={ css.BpmnEditor }>
 
@@ -477,20 +521,27 @@ export class BpmnEditor extends CachedComponent {
           onContextMenu={ this.handleContextMenu }
         ></div>
 
-        <div className="properties">
-          <div className="toggle">Properties Panel</div>
+        <div className={ classNames('properties', { 'open': propertiesPanelOpen }) }>
+          <div className="toggle" onClick={ this.handlePropertiesPanelToggle }>Properties Panel</div>
           <div className="resize-handle"></div>
           <div className="properties-container" ref={ this.propertiesPanelRef }></div>
         </div>
       </div>
     );
   }
 
-  static createCachedState() {
+  static createCachedState(props) {
+
+    const {
+      layout
+    } = props;
 
     // TODO(nikku): wire element template loading
     const modeler = new CamundaBpmnModeler({
-      position: 'absolute'
+      position: 'absolute',
+      minimap: {
+        open: layout.minimap.open
+      }
     });
 
     return {

diff --git a/client/src/app/tabs/bpmn/BpmnEditor.less b/client/src/app/tabs/bpmn/BpmnEditor.less
@@ -19,6 +19,10 @@
     border-left: solid 1px #CCC;
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
 
+    &:not(.open) .properties-container {
+      width: 0px;
+    }
+
     .toggle {
       position: absolute;
       left: -30px;