Merge pull request #606 from paulkaplan/fix-small-layout

Allow GUI to fit into 1024px screen widths

package.json

@@ -70,6 +70,7 @@
     "react-intl-redux": "0.6.0",
     "react-modal": "2.2.2",
     "react-redux": "5.0.6",
+    "react-responsive": "1.3.4",
     "react-style-proptype": "3.0.0",
     "react-tabs": "1.1.0",
     "react-test-renderer": "^15.5.4",

src/components/forms/input.css

@@ -35,6 +35,6 @@
 }
 
 .input-small {
-    width: 3.5rem; 
+    width: 3rem; 
     text-align: center;
 }

src/components/gui/gui.css

@@ -112,13 +112,6 @@
     */
     display: flex;
     flex-direction: column;
-
-    /*
-        Calc the minimum width for this pane, accounting for left + right spacing.
-        If and when the width doesn't need to be fixed, we can move the spacing out
-        of this calc, and into padding instead
-    */
-    flex-basis: calc(480px + ($space * 2));
 }
 
 .stage-wrapper {

src/components/gui/gui.jsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
+import MediaQuery from 'react-responsive';
 import tabStyles from 'react-tabs/style/react-tabs.css';
 import VM from 'scratch-vm';
 
@@ -16,9 +17,9 @@ import StopAll from '../../containers/stop-all.jsx';
 import Box from '../box/box.jsx';
 import MenuBar from '../menu-bar/menu-bar.jsx';
 
+import layout from '../../lib/layout-constants.js';
 import styles from './gui.css';
 
-
 const GUIComponent = props => {
     const {
         basePath,
@@ -87,20 +88,22 @@ const GUIComponent = props => {
                         </Tabs>
                     </Box>
 
-                    <Box className={styles.stageAndTargetWrapper} >
-                        <Box className={styles.stageMenuWrapper} >
+                    <Box className={styles.stageAndTargetWrapper}>
+                        <Box className={styles.stageMenuWrapper}>
                             <GreenFlag vm={vm} />
                             <StopAll vm={vm} />
                         </Box>
-
-                        <Box className={styles.stageWrapper} >
-                            <Stage
-                                shrink={0}
-                                vm={vm}
-                            />
+                        <Box className={styles.stageWrapper}>
+                            <MediaQuery minWidth={layout.fullSizeMinWidth}>{isFullSize => (
+                                <Stage
+                                    height={isFullSize ? layout.fullStageHeight : layout.smallerStageHeight}
+                                    shrink={0}
+                                    vm={vm}
+                                    width={isFullSize ? layout.fullStageWidth : layout.smallerStageWidth}
+                                />
+                            )}</MediaQuery>
                         </Box>
-
-                        <Box className={styles.targetWrapper} >
+                        <Box className={styles.targetWrapper}>
                             <TargetPane
                                 vm={vm}
                             />

src/components/sprite-info/sprite-info.jsx

@@ -1,12 +1,14 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import MediaQuery from 'react-responsive';
 
 import Box from '../box/box.jsx';
 import Label from '../forms/label.jsx';
 import Input from '../forms/input.jsx';
 import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
 
+import layout from '../../lib/layout-constants.js';
 import styles from './sprite-info.css';
 
 import xIcon from './icon--x.svg';
@@ -49,12 +51,14 @@ class SpriteInfo extends React.Component {
                     </div>
 
                     <div className={styles.group}>
-                        <div className={styles.iconWrapper}>
-                            <img
-                                className={classNames(styles.xIcon, styles.icon)}
-                                src={xIcon}
-                            />
-                        </div>
+                        <MediaQuery minWidth={layout.fullSizeMinWidth}>
+                            <div className={styles.iconWrapper}>
+                                <img
+                                    className={classNames(styles.xIcon, styles.icon)}
+                                    src={xIcon}
+                                />
+                            </div>
+                        </MediaQuery>
                         <Label text="x">
                             <BufferedInput
                                 small
@@ -69,12 +73,14 @@ class SpriteInfo extends React.Component {
                     </div>
 
                     <div className={styles.group}>
-                        <div className={styles.iconWrapper}>
-                            <img
-                                className={classNames(styles.yIcon, styles.icon)}
-                                src={yIcon}
-                            />
-                        </div>
+                        <MediaQuery minWidth={layout.fullSizeMinWidth}>
+                            <div className={styles.iconWrapper}>
+                                <img
+                                    className={classNames(styles.yIcon, styles.icon)}
+                                    src={yIcon}
+                                />
+                            </div>
+                        </MediaQuery>
                         <Label text="y">
                             <BufferedInput
                                 small

src/containers/stage.jsx

@@ -40,8 +40,8 @@ class Stage extends React.Component {
         this.audioEngine = new AudioEngine();
         this.props.vm.attachAudioEngine(this.audioEngine);
     }
-    shouldComponentUpdate () {
-        return false;
+    shouldComponentUpdate (nextProps) {
+        return this.props.width !== nextProps.width || this.props.height !== nextProps.height;
     }
     componentWillUnmount () {
         this.detachMouseEvents(this.canvas);
@@ -69,9 +69,10 @@ class Stage extends React.Component {
         this.rect = this.canvas.getBoundingClientRect();
     }
     getScratchCoords (x, y) {
+        const nativeSize = this.renderer.getNativeSize();
         return [
-            x - (this.rect.width / 2),
-            y - (this.rect.height / 2)
+            (nativeSize[0] / this.rect.width) * (x - (this.rect.width / 2)),
+            (nativeSize[1] / this.rect.height) * (y - (this.rect.height / 2))
         ];
     }
     handleDoubleClick (e) {
@@ -127,6 +128,7 @@ class Stage extends React.Component {
         }
     }
     onMouseDown (e) {
+        this.updateRect();
         const mousePosition = [e.clientX - this.rect.left, e.clientY - this.rect.top];
         this.setState({
             mouseDown: true,
@@ -192,7 +194,9 @@ class Stage extends React.Component {
 }
 
 Stage.propTypes = {
-    vm: PropTypes.instanceOf(VM).isRequired
+    height: PropTypes.number,
+    vm: PropTypes.instanceOf(VM).isRequired,
+    width: PropTypes.number
 };
 
 export default Stage;

src/lib/layout-constants.js

@@ -0,0 +1,7 @@
+export default {
+    fullStageWidth: 480,
+    fullStageHeight: 360,
+    smallerStageWidth: 480 * 0.85,
+    smallerStageHeight: 360 * 0.85,
+    fullSizeMinWidth: 1096
+};