diff --git a/src/components/forms/input.css b/src/components/forms/input.css
index 6d5eefa52d5b2f4d5c0c558fb37aa1f05ad5e7c0..b0f63b8604b6a62faa92f3c7931e535cbdab91d5 100644
--- a/src/components/forms/input.css
+++ b/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;
}
diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index 3e680625adfbfba7e7f0a28d18bbbd23fb403222..36ae5e144b3573647996494d4e906e1f311c9818 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/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;
+}
diff --git a/src/components/sprite-info/sprite-info.jsx b/src/components/sprite-info/sprite-info.jsx
index d67a8dc8e137f6b11e347d6cf24ff859ff2f24eb..202ac2a7d0752b92c0a12fb79039dc82dd8d0498 100644
--- a/src/components/sprite-info/sprite-info.jsx
+++ b/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,43 +145,36 @@ class SpriteInfo extends React.Component {
</div>
</div>
</div>
- <div className={styles.group}>
+ <div className={classNames(styles.group, styles.largerInput)}>
<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}>
+ <div className={classNames(styles.group, styles.largerInput)}>
<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,
diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx
index 0110bea1ff97619027f0236799bfe35fb9351325..7196176ae8ba03d6c37053aeeec6badbd4b85e39 100644
--- a/src/components/sprite-selector/sprite-selector.jsx
+++ b/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,
diff --git a/src/components/target-pane/target-pane.jsx b/src/components/target-pane/target-pane.jsx
index 11971c87f28fffda658921ffec8f0e9a822abc7c..30267688fe968e554928247d8f2aa7674f0478f0 100644
--- a/src/components/target-pane/target-pane.jsx
+++ b/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,
diff --git a/src/containers/sprite-info.jsx b/src/containers/sprite-info.jsx
index f4b5ca696d2118898bdbd73c87b30173f8acf52d..fe0a7267e85a7e7d2155fa479c8247ba3d8ab7c8 100644
--- a/src/containers/sprite-info.jsx
+++ b/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,
diff --git a/src/containers/target-pane.jsx b/src/containers/target-pane.jsx
index 62d16331119ddcb3779b53cc78ee3793b2448052..32ad448bc7d7b33ed060bc5670720274d4572c3c 100644
--- a/src/containers/target-pane.jsx
+++ b/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,