Implement rack creation

5 files changed, 53 insertions, 22 deletions

diff --git a/src/components/map/MapStage.js b/src/components/map/MapStage.js
index f3f38917..c4579965 100644
--- a/src/components/map/MapStage.js
+++ b/src/components/map/MapStage.js
@@ -2,7 +2,8 @@ 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 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";
@@ -90,7 +91,13 @@ class MapStage extends React.Component {
                             <GridGroup/>
                         </Group>
                     </Layer>
-                    <HoverTileLayer
+                    <RoomHoverLayer
+                        mainGroupX={this.state.x}
+                        mainGroupY={this.state.y}
+                        mouseX={this.state.mouseX}
+                        mouseY={this.state.mouseY}
+                    />
+                    <ObjectHoverLayer
                         mainGroupX={this.state.x}
                         mainGroupY={this.state.y}
                         mouseX={this.state.mouseX}
diff --git a/src/components/map/elements/TilePlusIcon.js b/src/components/map/elements/TilePlusIcon.js
index 3cc3178c..562d7d15 100644
--- a/src/components/map/elements/TilePlusIcon.js
+++ b/src/components/map/elements/TilePlusIcon.js
@@ -1,32 +1,34 @@
+import PropTypes from "prop-types";
 import React from "react";
 import {Group, Line} from "react-konva";
 import {TILE_PLUS_COLOR} from "../../../colors/index";
-import Shapes from "../../../shapes/index";
-import {TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
+import {OBJECT_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
 
-const TilePlusIcon = ({positionX, positionY}) => {
+const TilePlusIcon = ({pixelX, pixelY}) => {
     const linePoints = [
         [
-            (positionX + 0.5) * TILE_SIZE_IN_PIXELS,
-            positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS,
-            (positionX + 0.5) * TILE_SIZE_IN_PIXELS,
-            (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
+            pixelX + 0.5 * TILE_SIZE_IN_PIXELS,
+            pixelY + OBJECT_MARGIN_IN_PIXELS,
+            pixelX + 0.5 * TILE_SIZE_IN_PIXELS,
+            pixelY + TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
         ],
         [
-            positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS,
-            (positionY + 0.5) * TILE_SIZE_IN_PIXELS,
-            (positionX + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
-            (positionY + 0.5) * TILE_SIZE_IN_PIXELS,
+            pixelX + OBJECT_MARGIN_IN_PIXELS,
+            pixelY + 0.5 * TILE_SIZE_IN_PIXELS,
+            pixelX + TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
+            pixelY + 0.5 * TILE_SIZE_IN_PIXELS,
         ],
     ];
     return (
         <Group>
-            {linePoints.map(points => (
+            {linePoints.map((points, index) => (
                 <Line
+                    key={index}
                     points={points}
                     lineCap="round"
                     stroke={TILE_PLUS_COLOR}
                     strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS}
+                    listening={false}
                 />
             ))}
         </Group>
@@ -34,7 +36,8 @@ const TilePlusIcon = ({positionX, positionY}) => {
 };
 
 TilePlusIcon.propTypes = {
-    wallSegment: Shapes.WallSegment,
+    pixelX: PropTypes.number,
+    pixelY: PropTypes.number,
 };
 
 export default TilePlusIcon;
diff --git a/src/components/map/layers/HoverTileLayerComponent.js b/src/components/map/layers/HoverLayerComponent.js
index bd07596a..861d2b9a 100644
--- a/src/components/map/layers/HoverTileLayerComponent.js
+++ b/src/components/map/layers/HoverLayerComponent.js
@@ -4,14 +4,14 @@ import {Layer} from "react-konva";
 import HoverTile from "../elements/HoverTile";
 import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
 
-class HoverTileLayerComponent extends React.Component {
+class HoverLayerComponent extends React.Component {
     static propTypes = {
         mouseX: PropTypes.number.isRequired,
         mouseY: PropTypes.number.isRequired,
         mainGroupX: PropTypes.number.isRequired,
         mainGroupY: PropTypes.number.isRequired,
+        isEnabled: PropTypes.func.isRequired,
         onClick: PropTypes.func.isRequired,
-        containsRack: PropTypes.bool,
     };
 
     state = {
@@ -21,7 +21,7 @@ class HoverTileLayerComponent extends React.Component {
     };
 
     componentDidUpdate() {
-        if (this.props.currentRoomInConstruction === -1) {
+        if (!this.props.isEnabled()) {
             return;
         }
 
@@ -34,7 +34,7 @@ class HoverTileLayerComponent extends React.Component {
     }
 
     render() {
-        if (this.props.currentRoomInConstruction === -1) {
+        if (!this.props.isEnabled()) {
             return <Layer/>;
         }
 
@@ -44,14 +44,16 @@ class HoverTileLayerComponent extends React.Component {
         const pixelY = positionY * TILE_SIZE_IN_PIXELS + this.props.mainGroupY;
 
         return (
-            <Layer opacity={0.4}>
+            <Layer opacity={0.6}>
                 <HoverTile
                     pixelX={pixelX} pixelY={pixelY}
-                    isValid={this.state.validity} onClick={() => this.props.onClick(positionX, positionY)}
+                    isValid={this.state.validity}
+                    onClick={() => this.state.validity ? this.props.onClick(positionX, positionY) : undefined}
                 />
+                {this.props.children ? React.cloneElement(this.props.children, {pixelX, pixelY}) : undefined}
             </Layer>
         );
     }
 }
 
-export default HoverTileLayerComponent;
+export default HoverLayerComponent;
diff --git a/src/components/map/layers/ObjectHoverLayerComponent.js b/src/components/map/layers/ObjectHoverLayerComponent.js
new file mode 100644
index 00000000..91757cb3
--- /dev/null
+++ b/src/components/map/layers/ObjectHoverLayerComponent.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import TilePlusIcon from "../elements/TilePlusIcon";
+import HoverLayerComponent from "./HoverLayerComponent";
+
+const ObjectHoverLayerComponent = (props) => (
+    <HoverLayerComponent {...props}>
+        <TilePlusIcon/>
+    </HoverLayerComponent>
+);
+
+export default ObjectHoverLayerComponent;
diff --git a/src/components/map/layers/RoomHoverLayerComponent.js b/src/components/map/layers/RoomHoverLayerComponent.js
new file mode 100644
index 00000000..2133c8d8
--- /dev/null
+++ b/src/components/map/layers/RoomHoverLayerComponent.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import HoverLayerComponent from "./HoverLayerComponent";
+
+const RoomHoverLayerComponent = (props) => (
+    <HoverLayerComponent {...props}/>
+);
+
+export default RoomHoverLayerComponent;