Pipe through updateSvg and call it whenever a tool finishes an action

src/components/paint-editor.jsx

@@ -26,9 +26,18 @@ class PaintEditorComponent extends React.Component {
                         canvasRef={this.setCanvas}
                         svg={this.props.svg}
                     />
-                    <BrushMode canvas={this.state.canvas} />
+                    <BrushMode
-                    <EraserMode canvas={this.state.canvas} />
+                        canvas={this.state.canvas}
-                    <LineMode canvas={this.state.canvas} />
+                        onUpdateSvg={this.props.onUpdateSvg}
+                    />
+                    <EraserMode
+                        canvas={this.state.canvas}
+                        onUpdateSvg={this.props.onUpdateSvg}
+                    />
+                    <LineMode
+                        canvas={this.state.canvas}
+                        onUpdateSvg={this.props.onUpdateSvg}
+                    />
                 </div>
             );
         }
@@ -41,6 +50,7 @@ class PaintEditorComponent extends React.Component {
 }
 
 PaintEditorComponent.propTypes = {
+    onUpdateSvg: PropTypes.func.isRequired,
     svg: PropTypes.string
 };
 

src/containers/blob/blob.js

@@ -24,9 +24,13 @@ class Blobbiness {
         return 9;
     }
 
-    constructor () {
+    /**
+     * @param {function} updateCallback call when the drawing has changed to let listeners know
+     */
+    constructor (updateCallback) {
         this.broadBrushHelper = new BroadBrushHelper();
         this.segmentBrushHelper = new SegmentBrushHelper();
+        this.updateCallback = updateCallback;
     }
     
     /**
@@ -113,6 +117,9 @@ class Blobbiness {
                 blob.mergeBrush(lastPath);
             }
 
+            blob.cursorPreview.visible = false;
+            blob.updateCallback();
+            blob.cursorPreview.visible = true;
             blob.cursorPreview.bringToFront();
             blob.cursorPreview.position = event.point;
 

src/containers/brush-mode.jsx

@@ -16,7 +16,7 @@ class BrushMode extends React.Component {
             'deactivateTool',
             'onScroll'
         ]);
-        this.blob = new Blobbiness();
+        this.blob = new Blobbiness(this.props.onUpdateSvg);
     }
     componentDidMount () {
         if (this.props.isBrushModeActive) {
@@ -70,7 +70,8 @@ BrushMode.propTypes = {
     canvas: PropTypes.instanceOf(Element).isRequired,
     changeBrushSize: PropTypes.func.isRequired,
     handleMouseDown: PropTypes.func.isRequired,
-    isBrushModeActive: PropTypes.bool.isRequired
+    isBrushModeActive: PropTypes.bool.isRequired,
+    onUpdateSvg: PropTypes.func.isRequired
 };
 
 const mapStateToProps = state => ({

src/containers/eraser-mode.jsx

@@ -16,7 +16,7 @@ class EraserMode extends React.Component {
             'deactivateTool',
             'onScroll'
         ]);
-        this.blob = new Blobbiness();
+        this.blob = new Blobbiness(this.props.onUpdateSvg);
     }
     componentDidMount () {
         if (this.props.isEraserModeActive) {
@@ -66,7 +66,8 @@ EraserMode.propTypes = {
         brushSize: PropTypes.number.isRequired
     }),
     handleMouseDown: PropTypes.func.isRequired,
-    isEraserModeActive: PropTypes.bool.isRequired
+    isEraserModeActive: PropTypes.bool.isRequired,
+    onUpdateSvg: PropTypes.func.isRequired
 };
 
 const mapStateToProps = state => ({

src/containers/line-mode.jsx

@@ -209,6 +209,7 @@ class LineMode extends React.Component {
             }
             this.hitResult = null;
         }
+        this.props.onUpdateSvg();
 
         // TODO add back undo
         // if (this.path) {
@@ -280,7 +281,8 @@ LineMode.propTypes = {
     isLineModeActive: PropTypes.bool.isRequired,
     lineModeState: PropTypes.shape({
         lineWidth: PropTypes.number.isRequired
-    })
+    }),
+    onUpdateSvg: PropTypes.func.isRequired
 };
 
 const mapStateToProps = state => ({

src/containers/paint-editor.jsx

@@ -5,44 +5,42 @@ import {changeMode} from '../reducers/modes';
 import Modes from '../modes/modes';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
+import paper from 'paper';
 
 class PaintEditor extends React.Component {
     constructor (props) {
         super(props);
         bindAll(this, [
-            'updateSvg'
+            'handleUpdateSvg'
         ]);
     }
     componentDidMount () {
         document.addEventListener('keydown', this.props.onKeyPress);
     }
-    shouldComponentUpdate (newProps) {
-        return newProps.assetId !== this.props.assetId;
-    }
     componentWillUnmount () {
         document.removeEventListener('keydown', this.props.onKeyPress);
     }
-    updateSvg (svg) {
+    handleUpdateSvg () {
-        if (!this.props.onUpdate) {
+        if (!this.props.onUpdateSvg) {
             return;
         }
-        this.props.onUpdate(
+        this.props.onUpdateSvg(
-            this.props.assetIndex,
+            paper.project.exportSVG({asString: true}) // TODO can this be made independent of paper
-            svg
         );
     }
     render () {
         return (
-            <PaintEditorComponent svg={this.props.svg} />
+            <PaintEditorComponent
+                svg={this.props.svg}
+                onUpdateSvg={this.handleUpdateSvg}
+            />
         );
     }
 }
 
 PaintEditor.propTypes = {
-    assetId: PropTypes.string,
-    assetIndex: PropTypes.number,
     onKeyPress: PropTypes.func.isRequired,
-    onUpdate: PropTypes.func,
+    onUpdateSvg: PropTypes.func.isRequired,
     svg: PropTypes.string
 };
 

src/playground/playground.jsx

@@ -20,10 +20,16 @@ const svgString =
         '<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>';
+const onUpdateSvg = function () {
+    return;
+};
 ReactDOM.render((
     <Provider store={store}>
         <IntlProvider>
-            <PaintEditor svg={svgString} />
+            <PaintEditor
+                svg={svgString}
+                onUpdateSvg={onUpdateSvg}
+            />
         </IntlProvider>
     </Provider>
 ), appTarget);