mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2024-12-22 21:42:30 -05:00
some clean up in react code'
This commit is contained in:
parent
c7471d26ab
commit
dc2fea3dd6
5 changed files with 55 additions and 47 deletions
|
@ -1,29 +1,37 @@
|
||||||
import PropTypes from 'prop-types';
|
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 BrushTool from '../containers/tools/brush-tool.jsx';
|
||||||
import EraserTool from '../containers/tools/eraser-tool.jsx';
|
import EraserTool from '../containers/tools/eraser-tool.jsx';
|
||||||
import ToolTypes from '../tools/tool-types.js';
|
|
||||||
|
|
||||||
class PaintEditorComponent extends React.Component {
|
class PaintEditorComponent extends React.Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props);
|
||||||
|
bindAll(this, [
|
||||||
|
'setCanvas'
|
||||||
|
]);
|
||||||
|
this.state = {};
|
||||||
|
}
|
||||||
|
setCanvas (canvas) {
|
||||||
|
this.setState({canvas: canvas});
|
||||||
|
}
|
||||||
render () {
|
render () {
|
||||||
|
// Tools can't work without a canvas, so we might as well not render them until we have it
|
||||||
|
if (this.state.canvas) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<PaperCanvas canvasRef={this.setCanvas} />
|
||||||
|
<BrushTool canvas={this.state.canvas} />
|
||||||
|
<EraserTool canvas={this.state.canvas} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<PaperCanvas
|
<PaperCanvas canvasRef={this.setCanvas} />
|
||||||
ref={canvas => {
|
|
||||||
this.canvas = canvas;
|
|
||||||
}}
|
|
||||||
tool={this.props.tool}
|
|
||||||
/>
|
|
||||||
<BrushTool canvas={this.canvas} />
|
|
||||||
<EraserTool canvas={this.canvas} />
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
PaintEditorComponent.propTypes = {
|
|
||||||
tool: PropTypes.oneOf(Object.keys(ToolTypes)).isRequired
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PaintEditorComponent;
|
export default PaintEditorComponent;
|
||||||
|
|
|
@ -13,35 +13,27 @@ class PaintEditor extends React.Component {
|
||||||
document.removeEventListener('keydown', this.props.onKeyPress);
|
document.removeEventListener('keydown', this.props.onKeyPress);
|
||||||
}
|
}
|
||||||
render () {
|
render () {
|
||||||
const {
|
|
||||||
onKeyPress, // eslint-disable-line no-unused-vars
|
|
||||||
...props
|
|
||||||
} = this.props;
|
|
||||||
return (
|
return (
|
||||||
<PaintEditorComponent {...props} />
|
<PaintEditorComponent />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
PaintEditor.propTypes = {
|
PaintEditor.propTypes = {
|
||||||
onKeyPress: PropTypes.func.isRequired,
|
onKeyPress: PropTypes.func.isRequired
|
||||||
tool: PropTypes.oneOf(Object.keys(ToolTypes)).isRequired
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
|
||||||
tool: state.tool
|
|
||||||
});
|
|
||||||
const mapDispatchToProps = dispatch => ({
|
const mapDispatchToProps = dispatch => ({
|
||||||
onKeyPress: e => {
|
onKeyPress: event => {
|
||||||
if (e.key === 'e') {
|
if (event.key === 'e') {
|
||||||
dispatch(ToolsReducer.changeTool(ToolTypes.ERASER));
|
dispatch(ToolsReducer.changeTool(ToolTypes.ERASER));
|
||||||
} else if (e.key === 'b') {
|
} else if (event.key === 'b') {
|
||||||
dispatch(ToolsReducer.changeTool(ToolTypes.BRUSH));
|
dispatch(ToolsReducer.changeTool(ToolTypes.BRUSH));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(
|
export default connect(
|
||||||
mapStateToProps,
|
null,
|
||||||
mapDispatchToProps
|
mapDispatchToProps
|
||||||
)(PaintEditor);
|
)(PaintEditor);
|
||||||
|
|
|
@ -1,9 +1,15 @@
|
||||||
|
import bindAll from 'lodash.bindall';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import paper from 'paper';
|
import paper from 'paper';
|
||||||
import ToolTypes from '../tools/tool-types.js';
|
|
||||||
|
|
||||||
class PaperCanvas extends React.Component {
|
class PaperCanvas extends React.Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props);
|
||||||
|
bindAll(this, [
|
||||||
|
'setCanvas'
|
||||||
|
]);
|
||||||
|
}
|
||||||
componentDidMount () {
|
componentDidMount () {
|
||||||
paper.setup(this.canvas);
|
paper.setup(this.canvas);
|
||||||
// Create a Paper.js Path to draw a line into it:
|
// Create a Paper.js Path to draw a line into it:
|
||||||
|
@ -22,19 +28,24 @@ class PaperCanvas extends React.Component {
|
||||||
componentWillUnmount () {
|
componentWillUnmount () {
|
||||||
paper.remove();
|
paper.remove();
|
||||||
}
|
}
|
||||||
|
setCanvas (canvas) {
|
||||||
|
debugger;
|
||||||
|
this.canvas = canvas;
|
||||||
|
if (this.props.canvasRef) {
|
||||||
|
this.props.canvasRef(canvas);
|
||||||
|
}
|
||||||
|
}
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<canvas
|
<canvas
|
||||||
ref={canvas => {
|
ref={this.setCanvas}
|
||||||
this.canvas = canvas;
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
PaperCanvas.propTypes = {
|
PaperCanvas.propTypes = {
|
||||||
tool: PropTypes.oneOf(Object.keys(ToolTypes)).isRequired
|
canvasRef: PropTypes.func
|
||||||
};
|
};
|
||||||
|
|
||||||
export default PaperCanvas;
|
export default PaperCanvas;
|
||||||
|
|
|
@ -22,8 +22,7 @@ class BrushTool extends React.Component {
|
||||||
}
|
}
|
||||||
componentDidMount () {
|
componentDidMount () {
|
||||||
if (this.props.tool === BrushTool.TOOL_TYPE) {
|
if (this.props.tool === BrushTool.TOOL_TYPE) {
|
||||||
debugger;
|
this.activateTool(this.props);
|
||||||
this.activateTool();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
componentWillReceiveProps (nextProps) {
|
componentWillReceiveProps (nextProps) {
|
||||||
|
@ -39,6 +38,7 @@ class BrushTool extends React.Component {
|
||||||
return false; // Logic only component
|
return false; // Logic only component
|
||||||
}
|
}
|
||||||
activateTool () {
|
activateTool () {
|
||||||
|
// TODO: This is temporary until a component that provides the brush size is hooked up
|
||||||
this.props.canvas.addEventListener('mousewheel', this.onScroll);
|
this.props.canvas.addEventListener('mousewheel', this.onScroll);
|
||||||
|
|
||||||
this.tool = new paper.Tool();
|
this.tool = new paper.Tool();
|
||||||
|
@ -57,6 +57,7 @@ class BrushTool extends React.Component {
|
||||||
}
|
}
|
||||||
deactivateTool () {
|
deactivateTool () {
|
||||||
this.props.canvas.removeEventListener('mousewheel', this.onScroll);
|
this.props.canvas.removeEventListener('mousewheel', this.onScroll);
|
||||||
|
this.blob.deactivateTool();
|
||||||
}
|
}
|
||||||
onScroll (event) {
|
onScroll (event) {
|
||||||
if (event.deltaY < 0) {
|
if (event.deltaY < 0) {
|
||||||
|
@ -64,11 +65,11 @@ class BrushTool extends React.Component {
|
||||||
} else if (event.deltaY > 0 && this.props.brushToolState.brushSize > 1) {
|
} else if (event.deltaY > 0 && this.props.brushToolState.brushSize > 1) {
|
||||||
this.props.changeBrushSize(this.props.brushToolState.brushSize - 1);
|
this.props.changeBrushSize(this.props.brushToolState.brushSize - 1);
|
||||||
}
|
}
|
||||||
return false;
|
return true;
|
||||||
}
|
}
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<div>Brush Tool </div>
|
<div>Brush Tool</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -77,11 +78,9 @@ BrushTool.propTypes = {
|
||||||
brushToolState: PropTypes.shape({
|
brushToolState: PropTypes.shape({
|
||||||
brushSize: PropTypes.number.isRequired
|
brushSize: PropTypes.number.isRequired
|
||||||
}),
|
}),
|
||||||
canvas: PropTypes.element,
|
canvas: PropTypes.instanceOf(Element).isRequired,
|
||||||
changeBrushSize: PropTypes.func.isRequired,
|
changeBrushSize: PropTypes.func.isRequired,
|
||||||
tool: PropTypes.shape({
|
tool: PropTypes.oneOf(Object.keys(ToolTypes)).isRequired
|
||||||
name: PropTypes.string.isRequired
|
|
||||||
})
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
|
|
|
@ -49,29 +49,27 @@ class EraserTool extends React.Component {
|
||||||
this.blob.deactivateTool();
|
this.blob.deactivateTool();
|
||||||
}
|
}
|
||||||
onScroll (event) {
|
onScroll (event) {
|
||||||
|
event.preventDefault();
|
||||||
if (event.deltaY < 0) {
|
if (event.deltaY < 0) {
|
||||||
this.props.changeBrushSize(this.props.eraserToolState.brushSize + 1);
|
this.props.changeBrushSize(this.props.eraserToolState.brushSize + 1);
|
||||||
} else if (event.deltaY > 0 && this.props.eraserToolState.brushSize > 1) {
|
} else if (event.deltaY > 0 && this.props.eraserToolState.brushSize > 1) {
|
||||||
this.props.changeBrushSize(this.props.eraserToolState.brushSize - 1);
|
this.props.changeBrushSize(this.props.eraserToolState.brushSize - 1);
|
||||||
}
|
}
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<div>Eraser Tool </div>
|
<div>Eraser Tool</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
EraserTool.propTypes = {
|
EraserTool.propTypes = {
|
||||||
canvas: PropTypes.element,
|
canvas: PropTypes.instanceOf(Element).isRequired,
|
||||||
changeBrushSize: PropTypes.func.isRequired,
|
changeBrushSize: PropTypes.func.isRequired,
|
||||||
eraserToolState: PropTypes.shape({
|
eraserToolState: PropTypes.shape({
|
||||||
brushSize: PropTypes.number.isRequired
|
brushSize: PropTypes.number.isRequired
|
||||||
}),
|
}),
|
||||||
tool: PropTypes.shape({
|
tool: PropTypes.oneOf(Object.keys(ToolTypes)).isRequired
|
||||||
name: PropTypes.string.isRequired
|
|
||||||
})
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
|
|
Loading…
Reference in a new issue