diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx index 12eef6e913de6118f4ebe4df8ff90178996208a3..24c908dd0e14dc136cf2e56653ea607bae6b1dc1 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) {