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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import React from "react";
import {Group, Layer, Stage} from "react-konva";
import {Shortcuts} from "react-shortcuts";
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_MOVE_PIXELS_PER_EVENT, 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});
}
handleShortcuts(action) {
switch (action) {
case "MOVE_LEFT":
this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0);
break;
case "MOVE_RIGHT":
this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0);
break;
case "MOVE_UP":
this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT);
break;
case "MOVE_DOWN":
this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT);
break;
default:
break;
}
}
moveWithDelta(deltaX, deltaY) {
const updatedPosition = {
x: this.state.x + deltaX > 0 ? 0 :
(this.state.x + deltaX < -MAP_SIZE_IN_PIXELS + this.state.width
? -MAP_SIZE_IN_PIXELS + this.state.width : this.state.x + deltaX),
y: this.state.y + deltaY > 0 ? 0 :
(this.state.y + deltaY < -MAP_SIZE_IN_PIXELS + this.state.height
? -MAP_SIZE_IN_PIXELS + this.state.height : this.state.y + deltaY)
};
this.setState(updatedPosition);
return updatedPosition;
}
render() {
return (
<Shortcuts name="MAP" handler={this.handleShortcuts.bind(this)} targetNodeSelector="body">
<Stage
ref={(stage) => {this.stage = stage;}}
width={this.state.width}
height={this.state.height}
onMouseMove={this.updateMousePosition.bind(this)}
>
<Layer>
<Group x={this.state.x} y={this.state.y}>
<Backdrop/>
<DatacenterContainer/>
<GridGroup/>
</Group>
</Layer>
<HoverTileLayer
mainGroupX={this.state.x}
mainGroupY={this.state.y}
mouseX={this.state.mouseX}
mouseY={this.state.mouseY}
/>
</Stage>
</Shortcuts>
)
}
}
export default MapStage;
|
