Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
82 lines (73 sloc) 2.29 KB
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;
You can’t perform that action at this time.