diff --git a/client/src/app/Log.js b/client/src/app/Log.js index 0d7caf8e49..c7a60042f9 100644 --- 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 (
diff --git a/client/src/app/tabs/PropertiesContainer.js b/client/src/app/tabs/PropertiesContainer.js index 61d4e010aa..a5bb9d28ee 100644 --- 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 (
Properties Panel
} { @@ -118,7 +138,7 @@ class PropertiesContainerWrapped extends Component {
}