scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

rename stuff from tool to mode so it isn't confused with paper.tool'

Browse source
This commit is contained in:
DD Liu 2017-08-15 18:11:02 -04:00
parent 69666f3b8a
commit 087a6264a0
13 changed files with 112 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/paint-editor.jsx
View file

@ -1,8 +1,8 @@
import bindAll from 'lodash.bindall'; import bindAll from 'lodash.bindall';
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 BrushMode from '../containers/brush-mode.jsx';
import EraserTool from '../containers/tools/eraser-tool.jsx'; import EraserMode from '../containers/eraser-mode.jsx';
class PaintEditorComponent extends React.Component { class PaintEditorComponent extends React.Component {
constructor (props) { constructor (props) {
@ -16,13 +16,13 @@ class PaintEditorComponent extends React.Component {
this.setState({canvas: canvas}); this.setState({canvas: canvas});
} }
render () { 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) { if (this.state.canvas) {
return ( return (
<div> <div>
<PaperCanvas canvasRef={this.setCanvas} /> <PaperCanvas canvasRef={this.setCanvas} />
<BrushTool canvas={this.state.canvas} /> <BrushMode canvas={this.state.canvas} />
<EraserTool canvas={this.state.canvas} /> <EraserMode canvas={this.state.canvas} />
</div> </div>
); );
} }

49
src/containers/tools/brush-tool.jsx → src/containers/brush-mode.jsx
View file

@ -2,14 +2,15 @@ import PropTypes from 'prop-types';
import React from 'react'; 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 ToolTypes from '../../tools/tool-types.js'; import Modes from '../modes/modes';
import BlobTool from '../../tools/blob.js'; import Blobbiness from '../modes/blob';
import BrushToolReducer from '../../reducers/brush-tool'; import BrushModeReducer from '../reducers/brush-mode';
import {changeBrushSize} from '../reducers/brush-mode';
import paper from 'paper'; import paper from 'paper';
class BrushTool extends React.Component { class BrushMode extends React.Component {
static get TOOL_TYPE () { static get MODE () {
return ToolTypes.BRUSH; return Modes.BRUSH;
} }
constructor (props) { constructor (props) {
super(props); super(props);
@ -18,20 +19,20 @@ class BrushTool extends React.Component {
'deactivateTool', 'deactivateTool',
'onScroll' 'onScroll'
]); ]);
this.blob = new BlobTool(); this.blob = new Blobbiness();
} }
componentDidMount () { componentDidMount () {
if (this.props.tool === BrushTool.TOOL_TYPE) { if (this.props.isBrushModeActive) {
this.activateTool(this.props); this.activateTool(this.props);
} }
} }
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
if (nextProps.tool === BrushTool.TOOL_TYPE && this.props.tool !== BrushTool.TOOL_TYPE) { if (nextProps.isBrushModeActive && !this.props.isBrushModeActive) {
this.activateTool(); this.activateTool();
} else if (nextProps.tool !== BrushTool.TOOL_TYPE && this.props.tool === BrushTool.TOOL_TYPE) { } else if (!nextProps.isBrushModeActive && this.props.isBrushModeActive) {
this.deactivateTool(); this.deactivateTool();
} else if (nextProps.tool === BrushTool.TOOL_TYPE && this.props.tool === BrushTool.TOOL_TYPE) { } else if (nextProps.isBrushModeActive && this.props.isBrushModeActive) {
this.blob.setOptions(nextProps.brushToolState); this.blob.setOptions(nextProps.brushModeState);
} }
} }
shouldComponentUpdate () { shouldComponentUpdate () {
@ -42,7 +43,7 @@ class BrushTool extends React.Component {
this.props.canvas.addEventListener('mousewheel', this.onScroll); this.props.canvas.addEventListener('mousewheel', this.onScroll);
this.tool = new paper.Tool(); 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 // TODO Make sure a fill color is set on the brush
// if(!pg.stylebar.getFillColor()) { // if(!pg.stylebar.getFillColor()) {
@ -61,39 +62,39 @@ class BrushTool extends React.Component {
} }
onScroll (event) { onScroll (event) {
if (event.deltaY < 0) { if (event.deltaY < 0) {
this.props.changeBrushSize(this.props.brushToolState.brushSize + 1); this.props.changeBrushSize(this.props.brushModeState.brushSize + 1);
} else if (event.deltaY > 0 && this.props.brushToolState.brushSize > 1) { } else if (event.deltaY > 0 && this.props.brushModeState.brushSize > 1) {
this.props.changeBrushSize(this.props.brushToolState.brushSize - 1); this.props.changeBrushSize(this.props.brushModeState.brushSize - 1);
} }
return true; return true;
} }
render () { render () {
return ( return (
<div>Brush Tool</div> <div>Brush Mode</div>
); );
} }
} }
BrushTool.propTypes = { BrushMode.propTypes = {
brushToolState: PropTypes.shape({ brushModeState: PropTypes.shape({
brushSize: PropTypes.number.isRequired brushSize: PropTypes.number.isRequired
}), }),
canvas: PropTypes.instanceOf(Element).isRequired, canvas: PropTypes.instanceOf(Element).isRequired,
changeBrushSize: PropTypes.func.isRequired, changeBrushSize: PropTypes.func.isRequired,
tool: PropTypes.oneOf(Object.keys(ToolTypes)).isRequired isBrushModeActive: PropTypes.bool.isRequired
}; };
const mapStateToProps = state => ({ const mapStateToProps = state => ({
brushToolState: state.brushTool, brushModeState: state.brushMode,
tool: state.tool isBrushModeActive: state.mode === BrushMode.MODE
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
changeBrushSize: brushSize => { changeBrushSize: brushSize => {
dispatch(BrushToolReducer.changeBrushSize(brushSize)); dispatch(changeBrushSize(brushSize));
} }
}); });
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(BrushTool); )(BrushMode);

