Implement rack creation

1 files changed, 16 insertions, 13 deletions

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;