From 5f676f55a911a9a1ca2ec41e514c7518cca529b2 Mon Sep 17 00:00:00 2001
From: Corey Frang <gnarf37@gmail.com>
Date: Fri, 13 Apr 2018 12:57:26 -0400
Subject: [PATCH] Limit toolbox updates to when we tell it to update
---
src/containers/blocks.jsx | 39 ++++++++++++++++++++++++++-------------
1 file changed, 26 insertions(+), 13 deletions(-)
diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx
index 12eef6e91..24c908dd0 100644
--- a/src/containers/blocks.jsx
+++ b/src/containers/blocks.jsx
@@ -70,6 +70,12 @@ class Blocks extends React.Component {
);
this.workspace = this.ScratchBlocks.inject(this.blocks, workspaceConfig);
+ // we actually never want the workspace to enable "refresh toolbox" - this basically re-renders the entire toolbox
+ // every time we reset the workspace. We call updateToolbox as a part of componentDidUpdate so the toolbox will
+ // still correctly be updated
+ this.setToolboxRefreshEnabled = this.workspace.setToolboxRefreshEnabled.bind(this.workspace);
+ this.workspace.setToolboxRefreshEnabled = () => this.setToolboxRefreshEnabled(false);
+
// @todo change this when blockly supports UI events
addFunctionListener(this.workspace, 'translate', this.onWorkspaceMetricsChange);
addFunctionListener(this.workspace, 'zoom', this.onWorkspaceMetricsChange);
@@ -97,14 +103,18 @@ class Blocks extends React.Component {
if (prevProps.toolboxXML !== this.props.toolboxXML) {
const categoryName = this.workspace.toolbox_.getSelectedCategoryName();
const offset = this.workspace.toolbox_.getCategoryScrollOffset();
- this.workspace.updateToolbox(this.props.toolboxXML);
- const currentCategoryPos = this.workspace.toolbox_.getCategoryPositionByName(categoryName);
- const currentCategoryLen = this.workspace.toolbox_.getCategoryLengthByName(categoryName);
- if (offset < currentCategoryLen) {
- this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos + offset);
- } else {
- this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos);
- }
+ // rather than update the toolbox "sync" -- update it in the next frame
+ clearTimeout(this.toolboxUpdate);
+ this.toolboxUpdate = setTimeout(() => {
+ this.workspace.updateToolbox(this.props.toolboxXML);
+ const currentCategoryPos = this.workspace.toolbox_.getCategoryPositionByName(categoryName);
+ const currentCategoryLen = this.workspace.toolbox_.getCategoryLengthByName(categoryName);
+ if (offset < currentCategoryLen) {
+ this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos + offset);
+ } else {
+ this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos);
+ }
+ }, 0);
}
if (this.props.isVisible === prevProps.isVisible) {
return;
@@ -122,6 +132,7 @@ class Blocks extends React.Component {
componentWillUnmount () {
this.detachVM();
this.workspace.dispose();
+ clearTimeout(this.toolboxUpdate);
}
attachVM () {
this.workspace.addChangeListener(this.props.vm.blockListener);
@@ -218,11 +229,13 @@ class Blocks extends React.Component {
this.workspace.addChangeListener(this.props.vm.blockListener);
if (this.props.vm.editingTarget && this.state.workspaceMetrics[this.props.vm.editingTarget.id]) {
- const {scrollX, scrollY, scale} = this.state.workspaceMetrics[this.props.vm.editingTarget.id];
- this.workspace.scrollX = scrollX;
- this.workspace.scrollY = scrollY;
- this.workspace.scale = scale;
- this.workspace.resize();
+ setTimeout(() => {
+ const {scrollX, scrollY, scale} = this.state.workspaceMetrics[this.props.vm.editingTarget.id];
+ this.workspace.scrollX = scrollX;
+ this.workspace.scrollY = scrollY;
+ this.workspace.scale = scale;
+ this.workspace.resize();
+ }, 0);
}
}
handleExtensionAdded (blocksInfo) {
--
GitLab