move isEraser to options

This commit is contained in:
DD Liu 2017-08-16 18:16:37 -04:00
parent 4ea7d154ee
commit f325ae43ee
6 changed files with 35 additions and 19 deletions

View file

@ -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()) {

View file

@ -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));
}
});

View file

@ -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));
}
}
});

View file

@ -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;
}
}

View file

@ -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;

View file

@ -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;
}