move isEraser to options

src/containers/brush-mode.jsx

@@ -30,7 +30,7 @@ class BrushMode extends React.Component {
         } else if (!nextProps.isBrushModeActive && this.props.isBrushModeActive) {
             this.deactivateTool();
         } else if (nextProps.isBrushModeActive && this.props.isBrushModeActive) {
-            this.blob.setOptions(nextProps.brushModeState);
+            this.blob.setOptions({isEraser: false, ...nextProps.brushModeState});
         }
     }
     shouldComponentUpdate () {
@@ -39,7 +39,7 @@ class BrushMode extends React.Component {
     activateTool () {
         // TODO: This is temporary until a component that provides the brush size is hooked up
         this.props.canvas.addEventListener('mousewheel', this.onScroll);
-        this.blob.activateTool(false /* isEraser */, this.props.brushModeState);
+        this.blob.activateTool({isEraser: false, ...this.props.brushModeState});
 
         // TODO Make sure a fill color is set on the brush
         // if(!pg.stylebar.getFillColor()) {

src/containers/eraser-mode.jsx

@@ -4,7 +4,7 @@ import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
 import Modes from '../modes/modes';
 import Blobbiness from '../modes/blob';
-import EraserModeReducer from '../reducers/eraser-mode';
+import {changeBrushSize} from '../reducers/eraser-mode';
 
 class EraserMode extends React.Component {
     static get MODE () {
@@ -30,7 +30,7 @@ class EraserMode extends React.Component {
         } else if (!nextProps.isEraserModeActive && this.props.isEraserModeActive) {
             this.deactivateTool();
         } else if (nextProps.isEraserModeActive && this.props.isEraserModeActive) {
-            this.blob.setOptions(nextProps.eraserModeState);
+            this.blob.setOptions({isEraser: true, ...nextProps.eraserModeState});
         }
     }
     shouldComponentUpdate () {
@@ -39,7 +39,7 @@ class EraserMode extends React.Component {
     activateTool () {
         this.props.canvas.addEventListener('mousewheel', this.onScroll);
 
-        this.blob.activateTool(true /* isEraser */, this.props.eraserModeState);
+        this.blob.activateTool({isEraser: true, ...this.props.eraserModeState});
     }
     deactivateTool () {
         this.props.canvas.removeEventListener('mousewheel', this.onScroll);
@@ -75,7 +75,7 @@ const mapStateToProps = state => ({
 });
 const mapDispatchToProps = dispatch => ({
     changeBrushSize: brushSize => {
-        dispatch(EraserModeReducer.changeBrushSize(brushSize));
+        dispatch(changeBrushSize(brushSize));
     }
 });
 

src/containers/paint-editor.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import PaintEditorComponent from '../components/paint-editor.jsx';
-import ModesReducer from '../reducers/modes';
+import {changeMode} from '../reducers/modes';
 import Modes from '../modes/modes';
 import {connect} from 'react-redux';
 
@@ -26,9 +26,9 @@ PaintEditor.propTypes = {
 const mapDispatchToProps = dispatch => ({
     onKeyPress: event => {
         if (event.key === 'e') {
-            dispatch(ToolsReducer.changeMode(Modes.ERASER));
+            dispatch(changeMode(Modes.ERASER));
         } else if (event.key === 'b') {
-            dispatch(ToolsReducer.changeMode(Modes.BRUSH));
+            dispatch(changeMode(Modes.BRUSH));
         }
     }
 });

src/modes/blob.js

@@ -29,23 +29,35 @@ class Blobbiness {
         this.segmentBrushHelper = new SegmentBrushHelper();
     }
     
+    /**
+     * Set configuration options for a blob
+     * @param {!object} options Configuration
+     * @param {!number} options.brushSize Width of blob marking made by mouse
+     * @param {!boolean} options.isEraser Whether the stroke should be treated as an erase path. If false,
+     *     the stroke is an additive path.
+     */
     setOptions (options) {
         this.options = options;
         this.resizeCursorIfNeeded();
     }
 
-    activateTool (isEraser, options) {
+    /**
+     * Adds handlers on the mouse tool to draw blobs. Initialize with configuration options for a blob.
+     * @param {!object} options Configuration
+     * @param {!number} options.brushSize Width of blob marking made by mouse
+     * @param {!boolean} options.isEraser Whether the stroke should be treated as an erase path. If false,
+     *     the stroke is an additive path.
+     */
+    activateTool (options) {
         this.tool = new paper.Tool();
-        this.isEraser = isEraser;
         this.cursorPreviewLastPoint = new paper.Point(-10000, -10000);
         this.setOptions(options);
-        styleCursorPreview(this.cursorPreview);
         this.tool.fixedDistance = 1;
 
         const blob = this;
         this.tool.onMouseMove = function (event) {
             blob.resizeCursorIfNeeded(event.point);
-            styleCursorPreview(blob.cursorPreview);
+            styleCursorPreview(blob.cursorPreview, blob.options.isEraser);
             blob.cursorPreview.bringToFront();
             blob.cursorPreview.position = event.point;
         };
@@ -95,7 +107,7 @@ class Blobbiness {
                 log.warn(`Brush type does not exist: ${blob.brush}`);
             }
 
-            if (isEraser) {
+            if (blob.options.isEraser) {
                 blob.mergeEraser(lastPath);
             } else {
                 blob.mergeBrush(lastPath);
@@ -108,6 +120,7 @@ class Blobbiness {
             blob.brush = null;
             this.fixedDistance = 1;
         };
+        this.tool.activate();
     }
 
     resizeCursorIfNeeded (point) {
@@ -121,7 +134,7 @@ class Blobbiness {
             this.cursorPreviewLastPoint = point;
         }
 
-        if (this.brushSize === this.options.brushSize) {
+        if (this.cursorPreview && this.brushSize === this.options.brushSize) {
             return;
         }
         const newPreview = new paper.Path.Circle({
@@ -133,6 +146,7 @@ class Blobbiness {
             newPreview.remove();
         } else {
             this.cursorPreview = newPreview;
+            styleCursorPreview(this.cursorPreview, this.options.isEraser);
         }
         this.brushSize = this.options.brushSize;
     }
@@ -323,7 +337,9 @@ class Blobbiness {
 
     deactivateTool () {
         this.cursorPreview.remove();
-        this.remove();
+        this.cursorPreview = null;
+        this.tool.remove();
+        this.tool = null;
     }
 }
 

src/modes/broad-brush-helper.js

@@ -25,7 +25,7 @@ class BroadBrushHelper {
         if (event.event.button > 0) return;  // only first mouse button
         
         this.finalPath = new paper.Path();
-        stylePath(this.finalPath);
+        stylePath(this.finalPath, options.isEraser);
         this.finalPath.add(event.point);
         this.lastPoint = this.secondLastPoint = event.point;
     }
@@ -77,7 +77,7 @@ class BroadBrushHelper {
                 center: event.point,
                 radius: options.brushSize / 2
             });
-            stylePath(this.finalPath);
+            stylePath(this.finalPath, options.isEraser);
         } else {
             const step = (event.point.subtract(this.lastPoint)).normalize(options.brushSize / 2);
             step.angle += 90;

src/modes/segment-brush-helper.js

@@ -30,7 +30,7 @@ class SegmentBrushHelper {
             center: event.point,
             radius: options.brushSize / 2
         });
-        stylePath(this.finalPath);
+        stylePath(this.finalPath, options.isEraser);
         this.lastPoint = event.point;
     }