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
|
import React, { Component } from 'react'
import { rgb, getPixel } from './Utils'
class FramePreview extends Component {
render() {
let width = this.props.pixels.length
let height = this.props.pixels[0].length
let rows = []
for (var y=height-1; y>=0; y--) {
let cells = []
for (var x=0; x<width; x++) {
let {r, g, b} = rgb(getPixel(x, y, this.props.pixels))
cells.push(<td
style={{
background: `rgb(${r},${g},${b})`,
...styles.previewPixel
}}/>)
}
rows.push(<tr key={y}>{cells}</tr>)
}
let bgColor = this.props.selected ? "red" : "grey"
return <table onClick={this.props.onClick} style={{background: bgColor}}><tbody> {rows} </tbody></table>
}
}
export default class FrameControl extends Component {
// frames: []
// selectedFrame: number
render() {
// A series of divs, 1 per frame,
let frames = this.props.frames
let selectedFrame = this.props.selectedFrame
let framePreviews = frames.map((frame, ix) =>
<div>
<span>Frame {ix+1}</span>
<FramePreview
pixels={frame}
selected={ix === this.props.selectedFrame}
onClick={() => this.props.onFrameSelected(ix)}/>
</div>)
return <div style={styles.previewContainer}>{framePreviews}</div>
}
}
const styles = {
previewcontainer: {
},
previewTable: {
},
previewPixel: {
width: "4px",
height: "4px",
}
}
|
