rename stuff from tool to mode so it isn't confused with paper.tool'

src/components/paint-editor.jsx

@@ -1,8 +1,8 @@
 import bindAll from 'lodash.bindall';
 import React from 'react';
 import PaperCanvas from '../containers/paper-canvas.jsx';
-import BrushTool from '../containers/tools/brush-tool.jsx';
-import EraserTool from '../containers/tools/eraser-tool.jsx';
+import BrushMode from '../containers/brush-mode.jsx';
+import EraserMode from '../containers/eraser-mode.jsx';
 
 class PaintEditorComponent extends React.Component {
     constructor (props) {
@@ -16,13 +16,13 @@ class PaintEditorComponent extends React.Component {
         this.setState({canvas: canvas});
     }
     render () {
-        // Tools can't work without a canvas, so we don't render them until we have it
+        // Modes can't work without a canvas, so we don't render them until we have it
         if (this.state.canvas) {
             return (
                 <div>
                     <PaperCanvas canvasRef={this.setCanvas} />
-                    <BrushTool canvas={this.state.canvas} />
-                    <EraserTool canvas={this.state.canvas} />
+                    <BrushMode canvas={this.state.canvas} />
+                    <EraserMode canvas={this.state.canvas} />
                 </div>
             );
         }

src/containers/brush-mode.jsx

@@ -2,14 +2,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
-import ToolTypes from '../../tools/tool-types.js';
-import BlobTool from '../../tools/blob.js';
-import BrushToolReducer from '../../reducers/brush-tool';
+import Modes from '../modes/modes';
+import Blobbiness from '../modes/blob';
+import BrushModeReducer from '../reducers/brush-mode';
+import {changeBrushSize} from '../reducers/brush-mode';
 import paper from 'paper';
 
-class BrushTool extends React.Component {
-    static get TOOL_TYPE () {
-        return ToolTypes.BRUSH;
+class BrushMode extends React.Component {
+    static get MODE () {
+        return Modes.BRUSH;
     }
     constructor (props) {
         super(props);
@@ -18,20 +19,20 @@ class BrushTool extends React.Component {
             'deactivateTool',
             'onScroll'
         ]);
-        this.blob = new BlobTool();
+        this.blob = new Blobbiness();
     }
     componentDidMount () {
-        if (this.props.tool === BrushTool.TOOL_TYPE) {
+        if (this.props.isBrushModeActive) {
             this.activateTool(this.props);
         }
     }
     componentWillReceiveProps (nextProps) {
-        if (nextProps.tool === BrushTool.TOOL_TYPE && this.props.tool !== BrushTool.TOOL_TYPE) {
+        if (nextProps.isBrushModeActive && !this.props.isBrushModeActive) {
             this.activateTool();
-        } else if (nextProps.tool !== BrushTool.TOOL_TYPE && this.props.tool === BrushTool.TOOL_TYPE) {
+        } else if (!nextProps.isBrushModeActive && this.props.isBrushModeActive) {
             this.deactivateTool();
-        } else if (nextProps.tool === BrushTool.TOOL_TYPE && this.props.tool === BrushTool.TOOL_TYPE) {
-            this.blob.setOptions(nextProps.brushToolState);
+        } else if (nextProps.isBrushModeActive && this.props.isBrushModeActive) {
+            this.blob.setOptions(nextProps.brushModeState);
         }
     }
     shouldComponentUpdate () {
@@ -42,7 +43,7 @@ class BrushTool extends React.Component {
         this.props.canvas.addEventListener('mousewheel', this.onScroll);
 
         this.tool = new paper.Tool();
-        this.blob.activateTool(false /* isEraser */, this.tool, this.props.brushToolState);
+        this.blob.activateTool(false /* isEraser */, this.tool, this.props.brushModeState);
 
         // TODO Make sure a fill color is set on the brush
         // if(!pg.stylebar.getFillColor()) {
@@ -61,39 +62,39 @@ class BrushTool extends React.Component {
     }
     onScroll (event) {
         if (event.deltaY < 0) {
-            this.props.changeBrushSize(this.props.brushToolState.brushSize + 1);
-        } else if (event.deltaY > 0 && this.props.brushToolState.brushSize > 1) {
-            this.props.changeBrushSize(this.props.brushToolState.brushSize - 1);
+            this.props.changeBrushSize(this.props.brushModeState.brushSize + 1);
+        } else if (event.deltaY > 0 && this.props.brushModeState.brushSize > 1) {
+            this.props.changeBrushSize(this.props.brushModeState.brushSize - 1);
         }
         return true;
     }
     render () {
         return (
-            <div>Brush Tool</div>
+            <div>Brush Mode</div>
         );
     }
 }
 
-BrushTool.propTypes = {
-    brushToolState: PropTypes.shape({
+BrushMode.propTypes = {
+    brushModeState: PropTypes.shape({
         brushSize: PropTypes.number.isRequired
     }),
     canvas: PropTypes.instanceOf(Element).isRequired,
     changeBrushSize: PropTypes.func.isRequired,
-    tool: PropTypes.oneOf(Object.keys(ToolTypes)).isRequired
+    isBrushModeActive: PropTypes.bool.isRequired
 };
 
 const mapStateToProps = state => ({
-    brushToolState: state.brushTool,
-    tool: state.tool
+    brushModeState: state.brushMode,
+    isBrushModeActive: state.mode === BrushMode.MODE
 });
 const mapDispatchToProps = dispatch => ({
     changeBrushSize: brushSize => {
-        dispatch(BrushToolReducer.changeBrushSize(brushSize));
+        dispatch(changeBrushSize(brushSize));
     }
 });
 
 export default connect(
     mapStateToProps,
     mapDispatchToProps
-)(BrushTool);
+)(BrushMode);

src/containers/eraser-mode.jsx

@@ -2,14 +2,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
-import ToolTypes from '../../tools/tool-types.js';
-import BlobTool from '../../tools/blob.js';
-import EraserToolReducer from '../../reducers/eraser-tool';
+import Modes from '../modes/modes';
+import Blobbiness from '../modes/blob';
+import EraserModeReducer from '../reducers/eraser-mode';
 import paper from 'paper';
 
-class EraserTool extends React.Component {
-    static get TOOL_TYPE () {
-        return ToolTypes.ERASER;
+class EraserMode extends React.Component {
+    static get MODE () {
+        return Modes.ERASER;
     }
     constructor (props) {
         super(props);
@@ -18,20 +18,20 @@ class EraserTool extends React.Component {
             'deactivateTool',
             'onScroll'
         ]);
-        this.blob = new BlobTool();
+        this.blob = new Blobbiness();
     }
     componentDidMount () {
-        if (this.props.tool === EraserTool.TOOL_TYPE) {
+        if (this.props.isEraserModeActive) {
             this.activateTool();
         }
     }
     componentWillReceiveProps (nextProps) {
-        if (nextProps.tool === EraserTool.TOOL_TYPE && this.props.tool !== EraserTool.TOOL_TYPE) {
+        if (nextProps.isEraserModeActive && !this.props.isEraserModeActive) {
             this.activateTool();
-        } else if (nextProps.tool !== EraserTool.TOOL_TYPE && this.props.tool === EraserTool.TOOL_TYPE) {
+        } else if (!nextProps.isEraserModeActive && this.props.isEraserModeActive) {
             this.deactivateTool();
-        } else if (nextProps.tool === EraserTool.TOOL_TYPE && this.props.tool === EraserTool.TOOL_TYPE) {
-            this.blob.setOptions(nextProps.eraserToolState);
+        } else if (nextProps.isEraserModeActive && this.props.isEraserModeActive) {
+            this.blob.setOptions(nextProps.eraserModeState);
         }
     }
     shouldComponentUpdate () {
@@ -41,7 +41,7 @@ class EraserTool extends React.Component {
         this.props.canvas.addEventListener('mousewheel', this.onScroll);
 
         this.tool = new paper.Tool();
-        this.blob.activateTool(true /* isEraser */, this.tool, this.props.eraserToolState);
+        this.blob.activateTool(true /* isEraser */, this.tool, this.props.eraserModeState);
         this.tool.activate();
     }
     deactivateTool () {
@@ -51,38 +51,38 @@ class EraserTool extends React.Component {
     onScroll (event) {
         event.preventDefault();
         if (event.deltaY < 0) {
-            this.props.changeBrushSize(this.props.eraserToolState.brushSize + 1);
-        } else if (event.deltaY > 0 && this.props.eraserToolState.brushSize > 1) {
-            this.props.changeBrushSize(this.props.eraserToolState.brushSize - 1);
+            this.props.changeBrushSize(this.props.eraserModeState.brushSize + 1);
+        } else if (event.deltaY > 0 && this.props.eraserModeState.brushSize > 1) {
+            this.props.changeBrushSize(this.props.eraserModeState.brushSize - 1);
         }
     }
     render () {
         return (
-            <div>Eraser Tool</div>
+            <div>Eraser Mode</div>
         );
     }
 }
 
-EraserTool.propTypes = {
+EraserMode.propTypes = {
     canvas: PropTypes.instanceOf(Element).isRequired,
     changeBrushSize: PropTypes.func.isRequired,
-    eraserToolState: PropTypes.shape({
+    eraserModeState: PropTypes.shape({
         brushSize: PropTypes.number.isRequired
     }),
-    tool: PropTypes.oneOf(Object.keys(ToolTypes)).isRequired
+    isEraserModeActive: PropTypes.bool.isRequired
 };
 
 const mapStateToProps = state => ({
-    eraserToolState: state.eraserTool,
-    tool: state.tool
+    eraserModeState: state.eraserMode,
+    isEraserModeActive: state.mode === EraserMode.MODE
 });
 const mapDispatchToProps = dispatch => ({
     changeBrushSize: brushSize => {
-        dispatch(EraserToolReducer.changeBrushSize(brushSize));
+        dispatch(EraserModeReducer.changeBrushSize(brushSize));
     }
 });
 
 export default connect(
     mapStateToProps,
     mapDispatchToProps
-)(EraserTool);
+)(EraserMode);

src/containers/paint-editor.jsx

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

src/modes/blob.js

@@ -4,11 +4,11 @@ import broadBrushHelper from './broad-brush-helper';
 import segmentBrushHelper from './segment-brush-helper';
 
 /**
- * Shared code for the brush and eraser tool. Adds functions on the paper tool object
+ * Shared code for the brush and eraser mode. Adds functions on the paper tool object
  * to handle mouse events, which are delegated to broad-brush-helper and segment-brush-helper
  * based on the brushSize in the state.
  */
-class BlobTool {
+class Blobbiness {
 
     static get BROAD () {
         return 'broadbrush';
@@ -97,11 +97,11 @@ class BlobTool {
             tool.resizeCursorIfNeeded(event.point);
             if (event.event.button > 0) return;  // only first mouse button
 
-            if (this.options.brushSize < BlobTool.THRESHOLD) {
-                this.brush = BlobTool.BROAD;
+            if (this.options.brushSize < Blobbiness.THRESHOLD) {
+                this.brush = Blobbiness.BROAD;
                 this.onBroadMouseDown(event);
             } else {
-                this.brush = BlobTool.SEGMENT;
+                this.brush = Blobbiness.SEGMENT;
                 this.onSegmentMouseDown(event);
             }
             this.cursorPreview.bringToFront();
@@ -112,9 +112,9 @@ class BlobTool {
         tool.onMouseDrag = function (event) {
             tool.resizeCursorIfNeeded(event.point);
             if (event.event.button > 0) return;  // only first mouse button
-            if (this.brush === BlobTool.BROAD) {
+            if (this.brush === Blobbiness.BROAD) {
                 this.onBroadMouseDrag(event);
-            } else if (this.brush === BlobTool.SEGMENT) {
+            } else if (this.brush === Blobbiness.SEGMENT) {
                 this.onSegmentMouseDrag(event);
             } else {
                 log.warn(`Brush type does not exist: ${this.brush}`);
@@ -130,9 +130,9 @@ class BlobTool {
             if (event.event.button > 0) return;  // only first mouse button
             
             let lastPath;
-            if (this.brush === BlobTool.BROAD) {
+            if (this.brush === Blobbiness.BROAD) {
                 lastPath = this.onBroadMouseUp(event);
-            } else if (this.brush === BlobTool.SEGMENT) {
+            } else if (this.brush === Blobbiness.SEGMENT) {
                 lastPath = this.onSegmentMouseUp(event);
             } else {
                 log.warn(`Brush type does not exist: ${this.brush}`);
@@ -341,4 +341,4 @@ class BlobTool {
     }
 }
 
-export default BlobTool;
+export default Blobbiness;

src/modes/modes.js

@@ -1,8 +1,8 @@
 import keyMirror from 'keymirror';
 
-const ToolTypes = keyMirror({
+const Modes = keyMirror({
     BRUSH: null,
     ERASER: null
 });
 
-export default ToolTypes;
+export default Modes;

src/reducers/brush-mode.js

@@ -1,6 +1,6 @@
 import log from '../log/log';
 
-const CHANGE_BRUSH_SIZE = 'scratch-paint/tools/CHANGE_BRUSH_SIZE';
+const CHANGE_BRUSH_SIZE = 'scratch-paint/brush-mode/CHANGE_BRUSH_SIZE';
 const initialState = {brushSize: 5};
 
 const reducer = function (state, action) {
@@ -18,11 +18,14 @@ const reducer = function (state, action) {
 };
 
 // Action creators ==================================
-reducer.changeBrushSize = function (brushSize) {
+const changeBrushSize = function (brushSize) {
     return {
         type: CHANGE_BRUSH_SIZE,
         brushSize: brushSize
     };
 };
 
-export default reducer;
+export {
+    reducer as default,
+    changeBrushSize
+};

src/reducers/combine-reducers.js

@@ -1,10 +1,10 @@
 import {combineReducers} from 'redux';
-import toolReducer from './tools';
-import brushToolReducer from './brush-tool';
-import eraserToolReducer from './eraser-tool';
+import modeReducer from './modes';
+import brushModeReducer from './brush-mode';
+import eraserModeReducer from './eraser-mode';
 
 export default combineReducers({
-    tool: toolReducer,
-    brushTool: brushToolReducer,
-    eraserTool: eraserToolReducer
+    mode: modeReducer,
+    brushMode: brushModeReducer,
+    eraserMode: eraserModeReducer
 });

src/reducers/eraser-mode.js

@@ -1,6 +1,6 @@
 import log from '../log/log';
 
-const CHANGE_ERASER_SIZE = 'scratch-paint/tools/CHANGE_ERASER_SIZE';
+const CHANGE_ERASER_SIZE = 'scratch-paint/eraser-mode/CHANGE_ERASER_SIZE';
 const initialState = {brushSize: 20};
 
 const reducer = function (state, action) {

src/reducers/modes.js

@@ -0,0 +1,29 @@
+import Modes from '../modes/modes';
+import log from '../log/log';
+
+const CHANGE_MODE = 'scratch-paint/modes/CHANGE_MODE';
+const initialState = Modes.BRUSH;
+
+const reducer = function (state, action) {
+    if (typeof state === 'undefined') state = initialState;
+    switch (action.type) {
+    case CHANGE_MODE:
+        if (action.mode in Modes) {
+            return action.mode;
+        }
+        log.warn(`Mode does not exist: ${action.mode}`);
+        /* falls through */
+    default:
+        return state;
+    }
+};
+
+// Action creators ==================================
+reducer.changeMode = function (mode) {
+    return {
+        type: CHANGE_MODE,
+        mode: mode
+    };
+};
+
+export default reducer;

src/reducers/tools.js

@@ -1,29 +0,0 @@
-import ToolTypes from '../tools/tool-types';
-import log from '../log/log';
-
-const CHANGE_TOOL = 'scratch-paint/tools/CHANGE_TOOL';
-const initialState = ToolTypes.BRUSH;
-
-const reducer = function (state, action) {
-    if (typeof state === 'undefined') state = initialState;
-    switch (action.type) {
-    case CHANGE_TOOL:
-        if (action.tool in ToolTypes) {
-            return action.tool;
-        }
-        log.warn(`Tool type does not exist: ${action.tool}`);
-        /* falls through */
-    default:
-        return state;
-    }
-};
-
-// Action creators ==================================
-reducer.changeTool = function (tool) {
-    return {
-        type: CHANGE_TOOL,
-        tool: tool
-    };
-};
-
-export default reducer;