Merge pull request #1089 from paulkaplan/replace-direction-size

Add size and remove rotation style from sprite info area.

src/components/forms/input.css

@@ -37,6 +37,8 @@
 }
 
 .input-small {
-    width: 3rem; 
+    width: 3rem;
+    padding: 0 0.5rem;
+    text-overflow: clip;
     text-align: center;
 }

src/components/sprite-info/sprite-info.css

@@ -98,3 +98,7 @@
     border-color: #4c97ff;
     box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
+
+.larger-input input {
+    width: 4rem;
+}

src/components/sprite-info/sprite-info.jsx

@@ -17,7 +17,6 @@ import showIcon from './icon--show.svg';
 import hideIcon from './icon--hide.svg';
 
 const BufferedInput = BufferedInputHOC(Input);
-const ROTATION_STYLES = ['left-right', 'don\'t rotate', 'all around'];
 
 class SpriteInfo extends React.Component {
     shouldComponentUpdate (nextProps) {
@@ -25,7 +24,7 @@ class SpriteInfo extends React.Component {
             this.props.direction !== nextProps.direction ||
             this.props.disabled !== nextProps.disabled ||
             this.props.name !== nextProps.name ||
-            this.props.rotationStyle !== nextProps.rotationStyle ||
+            this.props.size !== nextProps.size ||
             this.props.visible !== nextProps.visible ||
             this.props.x !== nextProps.x ||
             this.props.y !== nextProps.y
@@ -146,7 +145,23 @@ class SpriteInfo extends React.Component {
                             </div>
                         </div>
                     </div>
-                    <div className={styles.group}>
+                    <div className={classNames(styles.group, styles.largerInput)}>
+                        <Label
+                            secondary
+                            text="Size"
+                        >
+                            <BufferedInput
+                                small
+                                disabled={this.props.disabled}
+                                label="Size"
+                                tabIndex="0"
+                                type="text"
+                                value={this.props.disabled ? '' : this.props.size}
+                                onSubmit={this.props.onChangeSize}
+                            />
+                        </Label>
+                    </div>
+                    <div className={classNames(styles.group, styles.largerInput)}>
                         <Label
                             secondary
                             text="Direction"
@@ -162,29 +177,6 @@ class SpriteInfo extends React.Component {
                             />
                         </Label>
                     </div>
-                    <div className={styles.group}>
-                        <Label
-                            secondary
-                            text="Rotation"
-                        >
-                            <select
-                                className={classNames(styles.selectForm, styles.rotationSelect)}
-                                disabled={this.props.disabled}
-                                tabIndex="0"
-                                value={this.props.rotationStyle}
-                                onChange={this.props.onChangeRotationStyle}
-                            >
-                                {ROTATION_STYLES.map(style => (
-                                    <option
-                                        key={style}
-                                        value={style}
-                                    >
-                                        {style}
-                                    </option>
-                                ))}
-                            </select>
-                        </Label>
-                    </div>
                 </div>
             </Box>
         );
@@ -200,14 +192,17 @@ SpriteInfo.propTypes = {
     name: PropTypes.string,
     onChangeDirection: PropTypes.func,
     onChangeName: PropTypes.func,
-    onChangeRotationStyle: PropTypes.func,
+    onChangeSize: PropTypes.func,
     onChangeX: PropTypes.func,
     onChangeY: PropTypes.func,
     onClickNotVisible: PropTypes.func,
     onClickVisible: PropTypes.func,
     onPressNotVisible: PropTypes.func,
     onPressVisible: PropTypes.func,
-    rotationStyle: PropTypes.oneOf(ROTATION_STYLES),
+    size: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ]),
     visible: PropTypes.bool,
     x: PropTypes.oneOfType([
         PropTypes.string,

src/components/sprite-selector/sprite-selector.jsx

@@ -22,7 +22,7 @@ const SpriteSelectorComponent = function (props) {
     const {
         onChangeSpriteDirection,
         onChangeSpriteName,
-        onChangeSpriteRotationStyle,
+        onChangeSpriteSize,
         onChangeSpriteVisibility,
         onChangeSpriteX,
         onChangeSpriteY,
@@ -50,13 +50,13 @@ const SpriteSelectorComponent = function (props) {
                 direction={selectedSprite.direction}
                 disabled={spriteInfoDisabled}
                 name={selectedSprite.name}
-                rotationStyle={selectedSprite.rotationStyle}
+                size={selectedSprite.size}
                 visible={selectedSprite.visible}
                 x={selectedSprite.x}
                 y={selectedSprite.y}
                 onChangeDirection={onChangeSpriteDirection}
                 onChangeName={onChangeSpriteName}
-                onChangeRotationStyle={onChangeSpriteRotationStyle}
+                onChangeSize={onChangeSpriteSize}
                 onChangeVisibility={onChangeSpriteVisibility}
                 onChangeX={onChangeSpriteX}
                 onChangeY={onChangeSpriteY}
@@ -97,7 +97,7 @@ const SpriteSelectorComponent = function (props) {
 SpriteSelectorComponent.propTypes = {
     onChangeSpriteDirection: PropTypes.func,
     onChangeSpriteName: PropTypes.func,
-    onChangeSpriteRotationStyle: PropTypes.func,
+    onChangeSpriteSize: PropTypes.func,
     onChangeSpriteVisibility: PropTypes.func,
     onChangeSpriteX: PropTypes.func,
     onChangeSpriteY: PropTypes.func,

src/components/target-pane/target-pane.jsx

@@ -22,7 +22,7 @@ const TargetPane = ({
     spriteLibraryVisible,
     onChangeSpriteDirection,
     onChangeSpriteName,
-    onChangeSpriteRotationStyle,
+    onChangeSpriteSize,
     onChangeSpriteVisibility,
     onChangeSpriteX,
     onChangeSpriteY,
@@ -47,7 +47,7 @@ const TargetPane = ({
             sprites={sprites}
             onChangeSpriteDirection={onChangeSpriteDirection}
             onChangeSpriteName={onChangeSpriteName}
-            onChangeSpriteRotationStyle={onChangeSpriteRotationStyle}
+            onChangeSpriteSize={onChangeSpriteSize}
             onChangeSpriteVisibility={onChangeSpriteVisibility}
             onChangeSpriteX={onChangeSpriteX}
             onChangeSpriteY={onChangeSpriteY}
@@ -97,7 +97,7 @@ const spriteShape = PropTypes.shape({
     id: PropTypes.string,
     name: PropTypes.string,
     order: PropTypes.number,
-    rotationStyle: PropTypes.string,
+    size: PropTypes.number,
     visibility: PropTypes.bool,
     x: PropTypes.number,
     y: PropTypes.number
@@ -109,7 +109,7 @@ TargetPane.propTypes = {
     extensionLibraryVisible: PropTypes.bool,
     onChangeSpriteDirection: PropTypes.func,
     onChangeSpriteName: PropTypes.func,
-    onChangeSpriteRotationStyle: PropTypes.func,
+    onChangeSpriteSize: PropTypes.func,
     onChangeSpriteVisibility: PropTypes.func,
     onChangeSpriteX: PropTypes.func,
     onChangeSpriteY: PropTypes.func,

src/containers/sprite-info.jsx

@@ -8,16 +8,12 @@ class SpriteInfo extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'handleChangeRotationStyle',
             'handleClickVisible',
             'handleClickNotVisible',
             'handlePressVisible',
             'handlePressNotVisible'
         ]);
     }
-    handleChangeRotationStyle (e) {
-        this.props.onChangeRotationStyle(e.target.value);
-    }
     handleClickVisible (e) {
         e.preventDefault();
         this.props.onChangeVisibility(true);
@@ -42,7 +38,6 @@ class SpriteInfo extends React.Component {
         return (
             <SpriteInfoComponent
                 {...this.props}
-                onChangeRotationStyle={this.handleChangeRotationStyle}
                 onClickNotVisible={this.handleClickNotVisible}
                 onClickVisible={this.handleClickVisible}
                 onPressNotVisible={this.handlePressNotVisible}
@@ -56,7 +51,7 @@ SpriteInfo.propTypes = {
     ...SpriteInfoComponent.propTypes,
     onChangeDirection: PropTypes.func,
     onChangeName: PropTypes.func,
-    onChangeRotationStyle: PropTypes.func,
+    onChangeSize: PropTypes.func,
     onChangeVisibility: PropTypes.func,
     onChangeX: PropTypes.func,
     onChangeY: PropTypes.func,

src/containers/target-pane.jsx

@@ -17,7 +17,7 @@ class TargetPane extends React.Component {
         bindAll(this, [
             'handleChangeSpriteDirection',
             'handleChangeSpriteName',
-            'handleChangeSpriteRotationStyle',
+            'handleChangeSpriteSize',
             'handleChangeSpriteVisibility',
             'handleChangeSpriteX',
             'handleChangeSpriteY',
@@ -32,8 +32,8 @@ class TargetPane extends React.Component {
     handleChangeSpriteName (name) {
         this.props.vm.renameSprite(this.props.editingTarget, name);
     }
-    handleChangeSpriteRotationStyle (rotationStyle) {
-        this.props.vm.postSpriteInfo({rotationStyle});
+    handleChangeSpriteSize (size) {
+        this.props.vm.postSpriteInfo({size});
     }
     handleChangeSpriteVisibility (visible) {
         this.props.vm.postSpriteInfo({visible});
@@ -59,7 +59,7 @@ class TargetPane extends React.Component {
                 {...this.props}
                 onChangeSpriteDirection={this.handleChangeSpriteDirection}
                 onChangeSpriteName={this.handleChangeSpriteName}
-                onChangeSpriteRotationStyle={this.handleChangeSpriteRotationStyle}
+                onChangeSpriteSize={this.handleChangeSpriteSize}
                 onChangeSpriteVisibility={this.handleChangeSpriteVisibility}
                 onChangeSpriteX={this.handleChangeSpriteX}
                 onChangeSpriteY={this.handleChangeSpriteY}
@@ -83,11 +83,12 @@ TargetPane.propTypes = {
 const mapStateToProps = state => ({
     editingTarget: state.targets.editingTarget,
     sprites: Object.keys(state.targets.sprites).reduce((sprites, k) => {
-        let {direction, x, y, ...sprite} = state.targets.sprites[k];
+        let {direction, size, x, y, ...sprite} = state.targets.sprites[k];
         if (typeof direction !== 'undefined') direction = Math.round(direction);
         if (typeof x !== 'undefined') x = Math.round(x);
         if (typeof y !== 'undefined') y = Math.round(y);
-        sprites[k] = {...sprite, direction, x, y};
+        if (typeof size !== 'undefined') size = Math.round(size);
+        sprites[k] = {...sprite, direction, size, x, y};
         return sprites;
     }, {}),
     stage: state.targets.stage,