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.
This commit is contained in:
Ray Schamp 2017-10-21 02:57:15 -04:00
parent 303b4caced
commit 138718008c
4 changed files with 8 additions and 1 deletions

View file

@ -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);

View file

@ -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,

View file

@ -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 => ({

View file

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