48
src/containers/tools/eraser-tool.jsx → src/containers/eraser-mode.jsx
View file

@ -2,14 +2,14 @@ import PropTypes from 'prop-types';
import React from 'react'; 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 ToolTypes from '../../tools/tool-types.js'; import Modes from '../modes/modes';
import BlobTool from '../../tools/blob.js'; import Blobbiness from '../modes/blob';
import EraserToolReducer from '../../reducers/eraser-tool'; import EraserModeReducer from '../reducers/eraser-mode';
import paper from 'paper'; import paper from 'paper';
class EraserTool extends React.Component { class EraserMode extends React.Component {
static get TOOL_TYPE () { static get MODE () {
return ToolTypes.ERASER; return Modes.ERASER;
} }
constructor (props) { constructor (props) {
super(props); super(props);
@ -18,20 +18,20 @@ class EraserTool extends React.Component {
'deactivateTool', 'deactivateTool',
'onScroll' 'onScroll'
]); ]);
this.blob = new BlobTool(); this.blob = new Blobbiness();
} }
componentDidMount () { componentDidMount () {
if (this.props.tool === EraserTool.TOOL_TYPE) { if (this.props.isEraserModeActive) {
this.activateTool(); this.activateTool();
} }
} }
componentWillReceiveProps (nextProps) { componentWillReceiveProps (nextProps) {
if (nextProps.tool === EraserTool.TOOL_TYPE && this.props.tool !== EraserTool.TOOL_TYPE) { if (nextProps.isEraserModeActive && !this.props.isEraserModeActive) {
this.activateTool(); this.activateTool();
} else if (nextProps.tool !== EraserTool.TOOL_TYPE && this.props.tool === EraserTool.TOOL_TYPE) { } else if (!nextProps.isEraserModeActive && this.props.isEraserModeActive) {
this.deactivateTool(); this.deactivateTool();
} else if (nextProps.tool === EraserTool.TOOL_TYPE && this.props.tool === EraserTool.TOOL_TYPE) { } else if (nextProps.isEraserModeActive && this.props.isEraserModeActive) {
this.blob.setOptions(nextProps.eraserToolState); this.blob.setOptions(nextProps.eraserModeState);
} }
} }
shouldComponentUpdate () { shouldComponentUpdate () {
@ -41,7 +41,7 @@ class EraserTool extends React.Component {
this.props.canvas.addEventListener('mousewheel', this.onScroll); this.props.canvas.addEventListener('mousewheel', this.onScroll);
this.tool = new paper.Tool(); 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(); this.tool.activate();
} }
deactivateTool () { deactivateTool () {
@ -51,38 +51,38 @@ class EraserTool extends React.Component {
onScroll (event) { onScroll (event) {
event.preventDefault(); event.preventDefault();
if (event.deltaY < 0) { if (event.deltaY < 0) {
this.props.changeBrushSize(this.props.eraserToolState.brushSize + 1); this.props.changeBrushSize(this.props.eraserModeState.brushSize + 1);
} else if (event.deltaY > 0 && this.props.eraserToolState.brushSize > 1) { } else if (event.deltaY > 0 && this.props.eraserModeState.brushSize > 1) {
this.props.changeBrushSize(this.props.eraserToolState.brushSize - 1); this.props.changeBrushSize(this.props.eraserModeState.brushSize - 1);
} }
} }
render () { render () {
return ( return (
<div>Eraser Tool</div> <div>Eraser Mode</div>
); );
} }
} }
EraserTool.propTypes = { EraserMode.propTypes = {
canvas: PropTypes.instanceOf(Element).isRequired, canvas: PropTypes.instanceOf(Element).isRequired,
changeBrushSize: PropTypes.func.isRequired, changeBrushSize: PropTypes.func.isRequired,
eraserToolState: PropTypes.shape({ eraserModeState: PropTypes.shape({
brushSize: PropTypes.number.isRequired brushSize: PropTypes.number.isRequired
}), }),
tool: PropTypes.oneOf(Object.keys(ToolTypes)).isRequired isEraserModeActive: PropTypes.bool.isRequired
}; };
const mapStateToProps = state => ({ const mapStateToProps = state => ({
eraserToolState: state.eraserTool, eraserModeState: state.eraserMode,
tool: state.tool isEraserModeActive: state.mode === EraserMode.MODE
}); });
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
changeBrushSize: brushSize => { changeBrushSize: brushSize => {
dispatch(EraserToolReducer.changeBrushSize(brushSize)); dispatch(EraserModeReducer.changeBrushSize(brushSize));
} }
}); });
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(EraserTool); )(EraserMode);

