Move rounding into sprite info to avoid generating lots of garbage

It also avoids repeating the costly object spread, which becomes a problem for projects with a lot of sprites

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

@@ -34,14 +34,15 @@ class SpriteInfo extends React.Component {
     shouldComponentUpdate (nextProps) {
         return (
             this.props.rotationStyle !== nextProps.rotationStyle ||
-            this.props.direction !== nextProps.direction ||
             this.props.disabled !== nextProps.disabled ||
             this.props.name !== nextProps.name ||
-            this.props.size !== nextProps.size ||
             this.props.stageSize !== nextProps.stageSize ||
             this.props.visible !== nextProps.visible ||
-            this.props.x !== nextProps.x ||
-            this.props.y !== nextProps.y
+            // Only update these if rounded value has changed
+            Math.round(this.props.direction) !== Math.round(nextProps.direction) ||
+            Math.round(this.props.size) !== Math.round(nextProps.size) ||
+            Math.round(this.props.x) !== Math.round(nextProps.x) ||
+            Math.round(this.props.y) !== Math.round(nextProps.y)
         );
     }
     render () {
@@ -110,7 +111,7 @@ class SpriteInfo extends React.Component {
                         placeholder="x"
                         tabIndex="0"
                         type="text"
-                        value={this.props.disabled ? '' : this.props.x}
+                        value={this.props.disabled ? '' : Math.round(this.props.x)}
                         onSubmit={this.props.onChangeX}
                     />
                 </Label>
@@ -137,7 +138,7 @@ class SpriteInfo extends React.Component {
                         placeholder="y"
                         tabIndex="0"
                         type="text"
-                        value={this.props.disabled ? '' : this.props.y}
+                        value={this.props.disabled ? '' : Math.round(this.props.y)}
                         onSubmit={this.props.onChangeY}
                     />
                 </Label>
@@ -237,14 +238,14 @@ class SpriteInfo extends React.Component {
                                 label={sizeLabel}
                                 tabIndex="0"
                                 type="text"
-                                value={this.props.disabled ? '' : this.props.size}
+                                value={this.props.disabled ? '' : Math.round(this.props.size)}
                                 onSubmit={this.props.onChangeSize}
                             />
                         </Label>
                     </div>
                     <div className={classNames(styles.group, styles.largerInput)}>
                         <DirectionPicker
-                            direction={this.props.direction}
+                            direction={Math.round(this.props.direction)}
                             disabled={this.props.disabled}
                             labelAbove={labelAbove}
                             rotationStyle={this.props.rotationStyle}

src/containers/target-pane.jsx

@@ -248,22 +248,18 @@ TargetPane.propTypes = {
     ...targetPaneProps
 };
 
-const mapStateToProps = state => ({
-    editingTarget: state.scratchGui.targets.editingTarget,
-    hoveredTarget: state.scratchGui.hoveredTarget,
-    sprites: Object.keys(state.scratchGui.targets.sprites).reduce((sprites, k) => {
-        let {direction, size, x, y, ...sprite} = state.scratchGui.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);
-        if (typeof size !== 'undefined') size = Math.round(size);
-        sprites[k] = {...sprite, direction, size, x, y};
-        return sprites;
-    }, {}),
-    stage: state.scratchGui.targets.stage,
-    raiseSprites: state.scratchGui.blockDrag,
-    spriteLibraryVisible: state.scratchGui.modals.spriteLibrary
-});
+const mapStateToProps = state => {
+    const props = {
+        editingTarget: state.scratchGui.targets.editingTarget,
+        hoveredTarget: state.scratchGui.hoveredTarget,
+        sprites: state.scratchGui.targets.sprites,
+        stage: state.scratchGui.targets.stage,
+        raiseSprites: state.scratchGui.blockDrag,
+        spriteLibraryVisible: state.scratchGui.modals.spriteLibrary
+    };
+    return props;
+};
+
 const mapDispatchToProps = dispatch => ({
     onNewSpriteClick: e => {
         e.preventDefault();