feat(client): make properties panel resizable

Related to #866 Closes #911
camunda · Dec 1, 2018 · f38fef8 · f38fef8
1 parent 08a9376
commit f38fef8
Show file tree

Hide file tree

Showing 10 changed files with 265 additions and 28 deletions.
diff --git a/client/src/app/App.js b/client/src/app/App.js
@@ -340,8 +340,6 @@ export class App extends Component {
   }
 
   saveWorkspace = () => {
-    console.log('App#saveWorkspace');
-
     const {
       workspace
     } = this.props.globals;
@@ -378,8 +376,6 @@ export class App extends Component {
     // save layout
     config.layout = layout;
 
-    console.log('saving workspace', config);
-
     workspace.save(config);
   }
 

diff --git a/client/src/app/tabs/bpmn/BpmnEditor.js b/client/src/app/tabs/bpmn/BpmnEditor.js
@@ -25,12 +25,15 @@ import css from './BpmnEditor.less';
 
 import generateImage from '../../util/generateImage';
 
+import dragger from '../../../util/dom/dragger';
+
 import classNames from 'classnames';
 
 import { merge } from 'min-dash';
 
 import defaultLayout from '../defaultLayout';
 
+
 const COLORS = [{
   title: 'White',
   fill: 'white',
@@ -407,6 +410,37 @@ export class BpmnEditor extends CachedComponent {
     onLayoutChanged(newLayout);
   }
 
+  /**
+   * Returns dragger with cached properties panel width.
+   */
+  handlePropertiesPanelResize = (width) => {
+
+    return dragger((event, delta) => {
+      const {
+        x
+      } = delta;
+
+      const {
+        onLayoutChanged
+      } = this.props;
+
+      const newWidth = width - x;
+
+      const open = newWidth > 25;
+
+      this.setState({
+        layout: merge(this.state.layout, {
+          propertiesPanel: {
+            open,
+            width: (open ? newWidth : 0)
+          }
+        })
+      }, () => {
+        onLayoutChanged(this.state.layout);
+      });
+    });
+  }
+
   resize = () => {
     const {
       modeler
@@ -425,6 +459,10 @@ export class BpmnEditor extends CachedComponent {
 
     const propertiesPanel = layout.propertiesPanel || defaultLayout.propertiesPanel;
 
+    const propertiesPanelStyle = {
+      width: propertiesPanel.open ? propertiesPanel.width : 0
+    };
+
     return (
       <div className={ css.BpmnEditor }>
 
@@ -533,9 +571,18 @@ export class BpmnEditor extends CachedComponent {
           onContextMenu={ this.handleContextMenu }
         ></div>
 
-        <div className={ classNames('properties', { 'open': propertiesPanel.open }) }>
-          <div className="toggle" onClick={ this.handlePropertiesPanelToggle }>Properties Panel</div>
-          <div className="resize-handle"></div>
+        <div
+          className={ classNames('properties', { 'open': propertiesPanel.open }) }
+          style={ propertiesPanelStyle }>
+          <div
+            className="toggle"
+            onClick={ this.handlePropertiesPanelToggle }
+            draggable="true"
+            onDragStart={ this.handlePropertiesPanelResize(propertiesPanel.width) }>Properties Panel</div>
+          <div
+            className="resize-handle"
+            draggable="true"
+            onDragStart={ this.handlePropertiesPanelResize(propertiesPanel.width) }></div>
           <div className="properties-container" ref={ this.propertiesPanelRef }></div>
         </div>
       </div>

diff --git a/client/src/app/tabs/bpmn/BpmnEditor.less b/client/src/app/tabs/bpmn/BpmnEditor.less
@@ -19,10 +19,6 @@
     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;
@@ -54,8 +50,12 @@
     }
 
     .properties-container {
-      overflow: auto;
-      max-height: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      overflow-y: auto;
     }
   }
 

diff --git a/client/src/app/tabs/cmmn/CmmnEditor.js b/client/src/app/tabs/cmmn/CmmnEditor.js
@@ -16,6 +16,8 @@ import { getCmmnEditMenu } from './getCmmnEditMenu';
 
 import generateImage from '../../util/generateImage';
 
+import dragger from '../../../util/dom/dragger';
+
 import { merge } from 'min-dash';
 
 import classNames from 'classnames';
@@ -345,13 +347,48 @@ export class CmmnEditor extends CachedComponent {
     onLayoutChanged(newLayout);
   }
 
+  /**
+   * Returns dragger with cached properties panel width.
+   */
+  handlePropertiesPanelResize = (width) => {
+
+    return dragger((event, delta) => {
+      const {
+        x
+      } = delta;
+
+      const {
+        onLayoutChanged
+      } = this.props;
+
+      const newWidth = width - x;
+
+      const open = newWidth > 25;
+
+      this.setState({
+        layout: merge(this.state.layout, {
+          propertiesPanel: {
+            open,
+            width: (open ? newWidth : 0)
+          }
+        })
+      }, () => {
+        onLayoutChanged(this.state.layout);
+      });
+    });
+  }
+
   render() {
     const {
       layout
     } = this.state;
 
     const propertiesPanel = layout.propertiesPanel || defaultLayout.propertiesPanel;
 
+    const propertiesPanelStyle = {
+      width: propertiesPanel.open ? propertiesPanel.width : 0
+    };
+
     return (
       <div className={ css.CmmnEditor }>
 
@@ -362,9 +399,18 @@ export class CmmnEditor extends CachedComponent {
           onContextMenu={ this.handleContextMenu }
         ></div>
 
-        <div className={ classNames('properties', { 'open': propertiesPanel.open }) }>
-          <div className="toggle" onClick={ this.handlePropertiesPanelToggle }>Properties Panel</div>
-          <div className="resize-handle"></div>
+        <div
+          className={ classNames('properties', { 'open': propertiesPanel.open }) }
+          style={ propertiesPanelStyle }>
+          <div
+            className="toggle"
+            onClick={ this.handlePropertiesPanelToggle }
+            draggable="true"
+            onDragStart={ this.handlePropertiesPanelResize(propertiesPanel.width) }>Properties Panel</div>
+          <div
+            className="resize-handle"
+            draggable="true"
+            onDragStart={ this.handlePropertiesPanelResize(propertiesPanel.width) }></div>
           <div className="properties-container" ref={ this.propertiesPanelRef }></div>
         </div>
       </div>

diff --git a/client/src/app/tabs/cmmn/CmmnEditor.less b/client/src/app/tabs/cmmn/CmmnEditor.less
@@ -19,10 +19,6 @@
     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;

diff --git a/client/src/app/tabs/defaultLayout.js b/client/src/app/tabs/defaultLayout.js
@@ -3,6 +3,7 @@ export default {
     open: false
   },
   propertiesPanel: {
-    open: true
+    open: true,
+    width: 250
   }
 };
diff --git a/client/src/app/tabs/dmn/DmnEditor.js b/client/src/app/tabs/dmn/DmnEditor.js
@@ -27,6 +27,8 @@ import css from './DmnEditor.less';
 
 import generateImage from '../../util/generateImage';
 
+import dragger from '../../../util/dom/dragger';
+
 import { merge } from 'min-dash';
 
 import classNames from 'classnames';
@@ -469,13 +471,48 @@ class DmnEditor extends CachedComponent {
     });
   }
 
+  /**
+   * Returns dragger with cached properties panel width.
+   */
+  handlePropertiesPanelResize = (width) => {
+
+    return dragger((event, delta) => {
+      const {
+        x
+      } = delta;
+
+      const {
+        onLayoutChanged
+      } = this.props;
+
+      const newWidth = width - x;
+
+      const open = newWidth > 25;
+
+      this.setState({
+        layout: merge(this.state.layout, {
+          propertiesPanel: {
+            open,
+            width: (open ? newWidth : 0)
+          }
+        })
+      }, () => {
+        onLayoutChanged(this.state.layout);
+      });
+    });
+  }
+
   render() {
     const {
       layout
     } = this.state;
 
     const propertiesPanel = layout.propertiesPanel || defaultLayout.propertiesPanel;
 
+    const propertiesPanelStyle = {
+      width: propertiesPanel.open ? propertiesPanel.width : 0
+    };
+
     return (
       <div className={ css.DmnEditor }>
 
@@ -493,9 +530,18 @@ class DmnEditor extends CachedComponent {
 
         <div className="diagram" ref={ this.ref }></div>
 
-        <div className={ classNames('properties', { 'open': propertiesPanel.open }) }>
-          <div className="toggle" onClick={ this.handlePropertiesPanelToggle }>Properties Panel</div>
-          <div className="resize-handle"></div>
+        <div
+          className={ classNames('properties', { 'open': propertiesPanel.open }) }
+          style={ propertiesPanelStyle }>
+          <div
+            className="toggle"
+            onClick={ this.handlePropertiesPanelToggle }
+            draggable="true"
+            onDragStart={ this.handlePropertiesPanelResize(propertiesPanel.width) }>Properties Panel</div>
+          <div
+            className="resize-handle"
+            draggable="true"
+            onDragStart={ this.handlePropertiesPanelResize(propertiesPanel.width) }></div>
           <div className="properties-container" ref={ this.propertiesPanelRef }></div>
         </div>
       </div>

diff --git a/client/src/app/tabs/dmn/DmnEditor.less b/client/src/app/tabs/dmn/DmnEditor.less
@@ -32,10 +32,6 @@
     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;