8
src/containers/paint-editor.jsx
View file

@ -1,8 +1,8 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import PaintEditorComponent from '../components/paint-editor.jsx'; import PaintEditorComponent from '../components/paint-editor.jsx';
import ToolsReducer from '../reducers/tools'; import ModesReducer from '../reducers/modes';
import ToolTypes from '../tools/tool-types.js'; import Modes from '../modes/modes';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
class PaintEditor extends React.Component { class PaintEditor extends React.Component {
@ -26,9 +26,9 @@ PaintEditor.propTypes = {
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
onKeyPress: event => { onKeyPress: event => {
if (event.key === 'e') { if (event.key === 'e') {
dispatch(ToolsReducer.changeTool(ToolTypes.ERASER)); dispatch(ToolsReducer.changeMode(Modes.ERASER));
} else if (event.key === 'b') { } else if (event.key === 'b') {
dispatch(ToolsReducer.changeTool(ToolTypes.BRUSH)); dispatch(ToolsReducer.changeMode(Modes.BRUSH));
} }
} }
}); });

20
src/tools/blob.js → src/modes/blob.js
View file

@ -4,11 +4,11 @@ import broadBrushHelper from './broad-brush-helper';
import segmentBrushHelper from './segment-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 * to handle mouse events, which are delegated to broad-brush-helper and segment-brush-helper
* based on the brushSize in the state. * based on the brushSize in the state.
*/ */
class BlobTool { class Blobbiness {
static get BROAD () { static get BROAD () {
return 'broadbrush'; return 'broadbrush';
@ -97,11 +97,11 @@ class BlobTool {
tool.resizeCursorIfNeeded(event.point); tool.resizeCursorIfNeeded(event.point);
if (event.event.button > 0) return; // only first mouse button if (event.event.button > 0) return; // only first mouse button
if (this.options.brushSize < BlobTool.THRESHOLD) { if (this.options.brushSize < Blobbiness.THRESHOLD) {
this.brush = BlobTool.BROAD; this.brush = Blobbiness.BROAD;
this.onBroadMouseDown(event); this.onBroadMouseDown(event);
} else { } else {
this.brush = BlobTool.SEGMENT; this.brush = Blobbiness.SEGMENT;
this.onSegmentMouseDown(event); this.onSegmentMouseDown(event);
} }
this.cursorPreview.bringToFront(); this.cursorPreview.bringToFront();
@ -112,9 +112,9 @@ class BlobTool {
tool.onMouseDrag = function (event) { tool.onMouseDrag = function (event) {
tool.resizeCursorIfNeeded(event.point); tool.resizeCursorIfNeeded(event.point);
if (event.event.button > 0) return; // only first mouse button if (event.event.button > 0) return; // only first mouse button
if (this.brush === BlobTool.BROAD) { if (this.brush === Blobbiness.BROAD) {
this.onBroadMouseDrag(event); this.onBroadMouseDrag(event);
} else if (this.brush === BlobTool.SEGMENT) { } else if (this.brush === Blobbiness.SEGMENT) {
this.onSegmentMouseDrag(event); this.onSegmentMouseDrag(event);
} else { } else {
log.warn(`Brush type does not exist: ${this.brush}`); 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 if (event.event.button > 0) return; // only first mouse button
let lastPath; let lastPath;
if (this.brush === BlobTool.BROAD) { if (this.brush === Blobbiness.BROAD) {
lastPath = this.onBroadMouseUp(event); lastPath = this.onBroadMouseUp(event);
} else if (this.brush === BlobTool.SEGMENT) { } else if (this.brush === Blobbiness.SEGMENT) {
lastPath = this.onSegmentMouseUp(event); lastPath = this.onSegmentMouseUp(event);
} else { } else {
log.warn(`Brush type does not exist: ${this.brush}`); log.warn(`Brush type does not exist: ${this.brush}`);
@ -341,4 +341,4 @@ class BlobTool {
} }
} }
export default BlobTool; export default Blobbiness;

0
src/tools/broad-brush-helper.js → src/modes/broad-brush-helper.js
View file

4
src/tools/tool-types.js → src/modes/modes.js
View file

@ -1,8 +1,8 @@
import keyMirror from 'keymirror'; import keyMirror from 'keymirror';
const ToolTypes = keyMirror({ const Modes = keyMirror({
BRUSH: null, BRUSH: null,
ERASER: null ERASER: null
}); });
export default ToolTypes; export default Modes;

0
src/tools/segment-brush-helper.js → src/modes/segment-brush-helper.js
View file

9
src/reducers/brush-tool.js → src/reducers/brush-mode.js
View file

@ -1,6 +1,6 @@
import log from '../log/log'; 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 initialState = {brushSize: 5};
const reducer = function (state, action) { const reducer = function (state, action) {
@ -18,11 +18,14 @@ const reducer = function (state, action) {
}; };
// Action creators ================================== // Action creators ==================================
reducer.changeBrushSize = function (brushSize) { const changeBrushSize = function (brushSize) {
return { return {
type: CHANGE_BRUSH_SIZE, type: CHANGE_BRUSH_SIZE,
brushSize: brushSize brushSize: brushSize
}; };
}; };
export default reducer; export {
reducer as default,
changeBrushSize
};

12
src/reducers/combine-reducers.js
View file

@ -1,10 +1,10 @@
import {combineReducers} from 'redux'; import {combineReducers} from 'redux';
import toolReducer from './tools'; import modeReducer from './modes';
import brushToolReducer from './brush-tool'; import brushModeReducer from './brush-mode';
import eraserToolReducer from './eraser-tool'; import eraserModeReducer from './eraser-mode';
export default combineReducers({ export default combineReducers({
tool: toolReducer, mode: modeReducer,
brushTool: brushToolReducer, brushMode: brushModeReducer,
eraserTool: eraserToolReducer eraserMode: eraserModeReducer
}); });

2
src/reducers/eraser-tool.js → src/reducers/eraser-mode.js
View file

@ -1,6 +1,6 @@
import log from '../log/log'; 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 initialState = {brushSize: 20};
const reducer = function (state, action) { const reducer = function (state, action) {

29
src/reducers/modes.js Normal file
View file

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

29
src/reducers/tools.js
View file

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