From b0c7462524743a9eddc9673913a890bc856fc9ce Mon Sep 17 00:00:00 2001 From: Wei-Wei Wu Date: Fri, 9 Mar 2018 15:54:39 -0800 Subject: [PATCH 1/4] delaying update of height and width until after stop dragging 50ms --- .../src/modules/ui/components/layout/index.js | 36 +++++++++---------- 1 file changed, 16 insertions(+), 20 deletions(-) diff --git a/lib/ui/src/modules/ui/components/layout/index.js b/lib/ui/src/modules/ui/components/layout/index.js index e3e3864356f5..308920a30e81 100755 --- a/lib/ui/src/modules/ui/components/layout/index.js +++ b/lib/ui/src/modules/ui/components/layout/index.js @@ -1,4 +1,4 @@ -import { localStorage, window } from 'global'; +import { localStorage } from 'global'; import PropTypes from 'prop-types'; import React from 'react'; import SplitPane from 'react-split-pane'; @@ -140,14 +140,6 @@ class Layout extends React.Component { this.onDragEnd = this.onDragEnd.bind(this); } - componentDidMount() { - window.addEventListener('resize', this.onResize); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.onResize); - } - onDragStart() { this.setState({ isDragging: true }); } @@ -157,18 +149,22 @@ class Layout extends React.Component { } onResize(pane, mode) { - return size => { - this.layerSizes[pane][mode] = size; - saveSizes(this.layerSizes); - - const { clientWidth, clientHeight } = this.previewPanelRef; + let resizeTimeout; - this.setState({ - previewPanelDimensions: { - width: clientWidth, - height: clientHeight, - }, - }); + return size => { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(() => { + this.layerSizes[pane][mode] = size; + saveSizes(this.layerSizes); + + const { clientWidth, clientHeight } = this.previewPanelRef; + this.setState({ + previewPanelDimensions: { + width: clientWidth, + height: clientHeight, + }, + }); + }, 50); }; } From aaed49216cbb42e82acdb909129d2c8cfdd3cb9f Mon Sep 17 00:00:00 2001 From: Wei-Wei Wu Date: Sat, 10 Mar 2018 13:25:04 -0800 Subject: [PATCH 2/4] rewriting onResize so it doens't return a function. Throttled to 200ms. --- .../src/modules/ui/components/layout/index.js | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/lib/ui/src/modules/ui/components/layout/index.js b/lib/ui/src/modules/ui/components/layout/index.js index 308920a30e81..e04eb89025d1 100755 --- a/lib/ui/src/modules/ui/components/layout/index.js +++ b/lib/ui/src/modules/ui/components/layout/index.js @@ -2,6 +2,7 @@ import { localStorage } from 'global'; import PropTypes from 'prop-types'; import React from 'react'; import SplitPane from 'react-split-pane'; +import _ from 'lodash'; /* eslint-disable-line import/no-extraneous-dependencies */ import USplit from './usplit'; import Dimensions from './dimensions'; @@ -135,7 +136,7 @@ class Layout extends React.Component { isDragging: false, }; - this.onResize = this.onResize.bind(this); + this.onThrottledResize = _.throttle(this.onResize.bind(this), 200); this.onDragStart = this.onDragStart.bind(this); this.onDragEnd = this.onDragEnd.bind(this); } @@ -148,24 +149,17 @@ class Layout extends React.Component { this.setState({ isDragging: false }); } - onResize(pane, mode) { - let resizeTimeout; - - return size => { - clearTimeout(resizeTimeout); - resizeTimeout = setTimeout(() => { - this.layerSizes[pane][mode] = size; - saveSizes(this.layerSizes); - - const { clientWidth, clientHeight } = this.previewPanelRef; - this.setState({ - previewPanelDimensions: { - width: clientWidth, - height: clientHeight, - }, - }); - }, 50); - }; + onResize(pane, mode, size) { + this.layerSizes[pane][mode] = size; + saveSizes(this.layerSizes); + + const { clientWidth, clientHeight } = this.previewPanelRef; + this.setState({ + previewPanelDimensions: { + width: clientWidth, + height: clientHeight, + }, + }); } render() { @@ -212,7 +206,9 @@ class Layout extends React.Component { resizerStyle={storiesResizerStyle(showStoriesPanel, storiesPanelOnTop)} onDragStarted={this.onDragStart} onDragFinished={this.onDragEnd} - onChange={this.onResize('storiesPanel', storiesPanelOnTop ? 'top' : 'left')} + onChange={size => + this.onThrottledResize('storiesPanel', storiesPanelOnTop ? 'top' : 'left', size) + } >
{storiesPanel()}
@@ -229,7 +225,9 @@ class Layout extends React.Component { resizerStyle={addonResizerStyle(showAddonPanel, addonPanelInRight)} onDragStarted={this.onDragStart} onDragFinished={this.onDragEnd} - onChange={this.onResize('addonPanel', addonPanelInRight ? 'right' : 'down')} + onChange={size => + this.onThrottledResize('addonPanel', addonPanelInRight ? 'right' : 'down', size) + } >
{/* From ab70d3ccac3d60eb058b8236a5c7be441fb7fd02 Mon Sep 17 00:00:00 2001 From: Wei-Wei Wu Date: Sun, 11 Mar 2018 05:18:12 -0700 Subject: [PATCH 3/4] reusing onThrottledResize on window `resize` events --- lib/ui/src/modules/ui/components/layout/index.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/lib/ui/src/modules/ui/components/layout/index.js b/lib/ui/src/modules/ui/components/layout/index.js index e04eb89025d1..fb69ee9b6db5 100755 --- a/lib/ui/src/modules/ui/components/layout/index.js +++ b/lib/ui/src/modules/ui/components/layout/index.js @@ -1,4 +1,4 @@ -import { localStorage } from 'global'; +import { localStorage, window } from 'global'; import PropTypes from 'prop-types'; import React from 'react'; import SplitPane from 'react-split-pane'; @@ -141,6 +141,14 @@ class Layout extends React.Component { this.onDragEnd = this.onDragEnd.bind(this); } + componentDidMount() { + window.addEventListener('resize', this.onThrottledResize); + } + + componentWillUnmount() { + window.removeEventListener('resize', this.onThrottledResize); + } + onDragStart() { this.setState({ isDragging: true }); } @@ -150,8 +158,10 @@ class Layout extends React.Component { } onResize(pane, mode, size) { - this.layerSizes[pane][mode] = size; - saveSizes(this.layerSizes); + if (pane && mode && size) { + this.layerSizes[pane][mode] = size; + saveSizes(this.layerSizes); + } const { clientWidth, clientHeight } = this.previewPanelRef; this.setState({ From 31e2a2b4d3a231e264de00b6a89283df3af2d591 Mon Sep 17 00:00:00 2001 From: Wei-Wei Wu Date: Sun, 11 Mar 2018 14:46:32 -0700 Subject: [PATCH 4/4] throttling saveSize and updateState. Separating logic --- lib/ui/package.json | 1 + .../src/modules/ui/components/layout/index.js | 29 +++++++++++-------- yarn.lock | 4 +++ 3 files changed, 22 insertions(+), 12 deletions(-) diff --git a/lib/ui/package.json b/lib/ui/package.json index d27cc5ddc0ec..1644db0cb442 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -28,6 +28,7 @@ "lodash.debounce": "^4.0.8", "lodash.pick": "^4.4.0", "lodash.sortby": "^4.7.0", + "lodash.throttle": "^4.1.1", "prop-types": "^15.6.1", "qs": "^6.5.1", "react-fuzzy": "^0.5.2", diff --git a/lib/ui/src/modules/ui/components/layout/index.js b/lib/ui/src/modules/ui/components/layout/index.js index fb69ee9b6db5..016670037f4e 100755 --- a/lib/ui/src/modules/ui/components/layout/index.js +++ b/lib/ui/src/modules/ui/components/layout/index.js @@ -2,7 +2,7 @@ import { localStorage, window } from 'global'; import PropTypes from 'prop-types'; import React from 'react'; import SplitPane from 'react-split-pane'; -import _ from 'lodash'; /* eslint-disable-line import/no-extraneous-dependencies */ +import throttle from 'lodash.throttle'; import USplit from './usplit'; import Dimensions from './dimensions'; @@ -136,17 +136,18 @@ class Layout extends React.Component { isDragging: false, }; - this.onThrottledResize = _.throttle(this.onResize.bind(this), 200); + this.throttledUpdatePreviewPanelState = throttle(this.updatePrevewPanelState.bind(this), 200); + this.throttledSaveSizes = throttle(this.saveSizes, 25); this.onDragStart = this.onDragStart.bind(this); this.onDragEnd = this.onDragEnd.bind(this); } componentDidMount() { - window.addEventListener('resize', this.onThrottledResize); + window.addEventListener('resize', this.throttledUpdatePreviewPanelState); } componentWillUnmount() { - window.removeEventListener('resize', this.onThrottledResize); + window.removeEventListener('resize', this.throttledUpdatePreviewPanelState); } onDragStart() { @@ -158,12 +159,18 @@ class Layout extends React.Component { } onResize(pane, mode, size) { - if (pane && mode && size) { - this.layerSizes[pane][mode] = size; - saveSizes(this.layerSizes); - } + this.throttledSaveSizes(pane, mode, size); + this.throttledUpdatePreviewPanelState(); + } + saveSizes(pane, mode, size) { + this.layerSizes[pane][mode] = size; + saveSizes(this.layerSizes); + } + + updatePrevewPanelState() { const { clientWidth, clientHeight } = this.previewPanelRef; + this.setState({ previewPanelDimensions: { width: clientWidth, @@ -216,9 +223,7 @@ class Layout extends React.Component { resizerStyle={storiesResizerStyle(showStoriesPanel, storiesPanelOnTop)} onDragStarted={this.onDragStart} onDragFinished={this.onDragEnd} - onChange={size => - this.onThrottledResize('storiesPanel', storiesPanelOnTop ? 'top' : 'left', size) - } + onChange={size => this.onResize('storiesPanel', storiesPanelOnTop ? 'top' : 'left', size)} >
{storiesPanel()}
@@ -236,7 +241,7 @@ class Layout extends React.Component { onDragStarted={this.onDragStart} onDragFinished={this.onDragEnd} onChange={size => - this.onThrottledResize('addonPanel', addonPanelInRight ? 'right' : 'down', size) + this.onResize('addonPanel', addonPanelInRight ? 'right' : 'down', size) } >
diff --git a/yarn.lock b/yarn.lock index 662fde38038f..6c3fa75a018e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9729,6 +9729,10 @@ lodash.templatesettings@^4.0.0: dependencies: lodash._reinterpolate "~3.0.0" +lodash.throttle@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" + lodash.union@~4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"