blob: 541df1d653019cb6400c31824033d73f613b3996 (
plain)
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
|
import React from "react";
import {Group, Layer, Stage} from "react-konva";
import DatacenterContainer from "../../containers/map/DatacenterContainer";
import HoverTileLayer from "../../containers/map/layers/HoverTileLayer";
import jQuery from "../../util/jquery";
import {NAVBAR_HEIGHT} from "../navigation/Navbar";
import Backdrop from "./elements/Backdrop";
import GridGroup from "./groups/GridGroup";
import {MAP_SIZE_IN_PIXELS} from "./MapConstants";
class MapStage extends React.Component {
state = {
width: 600,
height: 400,
x: 0,
y: 0,
mouseX: 0,
mouseY: 0
};
componentWillMount() {
this.updateDimensions();
}
componentDidMount() {
window.addEventListener("resize", this.updateDimensions.bind(this));
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateDimensions.bind(this));
}
updateDimensions() {
this.setState({width: jQuery(window).width(), height: jQuery(window).height() - NAVBAR_HEIGHT});
}
updateMousePosition() {
const mousePos = this.stage.getStage().getPointerPosition();
this.setState({mouseX: mousePos.x, mouseY: mousePos.y});
}
dragBoundFunc(pos) {
const updatedPosition = {
x: pos.x > 0 ? 0 :
(pos.x < -MAP_SIZE_IN_PIXELS + this.state.width ? -MAP_SIZE_IN_PIXELS + this.state.width : pos.x),
y: pos.y > 0 ? 0 :
(pos.y < -MAP_SIZE_IN_PIXELS + this.state.height ? -MAP_SIZE_IN_PIXELS + this.state.height : pos.y)
};
this.setState(updatedPosition);
return updatedPosition;
}
render() {
return (
<Stage ref={(stage) => {this.stage = stage;}}
width={this.state.width}
height={this.state.height}
onMouseMove={this.updateMousePosition.bind(this)}>
<Layer>
<Group draggable={true} dragBoundFunc={this.dragBoundFunc.bind(this)}>
<Backdrop/>
<DatacenterContainer/>
<GridGroup/>
</Group>
</Layer>
<HoverTileLayer
mainGroupX={this.state.x}
mainGroupY={this.state.y}
mouseX={this.state.mouseX}
mouseY={this.state.mouseY}
/>
</Stage>
)
}
}
export default MapStage;
|
