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

add structure

Browse source
This commit is contained in:
DD 2017-08-29 17:20:08 -04:00
parent ad5df04f1e
commit 82fc11ebab
1 changed files with 96 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +4,8 @@ import PaperCanvas from '../containers/paper-canvas.jsx';
import BrushMode from '../containers/brush-mode.jsx';
import EraserMode from '../containers/eraser-mode.jsx';
import styles from './paint-editor.css';
class PaintEditorComponent extends React.Component {
constructor (props) {
super(props);
@ -16,19 +18,101 @@ class PaintEditorComponent extends React.Component {
this.setState({canvas: canvas});
}
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 (
<div>
<PaperCanvas canvasRef={this.setCanvas} />
<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
<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>
);
}