From 0c42c1fc8e22445f83cb41e9df82dab33026cdab Mon Sep 17 00:00:00 2001
From: DD Liu <liudi@media.mit.edu>
Date: Wed, 17 May 2017 11:50:02 -0400
Subject: [PATCH] fix squashed blocks in flyout when adding a sprite while on
another tab
---
src/components/gui/gui.jsx | 14 ++++++--------
src/containers/blocks.jsx | 22 +++++++++++++++++++---
src/containers/gui.jsx | 13 +++++++++++++
3 files changed, 38 insertions(+), 11 deletions(-)
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 91ed77ec2..9bf21c40d 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -19,6 +19,8 @@ const GUIComponent = props => {
basePath,
children,
vm,
+ onTabSelect,
+ tabIndex,
...componentProps
} = props;
if (children) {
@@ -29,13 +31,6 @@ const GUIComponent = props => {
);
}
- // @todo hack to resize blockly manually in case resize happened while hidden
- const handleTabSelect = tabIndex => {
- if (tabIndex === 0) {
- setTimeout(() => window.dispatchEvent(new Event('resize')));
- }
- };
-
return (
<Box
className={styles.pageWrapper}
@@ -48,7 +43,7 @@ const GUIComponent = props => {
<Tabs
className={styles.tabs}
forceRenderTabPanel={true} // eslint-disable-line react/jsx-boolean-value
- onSelect={handleTabSelect}
+ onSelect={onTabSelect}
>
<TabList className={styles.tabList}>
<Tab className={styles.tab}>Scripts</Tab>
@@ -59,6 +54,7 @@ const GUIComponent = props => {
<Box className={styles.blocksWrapper}>
<Blocks
grow={1}
+ isVisible={tabIndex === 0} // Scripts tab
options={{
media: `${basePath}static/blocks-media/`
}}
@@ -102,6 +98,8 @@ const GUIComponent = props => {
GUIComponent.propTypes = {
basePath: PropTypes.string,
children: PropTypes.node,
+ onTabSelect: PropTypes.func,
+ tabIndex: PropTypes.number,
vm: PropTypes.instanceOf(VM).isRequired
};
GUIComponent.defaultProps = {
diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx
index ecd816204..58d5cb2e1 100644
--- a/src/containers/blocks.jsx
+++ b/src/containers/blocks.jsx
@@ -52,7 +52,21 @@ class Blocks extends React.Component {
this.attachVM();
}
shouldComponentUpdate (nextProps, nextState) {
- return this.state.prompt !== nextState.prompt;
+ return this.state.prompt !== nextState.prompt || this.props.isVisible !== nextProps.isVisible;
+ }
+ componentDidUpdate (prevProps) {
+ if (this.props.isVisible === prevProps.isVisible) {
+ return;
+ }
+
+ // @todo hack to resize blockly manually in case resize happened while hidden
+ if (this.props.isVisible) { // Scripts tab
+ window.dispatchEvent(new Event('resize'));
+ this.workspace.setVisible(true);
+ this.workspace.toolbox_.refreshSelection();
+ } else {
+ this.workspace.setVisible(false);
+ }
}
componentWillUnmount () {
this.detachVM();
@@ -146,6 +160,7 @@ class Blocks extends React.Component {
const {
options, // eslint-disable-line no-unused-vars
vm, // eslint-disable-line no-unused-vars
+ isVisible, // eslint-disable-line no-unused-vars
...props
} = this.props;
return (
@@ -169,11 +184,12 @@ class Blocks extends React.Component {
}
Blocks.propTypes = {
+ isVisible: PropTypes.bool.isRequired,
options: PropTypes.shape({
media: PropTypes.string,
zoom: PropTypes.shape({
- controls: PropTypes.boolean,
- wheel: PropTypes.boolean,
+ controls: PropTypes.bool,
+ wheel: PropTypes.bool,
startScale: PropTypes.number
}),
colours: PropTypes.shape({
diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx
index dec5c6c6d..fbc11d7da 100644
--- a/src/containers/gui.jsx
+++ b/src/containers/gui.jsx
@@ -1,12 +1,20 @@
const PropTypes = require('prop-types');
const React = require('react');
const VM = require('scratch-vm');
+const bindAll = require('lodash.bindall');
const vmListenerHOC = require('../lib/vm-listener-hoc.jsx');
const GUIComponent = require('../components/gui/gui.jsx');
class GUI extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'handleTabSelect'
+ ]);
+ this.state = {tabIndex: 0};
+ }
componentDidMount () {
this.props.vm.loadProject(this.props.projectData);
this.props.vm.setCompatibilityMode(true);
@@ -20,6 +28,9 @@ class GUI extends React.Component {
componentWillUnmount () {
this.props.vm.stopAll();
}
+ handleTabSelect (tabIndex) {
+ this.setState({tabIndex});
+ }
render () {
const {
projectData, // eslint-disable-line no-unused-vars
@@ -28,7 +39,9 @@ class GUI extends React.Component {
} = this.props;
return (
<GUIComponent
+ tabIndex={this.state.tabIndex}
vm={vm}
+ onTabSelect={this.handleTabSelect}
{...componentProps}
/>
);
--
GitLab