Improve properties panel resize performance

app/package.json

@@ -18,7 +18,7 @@
     "form-data": "^2.3.1",
     "glob": "^7.0.3",
     "inherits": "^2.0.1",
-    "min-dash": "^3.2.0",
+    "min-dash": "^3.4.0",
     "node-fetch": "^2.1.2",
     "parents": "^1.0.1"
   },

client/package.json

@@ -25,7 +25,7 @@
     "drag-tabs": "^1.0.2",
     "formik": "^1.3.2",
     "ids": "^0.2.2",
-    "min-dash": "^3.2.0",
+    "min-dash": "^3.4.0",
     "p-defer": "^1.0.0",
     "p-series": "^1.1.0",
     "react": "^16.5.2",

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,10 @@ export default class Log extends Component {
     this.state = {};
 
     this.panelRef = React.createRef();
+
+    if (process.env.NODE_ENV !== 'test') {
+      this.handleResize = throttle(this.handleResize, RESIZE_THROTTLE);
+    }
   }
 
   toggleLog = () => {
@@ -62,35 +72,41 @@ 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);
+  }
+
+  handleResize = (_, delta) => {
+    const {
+      y
+    } = delta;
+
+    if (y === 0) {
+      return;
+    }
 
-      const newExpanded = newHeight > 25;
+    const newHeight = this.originalHeight - y;
 
-      const height = (newExpanded ? newHeight : DEFAULT_HEIGHT);
+    const newExpanded = newHeight > 25;
 
-      const {
-        expanded,
-        onToggle
-      } = this.props;
+    const height = (newExpanded ? newHeight : DEFAULT_HEIGHT);
 
-      this.setState({
-        height
-      });
+    const {
+      expanded,
+      onToggle
+    } = this.props;
 
-      if (expanded !== newExpanded) {
-        onToggle(newExpanded);
-      }
+    this.setState({
+      height
     });
+
+    if (expanded !== newExpanded) {
+      onToggle(newExpanded);
+    }
   }
 
   checkFocus = () => {
@@ -175,6 +191,8 @@ export default class Log extends Component {
 
     const logHeight = height || DEFAULT_HEIGHT;
 
+    this.currentHeight = logHeight;
+
     return (
       <div
         className={ classNames(
@@ -194,7 +212,7 @@ export default class Log extends Component {
 
         <div
           className="resizer"
-          onDragStart={ this.handleResize(logHeight) }
+          onDragStart={ this.handleResizeStart }
           draggable
         ></div>
 

client/src/app/__tests__/LogSpec.js

@@ -291,6 +291,42 @@ describe('<Log>', function() {
   });
 
 
+  describe('resize', function() {
+
+    it('should handle resize', function() {
+      // given
+      const {
+        instance
+      } = createLog();
+
+      instance.originalHeight = 100;
+
+      // when
+      instance.handleResize(null, { y: -10 });
+
+      // then
+      expect(instance.state.height).to.eql(110);
+    });
+
+
+    it('should ignore delta y = 0', function() {
+      // given
+      const {
+        instance
+      } = createLog();
+
+      const originalState = instance.state;
+
+      // when
+      instance.handleResize(null, { y: 0 });
+
+      // then
+      expect(instance.state).to.eql(originalState);
+    });
+
+  });
+
+
 });
 
 

client/src/app/primitives/TabLinks.js

@@ -2,6 +2,10 @@ import React, { Component } from 'react';
 
 import classNames from 'classnames';
 
+import {
+  debounce
+} from 'min-dash';
+
 import css from './Tabbed.less';
 
 import {
@@ -26,8 +30,12 @@ const TABS_OPTS = {
 
 
 export default class TabLinks extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
+
+    if (process.env.NODE_ENV !== 'test') {
+      this.updateScroller = debounce(this.updateScroller, 300);
+    }
 
     this.tabLinksRef = React.createRef();
   }
@@ -50,15 +58,21 @@ export default class TabLinks extends Component {
   componentWillUnmount() {
     if (this.scroller) {
       removeScroller(this.scroller);
+
+      this.scroller = null;
     }
   }
 
-  componentDidUpdate() {
+  updateScroller() {
     if (this.scroller) {
       this.scroller.update();
     }
   }
 
+  componentDidUpdate() {
+    this.updateScroller();
+  }
+
   handleScroll = (node) => {
     const {
       onSelect,

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,14 @@ const DEFAULT_LAYOUT = {
  */
 class PropertiesContainerWrapped extends Component {
 
+  constructor(props) {
+    super(props);
+
+    if (process.env.NODE_ENV !== 'test') {
+      this.handleResize = throttle(this.handleResize, RESIZE_THROTTLE);
+    }
+  }
+
   changeLayout = (newLayout) => {
 
     const {
@@ -53,28 +67,34 @@ class PropertiesContainerWrapped extends Component {
     });
   }
 
-  /**
-   * Returns dragger with cached properties panel width.
-   */
-  handleResize = (originalWidth) => {
+  handleResizeStart = event => {
+    const onDragStart = dragger(this.handleResize);
+
+    this.originalWidth = this.currentWidth;
+
+    onDragStart(event);
+  }
 
-    return dragger((event, delta) => {
-      const {
-        x
-      } = delta;
+  handleResize = (_, delta) => {
+    const {
+      x
+    } = delta;
 
-      const newWidth = originalWidth - x;
+    if (x === 0) {
+      return;
+    }
 
-      const open = newWidth > 25;
+    const newWidth = this.originalWidth - x;
 
-      const width = (open ? newWidth : DEFAULT_LAYOUT.width);
+    const open = newWidth > 25;
 
-      this.changeLayout({
-        propertiesPanel: {
-          open,
-          width
-        }
-      });
+    const width = (open ? newWidth : DEFAULT_LAYOUT.width);
+
+    this.changeLayout({
+      propertiesPanel: {
+        open,
+        width
+      }
     });
   }
 
@@ -96,6 +116,8 @@ class PropertiesContainerWrapped extends Component {
       width
     };
 
+    this.currentWidth = width;
+
     return (
       <div
         className={ classNames(
@@ -110,15 +132,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>