Add SVG id prop to track costume changes

Since the editor will receive an update every time the svg is updated, only re-render if the actual svg id changes.

src/components/paint-editor/paint-editor.jsx

@@ -169,6 +169,7 @@ class PaintEditorComponent extends React.Component {
                             rotationCenterX={this.props.rotationCenterX}
                             rotationCenterY={this.props.rotationCenterY}
                             svg={this.props.svg}
+                            svgId={this.props.svgId}
                         />
                     </div>
                 </div>
@@ -186,7 +187,8 @@ PaintEditorComponent.propTypes = {
     onUpdateSvg: PropTypes.func.isRequired,
     rotationCenterX: PropTypes.number,
     rotationCenterY: PropTypes.number,
-    svg: PropTypes.string
+    svg: PropTypes.string,
+    svgId: PropTypes.string
 };
 
 export default injectIntl(PaintEditorComponent);

src/containers/paint-editor.jsx

@@ -58,6 +58,7 @@ class PaintEditor extends React.Component {
                 rotationCenterX={this.props.rotationCenterX}
                 rotationCenterY={this.props.rotationCenterY}
                 svg={this.props.svg}
+                svgId={this.props.svgId}
                 onRedo={this.handleRedo}
                 onUndo={this.handleUndo}
                 onUpdateName={this.props.onUpdateName}
@@ -77,6 +78,7 @@ PaintEditor.propTypes = {
     rotationCenterX: PropTypes.number,
     rotationCenterY: PropTypes.number,
     svg: PropTypes.string,
+    svgId: PropTypes.string,
     undoSnapshot: PropTypes.func.isRequired,
     undoState: PropTypes.shape({
         stack: PropTypes.arrayOf(PropTypes.object).isRequired,

src/containers/paper-canvas.jsx

@@ -29,6 +29,7 @@ class PaperCanvas extends React.Component {
         }
     }
     componentWillReceiveProps (newProps) {
+        if (this.props.svgId === newProps.svgId) return;
         for (const layer of paper.project.layers) {
             layer.removeChildren();
         }
@@ -108,6 +109,7 @@ PaperCanvas.propTypes = {
     rotationCenterX: PropTypes.number,
     rotationCenterY: PropTypes.number,
     svg: PropTypes.string,
+    svgId: PropTypes.string,
     undoSnapshot: PropTypes.func.isRequired
 };
 const mapDispatchToProps = dispatch => ({

src/playground/playground.jsx

@@ -49,6 +49,7 @@ class Playground extends React.Component {
         return (
             <PaintEditor
                 {...this.state}
+                svgId="meow"
                 onUpdateName={this.handleUpdateName}
                 onUpdateSvg={this.handleUpdateSvg}
             />