Revert "Merge pull request #28384 from code-dot-org/fix-resize-events"

apps/src/gamelab/GameLabVisualizationHeader.jsx

@@ -8,7 +8,6 @@ import msg from '@cdo/locale';
 import ToggleGroup from '../templates/ToggleGroup';
 import styleConstants from '../styleConstants';
 import {allowAnimationMode} from './stateQueries';
-import * as utils from '../utils';
 
 const styles = {
   main: {
@@ -30,27 +29,15 @@ class GameLabVisualizationHeader extends React.Component {
     spriteLab: PropTypes.bool.isRequired
   };
 
-  changeInterfaceMode = mode => {
-    if (!this.props.spriteLab) {
-      // Add a resize event to Gamelab (i.e. droplet) to ensure code is rendered
-      // correctly if it was in the middle of a transition from code to block mode
-      // when the interface mode was changed. Blockly already fires resize events
-      // so this is not needed for spriteLab - too many resize events seem to
-      // conflict with each other.
-      setTimeout(() => utils.fireResizeEvent(), 0);
-    }
-
-    this.props.onInterfaceModeChange(mode);
-  };
-
   render() {
-    const {interfaceMode, allowAnimationMode} = this.props;
+    const {
+      interfaceMode,
+      allowAnimationMode,
+      onInterfaceModeChange
+    } = this.props;
     return (
       <div style={styles.main} id="playSpaceHeader">
-        <ToggleGroup
-          selected={interfaceMode}
-          onChange={this.changeInterfaceMode}
-        >
+        <ToggleGroup selected={interfaceMode} onChange={onInterfaceModeChange}>
           <button type="button" value={GameLabInterfaceMode.CODE} id="codeMode">
             {msg.codeMode()}
           </button>

apps/src/gamelab/actions.js

@@ -1,6 +1,7 @@
 /** @file Redux action-creators for Game Lab.
  *  @see http://redux.js.org/docs/basics/Actions.html */
 import $ from 'jquery';
+import * as utils from '../utils';
 
 /** @enum {string} */
 export const CHANGE_INTERFACE_MODE = 'CHANGE_INTERFACE_MODE';
@@ -24,6 +25,9 @@ export const ADD_MESSAGE = 'spritelab/ADD_MESSAGE';
  * @returns {function}
  */
 export function changeInterfaceMode(interfaceMode) {
+  //Add a resize event on each call to changeInterfaceMode to ensure
+  //proper rendering of droplet and code mode. Similar solution in applab.
+  setTimeout(() => utils.fireResizeEvent(), 0);
   return function(dispatch) {
     $(window).trigger('appModeChanged');
     dispatch({

apps/src/templates/instructions/TopInstructionsCSF.jsx

@@ -246,6 +246,8 @@ class TopInstructions extends React.Component {
    * Calculate our initial height (based off of rendered height of instructions)
    */
   componentDidMount() {
+    window.addEventListener('resize', this.adjustMaxNeededHeight);
+
     // Might want to increase the size of our instructions after our icon image
     // has loaded, to make sure the image fits
     $(ReactDOM.findDOMNode(this.icon)).load(
@@ -273,7 +275,7 @@ class TopInstructions extends React.Component {
    */
   componentWillReceiveProps(nextProps) {
     const minHeight = this.getMinHeight(nextProps.collapsed);
-    const newHeight = minHeight;
+    const newHeight = Math.min(nextProps.maxHeight, minHeight);
 
     const shouldUpdateHeight = nextProps.collapsed
       ? newHeight !== this.props.height
@@ -321,6 +323,8 @@ class TopInstructions extends React.Component {
       this.setState({rightColWidth});
     }
 
+    this.adjustMaxNeededHeight();
+
     if (this.instructions) {
       const contentContainer = this.instructions.parentElement;
       const canScroll =
@@ -411,7 +415,6 @@ class TopInstructions extends React.Component {
    * @returns {number} How much we actually changed
    */
   handleHeightResize = (delta = 0) => {
-    this.adjustMaxNeededHeight();
     const minHeight = this.getMinHeight();
     const currentHeight = this.props.height;
 
@@ -425,6 +428,7 @@ class TopInstructions extends React.Component {
     } else {
       newHeight = Math.min(newHeight, this.props.maxHeight);
     }
+
     this.props.setInstructionsRenderedHeight(newHeight);
     return newHeight - currentHeight;
   };