load an svg string

src/components/paint-editor.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import PaperCanvas from '../containers/paper-canvas.jsx';
 import BrushMode from '../containers/brush-mode.jsx';
 import EraserMode from '../containers/eraser-mode.jsx';
+import PropTypes from 'prop-types';
 
 class PaintEditorComponent extends React.Component {
     constructor (props) {
@@ -20,7 +21,10 @@ class PaintEditorComponent extends React.Component {
         if (this.state.canvas) {
             return (
                 <div>
-                    <PaperCanvas canvasRef={this.setCanvas} />
+                    <PaperCanvas
+                        canvasRef={this.setCanvas}
+                        svg={this.props.svg}
+                    />
                     <BrushMode canvas={this.state.canvas} />
                     <EraserMode canvas={this.state.canvas} />
                 </div>
@@ -34,4 +38,8 @@ class PaintEditorComponent extends React.Component {
     }
 }
 
+PaintEditorComponent.propTypes = {
+    svg: PropTypes.string
+};
+
 export default PaintEditorComponent;

src/containers/paint-editor.jsx

@@ -4,23 +4,46 @@ import PaintEditorComponent from '../components/paint-editor.jsx';
 import {changeMode} from '../reducers/modes';
 import Modes from '../modes/modes';
 import {connect} from 'react-redux';
+import bindAll from 'lodash.bindall';
 
 class PaintEditor extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'updateSvg'
+        ]);
+    }
     componentDidMount () {
         document.addEventListener('keydown', this.props.onKeyPress);
     }
+    shouldComponentUpdate (newProps) {
+        return newProps.assetId !== this.props.assetId;
+    }
     componentWillUnmount () {
         document.removeEventListener('keydown', this.props.onKeyPress);
     }
+    updateSvg (svg) {
+        if (!this.props.onUpdate) {
+            return;
+        }
+        this.props.onUpdate(
+            this.props.assetIndex,
+            svg
+        );
+    }
     render () {
         return (
-            <PaintEditorComponent />
+            <PaintEditorComponent svg={this.props.svg} />
         );
     }
 }
 
 PaintEditor.propTypes = {
-    onKeyPress: PropTypes.func.isRequired
+    assetId: PropTypes.string,
+    assetIndex: PropTypes.number,
+    onKeyPress: PropTypes.func.isRequired,
+    onUpdate: PropTypes.func,
+    svg: PropTypes.string
 };
 
 const mapDispatchToProps = dispatch => ({

src/containers/paper-canvas.jsx

@@ -7,27 +7,37 @@ class PaperCanvas extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'setCanvas'
+            'setCanvas',
+            'importSvg'
         ]);
     }
     componentDidMount () {
         paper.setup(this.canvas);
-        // Create a Paper.js Path to draw a line into it:
-        const path = new paper.Path();
-        // Give the stroke a color
-        path.strokeColor = 'black';
-        const start = new paper.Point(100, 100);
-        // Move to start and draw a line from there
-        path.moveTo(start);
-        // Note that the plus operator on Point objects does not work
-        // in JavaScript. Instead, we need to call the add() function:
-        path.lineTo(start.add([200, -50]));
-        // Draw the view now:
-        paper.view.draw();
+        if (this.props.svg) {
+            this.importSvg(this.props.svg);
+        }
+    }
+    componentWillReceiveProps (newProps) {
+        if (newProps.svg !== this.props.svg) {
+            paper.project.activeLayer.removeChildren();
+            this.importSvg(newProps.svg);
+        }
     }
     componentWillUnmount () {
         paper.remove();
     }
+    importSvg (svg) {
+        paper.project.importSVG(svg,
+            {
+                expandShapes: true,
+                onLoad: function (item) {
+                    while (item.reduce() !== item) {
+                        item = item.reduce();
+                    }
+                }
+            });
+        paper.project.view.update();
+    }
     setCanvas (canvas) {
         this.canvas = canvas;
         if (this.props.canvasRef) {
@@ -44,7 +54,8 @@ class PaperCanvas extends React.Component {
 }
 
 PaperCanvas.propTypes = {
-    canvasRef: PropTypes.func
+    canvasRef: PropTypes.func,
+    svg: PropTypes.string
 };
 
 export default PaperCanvas;

src/playground/playground.jsx

@@ -13,10 +13,17 @@ const store = createStore(
     intlInitialState,
     window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
+const svgString =
+    '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">' +
+        '<rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />' +
+        '<circle cx="125" cy="125" r="75" fill="orange" />' +
+        '<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />' +
+        '<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />' +
+    '</svg>';
 ReactDOM.render((
     <Provider store={store}>
         <IntlProvider>
-            <PaintEditor />
+            <PaintEditor svg={svgString} />
         </IntlProvider>
     </Provider>
 ), appTarget);