fix(tab): improve log and properties panel resize performance

Closes #1081
camunda · Jan 9, 2019 · d74bebc · d74bebc
1 parent 2c416a5
commit d74bebc
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 41 deletions.
diff --git a/client/src/app/Log.js b/client/src/app/Log.js
@@ -6,9 +6,15 @@ import classNames from 'classnames';
 
 import dragger from '../util/dom/dragger';
 
+import {
+  throttle
+} from 'min-dash';
+
 
 const DEFAULT_HEIGHT = 130;
 
+const RESIZE_THROTTLE = 10;
+
 /**
  * A log component
  *
@@ -27,6 +33,8 @@ export default class Log extends Component {
     this.state = {};
 
     this.panelRef = React.createRef();
+
+    this.handleResize = throttle(this.handleResize, RESIZE_THROTTLE);
   }
 
   toggleLog = () => {
@@ -62,35 +70,37 @@ export default class Log extends Component {
     });
   }
 
-  /**
-   * Returns dragger with cached properties panel width.
-   */
-  handleResize = (originalHeight) => {
+  handleResizeStart = event => {
+    const onDragStart = dragger(this.handleResize);
 
-    return dragger((event, delta) => {
-      const {
-        y
-      } = delta;
+    this.originalHeight = this.currentHeight;
 
-      const newHeight = originalHeight - y;
+    onDragStart(event);
+  }
 
-      const newExpanded = newHeight > 25;
+  handleResize = (_, delta) => {
+    const {
+      y
+    } = delta;
 
-      const height = (newExpanded ? newHeight : DEFAULT_HEIGHT);
+    const newHeight = this.originalHeight - y;
 
-      const {
-        expanded,
-        onToggle
-      } = this.props;
+    const newExpanded = newHeight > 25;
 
-      this.setState({
-        height
-      });
+    const height = (newExpanded ? newHeight : DEFAULT_HEIGHT);
 
-      if (expanded !== newExpanded) {
-        onToggle(newExpanded);
-      }
+    const {
+      expanded,
+      onToggle
+    } = this.props;
+
+    this.setState({
+      height
     });
+
+    if (expanded !== newExpanded) {
+      onToggle(newExpanded);
+    }
   }
 
   checkFocus = () => {
@@ -175,6 +185,8 @@ export default class Log extends Component {
 
     const logHeight = height || DEFAULT_HEIGHT;
 
+    this.currentHeight = logHeight;
+
     return (
       <div
         className={ classNames(
@@ -194,7 +206,7 @@ export default class Log extends Component {
 
         <div
           className="resizer"
-          onDragStart={ this.handleResize(logHeight) }
+          onDragStart={ this.handleResizeStart }
           draggable
         ></div>
 

diff --git a/client/src/app/tabs/PropertiesContainer.js b/client/src/app/tabs/PropertiesContainer.js
@@ -4,6 +4,10 @@ import classNames from 'classnames';
 
 import dragger from '../../util/dom/dragger';
 
+import {
+  throttle
+} from 'min-dash';
+
 import css from './PropertiesContainer.less';
 
 
@@ -12,6 +16,8 @@ const DEFAULT_LAYOUT = {
   width: 250
 };
 
+const RESIZE_THROTTLE = 10;
+
 
 /**
  * A generic container to hold our editors properties panels.
@@ -20,6 +26,12 @@ const DEFAULT_LAYOUT = {
  */
 class PropertiesContainerWrapped extends Component {
 
+  constructor(props) {
+    super(props);
+
+    this.handleResize = throttle(this.handleResize, RESIZE_THROTTLE);
+  }
+
   changeLayout = (newLayout) => {
 
     const {
@@ -53,28 +65,34 @@ class PropertiesContainerWrapped extends Component {
     });
   }
 
-  /**
-   * Returns dragger with cached properties panel width.
-   */
-  handleResize = (originalWidth) => {
+  handleResizeStart = event => {
+    const onDragStart = dragger(this.handleResize);
 
-    return dragger((event, delta) => {
-      const {
-        x
-      } = delta;
+    this.originalWidth = this.currentWidth;
 
-      const newWidth = originalWidth - x;
+    onDragStart(event);
+  }
 
-      const open = newWidth > 25;
+  handleResize = (_, delta) => {
+    const {
+      x
+    } = delta;
 
-      const width = (open ? newWidth : DEFAULT_LAYOUT.width);
+    if (x === 0) {
+      return;
+    }
 
-      this.changeLayout({
-        propertiesPanel: {
-          open,
-          width
-        }
-      });
+    const newWidth = this.originalWidth - x;
+
+    const open = newWidth > 25;
+
+    const width = (open ? newWidth : DEFAULT_LAYOUT.width);
+
+    this.changeLayout({
+      propertiesPanel: {
+        open,
+        width
+      }
     });
   }
 
@@ -96,6 +114,8 @@ class PropertiesContainerWrapped extends Component {
       width
     };
 
+    this.currentWidth = width;
+
     return (
       <div
         className={ classNames(
@@ -110,15 +130,15 @@ class PropertiesContainerWrapped extends Component {
               className="toggle"
               onClick={ this.handleToggle }
               draggable
-              onDragStart={ this.handleResize(width) }
+              onDragStart={ this.handleResizeStart }
             >Properties Panel</div>
         }
         {
           (open) &&
             <div
               className="resize-handle"
               draggable
-              onDragStart={ this.handleResize(width) }
+              onDragStart={ this.handleResizeStart }
             ></div>
         }
         <div className="properties-container" ref={ forwardedRef }></div>