diff --git a/src/components/paint-editor.jsx b/src/components/paint-editor.jsx
index 1bad869e..68661388 100644
--- a/src/components/paint-editor.jsx
+++ b/src/components/paint-editor.jsx
@@ -1,29 +1,37 @@
-import PropTypes from 'prop-types';
+import bindAll from 'lodash.bindall';
import React from 'react';
import PaperCanvas from '../containers/paper-canvas.jsx';
import BrushTool from '../containers/tools/brush-tool.jsx';
import EraserTool from '../containers/tools/eraser-tool.jsx';
-import ToolTypes from '../tools/tool-types.js';
class PaintEditorComponent extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'setCanvas'
+ ]);
+ this.state = {};
+ }
+ setCanvas (canvas) {
+ this.setState({canvas: canvas});
+ }
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 (
+
+ );
+ }
return (
-
{
- this.canvas = canvas;
- }}
- tool={this.props.tool}
- />
-
-
+
);
}
}
-PaintEditorComponent.propTypes = {
- tool: PropTypes.oneOf(Object.keys(ToolTypes)).isRequired
-};
-
export default PaintEditorComponent;
diff --git a/src/containers/paint-editor.jsx b/src/containers/paint-editor.jsx
index 12d40e54..78eae432 100644
--- a/src/containers/paint-editor.jsx
+++ b/src/containers/paint-editor.jsx
@@ -13,35 +13,27 @@ class PaintEditor extends React.Component {
document.removeEventListener('keydown', this.props.onKeyPress);
}
render () {
- const {
- onKeyPress, // eslint-disable-line no-unused-vars
- ...props
- } = this.props;
return (
-
+
);
}
}
PaintEditor.propTypes = {
- onKeyPress: PropTypes.func.isRequired,
- tool: PropTypes.oneOf(Object.keys(ToolTypes)).isRequired
+ onKeyPress: PropTypes.func.isRequired
};
-const mapStateToProps = state => ({
- tool: state.tool
-});
const mapDispatchToProps = dispatch => ({
- onKeyPress: e => {
- if (e.key === 'e') {
+ onKeyPress: event => {
+ if (event.key === 'e') {
dispatch(ToolsReducer.changeTool(ToolTypes.ERASER));
- } else if (e.key === 'b') {
+ } else if (event.key === 'b') {
dispatch(ToolsReducer.changeTool(ToolTypes.BRUSH));
}
}
});
export default connect(
- mapStateToProps,
+ null,
mapDispatchToProps
)(PaintEditor);
diff --git a/src/containers/paper-canvas.jsx b/src/containers/paper-canvas.jsx
index fed3620a..a3b524ff 100644
--- a/src/containers/paper-canvas.jsx
+++ b/src/containers/paper-canvas.jsx
@@ -1,9 +1,15 @@
+import bindAll from 'lodash.bindall';
import PropTypes from 'prop-types';
import React from 'react';
import paper from 'paper';
-import ToolTypes from '../tools/tool-types.js';
class PaperCanvas extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'setCanvas'
+ ]);
+ }
componentDidMount () {
paper.setup(this.canvas);
// Create a Paper.js Path to draw a line into it:
@@ -22,19 +28,24 @@ class PaperCanvas extends React.Component {
componentWillUnmount () {
paper.remove();
}
+ setCanvas (canvas) {
+ debugger;
+ this.canvas = canvas;
+ if (this.props.canvasRef) {
+ this.props.canvasRef(canvas);
+ }
+ }
render () {
return (