From 05f95f170fccd52a224d48e3fae00d478cd4e479 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Wed, 9 Aug 2017 15:54:43 -0400
Subject: [PATCH 1/3] Scale drag position using renderers native size

---
 src/containers/stage.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index f0545c088..712d3584b 100644
--- a/src/containers/stage.jsx
+++ b/src/containers/stage.jsx
@@ -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,

From 39a81d744e3c37f76fe90e83e3e674e19610ea28 Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 10 Aug 2017 11:27:12 -0400
Subject: [PATCH 2/3] Use media queries to resize stage and fit sprite info

---
 package.json                               |  1 +
 src/components/forms/input.css             |  2 +-
 src/components/gui/gui.css                 |  7 ----
 src/components/gui/gui.jsx                 | 48 ++++++++++++++--------
 src/components/sprite-info/sprite-info.css |  6 +++
 src/components/sprite-info/sprite-info.jsx |  4 +-
 src/containers/stage.jsx                   |  8 ++--
 7 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index cba8749f3..9a2fb3f6d 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/forms/input.css b/src/components/forms/input.css
index 6747e2c21..91b42d4cc 100644
--- a/src/components/forms/input.css
+++ b/src/components/forms/input.css
@@ -35,6 +35,6 @@
 }
 
 .input-small {
-    width: 3.5rem; 
+    width: 3rem; 
     text-align: center;
 }
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index de9c7f9ec..5146c84f1 100644
--- a/src/components/gui/gui.css
+++ b/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 {
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index f15a5c9a9..839cc603c 100644
--- a/src/components/gui/gui.jsx
+++ b/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';
 
@@ -18,6 +19,13 @@ import MenuBar from '../menu-bar/menu-bar.jsx';
 
 import styles from './gui.css';
 
+const layout = {
+    fullStageWidth: 480,
+    fullStageHeight: 360,
+    smallerStageWidth: 480 * 0.85,
+    smallerStageHeight: 360 * 0.85,
+    fullSizeMinWidth: 1096
+};
 
 const GUIComponent = props => {
     const {
@@ -87,25 +95,31 @@ const GUIComponent = props => {
                         </Tabs>
                     </Box>
 
-                    <Box className={styles.stageAndTargetWrapper} >
-                        <Box className={styles.stageMenuWrapper} >
-                            <GreenFlag vm={vm} />
-                            <StopAll vm={vm} />
-                        </Box>
+                    <MediaQuery minWidth={layout.fullSizeMinWidth}>
+                        {isFullSize => (
+                            <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>
+                                <Box className={styles.stageWrapper}>
+                                    <Stage
+                                        height={isFullSize ? layout.fullStageHeight : layout.smallerStageHeight}
+                                        shrink={0}
+                                        vm={vm}
+                                        width={isFullSize ? layout.fullStageWidth : layout.smallerStageWidth}
+                                    />
+                                </Box>
 
-                        <Box className={styles.targetWrapper} >
-                            <TargetPane
-                                vm={vm}
-                            />
-                        </Box>
-                    </Box>
+                                <Box className={styles.targetWrapper}>
+                                    <TargetPane
+                                        vm={vm}
+                                    />
+                                </Box>
+                            </Box>
+                        )}
+                    </MediaQuery>
                 </Box>
             </Box>
         </Box>
diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index e6a758d1c..5e681d66d 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/src/components/sprite-info/sprite-info.css
@@ -79,3 +79,9 @@
     user-select: none;
     outline: none;
 }
+
+@media only screen and (max-width: 1096px) {
+    .non-essential {
+        display: none;
+    }
+}
diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index fc68c9121..b1006f0d6 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/src/components/sprite-info/sprite-info.jsx
@@ -49,7 +49,7 @@ class SpriteInfo extends React.Component {
                     </div>
 
                     <div className={styles.group}>
-                        <div className={styles.iconWrapper}>
+                        <div className={classNames(styles.iconWrapper, styles.nonEssential)}>
                             <img
                                 className={classNames(styles.xIcon, styles.icon)}
                                 src={xIcon}
@@ -69,7 +69,7 @@ class SpriteInfo extends React.Component {
                     </div>
 
                     <div className={styles.group}>
-                        <div className={styles.iconWrapper}>
+                        <div className={classNames(styles.iconWrapper, styles.nonEssential)}>
                             <img
                                 className={classNames(styles.yIcon, styles.icon)}
                                 src={yIcon}
diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index 712d3584b..d9ab05f12 100644
--- a/src/containers/stage.jsx
+++ b/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);
@@ -194,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;

From 40e3a86fe60309e2ebbb5ebe2cbcf486002bd93b Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 10 Aug 2017 13:31:48 -0400
Subject: [PATCH 3/3] Refactor to use only MediaQuery component

---
 src/components/gui/gui.jsx                 | 55 +++++++++-------------
 src/components/sprite-info/sprite-info.css |  6 ---
 src/components/sprite-info/sprite-info.jsx | 30 +++++++-----
 src/lib/layout-constants.js                |  7 +++
 4 files changed, 47 insertions(+), 51 deletions(-)
 create mode 100644 src/lib/layout-constants.js

diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 839cc603c..1e7fe027e 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -17,16 +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 layout = {
-    fullStageWidth: 480,
-    fullStageHeight: 360,
-    smallerStageWidth: 480 * 0.85,
-    smallerStageHeight: 360 * 0.85,
-    fullSizeMinWidth: 1096
-};
-
 const GUIComponent = props => {
     const {
         basePath,
@@ -95,31 +88,27 @@ const GUIComponent = props => {
                         </Tabs>
                     </Box>
 
-                    <MediaQuery minWidth={layout.fullSizeMinWidth}>
-                        {isFullSize => (
-                            <Box className={styles.stageAndTargetWrapper}>
-                                <Box className={styles.stageMenuWrapper}>
-                                    <GreenFlag vm={vm} />
-                                    <StopAll vm={vm} />
-                                </Box>
-
-                                <Box className={styles.stageWrapper}>
-                                    <Stage
-                                        height={isFullSize ? layout.fullStageHeight : layout.smallerStageHeight}
-                                        shrink={0}
-                                        vm={vm}
-                                        width={isFullSize ? layout.fullStageWidth : layout.smallerStageWidth}
-                                    />
-                                </Box>
-
-                                <Box className={styles.targetWrapper}>
-                                    <TargetPane
-                                        vm={vm}
-                                    />
-                                </Box>
-                            </Box>
-                        )}
-                    </MediaQuery>
+                    <Box className={styles.stageAndTargetWrapper}>
+                        <Box className={styles.stageMenuWrapper}>
+                            <GreenFlag vm={vm} />
+                            <StopAll vm={vm} />
+                        </Box>
+                        <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}>
+                            <TargetPane
+                                vm={vm}
+                            />
+                        </Box>
+                    </Box>
                 </Box>
             </Box>
         </Box>
diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index 5e681d66d..e6a758d1c 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/src/components/sprite-info/sprite-info.css
@@ -79,9 +79,3 @@
     user-select: none;
     outline: none;
 }
-
-@media only screen and (max-width: 1096px) {
-    .non-essential {
-        display: none;
-    }
-}
diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index b1006f0d6..8b3f212d9 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/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={classNames(styles.iconWrapper, styles.nonEssential)}>
-                            <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={classNames(styles.iconWrapper, styles.nonEssential)}>
-                            <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
diff --git a/src/lib/layout-constants.js b/src/lib/layout-constants.js
new file mode 100644
index 000000000..672c8013f
--- /dev/null
+++ b/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
+};