diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/map/MapConstants.js | 1 | ||||
| -rw-r--r-- | src/components/map/elements/TileObject.js | 14 | ||||
| -rw-r--r-- | src/components/map/elements/TilePlusIcon.js | 40 | ||||
| -rw-r--r-- | src/components/map/groups/RackGroup.js | 2 | ||||
| -rw-r--r-- | src/components/map/layers/HoverTileLayerComponent.js | 12 |
5 files changed, 60 insertions, 9 deletions
diff --git a/src/components/map/MapConstants.js b/src/components/map/MapConstants.js index 69fdb419..c8a9810b 100644 --- a/src/components/map/MapConstants.js +++ b/src/components/map/MapConstants.js @@ -8,5 +8,6 @@ export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXE export const GRID_LINE_WIDTH_IN_PIXELS = 2; export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 8; export const OBJECT_BORDER_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 12; +export const TILE_PLUS_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 10; export const MAP_MOVE_PIXELS_PER_EVENT = 20; diff --git a/src/components/map/elements/TileObject.js b/src/components/map/elements/TileObject.js index 1517ef97..b1d3315e 100644 --- a/src/components/map/elements/TileObject.js +++ b/src/components/map/elements/TileObject.js @@ -1,24 +1,24 @@ import PropTypes from "prop-types"; import React from "react"; import {Rect} from "react-konva"; -import {OBJECT_BORDER_COLOR, ROOM_DEFAULT_COLOR} from "../../../colors/index"; -import Shapes from "../../../shapes/index"; +import {OBJECT_BORDER_COLOR} from "../../../colors/index"; import {OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants"; -const TileObject = ({tile, color}) => ( +const TileObject = ({positionX, positionY, color}) => ( <Rect - x={tile.positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS} - y={tile.positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS} + x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS} + y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS} width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2} height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2} - fill={ROOM_DEFAULT_COLOR} + fill={color} stroke={OBJECT_BORDER_COLOR} strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS} /> ); TileObject.propTypes = { - tile: Shapes.Tile, + positionX: PropTypes.number.isRequired, + positionY: PropTypes.number.isRequired, color: PropTypes.string.isRequired, }; diff --git a/src/components/map/elements/TilePlusIcon.js b/src/components/map/elements/TilePlusIcon.js new file mode 100644 index 00000000..3cc3178c --- /dev/null +++ b/src/components/map/elements/TilePlusIcon.js @@ -0,0 +1,40 @@ +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"; + +const TilePlusIcon = ({positionX, positionY}) => { + 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, + ], + [ + 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, + ], + ]; + return ( + <Group> + {linePoints.map(points => ( + <Line + points={points} + lineCap="round" + stroke={TILE_PLUS_COLOR} + strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS} + /> + ))} + </Group> + ) +}; + +TilePlusIcon.propTypes = { + wallSegment: Shapes.WallSegment, +}; + +export default TilePlusIcon; diff --git a/src/components/map/groups/RackGroup.js b/src/components/map/groups/RackGroup.js index 9bc28331..9583b234 100644 --- a/src/components/map/groups/RackGroup.js +++ b/src/components/map/groups/RackGroup.js @@ -6,7 +6,7 @@ import TileObject from "../elements/TileObject"; const RackGroup = ({tile}) => ( <Group> - <TileObject tile={tile} color={RACK_BACKGROUND_COLOR}/> + <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR}/> </Group> ); diff --git a/src/components/map/layers/HoverTileLayerComponent.js b/src/components/map/layers/HoverTileLayerComponent.js index a4d9446a..bd07596a 100644 --- a/src/components/map/layers/HoverTileLayerComponent.js +++ b/src/components/map/layers/HoverTileLayerComponent.js @@ -1,9 +1,19 @@ +import PropTypes from "prop-types"; import React from 'react'; import {Layer} from "react-konva"; import HoverTile from "../elements/HoverTile"; import {TILE_SIZE_IN_PIXELS} from "../MapConstants"; class HoverTileLayerComponent extends React.Component { + static propTypes = { + mouseX: PropTypes.number.isRequired, + mouseY: PropTypes.number.isRequired, + mainGroupX: PropTypes.number.isRequired, + mainGroupY: PropTypes.number.isRequired, + onClick: PropTypes.func.isRequired, + containsRack: PropTypes.bool, + }; + state = { positionX: -1, positionY: -1, @@ -34,7 +44,7 @@ class HoverTileLayerComponent extends React.Component { const pixelY = positionY * TILE_SIZE_IN_PIXELS + this.props.mainGroupY; return ( - <Layer> + <Layer opacity={0.4}> <HoverTile pixelX={pixelX} pixelY={pixelY} isValid={this.state.validity} onClick={() => this.props.onClick(positionX, positionY)} |