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

@@ -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}
                 />
             </div>
 
@@ -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}
                 />
             </div>
         </div>
@@ -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 = {

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) {
         >
             <SpriteInfo
                 name={selectedSprite.name}
+                x={selectedSprite.x}
+                y={selectedSprite.y}
                 onChangeName={onChangeSpriteName}
+                onChangeX={onChangeSpriteX}
+                onChangeY={onChangeSpriteY}
             />
 
             <Box className={styles.scrollWrapper}>
@@ -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({

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}
                 />
                 <Box className={styles.stageSelectorWrapper}>
@@ -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,

src/containers/target-pane.jsx

 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 {
             <TargetPaneComponent
                 {...this.props}
                 onChangeSpriteName={this.handleChangeSpriteName}
+                onChangeSpriteX={this.handleChangeSpriteX}
+                onChangeSpriteY={this.handleChangeSpriteY}
                 onSelectSprite={this.handleSelectSprite}
             />
         );
@@ -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,