summaryrefslogtreecommitdiff
path: root/src/components/map
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/map')
-rw-r--r--src/components/map/MapStage.js31
-rw-r--r--src/components/map/elements/HoverTile.js25
-rw-r--r--src/components/map/elements/RoomTile.js6
-rw-r--r--src/components/map/groups/DatacenterGroup.js16
-rw-r--r--src/components/map/groups/RoomGroup.js39
-rw-r--r--src/components/map/groups/TileGroup.js8
-rw-r--r--src/components/map/groups/WallGroup.js22
-rw-r--r--src/components/map/layers/HoverTileLayerComponent.js27
8 files changed, 139 insertions, 35 deletions
diff --git a/src/components/map/MapStage.js b/src/components/map/MapStage.js
index 644b4c54..541df1d6 100644
--- a/src/components/map/MapStage.js
+++ b/src/components/map/MapStage.js
@@ -1,6 +1,7 @@
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";
@@ -10,7 +11,11 @@ import {MAP_SIZE_IN_PIXELS} from "./MapConstants";
class MapStage extends React.Component {
state = {
width: 600,
- height: 400
+ height: 400,
+ x: 0,
+ y: 0,
+ mouseX: 0,
+ mouseY: 0
};
componentWillMount() {
@@ -29,18 +34,30 @@ class MapStage extends React.Component {
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) {
- return {
+ 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 width={this.state.width} height={this.state.height}>
+ <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/>
@@ -48,6 +65,12 @@ class MapStage extends React.Component {
<GridGroup/>
</Group>
</Layer>
+ <HoverTileLayer
+ mainGroupX={this.state.x}
+ mainGroupY={this.state.y}
+ mouseX={this.state.mouseX}
+ mouseY={this.state.mouseY}
+ />
</Stage>
)
}
diff --git a/src/components/map/elements/HoverTile.js b/src/components/map/elements/HoverTile.js
new file mode 100644
index 00000000..a8bb2085
--- /dev/null
+++ b/src/components/map/elements/HoverTile.js
@@ -0,0 +1,25 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Rect} from "react-konva";
+import {ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR} from "../../../colors/index";
+import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
+
+const HoverTile = ({pixelX, pixelY, isValid, onClick}) => (
+ <Rect
+ x={pixelX}
+ y={pixelY}
+ width={TILE_SIZE_IN_PIXELS}
+ height={TILE_SIZE_IN_PIXELS}
+ fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
+ onClick={onClick}
+ />
+);
+
+HoverTile.propTypes = {
+ pixelX: PropTypes.number.isRequired,
+ pixelY: PropTypes.number.isRequired,
+ isValid: PropTypes.bool.isRequired,
+ onClick: PropTypes.func.isRequired,
+};
+
+export default HoverTile;
diff --git a/src/components/map/elements/RoomTile.js b/src/components/map/elements/RoomTile.js
index 759dcf35..4d5e50fc 100644
--- a/src/components/map/elements/RoomTile.js
+++ b/src/components/map/elements/RoomTile.js
@@ -1,16 +1,16 @@
import React from "react";
import {Rect} from "react-konva";
-import {ROOM_DEFAULT_COLOR} from "../../../colors/index";
+import {ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR} from "../../../colors/index";
import Shapes from "../../../shapes/index";
import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
-const RoomTile = ({tile}) => (
+const RoomTile = ({tile, newTile}) => (
<Rect
x={tile.positionX * TILE_SIZE_IN_PIXELS}
y={tile.positionY * TILE_SIZE_IN_PIXELS}
width={TILE_SIZE_IN_PIXELS}
height={TILE_SIZE_IN_PIXELS}
- fill={ROOM_DEFAULT_COLOR}
+ fill={newTile ? ROOM_IN_CONSTRUCTION_COLOR : ROOM_DEFAULT_COLOR}
/>
);
diff --git a/src/components/map/groups/DatacenterGroup.js b/src/components/map/groups/DatacenterGroup.js
index 2f4dc2eb..0830ac4e 100644
--- a/src/components/map/groups/DatacenterGroup.js
+++ b/src/components/map/groups/DatacenterGroup.js
@@ -12,8 +12,8 @@ const DatacenterGroup = ({datacenter, interactionLevel}) => {
if (interactionLevel.mode === "BUILDING") {
return (
<Group>
- {datacenter.rooms.map(room => (
- <RoomContainer key={room.id} room={room}/>
+ {datacenter.roomIds.map(roomId => (
+ <RoomContainer key={roomId} roomId={roomId}/>
))}
</Group>
);
@@ -21,14 +21,14 @@ const DatacenterGroup = ({datacenter, interactionLevel}) => {
return (
<Group>
- {datacenter.rooms
- .filter(room => room.id !== interactionLevel.roomId)
- .map(room => <RoomContainer key={room.id} room={room}/>)
+ {datacenter.roomIds
+ .filter(roomId => roomId !== interactionLevel.roomId)
+ .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)
}
{interactionLevel.mode === "ROOM" ? <GrayContainer/> : null}
- {datacenter.rooms
- .filter(room => room.id === interactionLevel.roomId)
- .map(room => <RoomContainer key={room.id} room={room}/>)
+ {datacenter.roomIds
+ .filter(roomId => roomId === interactionLevel.roomId)
+ .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)
}
</Group>
);
diff --git a/src/components/map/groups/RoomGroup.js b/src/components/map/groups/RoomGroup.js
index b6c285e9..85d3c7c9 100644
--- a/src/components/map/groups/RoomGroup.js
+++ b/src/components/map/groups/RoomGroup.js
@@ -2,35 +2,40 @@ import React from "react";
import {Group} from "react-konva";
import GrayContainer from "../../../containers/map/GrayContainer";
import TileContainer from "../../../containers/map/TileContainer";
+import WallContainer from "../../../containers/map/WallContainer";
import Shapes from "../../../shapes/index";
-import {deriveWallLocations} from "../../../util/tile-calculations";
-import WallSegment from "../elements/WallSegment";
-const RoomGroup = ({room, interactionLevel, onClick}) => {
+const RoomGroup = ({room, interactionLevel, currentRoomInConstruction, onClick}) => {
+ if (currentRoomInConstruction === room.id) {
+ return (
+ <Group onClick={onClick}>
+ {room.tileIds.map(tileId => (
+ <TileContainer key={tileId} tileId={tileId} newTile={true}/>
+ ))}
+ </Group>
+ );
+ }
+
return (
- <Group
- onClick={onClick}
- >
+ <Group onClick={onClick}>
{(() => {
if (interactionLevel.mode === "OBJECT" && interactionLevel.roomId === room.id) {
return [
- room.tiles
- .filter(tile => tile.id !== interactionLevel.tileId)
- .map(tile => <TileContainer key={tile.id} tile={tile}/>),
+ room.tileIds
+ .filter(tileId => tileId !== interactionLevel.tileId)
+ .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
<GrayContainer key={-1}/>,
- room.tiles
- .filter(tile => tile.id === interactionLevel.tileId)
- .map(tile => <TileContainer key={tile.id} tile={tile}/>)
+ room.tileIds
+ .filter(tileId => tileId === interactionLevel.tileId)
+ .map(tileId => <TileContainer key={tileId} tileId={tileId}/>)
];
} else {
- return room.tiles.map(tile => (
- <TileContainer key={tile.id} tile={tile}/>
+ return room.tileIds.map(tileId => (
+ <TileContainer key={tileId} tileId={tileId}/>
));
}
})()}
- {deriveWallLocations(room).map((wallSegment, index) => (
- <WallSegment key={index} wallSegment={wallSegment}/>
- ))}
+ <WallContainer roomId={room.id}/>
</Group>
);
};
diff --git a/src/components/map/groups/TileGroup.js b/src/components/map/groups/TileGroup.js
index 5920a2b6..8fbdeb31 100644
--- a/src/components/map/groups/TileGroup.js
+++ b/src/components/map/groups/TileGroup.js
@@ -1,10 +1,11 @@
+import PropTypes from "prop-types";
import React from "react";
import {Group} from "react-konva";
import Shapes from "../../../shapes/index";
import RoomTile from "../elements/RoomTile";
import RackGroup from "./RackGroup";
-const TileGroup = ({tile, onClick}) => {
+const TileGroup = ({tile, newTile, onClick}) => {
let tileObject;
switch (tile.objectType) {
case "RACK":
@@ -16,9 +17,9 @@ const TileGroup = ({tile, onClick}) => {
return (
<Group
- onClick={onClick}
+ onClick={() => onClick(tile)}
>
- <RoomTile tile={tile}/>
+ <RoomTile tile={tile} newTile={newTile}/>
{tileObject}
</Group>
);
@@ -26,6 +27,7 @@ const TileGroup = ({tile, onClick}) => {
TileGroup.propTypes = {
tile: Shapes.Tile,
+ newTile: PropTypes.bool,
};
export default TileGroup;
diff --git a/src/components/map/groups/WallGroup.js b/src/components/map/groups/WallGroup.js
new file mode 100644
index 00000000..f21d91a5
--- /dev/null
+++ b/src/components/map/groups/WallGroup.js
@@ -0,0 +1,22 @@
+import PropTypes from "prop-types";
+import React from "react";
+import {Group} from "react-konva";
+import Shapes from "../../../shapes/index";
+import {deriveWallLocations} from "../../../util/tile-calculations";
+import WallSegment from "../elements/WallSegment";
+
+const WallGroup = ({tiles}) => {
+ return (
+ <Group>
+ {deriveWallLocations(tiles).map((wallSegment, index) => (
+ <WallSegment key={index} wallSegment={wallSegment}/>
+ ))}
+ </Group>
+ );
+};
+
+WallGroup.propTypes = {
+ tiles: PropTypes.arrayOf(Shapes.Tile).isRequired,
+};
+
+export default WallGroup;
diff --git a/src/components/map/layers/HoverTileLayerComponent.js b/src/components/map/layers/HoverTileLayerComponent.js
new file mode 100644
index 00000000..691b9733
--- /dev/null
+++ b/src/components/map/layers/HoverTileLayerComponent.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import {Layer} from "react-konva";
+import HoverTile from "../elements/HoverTile";
+import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
+
+const HoverTileLayerComponent = ({mainGroupX, mainGroupY, mouseX, mouseY, currentRoomInConstruction, isValid, onClick}) => {
+ if (currentRoomInConstruction === -1) {
+ return <Layer/>
+ }
+
+ const positionX = Math.floor((mouseX - mainGroupX) / TILE_SIZE_IN_PIXELS);
+ const positionY = Math.floor((mouseY - mainGroupY) / TILE_SIZE_IN_PIXELS);
+ const pixelX = positionX * TILE_SIZE_IN_PIXELS + mainGroupX;
+ const pixelY = positionY * TILE_SIZE_IN_PIXELS + mainGroupY;
+ const validity = isValid(positionX, positionY);
+
+ return (
+ <Layer>
+ <HoverTile
+ pixelX={pixelX} pixelY={pixelY}
+ isValid={validity} onClick={() => onClick(positionX, positionY)}
+ />
+ </Layer>
+ );
+};
+
+export default HoverTileLayerComponent;
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-05 05:50:08 +0000