Added ability to zoom stage to full screen and exit back to standard view

  * Needs a real icon for opening (borrowed sprite-info icon). The open
    icon needs to be moved from current location of underneath stage to
    same row as control buttons (start/stop vm).

  * The zoomed mode loses the ability to drag sprites. Haven't had
     a change to look into this yet.

src/components/stage/stage.css

@@ -17,6 +17,39 @@
     position: relative;
 }
 
+.stage-wrapper-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100% !important;
+    height: 100% !important;
+    z-index: 999;
+}
+
+.stage-wrapper-overlay-controls {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100% !important;
+    height: 100% !important;
+    z-index: 999;
+}
+
+.stage-wrapper-overlay-close {
+    position: fixed;
+    top: 2%;
+    left: 97%;
+    right: 5%;
+    bottom: 0;
+    width: 100% !important;
+    height: 100% !important;
+    z-index: 999;
+}
+
 .monitor-wrapper {
     position: absolute;
     top: 0;

src/components/stage/stage.jsx

 import PropTypes from 'prop-types';
 import React from 'react';
 
+import VM from 'scratch-vm';
 import Box from '../box/box.jsx';
+import Controls from '../../containers/controls.jsx';
 import MonitorList from '../../containers/monitor-list.jsx';
 import styles from './stage.css';
 
+import CloseButton from '../close-button/close-button.jsx';
+import addIcon from '../sprite-info/icon--show.svg';
+
+
 const StageComponent = props => {
     const {
+        onZoomOpen,
+        onZoomClose,
+        isZoomed,
+        vm,
         canvasRef,
         width,
         height,
         ...boxProps
     } = props;
-    return (
+    return isZoomed === false ? (
+
         <Box className={styles.stageWrapper}>
             <Box
                 className={styles.stage}
@@ -25,10 +36,47 @@ const StageComponent = props => {
             <Box className={styles.monitorWrapper}>
                 <MonitorList />
             </Box>
+            <button
+                title="Zoom Stage"
+                onClick={onZoomOpen} >
+
+                <img
+                    className={styles.addButton}
+                    src={addIcon}
+                />
+            </button>
         </Box>
+    ) : (
+        <Box className={styles.stageWrapperOverlay}>
+            <Box
+                className={styles.stage}
+                componentRef={canvasRef}
+                element="canvas"
+                height={"100%"}
+                width={"100%"}
+                {...boxProps}
+            />
+            <Box className={styles.monitorWrapper}>
+                <MonitorList />
+            </Box>
+            <Box className={styles.stageWrapperOverlayControls}>
+                <Controls vm={vm} />
+            </Box>
+            <Box className={styles.stageWrapperOverlayClose}>
+                <CloseButton
+                    size={CloseButton.SIZE_LARGE}
+                    onClick={onZoomClose}
+                />
+            </Box>
+       </Box>
     );
 };
+
 StageComponent.propTypes = {
+    onZoomOpen: PropTypes.func.isRequired,
+    onZoomClose: PropTypes.func.isRequired,
+    isZoomed: PropTypes.bool,
+    vm: PropTypes.instanceOf(VM).isRequired,
     canvasRef: PropTypes.func,
     height: PropTypes.number,
     width: PropTypes.number

src/containers/stage.jsx

@@ -15,6 +15,8 @@ class Stage extends React.Component {
             'cancelMouseDownTimeout',
             'detachMouseEvents',
             'handleDoubleClick',
+            'handleZoomOpen',
+            'handleZoomClose',
             'onMouseUp',
             'onMouseMove',
             'onMouseDown',
@@ -28,7 +30,8 @@ class Stage extends React.Component {
             mouseDownPosition: null,
             isDragging: false,
             dragOffset: null,
-            dragId: null
+            dragId: null,
+            zoomed: false
         };
     }
     componentDidMount () {
@@ -38,8 +41,8 @@ class Stage extends React.Component {
         this.renderer = new Renderer(this.canvas);
         this.props.vm.attachRenderer(this.renderer);
     }
-    shouldComponentUpdate (nextProps) {
-        return this.props.width !== nextProps.width || this.props.height !== nextProps.height;
+    shouldComponentUpdate (nextProps, nextState) {
+        return this.props.width !== nextProps.width || this.props.height !== nextProps.height || this.state.zoomed !== nextState.zoomed;
     }
     componentWillUnmount () {
         this.detachMouseEvents(this.canvas);
@@ -188,17 +191,30 @@ class Stage extends React.Component {
     setCanvas (canvas) {
         this.canvas = canvas;
     }
+    handleZoomClose () {
+        this.setState({zoomed: false});
+    }
+    handleZoomOpen () {
+        this.setState({zoomed: true});
+    }
     render () {
         const {
             vm, // eslint-disable-line no-unused-vars
             ...props
         } = this.props;
         return (
+
             <StageComponent
+                onZoomOpen={this.handleZoomOpen}
+                onZoomClose={this.handleZoomClose}
+                isZoomed={this.state.zoomed}
+                vm={this.props.vm}
                 canvasRef={this.setCanvas}
                 onDoubleClick={this.handleDoubleClick}
                 {...props}
             />
+
+
         );
     }
 }