-
Notifications
You must be signed in to change notification settings - Fork 24
/
index.jsx
81 lines (73 loc) · 2.29 KB
/
index.jsx
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
import React, { Component } from "react";
import { select as d3Select, mouse as d3Mouse, touches as d3Touches } from "d3";
import { Stage } from "react-konva";
import Particles from "./Particles";
import Footer from "./Footer";
import Header from "./Header";
class App extends Component {
svgWrap = React.createRef();
componentDidMount() {
let svg = d3Select(this.svgWrap.current);
svg.on("mousedown", () => {
this.updateMousePos();
this.props.startParticles();
});
svg.on("touchstart", () => {
this.updateTouchPos();
this.props.startParticles();
});
svg.on("mousemove", () => {
this.updateMousePos();
});
svg.on("touchmove", () => {
this.updateTouchPos();
});
svg.on("mouseup", () => {
this.props.stopParticles();
});
svg.on("touchend", () => {
this.props.stopParticles();
});
svg.on("mouseleave", () => {
this.props.stopParticles();
});
}
updateMousePos() {
let [x, y] = d3Mouse(this.svgWrap.current);
this.props.updateMousePos(x, y);
}
updateTouchPos() {
let [x, y] = d3Touches(this.svgWrap.current)[0];
this.props.updateMousePos(x, y);
}
render() {
return (
<div
onMouseDown={e => this.props.startTicker()}
style={{ overflow: "hidden" }}
>
<Header />
<div
style={{
width: this.props.svgWidth,
height: this.props.svgHeight,
position: "absolute",
top: "0px",
left: "0px",
background: "rgba(124, 224, 249, .3)"
}}
ref={this.svgWrap}
>
<Stage
width={this.props.svgWidth}
height={this.props.svgHeight}
>
<Particles particles={this.props.particles} />
</Stage>
</div>
<Footer N={this.props.particles.length} />
</div>
);
}
}
export default App;