add eraser

This commit is contained in:
DD Liu 2017-07-25 11:53:54 -04:00
parent 469c60e66c
commit 02730cbd58
7 changed files with 137 additions and 49 deletions

View file

@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import PaperCanvas from '../containers/paper-canvas.jsx'; import PaperCanvas from '../containers/paper-canvas.jsx';
import BrushTool from '../containers/tools/brush-tool.jsx'; import BrushTool from '../containers/tools/brush-tool.jsx';
import EraserTool from '../containers/tools/eraser-tool.jsx';
const PaintEditorComponent = props => ( const PaintEditorComponent = props => (
<div> <div>
@ -10,6 +11,7 @@ const PaintEditorComponent = props => (
tool={props.tool} tool={props.tool}
/> />
<BrushTool canvasId={props.canvasId} /> <BrushTool canvasId={props.canvasId} />
<EraserTool canvasId={props.canvasId} />
</div> </div>
); );

View file

@ -41,8 +41,8 @@ class BrushTool extends React.Component {
document.getElementById(this.props.canvasId) document.getElementById(this.props.canvasId)
.addEventListener('mousewheel', this.onScroll); .addEventListener('mousewheel', this.onScroll);
const tool = new paper.Tool(); this.tool = new paper.Tool();
this.blob.activateTool(false /* isEraser */, tool, this.props.brushToolState); this.blob.activateTool(false /* isEraser */, this.tool, this.props.brushToolState);
// // Make sure a fill color is set on the brush // // Make sure a fill color is set on the brush
// if(!pg.stylebar.getFillColor()) { // if(!pg.stylebar.getFillColor()) {
@ -53,7 +53,7 @@ class BrushTool extends React.Component {
// // setup floating tool options panel in the editor // // setup floating tool options panel in the editor
// pg.toolOptionPanel.setup(options, components, function() {}); // pg.toolOptionPanel.setup(options, components, function() {});
tool.activate(); this.tool.activate();
} }
deactivateTool () { deactivateTool () {
document.getElementById(this.props.canvasId) document.getElementById(this.props.canvasId)

View file

@ -0,0 +1,104 @@
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 paper from 'paper';
class EraserTool extends React.Component {
static get TOOL_TYPE () {
return ToolTypes.ERASER;
}
constructor (props) {
super(props);
bindAll(this, [
'activateTool',
'deactivateTool',
'onScroll'
]);
this.blob = new BlobTool();
}
componentDidMount () {
if (this.props.tool === EraserTool.TOOL_TYPE) {
this.activateTool();
}
}
componentWillReceiveProps (nextProps) {
if (nextProps.tool === EraserTool.TOOL_TYPE && this.props.tool !== EraserTool.TOOL_TYPE) {
this.activateTool();
} else if (nextProps.tool !== EraserTool.TOOL_TYPE && this.props.tool === EraserTool.TOOL_TYPE) {
this.deactivateTool();
} else if (nextProps.tool === EraserTool.TOOL_TYPE && this.props.tool === EraserTool.TOOL_TYPE) {
this.blob.setOptions(nextProps.eraserToolState);
}
}
shouldComponentUpdate () {
return false; // Logic only component
}
activateTool () {
document.getElementById(this.props.canvasId)
.addEventListener('mousewheel', this.onScroll);
this.tool = new paper.Tool();
this.blob.activateTool(true /* isEraser */, this.tool, this.props.eraserToolState);
// // Make sure a fill color is set on the brush
// if(!pg.stylebar.getFillColor()) {
// pg.stylebar.setFillColor(pg.stylebar.getStrokeColor());
// pg.stylebar.setStrokeColor(null);
// }
// // setup floating tool options panel in the editor
// pg.toolOptionPanel.setup(options, components, function() {});
// get options from local storage if presentz
this.tool.activate();
}
deactivateTool () {
document.getElementById(this.props.canvasId)
.removeEventListener('mousewheel', this.onScroll);
this.blob.deactivateTool();
this.tool.remove();
}
onScroll (event) {
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);
}
return false;
}
render () {
return (
<div />
);
}
}
EraserTool.propTypes = {
canvasId: PropTypes.string.isRequired,
changeBrushSize: PropTypes.func.isRequired,
eraserToolState: PropTypes.shape({
brushSize: PropTypes.number.isRequired
}),
tool: PropTypes.shape({
name: PropTypes.string.isRequired
})
};
const mapStateToProps = state => ({
eraserToolState: state.brushTool,
tool: state.tool
});
const mapDispatchToProps = dispatch => ({
changeBrushSize: brushSize => {
dispatch(EraserToolReducer.changeBrushSize(brushSize));
}
});
module.exports = connect(
mapStateToProps,
mapDispatchToProps
)(EraserTool);

View file

@ -1,3 +1,3 @@
import PaintEditor from './containers/paint-editor.jsx'; import PaintEditor from './containers/paint-editor.jsx';
export default PaintEditorComponent; export default PaintEditor;

View file

@ -2,5 +2,6 @@ import {combineReducers} from 'redux';
module.exports = combineReducers({ module.exports = combineReducers({
tool: require('./tools'), tool: require('./tools'),
brushTool: require('./brush-tool') brushTool: require('./brush-tool'),
eraserTool: require('./eraser-tool')
}); });

View file

@ -0,0 +1,25 @@
const CHANGE_ERASER_SIZE = 'scratch-paint/tools/CHANGE_ERASER_SIZE';
const initialState = {brushSize: 20};
const reducer = function (state, action) {
if (typeof state === 'undefined') state = initialState;
switch (action.type) {
case CHANGE_ERASER_SIZE:
return {brushSize: Math.max(1, action.brushSize)};
default:
return state;
}
};
// Action creators ==================================
reducer.changeBrushSize = function (brushSize) {
return {
type: CHANGE_ERASER_SIZE,
brushSize: brushSize,
meta: {
throttle: 30
}
};
};
module.exports = reducer;

View file

@ -1,44 +0,0 @@
// TODO share code with brush
pg.tools.registerTool({
id: 'eraser',
name: 'Eraser'
});
pg.tools.eraser = function() {
var blob = new pg.blob();
var options = {
brushWidth: 20
};
var components = {
brushWidth: {
type: 'float',
label: 'Eraser width',
min: 0
}
};
var activateTool = function() {
// get options from local storage if present
options = pg.tools.getLocalOptions(options);
var tool = new Tool();
blob.activateTool(true /* isEraser */, tool, options);
// setup floating tool options panel in the editor
pg.toolOptionPanel.setup(options, components, function() {});
tool.activate();
};
var deactivateTool = function() {
blob.deactivateTool();
};
return {
options: options,
activateTool : activateTool,
deactivateTool : deactivateTool
};
};