/
LinearComponent.js
62 lines (51 loc) · 1.44 KB
/
LinearComponent.js
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
import React from "react";
import PropTypes from 'prop-types';
import Slider from "@maslick/radiaslider/src/slider-linear";
export default class LinearSlider extends React.Component {
initKarandashi() {
var colors = [
"#104b63",
"#ff9a9a",
"#76c7e9",
"#ffff9a",
"#9e9e9e",
"#bcf5bc",
"#f096f0",
"#229ed1"
];
var temp = {
min: -100,
max: 100,
step: 10
};
for (let i=0; i<24; i++) {
let t = temp;
t.width = 340;
t.color = colors[i%8];
t.x0 = 30 + 40*i;
t.y0 = 370;
t.id = i.toString();
this.slider.addSlider(t);
this.slider.setSliderValue(t.id, LinearSlider.randomInRange(temp.min, temp.max));
}
}
static randomInRange(start, end){
return Math.floor(Math.random() * (end - start + 1) + start);
}
render() {
return (
<canvas id={this.props.id} width="980" height="400"/>
);
}
componentDidMount() {
this.slider = new Slider({ canvasId: this.props.id, continuousMode: this.props.continuousMode === true, vertical: true });
this.initKarandashi();
}
}
LinearSlider.propTypes = {
id: PropTypes.string.isRequired,
continuousMode: PropTypes.bool
};
LinearSlider.defaultProps = {
continuousMode: true
};