diff options
author | Martin Ashby <martin@ashbysoft.com> | 2018-07-03 12:38:22 +0100 |
---|---|---|
committer | Martin Ashby <martin@ashbysoft.com> | 2018-07-03 12:38:22 +0100 |
commit | 3dc7e2a2e2158c99cb44d1ea3a3a6ff8738255d2 (patch) | |
tree | 65b6718e2fdc12034af02339c8b7742ea1cde15f /src/PaintArea.js | |
parent | 4a353d95f6d2dd8a9841bdae6f0721f5b014599e (diff) | |
download | unicornpaint-3dc7e2a2e2158c99cb44d1ea3a3a6ff8738255d2.tar.gz unicornpaint-3dc7e2a2e2158c99cb44d1ea3a3a6ff8738255d2.tar.bz2 unicornpaint-3dc7e2a2e2158c99cb44d1ea3a3a6ff8738255d2.tar.xz unicornpaint-3dc7e2a2e2158c99cb44d1ea3a3a6ff8738255d2.zip |
Better layout with CSS.
Changed favicon & title.
Diffstat (limited to 'src/PaintArea.js')
-rw-r--r-- | src/PaintArea.js | 31 |
1 files changed, 7 insertions, 24 deletions
diff --git a/src/PaintArea.js b/src/PaintArea.js index ac7ce96..e42ec9e 100644 --- a/src/PaintArea.js +++ b/src/PaintArea.js @@ -47,44 +47,27 @@ export default class PaintArea extends Component { render() { let data = this.props.data let height = data[0] ? data[0].length : 0 - let rows = [] + let cells = [] for (var y=height-1; y>=0; y--) { - let cells = [] for (var x=0; x<data.length; x++) { let {r, g, b} = rgb(getPixel(x, y, data)) let ix = x let iy = y - cells.push(<td + cells.push(<div + className="paintAreaCell" onMouseMove={() => this.handleMouseMove(ix, iy)} onClick={() => this.props.onTool(ix, iy)} style={{ - background: `rgb(${r},${g},${b})`, - ...styles.paintAreaCell + background: `rgb(${r},${g},${b})` }} key={(ix * 100000) + iy}/>) } - rows.push(<tr key={y}>{cells}</tr>) } return ( - <table - draggable={false}> - <tbody> - {rows} - </tbody> - </table> + <div className="paint"> + {cells} + </div> ) } } - -const styles = { - paintAreaCell: { - width: "20px", - height: "20px", - minWidth: "20px", - minHeight: "20px", - maxWidth: "20px", - maxHeight: "20px", - border: "1px solid grey", - } -}
\ No newline at end of file |