From 53f956a00c74552b9e1d4a000cde751f06960c0b Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Wed, 1 Mar 2017 14:51:57 -0500 Subject: [PATCH 01/10] Display/update sprite name in sprite info --- src/components/sprite-info/sprite-info.jsx | 17 +++++++++++------ .../sprite-selector/sprite-selector.jsx | 8 +++++++- src/components/target-pane/target-pane.jsx | 5 ++++- src/containers/target-pane.jsx | 5 +++++ src/reducers/targets.js | 2 +- 5 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx index f7604696b..2b6e56605 100644 --- a/src/components/sprite-info/sprite-info.jsx +++ b/src/components/sprite-info/sprite-info.jsx @@ -17,13 +17,13 @@ const SpriteInfo = props => ( >
- - {props.name} - + Sprite
@@ -39,7 +39,7 @@ const SpriteInfo = props => ( type="text" />
- +
( />
- +
Rotation @@ -105,7 +105,12 @@ const SpriteInfo = props => ( ); SpriteInfo.propTypes = { - name: React.PropTypes.string + name: React.PropTypes.string, + onChangeName: React.PropTypes.func +}; + +SpriteInfo.defaultProps = { + name: '' }; module.exports = SpriteInfo; diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx index 89d29da10..6becf184a 100644 --- a/src/components/sprite-selector/sprite-selector.jsx +++ b/src/components/sprite-selector/sprite-selector.jsx @@ -7,17 +7,22 @@ const styles = require('./sprite-selector.css'); const SpriteSelectorComponent = function (props) { const { + onChangeSpriteName, onSelectSprite, selectedId, sprites, ...componentProps } = props; + const selectedSprite = sprites[selectedId] || {}; return ( - + @@ -43,6 +48,7 @@ const SpriteSelectorComponent = function (props) { }; SpriteSelectorComponent.propTypes = { + onChangeSpriteName: React.PropTypes.func, onSelectSprite: React.PropTypes.func, selectedId: React.PropTypes.string, sprites: React.PropTypes.shape({ diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx index 241448035..d9b7829a9 100644 --- a/src/components/target-pane/target-pane.jsx +++ b/src/components/target-pane/target-pane.jsx @@ -37,6 +37,7 @@ class TargetPane extends React.Component { backdropLibraryVisible, costumeLibraryVisible, spriteLibraryVisible, + onChangeSpriteName, onNewSpriteClick, onNewBackdropClick, onRequestCloseBackdropLibrary, @@ -53,10 +54,11 @@ class TargetPane extends React.Component { className={styles.targetPane} {...componentProps} > - + @@ -127,6 +129,7 @@ TargetPane.propTypes = { backdropLibraryVisible: React.PropTypes.bool, costumeLibraryVisible: React.PropTypes.bool, editingTarget: React.PropTypes.string, + onChangeSpriteName: React.PropTypes.func, onNewBackdropClick: React.PropTypes.func, onNewSpriteClick: React.PropTypes.func, onRequestCloseBackdropLibrary: React.PropTypes.func, diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx index 2911f7889..e4d9f0d14 100644 --- a/src/containers/target-pane.jsx +++ b/src/containers/target-pane.jsx @@ -18,9 +18,13 @@ class TargetPane extends React.Component { constructor (props) { super(props); bindAll(this, [ + 'handleChangeSpriteName', 'handleSelectSprite' ]); } + handleChangeSpriteName (e) { + this.props.vm.renameSprite(this.props.editingTarget, e.target.value); + } handleSelectSprite (id) { this.props.vm.setEditingTarget(id); } @@ -28,6 +32,7 @@ class TargetPane extends React.Component { return ( ); diff --git a/src/reducers/targets.js b/src/reducers/targets.js index 61c01ebb3..2320698a4 100644 --- a/src/reducers/targets.js +++ b/src/reducers/targets.js @@ -30,7 +30,7 @@ const reducer = function (state, action) { .filter(target => !target.isStage) .reduce( (targets, target, listId) => defaultsDeep( - {[target.id]: {order: listId}}, + {[target.id]: {order: listId, ...target}}, {[target.id]: state.sprites[target.id]}, targets ), From 5b7e3e76bab9ae3a25ae9491b78adacc33e1a8c2 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Wed, 1 Mar 2017 17:56:18 -0500 Subject: [PATCH 02/10] Update x/y info For the time being, update the position onChange. Eventually this will update onBlur/on "enter" key --- src/components/sprite-info/sprite-info.jsx | 10 ++++++++- .../sprite-selector/sprite-selector.jsx | 8 +++++++ src/components/target-pane/target-pane.jsx | 6 +++++ src/containers/target-pane.jsx | 22 +++++++++++++++++-- 4 files changed, 43 insertions(+), 3 deletions(-) diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx index 2b6e56605..1dfc4c743 100644 --- a/src/components/sprite-info/sprite-info.jsx +++ b/src/components/sprite-info/sprite-info.jsx @@ -37,6 +37,8 @@ const SpriteInfo = props => ( className={classNames(styles.inputForm, styles.inputFormX)} placeholder="x" type="text" + value={typeof props.x === 'undefined' ? '' : props.x} + onChange={props.onChangeX} />
@@ -50,6 +52,8 @@ const SpriteInfo = props => ( className={classNames(styles.inputForm, styles.inputFormY)} placeholder="y" type="text" + value={typeof props.y === 'undefined' ? '' : props.y} + onChange={props.onChangeY} /> @@ -106,7 +110,11 @@ const SpriteInfo = props => ( SpriteInfo.propTypes = { name: React.PropTypes.string, - onChangeName: React.PropTypes.func + onChangeName: React.PropTypes.func, + onChangeX: React.PropTypes.func, + onChangeY: React.PropTypes.func, + x: React.PropTypes.number, + y: React.PropTypes.number }; SpriteInfo.defaultProps = { diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx index 6becf184a..69898084d 100644 --- a/src/components/sprite-selector/sprite-selector.jsx +++ b/src/components/sprite-selector/sprite-selector.jsx @@ -8,6 +8,8 @@ const styles = require('./sprite-selector.css'); const SpriteSelectorComponent = function (props) { const { onChangeSpriteName, + onChangeSpriteX, + onChangeSpriteY, onSelectSprite, selectedId, sprites, @@ -21,7 +23,11 @@ const SpriteSelectorComponent = function (props) { > @@ -49,6 +55,8 @@ const SpriteSelectorComponent = function (props) { SpriteSelectorComponent.propTypes = { onChangeSpriteName: React.PropTypes.func, + onChangeSpriteX: React.PropTypes.func, + onChangeSpriteY: React.PropTypes.func, onSelectSprite: React.PropTypes.func, selectedId: React.PropTypes.string, sprites: React.PropTypes.shape({ diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx index d9b7829a9..b1f92acbc 100644 --- a/src/components/target-pane/target-pane.jsx +++ b/src/components/target-pane/target-pane.jsx @@ -38,6 +38,8 @@ class TargetPane extends React.Component { costumeLibraryVisible, spriteLibraryVisible, onChangeSpriteName, + onChangeSpriteX, + onChangeSpriteY, onNewSpriteClick, onNewBackdropClick, onRequestCloseBackdropLibrary, @@ -59,6 +61,8 @@ class TargetPane extends React.Component { selectedId={editingTarget} sprites={sprites} onChangeSpriteName={onChangeSpriteName} + onChangeSpriteX={onChangeSpriteX} + onChangeSpriteY={onChangeSpriteY} onSelectSprite={onSelectSprite} /> @@ -130,6 +134,8 @@ TargetPane.propTypes = { costumeLibraryVisible: React.PropTypes.bool, editingTarget: React.PropTypes.string, onChangeSpriteName: React.PropTypes.func, + onChangeSpriteX: React.PropTypes.func, + onChangeSpriteY: React.PropTypes.func, onNewBackdropClick: React.PropTypes.func, onNewSpriteClick: React.PropTypes.func, onRequestCloseBackdropLibrary: React.PropTypes.func, diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx index e4d9f0d14..9225a2892 100644 --- a/src/containers/target-pane.jsx +++ b/src/containers/target-pane.jsx @@ -1,5 +1,4 @@ const bindAll = require('lodash.bindall'); -const pick = require('lodash.pick'); const React = require('react'); const {connect} = require('react-redux'); @@ -19,12 +18,26 @@ class TargetPane extends React.Component { super(props); bindAll(this, [ 'handleChangeSpriteName', + 'handleChangeSpriteX', + 'handleChangeSpriteY', 'handleSelectSprite' ]); } handleChangeSpriteName (e) { this.props.vm.renameSprite(this.props.editingTarget, e.target.value); } + handleChangeSpriteX (e) { + let x = e.target.value; + if (x === '-') x = -1; + if (isNaN(x)) return; + this.props.vm.postSpriteInfo({x}); + } + handleChangeSpriteY (e) { + let y = e.target.value; + if (y === '-') y = -1; + if (isNaN(y)) return; + this.props.vm.postSpriteInfo({y}); + } handleSelectSprite (id) { this.props.vm.setEditingTarget(id); } @@ -33,6 +46,8 @@ class TargetPane extends React.Component { ); @@ -51,7 +66,10 @@ TargetPane.propTypes = { const mapStateToProps = state => ({ editingTarget: state.targets.editingTarget, sprites: Object.keys(state.targets.sprites).reduce((sprites, k) => { - sprites[k] = pick(state.targets.sprites[k], ['costume', 'name', 'order']); + let {x, y, ...sprite} = state.targets.sprites[k]; + if (typeof x !== 'undefined') x = Math.round(x); + if (typeof y !== 'undefined') y = Math.round(y); + sprites[k] = {...sprite, x, y}; return sprites; }, {}), stage: state.targets.stage, From 002835ad6bae455dcdf2aea5531dd62974329cc0 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Wed, 1 Mar 2017 18:53:14 -0500 Subject: [PATCH 03/10] Manage visibility and draggability in sprite info Very crude, requires a refactor to allow toggling --- src/components/sprite-info/sprite-info.css | 40 +++++++++---------- src/components/sprite-info/sprite-info.jsx | 39 ++++++++++++++++-- .../sprite-selector/sprite-selector.jsx | 10 ++++- src/components/target-pane/target-pane.jsx | 12 +++++- src/containers/target-pane.jsx | 10 +++++ 5 files changed, 84 insertions(+), 27 deletions(-) diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css index 810ab542c..4acb6f56b 100644 --- a/src/components/sprite-info/sprite-info.css +++ b/src/components/sprite-info/sprite-info.css @@ -36,29 +36,27 @@ } /* TODO: refactor from descendant selector, to a regular class */ -.group img { +.group img { display: inline-block; - width: 1rem; + width: 1rem; height: 1rem; margin: 0 0.1rem; } +.icon { + opacity: 0.4; +} + +.icon.is-active { + opacity: 1; +} + .draggable-icon { - width: 0.55rem !important; - opacity: 1 !important; + width: 0.55rem; } .not-draggable-icon { - width: 0.75rem !important; - opacity: 0.4 !important; -} - -.show-icon { - opacity: 1 !important; -} - -.hide-icon { - opacity: 0.4 !important; + width: 0.75rem; } .input-label { @@ -87,19 +85,19 @@ font-size: 0.625rem; font-weight: bold; border-width: 1px; - border-style: solid; - border-color: #e9eef2; - border-radius: 2rem; + border-style: solid; + border-color: #e9eef2; + border-radius: 2rem; cursor: text; - transition: 0.25s ease-out; /* TODO: standardize with var */ + transition: 0.25s ease-out; /* TODO: standardize with var */ box-shadow: none; - /* + /* For truncating overflowing text gracefully Min-width is for a bug: https://css-tricks.com/flexbox-truncated-text TODO: move this out into a mixin or a helper component */ - overflow: hidden; + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; @@ -122,5 +120,5 @@ border: 1px solid #e9eef2; border-radius: 0.25rem; cursor: pointer; - transition: 0.25s ease-out; /* TODO: standardize with var */ + transition: 0.25s ease-out; /* TODO: standardize with var */ } diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx index 1dfc4c743..47ce1026e 100644 --- a/src/components/sprite-info/sprite-info.jsx +++ b/src/components/sprite-info/sprite-info.jsx @@ -66,11 +66,24 @@ const SpriteInfo = props => (
@@ -82,12 +95,26 @@ const SpriteInfo = props => (
@@ -109,10 +136,14 @@ const SpriteInfo = props => ( ); SpriteInfo.propTypes = { + draggable: React.PropTypes.bool, name: React.PropTypes.string, + onChangeDraggability: React.PropTypes.func, onChangeName: React.PropTypes.func, + onChangeVisibility: React.PropTypes.func, onChangeX: React.PropTypes.func, onChangeY: React.PropTypes.func, + visible: React.PropTypes.bool, x: React.PropTypes.number, y: React.PropTypes.number }; diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx index 69898084d..3644b4071 100644 --- a/src/components/sprite-selector/sprite-selector.jsx +++ b/src/components/sprite-selector/sprite-selector.jsx @@ -1,13 +1,15 @@ const React = require('react'); const Box = require('../box/box.jsx'); -const SpriteSelectorItem = require('../../containers/sprite-selector-item.jsx'); const SpriteInfo = require('../sprite-info/sprite-info.jsx'); +const SpriteSelectorItem = require('../../containers/sprite-selector-item.jsx'); const styles = require('./sprite-selector.css'); const SpriteSelectorComponent = function (props) { const { + onChangeSpriteDraggability, onChangeSpriteName, + onChangeSpriteVisibility, onChangeSpriteX, onChangeSpriteY, onSelectSprite, @@ -22,10 +24,14 @@ const SpriteSelectorComponent = function (props) { {...componentProps} > @@ -54,7 +60,9 @@ const SpriteSelectorComponent = function (props) { }; SpriteSelectorComponent.propTypes = { + onChangeSpriteDraggability: React.PropTypes.func, onChangeSpriteName: React.PropTypes.func, + onChangeSpriteVisibility: React.PropTypes.func, onChangeSpriteX: React.PropTypes.func, onChangeSpriteY: React.PropTypes.func, onSelectSprite: React.PropTypes.func, diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx index b1f92acbc..eb728641c 100644 --- a/src/components/target-pane/target-pane.jsx +++ b/src/components/target-pane/target-pane.jsx @@ -37,7 +37,9 @@ class TargetPane extends React.Component { backdropLibraryVisible, costumeLibraryVisible, spriteLibraryVisible, + onChangeSpriteDraggability, onChangeSpriteName, + onChangeSpriteVisibility, onChangeSpriteX, onChangeSpriteY, onNewSpriteClick, @@ -60,7 +62,9 @@ class TargetPane extends React.Component { Date: Wed, 1 Mar 2017 19:14:49 -0500 Subject: [PATCH 04/10] Implement toggling visibility/draggability Refactor sprite info behavior into a container and let it handle the raw events. TODO: refactor again into redux --- src/components/sprite-info/sprite-info.jsx | 13 ++-- .../sprite-selector/sprite-selector.jsx | 2 +- src/containers/sprite-info.jsx | 74 +++++++++++++++++++ src/containers/target-pane.jsx | 22 ++---- 4 files changed, 91 insertions(+), 20 deletions(-) create mode 100644 src/containers/sprite-info.jsx diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx index 47ce1026e..3ce3d585b 100644 --- a/src/components/sprite-info/sprite-info.jsx +++ b/src/components/sprite-info/sprite-info.jsx @@ -74,7 +74,7 @@ const SpriteInfo = props => ( } )} src={showIcon} - onClick={props.onChangeVisibility} + onClick={props.onClickVisible} /> ( } )} src={hideIcon} + onClick={props.onClickNotVisible} /> @@ -103,7 +104,7 @@ const SpriteInfo = props => ( } )} src={draggableIcon} - onClick={props.onChangeDraggability} + onClick={props.onClickDraggable} /> ( } )} src={notDraggableIcon} - onClick={props.onChangeDraggability} + onClick={props.onClickNotDraggable} /> @@ -138,11 +139,13 @@ const SpriteInfo = props => ( SpriteInfo.propTypes = { draggable: React.PropTypes.bool, name: React.PropTypes.string, - onChangeDraggability: React.PropTypes.func, onChangeName: React.PropTypes.func, - onChangeVisibility: React.PropTypes.func, onChangeX: React.PropTypes.func, onChangeY: React.PropTypes.func, + onClickDraggable: React.PropTypes.func, + onClickNotDraggable: React.PropTypes.func, + onClickNotVisible: React.PropTypes.func, + onClickVisible: React.PropTypes.func, visible: React.PropTypes.bool, x: React.PropTypes.number, y: React.PropTypes.number diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx index 3644b4071..5cb06a16b 100644 --- a/src/components/sprite-selector/sprite-selector.jsx +++ b/src/components/sprite-selector/sprite-selector.jsx @@ -1,7 +1,7 @@ const React = require('react'); const Box = require('../box/box.jsx'); -const SpriteInfo = require('../sprite-info/sprite-info.jsx'); +const SpriteInfo = require('../../containers/sprite-info.jsx'); const SpriteSelectorItem = require('../../containers/sprite-selector-item.jsx'); const styles = require('./sprite-selector.css'); diff --git a/src/containers/sprite-info.jsx b/src/containers/sprite-info.jsx new file mode 100644 index 000000000..074fd2f1a --- /dev/null +++ b/src/containers/sprite-info.jsx @@ -0,0 +1,74 @@ +const bindAll = require('lodash.bindall'); +const React = require('react'); + +const SpriteInfoComponent = require('../components/sprite-info/sprite-info.jsx'); + +class SpriteInfo extends React.Component { + constructor (props) { + super(props); + bindAll(this, [ + 'handleChangeName', + 'handleChangeX', + 'handleChangeY', + 'handleClickVisible', + 'handleClickNotVisible', + 'handleClickDraggable', + 'handleClickNotDraggable' + ]); + } + handleChangeName (e) { + this.props.onChangeName(e.target.value); + } + handleChangeX (e) { + let x = e.target.value; + if (x === '-') x = -1; + if (isNaN(x)) return; + this.props.onChangeX(x); + } + handleChangeY (e) { + let y = e.target.value; + if (y === '-') y = -1; + if (isNaN(y)) return; + this.props.onChangeY(y); + } + handleClickVisible (e) { + e.preventDefault(); + this.props.onChangeVisibility(true); + } + handleClickNotVisible (e) { + e.preventDefault(); + this.props.onChangeVisibility(false); + } + handleClickDraggable (e) { + e.preventDefault(); + this.props.onChangeDraggability(true); + } + handleClickNotDraggable (e) { + e.preventDefault(); + this.props.onChangeDraggability(false); + } + render () { + return ( + + ); + } +} + +SpriteInfo.propTypes = { + onChangeDraggability: React.PropTypes.func, + onChangeName: React.PropTypes.func, + onChangeVisibility: React.PropTypes.func, + onChangeX: React.PropTypes.func, + onChangeY: React.PropTypes.func, +}; + +module.exports = SpriteInfo; diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx index 3de07800d..c61521f37 100644 --- a/src/containers/target-pane.jsx +++ b/src/containers/target-pane.jsx @@ -25,25 +25,19 @@ class TargetPane extends React.Component { 'handleSelectSprite' ]); } - handleChangeSpriteDraggability () { - this.props.vm.postSpriteInfo({draggable: true}); + handleChangeSpriteDraggability (draggable) { + this.props.vm.postSpriteInfo({draggable}); } - handleChangeSpriteName (e) { - this.props.vm.renameSprite(this.props.editingTarget, e.target.value); + handleChangeSpriteName (name) { + this.props.vm.renameSprite(this.props.editingTarget, name); } - handleChangeSpriteVisibility () { - this.props.vm.postSpriteInfo({visible: false}); + handleChangeSpriteVisibility (visible) { + this.props.vm.postSpriteInfo({visible}); } - handleChangeSpriteX (e) { - let x = e.target.value; - if (x === '-') x = -1; - if (isNaN(x)) return; + handleChangeSpriteX (x) { this.props.vm.postSpriteInfo({x}); } - handleChangeSpriteY (e) { - let y = e.target.value; - if (y === '-') y = -1; - if (isNaN(y)) return; + handleChangeSpriteY (y) { this.props.vm.postSpriteInfo({y}); } handleSelectSprite (id) { From 2ab4589e5b332ab8dbd6da5a3dcf20d4bcd85989 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Wed, 1 Mar 2017 22:41:19 -0500 Subject: [PATCH 05/10] Manage rotation style from sprite info --- src/components/sprite-info/sprite-info.jsx | 17 ++++++++++++++--- .../sprite-selector/sprite-selector.jsx | 4 ++++ src/components/target-pane/target-pane.jsx | 4 ++++ src/containers/sprite-info.jsx | 8 +++++++- src/containers/target-pane.jsx | 5 +++++ 5 files changed, 34 insertions(+), 4 deletions(-) diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx index 3ce3d585b..b04039535 100644 --- a/src/components/sprite-info/sprite-info.jsx +++ b/src/components/sprite-info/sprite-info.jsx @@ -11,6 +11,8 @@ const hideIcon = require('./icon--hide.svg'); const draggableIcon = require('./icon--draggable.svg'); const notDraggableIcon = require('./icon--not-draggable.svg'); +const ROTATION_STYLES = ['left-right', 'don\'t rotate', 'all around']; + const SpriteInfo = props => ( ( @@ -140,12 +149,14 @@ SpriteInfo.propTypes = { draggable: React.PropTypes.bool, name: React.PropTypes.string, onChangeName: React.PropTypes.func, + onChangeRotationStyle: React.PropTypes.func, onChangeX: React.PropTypes.func, onChangeY: React.PropTypes.func, onClickDraggable: React.PropTypes.func, onClickNotDraggable: React.PropTypes.func, onClickNotVisible: React.PropTypes.func, onClickVisible: React.PropTypes.func, + rotationStyle: React.PropTypes.oneOf(ROTATION_STYLES), visible: React.PropTypes.bool, x: React.PropTypes.number, y: React.PropTypes.number diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx index 5cb06a16b..5730997f3 100644 --- a/src/components/sprite-selector/sprite-selector.jsx +++ b/src/components/sprite-selector/sprite-selector.jsx @@ -9,6 +9,7 @@ const SpriteSelectorComponent = function (props) { const { onChangeSpriteDraggability, onChangeSpriteName, + onChangeSpriteRotationStyle, onChangeSpriteVisibility, onChangeSpriteX, onChangeSpriteY, @@ -26,11 +27,13 @@ const SpriteSelectorComponent = function (props) { ); } @@ -66,6 +71,7 @@ class SpriteInfo extends React.Component { SpriteInfo.propTypes = { onChangeDraggability: React.PropTypes.func, onChangeName: React.PropTypes.func, + onChangeRotationStyle: React.PropTypes.func, onChangeVisibility: React.PropTypes.func, onChangeX: React.PropTypes.func, onChangeY: React.PropTypes.func, diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx index c61521f37..45033a72f 100644 --- a/src/containers/target-pane.jsx +++ b/src/containers/target-pane.jsx @@ -19,6 +19,7 @@ class TargetPane extends React.Component { bindAll(this, [ 'handleChangeSpriteDraggability', 'handleChangeSpriteName', + 'handleChangeSpriteRotationStyle', 'handleChangeSpriteVisibility', 'handleChangeSpriteX', 'handleChangeSpriteY', @@ -31,6 +32,9 @@ class TargetPane extends React.Component { handleChangeSpriteName (name) { this.props.vm.renameSprite(this.props.editingTarget, name); } + handleChangeSpriteRotationStyle (rotationStyle) { + this.props.vm.postSpriteInfo({rotationStyle}); + } handleChangeSpriteVisibility (visible) { this.props.vm.postSpriteInfo({visible}); } @@ -49,6 +53,7 @@ class TargetPane extends React.Component { {...this.props} onChangeSpriteDraggability={this.handleChangeSpriteDraggability} onChangeSpriteName={this.handleChangeSpriteName} + onChangeSpriteRotationStyle={this.handleChangeSpriteRotationStyle} onChangeSpriteVisibility={this.handleChangeSpriteVisibility} onChangeSpriteX={this.handleChangeSpriteX} onChangeSpriteY={this.handleChangeSpriteY} From 4a004d2b3b5bde646aa705c4586023d5c041b462 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Wed, 1 Mar 2017 22:58:35 -0500 Subject: [PATCH 06/10] Disable sprite info fields when stage is selected --- src/components/sprite-info/sprite-info.css | 4 + src/components/sprite-info/sprite-info.jsx | 262 +++++++++++---------- 2 files changed, 139 insertions(+), 127 deletions(-) diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css index 4acb6f56b..3a8c2121e 100644 --- a/src/components/sprite-info/sprite-info.css +++ b/src/components/sprite-info/sprite-info.css @@ -122,3 +122,7 @@ cursor: pointer; transition: 0.25s ease-out; /* TODO: standardize with var */ } + +.radio-box.is-disabled { + cursor: default; +} diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx index b04039535..6244cfe02 100644 --- a/src/components/sprite-info/sprite-info.jsx +++ b/src/components/sprite-info/sprite-info.jsx @@ -13,137 +13,149 @@ const notDraggableIcon = require('./icon--not-draggable.svg'); const ROTATION_STYLES = ['left-right', 'don\'t rotate', 'all around']; -const SpriteInfo = props => ( - -
-
- Sprite - -
- -
- - x - -
- -
- - y - -
-
- - -
-
- - Show - -
- { + const nameDisabled = typeof props.name === 'undefined'; + const xDisabled = typeof props.x === 'undefined'; + const yDisabled = typeof props.y === 'undefined'; + const visibleDisabled = typeof props.visible === 'undefined'; + const draggableDisabled = typeof props.draggable === 'undefined'; + const rotationStyleDisabled = typeof props.rotationStyle === 'undefined'; + return ( + +
+
+ Sprite + +
+ +
+ x + +
+ +
+ + y +
-
- - Draggable - -
- - + +
+
+ + Show + +
+ + +
+
+ +
+ + Draggable + +
+ + +
+
+ +
+ + Rotation + +
- -
- - Rotation - - -
-
- -); + + ); +}; SpriteInfo.propTypes = { draggable: React.PropTypes.bool, @@ -162,8 +174,4 @@ SpriteInfo.propTypes = { y: React.PropTypes.number }; -SpriteInfo.defaultProps = { - name: '' -}; - module.exports = SpriteInfo; From f2592fa783aa0c1282f947428c629d08043efcba Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Wed, 1 Mar 2017 23:23:19 -0500 Subject: [PATCH 07/10] Lint --- src/containers/sprite-info.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/containers/sprite-info.jsx b/src/containers/sprite-info.jsx index e47d4f627..1d7cbcadd 100644 --- a/src/containers/sprite-info.jsx +++ b/src/containers/sprite-info.jsx @@ -61,8 +61,8 @@ class SpriteInfo extends React.Component { onChangeY={this.handleChangeY} onClickDraggable={this.handleClickDraggable} onClickNotDraggable={this.handleClickNotDraggable} - onClickVisible={this.handleClickVisible} onClickNotVisible={this.handleClickNotVisible} + onClickVisible={this.handleClickVisible} /> ); } @@ -74,7 +74,7 @@ SpriteInfo.propTypes = { onChangeRotationStyle: React.PropTypes.func, onChangeVisibility: React.PropTypes.func, onChangeX: React.PropTypes.func, - onChangeY: React.PropTypes.func, + onChangeY: React.PropTypes.func }; module.exports = SpriteInfo; From d2edd3aaee705e27d8a21723210c69ba603ab904 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Wed, 1 Mar 2017 23:59:24 -0500 Subject: [PATCH 08/10] Add shouldComponentUpdate to sprite-info for perf --- src/components/sprite-info/sprite-info.jsx | 282 +++++++++++---------- 1 file changed, 147 insertions(+), 135 deletions(-) diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx index 6244cfe02..2dcf84354 100644 --- a/src/components/sprite-info/sprite-info.jsx +++ b/src/components/sprite-info/sprite-info.jsx @@ -13,149 +13,161 @@ const notDraggableIcon = require('./icon--not-draggable.svg'); const ROTATION_STYLES = ['left-right', 'don\'t rotate', 'all around']; -const SpriteInfo = props => { - const nameDisabled = typeof props.name === 'undefined'; - const xDisabled = typeof props.x === 'undefined'; - const yDisabled = typeof props.y === 'undefined'; - const visibleDisabled = typeof props.visible === 'undefined'; - const draggableDisabled = typeof props.draggable === 'undefined'; - const rotationStyleDisabled = typeof props.rotationStyle === 'undefined'; - return ( - -
-
- Sprite - -
- -
- - x - -
- -
- - y - -
-
- - -
-
- - Show - -
- +
+
+ Sprite + +
+ +
+ x + +
+ +
+ + y +
-
- - Draggable - -
- - + +
+
+ + Show + +
+ + +
+
+ +
+ + Draggable + +
+ + +
+
+ +
+ + Rotation + +
- -
- - Rotation - - -
-
- - ); -}; + + ); + } +} SpriteInfo.propTypes = { draggable: React.PropTypes.bool, From f695307d15d8bd1cede1e5ec2168a8fa3c360261 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Thu, 2 Mar 2017 10:37:56 -0500 Subject: [PATCH 09/10] Disable all of sprite info at once for perf --- src/components/sprite-info/sprite-info.jsx | 34 ++++++++----------- .../sprite-selector/sprite-selector.jsx | 8 ++++- 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx index 2dcf84354..bb88b7abb 100644 --- a/src/components/sprite-info/sprite-info.jsx +++ b/src/components/sprite-info/sprite-info.jsx @@ -16,6 +16,7 @@ const ROTATION_STYLES = ['left-right', 'don\'t rotate', 'all around']; class SpriteInfo extends React.Component { shouldComponentUpdate (nextProps) { return ( + this.props.disabled !== nextProps.disabled || this.props.draggable !== nextProps.draggable || this.props.name !== nextProps.name || this.props.rotationStyle !== nextProps.rotationStyle || @@ -25,12 +26,6 @@ class SpriteInfo extends React.Component { ); } render () { - const nameDisabled = typeof this.props.name === 'undefined'; - const xDisabled = typeof this.props.x === 'undefined'; - const yDisabled = typeof this.props.y === 'undefined'; - const visibleDisabled = typeof this.props.visible === 'undefined'; - const draggableDisabled = typeof this.props.draggable === 'undefined'; - const rotationStyleDisabled = typeof this.props.rotationStyle === 'undefined'; return ( Sprite
@@ -56,10 +51,10 @@ class SpriteInfo extends React.Component { x
@@ -72,10 +67,10 @@ class SpriteInfo extends React.Component { y
@@ -87,13 +82,13 @@ class SpriteInfo extends React.Component { Show -
+
Draggable -
+