scratch-paint/src/components/paint-editor.jsx

146 lines
5 KiB
React
Raw Normal View History

2017-07-27 16:41:41 -04:00
import bindAll from 'lodash.bindall';
2017-07-13 14:03:48 -04:00
import React from 'react';
import PaperCanvas from '../containers/paper-canvas.jsx';
import BrushMode from '../containers/brush-mode.jsx';
import EraserMode from '../containers/eraser-mode.jsx';
2017-08-30 10:50:05 -04:00
import PropTypes from 'prop-types';
2017-08-22 15:53:35 -04:00
import LineMode from '../containers/line-mode.jsx';
2017-07-13 14:03:48 -04:00
2017-08-29 17:20:08 -04:00
import styles from './paint-editor.css';
2017-07-27 11:45:41 -04:00
class PaintEditorComponent extends React.Component {
2017-07-27 16:41:41 -04:00
constructor (props) {
super(props);
bindAll(this, [
'setCanvas'
]);
this.state = {};
}
setCanvas (canvas) {
this.setState({canvas: canvas});
}
2017-07-27 11:45:41 -04:00
render () {
return (
2017-08-29 17:20:08 -04:00
<div className={styles.editorContainer}>
{/* First row */}
<div className={styles.row}>
{/* Name field */}
<div className={styles.inputGroup}>
{/* Todo use Label and BufferedInput from Gui */}
<label>Costume
2017-09-06 15:25:49 -04:00
<input value="meow" />
2017-08-29 17:20:08 -04:00
</label>
</div>
{/* Undo/Redo */}
<div className={styles.inputGroup}>
<div className={styles.buttonGroup}>
<button
className={styles.button}
>
Undo
</button>
<button
className={styles.button}
>
Redo
</button>
</div>
</div>
{/* To be Front/back */}
<div className={styles.inputGroup}>
<button
className={styles.button}
>
Front
</button>
<button
className={styles.button}
>
Back
</button>
</div>
{/* To be Group/Ungroup */}
<div className={styles.inputGroup}>
<button
className={styles.button}
>
Group
</button>
<button
className={styles.button}
>
Ungroup
</button>
</div>
</div>
{/* Second Row */}
<div className={styles.row}>
{/* To be fill */}
<div className={styles.inputGroup}>
<button
className={styles.button}
>
Fill
</button>
</div>
{/* To be stroke */}
<div className={styles.inputGroup}>
<button
className={styles.button}
>
Stroke
</button>
</div>
<div className={styles.inputGroup}>
Mode tools
</div>
</div>
<div className={styles.row}>
{/* Modes */}
{this.state.canvas ? (
<div className={styles.modeSelector}>
2017-09-06 15:25:49 -04:00
<BrushMode
canvas={this.state.canvas}
onUpdateSvg={this.props.onUpdateSvg}
/>
<EraserMode
canvas={this.state.canvas}
onUpdateSvg={this.props.onUpdateSvg}
/>
<LineMode
canvas={this.state.canvas}
onUpdateSvg={this.props.onUpdateSvg}
/>
2017-08-29 17:20:08 -04:00
</div>
) : null}
{/* Canvas */}
<div className={styles.canvasContainer}>
2017-09-06 15:25:49 -04:00
<PaperCanvas
canvasRef={this.setCanvas}
rotationCenterX={this.props.rotationCenterX}
rotationCenterY={this.props.rotationCenterY}
svg={this.props.svg}
/>
2017-08-29 17:20:08 -04:00
</div>
</div>
2017-07-27 11:45:41 -04:00
</div>
);
}
}
2017-07-13 14:03:48 -04:00
2017-08-30 10:50:05 -04:00
PaintEditorComponent.propTypes = {
onUpdateSvg: PropTypes.func.isRequired,
rotationCenterX: PropTypes.number,
rotationCenterY: PropTypes.number,
2017-08-30 10:50:05 -04:00
svg: PropTypes.string
};
2017-07-26 20:39:12 -04:00
export default PaintEditorComponent;