From 91b8d066a86ed9c0c997432827ae678d57342aa3 Mon Sep 17 00:00:00 2001
From: Josiah <josiah@wikimylife.org>
Date: Sun, 20 Aug 2017 00:06:23 -0400
Subject: [PATCH] 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 | 33 ++++++++++++++++++++++
src/components/stage/stage.jsx | 50 +++++++++++++++++++++++++++++++++-
src/containers/stage.jsx | 22 +++++++++++++--
3 files changed, 101 insertions(+), 4 deletions(-)
diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css
index 4cc5d3092..c25fc39a3 100644
--- a/src/components/stage/stage.css
+++ b/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;
diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx
index 92ef79f21..044364078 100644
--- a/src/components/stage/stage.jsx
+++ b/src/components/stage/stage.jsx
@@ -1,18 +1,29 @@
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
diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index 1b5b2ec9c..8264f6485 100644
--- a/src/containers/stage.jsx
+++ b/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}
/>
+
+
);
}
}
--
GitLab