Add pen tool that does nothing. Move blob tools to helper folder.

This commit is contained in:
DD 2017-10-16 14:18:04 -04:00
parent 2d7860f495
commit d2881b2d15
10 changed files with 186 additions and 4 deletions

View file

@ -1,12 +1,16 @@
import bindAll from 'lodash.bindall'; import bindAll from 'lodash.bindall';
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import PaperCanvas from '../containers/paper-canvas.jsx'; import PaperCanvas from '../containers/paper-canvas.jsx';
import BrushMode from '../containers/brush-mode.jsx'; import BrushMode from '../containers/brush-mode.jsx';
import EraserMode from '../containers/eraser-mode.jsx'; import EraserMode from '../containers/eraser-mode.jsx';
import ReshapeMode from '../containers/reshape-mode.jsx'; import ReshapeMode from '../containers/reshape-mode.jsx';
import SelectMode from '../containers/select-mode.jsx'; import SelectMode from '../containers/select-mode.jsx';
import PropTypes from 'prop-types';
import LineMode from '../containers/line-mode.jsx'; import LineMode from '../containers/line-mode.jsx';
import PenMode from '../containers/pen-mode.jsx';
import FillColorIndicatorComponent from '../containers/fill-color-indicator.jsx'; import FillColorIndicatorComponent from '../containers/fill-color-indicator.jsx';
import StrokeColorIndicatorComponent from '../containers/stroke-color-indicator.jsx'; import StrokeColorIndicatorComponent from '../containers/stroke-color-indicator.jsx';
import StrokeWidthIndicatorComponent from '../containers/stroke-width-indicator.jsx'; import StrokeWidthIndicatorComponent from '../containers/stroke-width-indicator.jsx';
@ -132,6 +136,10 @@ class PaintEditorComponent extends React.Component {
canvas={this.state.canvas} canvas={this.state.canvas}
onUpdateSvg={this.props.onUpdateSvg} onUpdateSvg={this.props.onUpdateSvg}
/> />
<PenMode
canvas={this.state.canvas}
onUpdateSvg={this.props.onUpdateSvg}
/>
<LineMode <LineMode
canvas={this.state.canvas} canvas={this.state.canvas}
onUpdateSvg={this.props.onUpdateSvg} onUpdateSvg={this.props.onUpdateSvg}

View file

@ -0,0 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
import {FormattedMessage} from 'react-intl';
const PenModeComponent = props => (
<button onClick={props.onMouseDown}>
<FormattedMessage
defaultMessage="Pen"
description="Label for the pen tool, which draws outlines"
id="paint.penMode.pen"
/>
</button>
);
PenModeComponent.propTypes = {
onMouseDown: PropTypes.func.isRequired
};
export default PenModeComponent;

View file

@ -3,7 +3,7 @@ import React from 'react';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import bindAll from 'lodash.bindall'; import bindAll from 'lodash.bindall';
import Modes from '../modes/modes'; import Modes from '../modes/modes';
import Blobbiness from './blob/blob'; import Blobbiness from '../helper/blob-tools/blob';
import {changeBrushSize} from '../reducers/brush-mode'; import {changeBrushSize} from '../reducers/brush-mode';
import {changeMode} from '../reducers/modes'; import {changeMode} from '../reducers/modes';

View file

@ -3,7 +3,7 @@ import React from 'react';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import bindAll from 'lodash.bindall'; import bindAll from 'lodash.bindall';
import Modes from '../modes/modes'; import Modes from '../modes/modes';
import Blobbiness from './blob/blob'; import Blobbiness from '../helper/blob-tools/blob';
import {changeBrushSize} from '../reducers/eraser-mode'; import {changeBrushSize} from '../reducers/eraser-mode';
import {clearSelectedItems} from '../reducers/selected-items'; import {clearSelectedItems} from '../reducers/selected-items';
import EraserModeComponent from '../components/eraser-mode.jsx'; import EraserModeComponent from '../components/eraser-mode.jsx';

102
src/containers/pen-mode.jsx Normal file
View file

@ -0,0 +1,102 @@
import PropTypes from 'prop-types';
import React from 'react';
import {connect} from 'react-redux';
import bindAll from 'lodash.bindall';
import Modes from '../modes/modes';
import {changeMode} from '../reducers/modes';
import {clearHoveredItem, setHoveredItem} from '../reducers/hover';
import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
import {getSelectedLeafItems} from '../helper/selection';
import PenTool from '../helper/tools/pen-tool';
import PenModeComponent from '../components/pen-mode.jsx';
class PenMode extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'activateTool',
'deactivateTool'
]);
}
componentDidMount () {
if (this.props.isPenModeActive) {
this.activateTool(this.props);
}
}
componentWillReceiveProps (nextProps) {
if (this.tool && nextProps.hoveredItemId !== this.props.hoveredItemId) {
this.tool.setPrevHoveredItemId(nextProps.hoveredItemId);
}
if (nextProps.isPenModeActive && !this.props.isPenModeActive) {
this.activateTool();
} else if (!nextProps.isPenModeActive && this.props.isPenModeActive) {
this.deactivateTool();
}
}
shouldComponentUpdate () {
return false; // Static component, for now
}
activateTool () {
this.tool = new PenTool(
this.props.setHoveredItem,
this.props.clearHoveredItem,
this.props.setSelectedItems,
this.props.clearSelectedItems,
this.props.onUpdateSvg
);
this.tool.activate();
}
deactivateTool () {
this.tool.deactivateTool();
this.tool.remove();
this.tool = null;
}
render () {
return (
<PenModeComponent onMouseDown={this.props.handleMouseDown} />
);
}
}
PenMode.propTypes = {
clearHoveredItem: PropTypes.func.isRequired,
clearSelectedItems: PropTypes.func.isRequired,
handleMouseDown: PropTypes.func.isRequired,
hoveredItemId: PropTypes.number,
isPenModeActive: PropTypes.bool.isRequired,
onUpdateSvg: PropTypes.func.isRequired,
setHoveredItem: PropTypes.func.isRequired,
setSelectedItems: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
isPenModeActive: state.scratchPaint.mode === Modes.PEN,
hoveredItemId: state.scratchPaint.hoveredItemId
});
const mapDispatchToProps = dispatch => ({
setHoveredItem: hoveredItemId => {
dispatch(setHoveredItem(hoveredItemId));
},
clearHoveredItem: () => {
dispatch(clearHoveredItem());
},
clearSelectedItems: () => {
dispatch(clearSelectedItems());
},
setSelectedItems: () => {
dispatch(setSelectedItems(getSelectedLeafItems()));
},
handleMouseDown: () => {
dispatch(changeMode(Modes.PEN));
},
deactivateTool () {
}
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(PenMode);

View file

@ -0,0 +1,52 @@
import paper from '@scratch/paper';
import log from '../../log/log';
/**
* Tool to handle freehand drawing of lines.
*/
class PenTool extends paper.Tool {
/**
* @param {function} setHoveredItem Callback to set the hovered item
* @param {function} clearHoveredItem Callback to clear the hovered item
* @param {function} setSelectedItems Callback to set the set of selected items in the Redux state
* @param {function} clearSelectedItems Callback to clear the set of selected items in the Redux state
* @param {!function} onUpdateSvg A callback to call when the image visibly changes
*/
constructor (setHoveredItem, clearHoveredItem, setSelectedItems, clearSelectedItems, onUpdateSvg) {
super();
this.setHoveredItem = setHoveredItem;
this.clearHoveredItem = clearHoveredItem;
this.setSelectedItems = setSelectedItems;
this.clearSelectedItems = clearSelectedItems;
this.onUpdateSvg = onUpdateSvg;
this.prevHoveredItemId = null;
// We have to set these functions instead of just declaring them because
// paper.js tools hook up the listeners in the setter functions.
this.onMouseDown = this.handleMouseDown;
this.onMouseMove = this.handleMouseMove;
this.onMouseDrag = this.handleMouseDrag;
this.onMouseUp = this.handleMouseUp;
}
/**
* To be called when the hovered item changes. When the select tool hovers over a
* new item, it compares against this to see if a hover item change event needs to
* be fired.
* @param {paper.Item} prevHoveredItemId ID of the highlight item that indicates the mouse is
* over a given item currently
*/
setPrevHoveredItemId (prevHoveredItemId) {
this.prevHoveredItemId = prevHoveredItemId;
}
handleMouseDown () {
log.warn('Pen not yet implemented');
}
handleMouseMove () {
}
handleMouseDrag () {
}
handleMouseUp () {
}
}
export default PenTool;

View file

@ -5,7 +5,8 @@ const Modes = keyMirror({
ERASER: null, ERASER: null,
LINE: null, LINE: null,
SELECT: null, SELECT: null,
RESHAPE: null RESHAPE: null,
PEN: null
}); });
export default Modes; export default Modes;