From 138718008c7e78c3da3e15919f98e45825de544d Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Sat, 21 Oct 2017 02:57:15 -0400
Subject: [PATCH] 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 | 4 +++-
 src/containers/paint-editor.jsx              | 2 ++
 src/containers/paper-canvas.jsx              | 2 ++
 src/playground/playground.jsx                | 1 +
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/paint-editor/paint-editor.jsx b/src/components/paint-editor/paint-editor.jsx
index d8669059..9449f1f4 100644
--- a/src/components/paint-editor/paint-editor.jsx
+++ b/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);
diff --git a/src/containers/paint-editor.jsx b/src/containers/paint-editor.jsx
index 49ce6c8f..f8f2753c 100644
--- a/src/containers/paint-editor.jsx
+++ b/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,
diff --git a/src/containers/paper-canvas.jsx b/src/containers/paper-canvas.jsx
index aa450598..beb0d8d7 100644
--- a/src/containers/paper-canvas.jsx
+++ b/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 => ({
diff --git a/src/playground/playground.jsx b/src/playground/playground.jsx
index e69efd26..881b7940 100644
--- a/src/playground/playground.jsx
+++ b/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}
             />