diff --git a/src/containers/brush-mode.jsx b/src/containers/brush-mode.jsx index f7b5d5cc..c1bbe6e6 100644 --- a/src/containers/brush-mode.jsx +++ b/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()) { diff --git a/src/containers/eraser-mode.jsx b/src/containers/eraser-mode.jsx index f1ecff96..5782d7d4 100644 --- a/src/containers/eraser-mode.jsx +++ b/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)); } }); diff --git a/src/containers/paint-editor.jsx b/src/containers/paint-editor.jsx index 203a8f17..303546ba 100644 --- a/src/containers/paint-editor.jsx +++ b/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)); } } }); diff --git a/src/modes/blob.js b/src/modes/blob.js index f1bec3bb..6c095bd7 100644 --- a/src/modes/blob.js +++ b/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; } } diff --git a/src/modes/broad-brush-helper.js b/src/modes/broad-brush-helper.js index 04acaa3d..464bc4a7 100644 --- a/src/modes/broad-brush-helper.js +++ b/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; diff --git a/src/modes/segment-brush-helper.js b/src/modes/segment-brush-helper.js index 59396cb8..6a8837fe 100644 --- a/src/modes/segment-brush-helper.js +++ b/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; }