diff --git a/src/components/forms/input.css b/src/components/forms/input.css index 6d5eefa52..b0f63b860 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 3e680625a..36ae5e144 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 d67a8dc8e..202ac2a7d 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,7 +145,23 @@ class SpriteInfo extends React.Component { -
+
+ +
+
-
- -
); @@ -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 0110bea1f..7196176ae 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 11971c87f..30267688f 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 f4b5ca696..fe0a7267e 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 ( ({ 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,