From 59d1ff865e89e744e87443de161d056ac5cadd21 Mon Sep 17 00:00:00 2001
From: Josiah Neuberger <josiah@wikimylife.org>
Date: Thu, 9 Nov 2017 10:29:36 -0500
Subject: [PATCH] Cleaned up zoom state in stage-header/stage containers
---
src/containers/stage-header.jsx | 40 +++++++++------------------------
src/containers/stage.jsx | 13 +----------
2 files changed, 12 insertions(+), 41 deletions(-)
diff --git a/src/containers/stage-header.jsx b/src/containers/stage-header.jsx
index 8a853473b..2bea636af 100644
--- a/src/containers/stage-header.jsx
+++ b/src/containers/stage-header.jsx
@@ -1,48 +1,24 @@
-import bindAll from 'lodash.bindall';
import PropTypes from 'prop-types';
import React from 'react';
import VM from 'scratch-vm';
+import {setZoomed} from '../reducers/zoom';
import {connect} from 'react-redux';
import StageHeaderComponent from '../components/stage-header/stage-header.jsx';
class StageHeader extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleZoom',
- 'handleUnzoom'
- ]);
- this.state = {
- isZoomed: false
- };
- }
- shouldComponentUpdate (nextProps, nextState) {
+ shouldComponentUpdate (nextProps) {
return this.props.width !== nextProps.width ||
this.props.height !== nextProps.height ||
- this.state.isZoomed !== nextState.isZoomed;
- }
- handleZoom () {
- this.setState({isZoomed: true});
- this.props.dispatch({type: 'scratch-gui/Zoomed/SET_ZOOMED', isZoomed: true});
-
- }
- handleUnzoom () {
- this.setState({isZoomed: false});
- this.props.dispatch({type: 'scratch-gui/Zoomed/SET_ZOOMED', isZoomed: false});
+ this.props.isZoomed !== nextProps.isZoomed;
}
render () {
const {
- vm, // eslint-disable-line no-unused-vars
...props
} = this.props;
return (
<StageHeaderComponent
- isZoomed={this.state.isZoomed}
- vm={this.props.vm}
- onUnzoom={this.handleUnzoom}
- onZoom={this.handleZoom}
{...props}
/>
);
@@ -50,8 +26,8 @@ class StageHeader extends React.Component {
}
StageHeader.propTypes = {
- dispatch: PropTypes.func.isRequired,
height: PropTypes.number,
+ isZoomed: PropTypes.bool,
vm: PropTypes.instanceOf(VM).isRequired,
width: PropTypes.number
};
@@ -60,6 +36,12 @@ const mapStateToProps = state => ({
isZoomed: state.isZoomed
});
+const mapDispatchToProps = dispatch => ({
+ onZoom: () => dispatch(setZoomed(true)),
+ onUnzoom: () => dispatch(setZoomed(false))
+});
+
export default connect(
- mapStateToProps
+ mapStateToProps,
+ mapDispatchToProps
)(StageHeader);
diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx
index 89d32a588..d86ed327f 100644
--- a/src/containers/stage.jsx
+++ b/src/containers/stage.jsx
@@ -36,7 +36,6 @@ class Stage extends React.Component {
mouseDownTimeoutId: null,
mouseDownPosition: null,
isDragging: false,
- isZoomed: false,
dragOffset: null,
dragId: null,
colorInfo: null
@@ -49,19 +48,12 @@ class Stage extends React.Component {
this.renderer = new Renderer(this.canvas);
this.props.vm.attachRenderer(this.renderer);
}
- componentWillReceiveProps (nextProps) {
- const {
- isZoomed
- } = nextProps;
-
- this.setState({isZoomed: isZoomed});
- }
shouldComponentUpdate (nextProps, nextState) {
return this.props.width !== nextProps.width ||
this.props.height !== nextProps.height ||
this.props.isColorPicking !== nextProps.isColorPicking ||
this.state.colorInfo !== nextState.colorInfo ||
- this.state.isZoomed !== nextState.isZoomed;
+ this.props.isZoomed !== nextProps.isZoomed;
}
componentDidUpdate (prevProps) {
if (this.props.isColorPicking && !prevProps.isColorPicking) {
@@ -262,9 +254,6 @@ class Stage extends React.Component {
<StageComponent
canvasRef={this.setCanvas}
colorInfo={this.state.colorInfo}
- height={this.props.height}
- isZoomed={this.state.isZoomed}
- width={this.props.width}
onDoubleClick={this.handleDoubleClick}
{...props}
/>
--
GitLab