mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2024-12-22 21:42:30 -05:00
add structure
This commit is contained in:
parent
ad5df04f1e
commit
82fc11ebab
1 changed files with 96 additions and 12 deletions
|
@ -4,6 +4,8 @@ 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 styles from './paint-editor.css';
|
||||||
|
|
||||||
class PaintEditorComponent extends React.Component {
|
class PaintEditorComponent extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
@ -16,19 +18,101 @@ class PaintEditorComponent extends React.Component {
|
||||||
this.setState({canvas: canvas});
|
this.setState({canvas: canvas});
|
||||||
}
|
}
|
||||||
render () {
|
render () {
|
||||||
// Modes can't work without a canvas, so we don't render them until we have it
|
|
||||||
if (this.state.canvas) {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<PaperCanvas canvasRef={this.setCanvas} />
|
|
||||||
<BrushMode canvas={this.state.canvas} />
|
|
||||||
<EraserMode canvas={this.state.canvas} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className={styles.editorContainer}>
|
||||||
<PaperCanvas canvasRef={this.setCanvas} />
|
{/* First row */}
|
||||||
|
<div className={styles.row}>
|
||||||
|
{/* Name field */}
|
||||||
|
<div className={styles.inputGroup}>
|
||||||
|
{/* Todo use Label and BufferedInput from Gui */}
|
||||||
|
<label>Costume
|
||||||
|
<input value="meow"/>
|
||||||
|
</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}>
|
||||||
|
<BrushMode canvas={this.state.canvas} />
|
||||||
|
<EraserMode canvas={this.state.canvas} />
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{/* Canvas */}
|
||||||
|
<div className={styles.canvasContainer}>
|
||||||
|
<PaperCanvas canvasRef={this.setCanvas} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue