Add size and remove rotation style from sprite info area.

Fixes https://github.com/LLK/scratch-gui/issues/1064

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
@@ -149,40 +148,33 @@ class SpriteInfo extends React.Component {
                     <div className={styles.group}>
                         <Label
                             secondary
-                            text="Direction"
+                            text="Size"
                         >
                             <BufferedInput
                                 small
                                 disabled={this.props.disabled}
-                                label="Direction"
+                                label="Size"
                                 tabIndex="0"
                                 type="text"
-                                value={this.props.disabled ? '' : this.props.direction}
-                                onSubmit={this.props.onChangeDirection}
+                                value={this.props.disabled ? '' : this.props.size}
+                                onSubmit={this.props.onChangeSize}
                             />
                         </Label>
                     </div>
                     <div className={styles.group}>
                         <Label
                             secondary
-                            text="Rotation"
+                            text="Direction"
                         >
-                            <select
-                                className={classNames(styles.selectForm, styles.rotationSelect)}
+                            <BufferedInput
+                                small
                                 disabled={this.props.disabled}
+                                label="Direction"
                                 tabIndex="0"
-                                value={this.props.rotationStyle}
-                                onChange={this.props.onChangeRotationStyle}
-                            >
-                                {ROTATION_STYLES.map(style => (
-                                    <option
-                                        key={style}
-                                        value={style}
-                                    >
-                                        {style}
-                                    </option>
-                                ))}
-                            </select>
+                                type="text"
+                                value={this.props.disabled ? '' : this.props.direction}
+                                onSubmit={this.props.onChangeDirection}
+                            />
                         </Label>
                     </div>
                 </div>
@@ -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.string,
     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}