diff --git a/src/components/paint-editor.jsx b/src/components/paint-editor.jsx index 39b570f0..1459fe35 100644 --- a/src/components/paint-editor.jsx +++ b/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 (
- - + +
); } diff --git a/src/containers/tools/brush-tool.jsx b/src/containers/brush-mode.jsx similarity index 62% rename from src/containers/tools/brush-tool.jsx rename to src/containers/brush-mode.jsx index 00c1b285..98054cc3 100644 --- a/src/containers/tools/brush-tool.jsx +++ b/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 ( -
Brush Tool
+
Brush Mode
); } } -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); diff --git a/src/containers/tools/eraser-tool.jsx b/src/containers/eraser-mode.jsx similarity index 55% rename from src/containers/tools/eraser-tool.jsx rename to src/containers/eraser-mode.jsx index aa0e1268..ad804a32 100644 --- a/src/containers/tools/eraser-tool.jsx +++ b/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 ( -
Eraser Tool
+
Eraser Mode
); } } -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); diff --git a/src/containers/paint-editor.jsx b/src/containers/paint-editor.jsx index 78eae432..203a8f17 100644 --- a/src/containers/paint-editor.jsx +++ b/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)); } } }); diff --git a/src/tools/blob.js b/src/modes/blob.js similarity index 96% rename from src/tools/blob.js rename to src/modes/blob.js index 509f28e4..c822f45f 100644 --- a/src/tools/blob.js +++ b/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; diff --git a/src/tools/broad-brush-helper.js b/src/modes/broad-brush-helper.js similarity index 100% rename from src/tools/broad-brush-helper.js rename to src/modes/broad-brush-helper.js diff --git a/src/tools/tool-types.js b/src/modes/modes.js similarity index 57% rename from src/tools/tool-types.js rename to src/modes/modes.js index 9a850d80..c485f0fe 100644 --- a/src/tools/tool-types.js +++ b/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; diff --git a/src/tools/segment-brush-helper.js b/src/modes/segment-brush-helper.js similarity index 100% rename from src/tools/segment-brush-helper.js rename to src/modes/segment-brush-helper.js diff --git a/src/reducers/brush-tool.js b/src/reducers/brush-mode.js similarity index 77% rename from src/reducers/brush-tool.js rename to src/reducers/brush-mode.js index a155b9fc..16315bef 100644 --- a/src/reducers/brush-tool.js +++ b/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 +}; diff --git a/src/reducers/combine-reducers.js b/src/reducers/combine-reducers.js index a5654a63..31cfccc0 100644 --- a/src/reducers/combine-reducers.js +++ b/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 }); diff --git a/src/reducers/eraser-tool.js b/src/reducers/eraser-mode.js similarity index 90% rename from src/reducers/eraser-tool.js rename to src/reducers/eraser-mode.js index 71a0c8d1..4f4ca50e 100644 --- a/src/reducers/eraser-tool.js +++ b/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) { diff --git a/src/reducers/modes.js b/src/reducers/modes.js new file mode 100644 index 00000000..fa2f756a --- /dev/null +++ b/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; diff --git a/src/reducers/tools.js b/src/reducers/tools.js deleted file mode 100644 index 57b7d4c7..00000000 --- a/src/reducers/tools.js +++ /dev/null @@ -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;