summaryrefslogtreecommitdiff
path: root/src/components/map
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/map')
-rw-r--r--src/components/map/MapStageComponent.js (renamed from src/components/map/MapStage.js)61
-rw-r--r--src/components/map/elements/TilePlusIcon.js21
-rw-r--r--src/components/map/layers/HoverLayerComponent.js17
-rw-r--r--src/components/map/layers/MapLayerComponent.js17
4 files changed, 57 insertions, 59 deletions
diff --git a/src/components/map/MapStage.js b/src/components/map/MapStageComponent.js
index ab2f0839..10d84948 100644
--- a/src/components/map/MapStage.js
+++ b/src/components/map/MapStageComponent.js
@@ -1,13 +1,11 @@
import React from "react";
-import {Group, Layer, Stage} from "react-konva";
+import {Stage} from "react-konva";
import {Shortcuts} from "react-shortcuts";
-import DatacenterContainer from "../../containers/map/DatacenterContainer";
+import MapLayer from "../../containers/map/layers/MapLayer";
import ObjectHoverLayer from "../../containers/map/layers/ObjectHoverLayer";
import RoomHoverLayer from "../../containers/map/layers/RoomHoverLayer";
import jQuery from "../../util/jquery";
import {NAVBAR_HEIGHT} from "../navigation/Navbar";
-import Backdrop from "./elements/Backdrop";
-import GridGroup from "./groups/GridGroup";
import {
MAP_MAX_SCALE,
MAP_MIN_SCALE,
@@ -16,13 +14,8 @@ import {
MAP_SIZE_IN_PIXELS
} from "./MapConstants";
-class MapStage extends React.Component {
+class MapStageComponent extends React.Component {
state = {
- width: 600,
- height: 400,
- x: 0,
- y: 0,
- scale: 1,
mouseX: 0,
mouseY: 0
};
@@ -42,23 +35,23 @@ class MapStage extends React.Component {
}
updateDimensions() {
- this.setState({width: jQuery(window).width(), height: jQuery(window).height() - NAVBAR_HEIGHT});
+ this.props.setMapDimensions(jQuery(window).width(), jQuery(window).height() - NAVBAR_HEIGHT);
}
updateScale(e) {
e.preventDefault();
const mousePointsTo = {
- x: this.state.mouseX / this.state.scale - this.state.x / this.state.scale,
- y: this.state.mouseY / this.state.scale - this.state.y / this.state.scale,
+ x: this.state.mouseX / this.props.mapScale - this.props.mapPosition.x / this.props.mapScale,
+ y: this.state.mouseY / this.props.mapScale - this.props.mapPosition.y / this.props.mapScale,
};
- const newScale = e.deltaY < 0 ? this.state.scale * MAP_SCALE_PER_EVENT : this.state.scale / MAP_SCALE_PER_EVENT;
+ const newScale = e.deltaY < 0 ? this.props.mapScale * MAP_SCALE_PER_EVENT : this.props.mapScale / MAP_SCALE_PER_EVENT;
const boundedScale = Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE);
const newX = -(mousePointsTo.x - this.state.mouseX / boundedScale) * boundedScale;
const newY = -(mousePointsTo.y - this.state.mouseY / boundedScale) * boundedScale;
this.setPositionWithBoundsCheck(newX, newY);
- this.setState({scale: boundedScale});
+ this.props.setMapScale(boundedScale);
}
updateMousePosition() {
@@ -86,19 +79,19 @@ class MapStage extends React.Component {
}
moveWithDelta(deltaX, deltaY) {
- this.setPositionWithBoundsCheck(this.state.x + deltaX, this.state.y + deltaY);
+ this.setPositionWithBoundsCheck(this.props.mapPosition.x + deltaX, this.props.mapPosition.y + deltaY);
}
setPositionWithBoundsCheck(newX, newY) {
- const scaledMapSize = MAP_SIZE_IN_PIXELS * this.state.scale;
- const updatedPosition = {
- x: newX > 0 ? 0 :
- (newX < -scaledMapSize + this.state.width ? -scaledMapSize + this.state.width : newX),
- y: newY > 0 ? 0 :
- (newY < -scaledMapSize + this.state.height ? -scaledMapSize + this.state.height : newY)
- };
+ const scaledMapSize = MAP_SIZE_IN_PIXELS * this.props.mapScale;
+ const updatedX = newX > 0 ? 0 :
+ (newX < -scaledMapSize + this.props.mapDimensions.width
+ ? -scaledMapSize + this.props.mapDimensions.width : newX);
+ const updatedY = newY > 0 ? 0 :
+ (newY < -scaledMapSize + this.props.mapDimensions.height
+ ? -scaledMapSize + this.props.mapDimensions.height : newY);
- this.setState(updatedPosition);
+ this.props.setMapPosition(updatedX, updatedY);
}
render() {
@@ -106,30 +99,18 @@ class MapStage extends React.Component {
<Shortcuts name="MAP" handler={this.handleShortcuts.bind(this)} targetNodeSelector="body">
<Stage
ref={(stage) => {this.stage = stage;}}
- width={this.state.width}
- height={this.state.height}
+ width={this.props.mapDimensions.width}
+ height={this.props.mapDimensions.height}
onMouseMove={this.updateMousePosition.bind(this)}
>
- <Layer>
- <Group x={this.state.x} y={this.state.y} scaleX={this.state.scale} scaleY={this.state.scale}>
- <Backdrop/>
- <DatacenterContainer/>
- <GridGroup/>
- </Group>
- </Layer>
+ <MapLayer/>
<RoomHoverLayer
- mainGroupX={this.state.x}
- mainGroupY={this.state.y}
mouseX={this.state.mouseX}
mouseY={this.state.mouseY}
- scale={this.state.scale}
/>
<ObjectHoverLayer
- mainGroupX={this.state.x}
- mainGroupY={this.state.y}
mouseX={this.state.mouseX}
mouseY={this.state.mouseY}
- scale={this.state.scale}
/>
</Stage>
</Shortcuts>
@@ -137,4 +118,4 @@ class MapStage extends React.Component {
}
}
-export default MapStage;
+export default MapStageComponent;
diff --git a/src/components/map/elements/TilePlusIcon.js b/src/components/map/elements/TilePlusIcon.js
index 3327525c..ed5ef5b5 100644
--- a/src/components/map/elements/TilePlusIcon.js
+++ b/src/components/map/elements/TilePlusIcon.js
@@ -4,19 +4,19 @@ import {Group, Line} from "react-konva";
import {TILE_PLUS_COLOR} from "../../../colors/index";
import {TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
-const TilePlusIcon = ({pixelX, pixelY, scale}) => {
+const TilePlusIcon = ({pixelX, pixelY, mapScale}) => {
const linePoints = [
[
- pixelX + 0.5 * TILE_SIZE_IN_PIXELS * scale,
- pixelY + TILE_PLUS_MARGIN_IN_PIXELS * scale,
- pixelX + 0.5 * TILE_SIZE_IN_PIXELS * scale,
- pixelY + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
+ pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+ pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+ pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+ pixelY + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
],
[
- pixelX + TILE_PLUS_MARGIN_IN_PIXELS * scale,
- pixelY + 0.5 * TILE_SIZE_IN_PIXELS * scale,
- pixelX + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
- pixelY + 0.5 * TILE_SIZE_IN_PIXELS * scale,
+ pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+ pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+ pixelX + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+ pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
],
];
return (
@@ -27,7 +27,7 @@ const TilePlusIcon = ({pixelX, pixelY, scale}) => {
points={points}
lineCap="round"
stroke={TILE_PLUS_COLOR}
- strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * scale}
+ strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale}
listening={false}
/>
))}
@@ -38,6 +38,7 @@ const TilePlusIcon = ({pixelX, pixelY, scale}) => {
TilePlusIcon.propTypes = {
pixelX: PropTypes.number,
pixelY: PropTypes.number,
+ mapScale: PropTypes.number,
};
export default TilePlusIcon;
diff --git a/src/components/map/layers/HoverLayerComponent.js b/src/components/map/layers/HoverLayerComponent.js
index 54a63383..aa2e8313 100644
--- a/src/components/map/layers/HoverLayerComponent.js
+++ b/src/components/map/layers/HoverLayerComponent.js
@@ -8,9 +8,8 @@ class HoverLayerComponent extends React.Component {
static propTypes = {
mouseX: PropTypes.number.isRequired,
mouseY: PropTypes.number.isRequired,
- mainGroupX: PropTypes.number.isRequired,
- mainGroupY: PropTypes.number.isRequired,
- scale: PropTypes.number.isRequired,
+ mapPosition: PropTypes.object.isRequired,
+ mapScale: PropTypes.number.isRequired,
isEnabled: PropTypes.func.isRequired,
onClick: PropTypes.func.isRequired,
};
@@ -26,8 +25,8 @@ class HoverLayerComponent extends React.Component {
return;
}
- const positionX = Math.floor((this.props.mouseX - this.props.mainGroupX) / (this.props.scale * TILE_SIZE_IN_PIXELS));
- const positionY = Math.floor((this.props.mouseY - this.props.mainGroupY) / (this.props.scale * TILE_SIZE_IN_PIXELS));
+ const positionX = Math.floor((this.props.mouseX - this.props.mapPosition.x) / (this.props.mapScale * TILE_SIZE_IN_PIXELS));
+ const positionY = Math.floor((this.props.mouseY - this.props.mapPosition.y) / (this.props.mapScale * TILE_SIZE_IN_PIXELS));
if (positionX !== this.state.positionX || positionY !== this.state.positionY) {
this.setState({positionX, positionY, validity: this.props.isValid(positionX, positionY)});
@@ -39,21 +38,21 @@ class HoverLayerComponent extends React.Component {
return <Layer/>;
}
- const pixelX = this.props.scale * this.state.positionX * TILE_SIZE_IN_PIXELS + this.props.mainGroupX;
- const pixelY = this.props.scale * this.state.positionY * TILE_SIZE_IN_PIXELS + this.props.mainGroupY;
+ const pixelX = this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS + this.props.mapPosition.x;
+ const pixelY = this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS + this.props.mapPosition.y;
return (
<Layer opacity={0.6}>
<HoverTile
pixelX={pixelX}
pixelY={pixelY}
- scale={this.props.scale}
+ scale={this.props.mapScale}
isValid={this.state.validity}
onClick={() => this.state.validity ?
this.props.onClick(this.state.positionX, this.state.positionY) : undefined}
/>
{this.props.children ?
- React.cloneElement(this.props.children, {pixelX, pixelY, scale: this.props.scale}) :
+ React.cloneElement(this.props.children, {pixelX, pixelY, scale: this.props.mapScale}) :
undefined
}
</Layer>
diff --git a/src/components/map/layers/MapLayerComponent.js b/src/components/map/layers/MapLayerComponent.js
new file mode 100644
index 00000000..3476bbc9
--- /dev/null
+++ b/src/components/map/layers/MapLayerComponent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {Group, Layer} from "react-konva";
+import DatacenterContainer from "../../../containers/map/DatacenterContainer";
+import Backdrop from "../elements/Backdrop";
+import GridGroup from "../groups/GridGroup";
+
+const MapLayerComponent = ({mapPosition, mapScale}) => (
+ <Layer>
+ <Group x={mapPosition.x} y={mapPosition.y} scaleX={mapScale} scaleY={mapScale}>
+ <Backdrop/>
+ <DatacenterContainer/>
+ <GridGroup/>
+ </Group>
+ </Layer>
+);
+
+export default MapLayerComponent;
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 17:40:16 +0000