1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
import React, { Component } from 'react'
import { rgb, getPixel } from './Utils'
/**
* Expects props:
* onTool = (x, y) => {}
* Callback for when a cell is clicked
*
* data = [[]]
* 3d array - rows, cells, RGB value for each cell
*/
export default class PaintArea extends Component {
constructor(props) {
super(props)
this.handleMouseMove = this.handleMouseMove.bind(this)
this._onMouseDown = this._onMouseDown.bind(this)
this._onMouseUp = this._onMouseUp.bind(this)
this.state = {
mouseDown: false
}
}
_onMouseDown() {
this.setState({ mouseDown: true })
}
_onMouseUp() {
this.setState({ mouseDown: false })
}
componentWillMount() {
document.addEventListener('mousedown', this._onMouseDown)
document.addEventListener('mouseup', this._onMouseUp)
}
componentWillUnmount() {
document.removeEventListener('mousedown', this._onMouseDown)
document.removeEventListener('mouseup', this._onMouseUp)
}
handleMouseMove(x, y) {
if (this.state.mouseDown) {
this.props.onTool(x, y)
}
}
render() {
let data = this.props.data
let height = data[0] ? data[0].length : 0
let rows = []
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
onMouseMove={() => this.handleMouseMove(ix, iy)}
onClick={() => this.props.onTool(ix, iy)}
style={{
background: `rgb(${r},${g},${b})`,
...styles.paintAreaCell
}}
key={(ix * 100000) + iy}/>)
}
rows.push(<tr key={y}>{cells}</tr>)
}
return (
<table
draggable={false}>
<tbody>
{rows}
</tbody>
</table>
)
}
}
const styles = {
paintAreaCell: {
width: "20px",
height: "20px",
minWidth: "20px",
minHeight: "20px",
maxWidth: "20px",
maxHeight: "20px",
border: "1px solid grey",
}
}
|
