From 602c3eb9327a3681f5a220e13b8291bb60643cd7 Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Tue, 22 Aug 2017 10:48:01 +0200 Subject: Add tile rendering logic --- package.json | 1 - src/colors/index.js | 7 ++----- src/components/map/MapConstants.js | 4 ++++ src/components/map/elements/MapTile.js | 24 ------------------------ src/components/map/elements/RoomTile.js | 20 ++++++++++++++++++++ src/components/map/elements/TileObject.js | 25 +++++++++++++++++++++++++ src/components/map/groups/RackGroup.js | 17 +++++++++++++++++ src/components/map/groups/TileGroup.js | 29 +++++++++++++++++++++++++++++ 8 files changed, 97 insertions(+), 30 deletions(-) delete mode 100644 src/components/map/elements/MapTile.js create mode 100644 src/components/map/elements/RoomTile.js create mode 100644 src/components/map/elements/TileObject.js create mode 100644 src/components/map/groups/RackGroup.js create mode 100644 src/components/map/groups/TileGroup.js diff --git a/package.json b/package.json index fabe8d2b..10f9fa7c 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,6 @@ "react-dom": "^15.6.1", "react-fontawesome": "^1.6.1", "react-google-login": "^2.9.3", - "react-if": "^2.2.1", "react-konva": "^1.1.4", "react-mailto": "^0.4.0", "react-redux": "^5.0.5", diff --git a/src/colors/index.js b/src/colors/index.js index aa7c0a5d..cc5b86fe 100644 --- a/src/colors/index.js +++ b/src/colors/index.js @@ -9,18 +9,15 @@ export const ROOM_HOVER_INVALID_COLOR = "rgba(255, 102, 0, 0.5)"; export const ROOM_NAME_COLOR = "rgba(245, 245, 245, 1)"; export const ROOM_TYPE_COLOR = "rgba(245, 245, 245, 1)"; +export const OBJECT_BORDER_COLOR = "rgba(0, 0, 0, 1)"; + export const RACK_BACKGROUND_COLOR = "rgba(170, 170, 170, 1)"; -export const RACK_BORDER_COLOR = "rgba(0, 0, 0, 1)"; export const RACK_SPACE_BAR_BACKGROUND_COLOR = "rgba(222, 235, 247, 1)"; export const RACK_SPACE_BAR_FILL_COLOR = "rgba(91, 155, 213, 1)"; export const RACK_ENERGY_BAR_BACKGROUND_COLOR = "rgba(255, 242, 204, 1)"; export const RACK_ENERGY_BAR_FILL_COLOR = "rgba(255, 192, 0, 1)"; - export const COOLING_ITEM_BACKGROUND_COLOR = "rgba(40, 50, 230, 1)"; -export const COOLING_ITEM_BORDER_COLOR = "rgba(0, 0, 0, 1)"; - export const PSU_BACKGROUND_COLOR = "rgba(230, 50, 60, 1)"; -export const PSU_BORDER_COLOR = "rgba(0, 0, 0, 1)"; export const GRAYED_OUT_AREA_COLOR = "rgba(0, 0, 0, 0.6)"; diff --git a/src/components/map/MapConstants.js b/src/components/map/MapConstants.js index 74779c94..3c613da3 100644 --- a/src/components/map/MapConstants.js +++ b/src/components/map/MapConstants.js @@ -2,5 +2,9 @@ export const MAP_SIZE = 50; export const TILE_SIZE_IN_PIXELS = 50; export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS; +export const OBJECT_MARGIN_IN_PIXELS = 5; +export const OBJECT_SIZE_IN_PIXELS = 40; + export const GRID_LINE_WIDTH_IN_PIXELS = 2; export const ROOM_BORDER_WIDTH_IN_PIXELS = 5; +export const OBJECT_BORDER_WIDTH_IN_PIXELS = 5; diff --git a/src/components/map/elements/MapTile.js b/src/components/map/elements/MapTile.js deleted file mode 100644 index b0f4959d..00000000 --- a/src/components/map/elements/MapTile.js +++ /dev/null @@ -1,24 +0,0 @@ -import PropTypes from "prop-types"; -import React from "react"; -import {Group, Rect} from "react-konva"; -import {TILE_SIZE_IN_PIXELS} from "../MapConstants"; - -const MapTile = () => ( - - - -); - -MapTile.propTypes = { - tileX: PropTypes.number.isRequired, - tileY: PropTypes.number.isRequired, - fillColor: PropTypes.string.isRequired, -}; - -export default MapTile; diff --git a/src/components/map/elements/RoomTile.js b/src/components/map/elements/RoomTile.js new file mode 100644 index 00000000..aa837def --- /dev/null +++ b/src/components/map/elements/RoomTile.js @@ -0,0 +1,20 @@ +import React from "react"; +import {Rect} from "react-konva"; +import {ROOM_DEFAULT_COLOR} from "../../../colors/index"; +import Shapes from "../../../shapes/index"; + +const RoomTile = ({tile}) => ( + +); + +RoomTile.propTypes = { + tile: Shapes.Tile, +}; + +export default RoomTile; diff --git a/src/components/map/elements/TileObject.js b/src/components/map/elements/TileObject.js new file mode 100644 index 00000000..8703011c --- /dev/null +++ b/src/components/map/elements/TileObject.js @@ -0,0 +1,25 @@ +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_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS} from "../MapConstants"; + +const TileObject = ({tile, color}) => ( + +); + +TileObject.propTypes = { + tile: Shapes.Tile, + color: PropTypes.string.isRequired, +}; + +export default TileObject; diff --git a/src/components/map/groups/RackGroup.js b/src/components/map/groups/RackGroup.js new file mode 100644 index 00000000..9bc28331 --- /dev/null +++ b/src/components/map/groups/RackGroup.js @@ -0,0 +1,17 @@ +import React from "react"; +import {Group} from "react-konva"; +import {RACK_BACKGROUND_COLOR} from "../../../colors/index"; +import Shapes from "../../../shapes/index"; +import TileObject from "../elements/TileObject"; + +const RackGroup = ({tile}) => ( + + + +); + +RackGroup.propTypes = { + tile: Shapes.Tile, +}; + +export default RackGroup; diff --git a/src/components/map/groups/TileGroup.js b/src/components/map/groups/TileGroup.js new file mode 100644 index 00000000..7493f953 --- /dev/null +++ b/src/components/map/groups/TileGroup.js @@ -0,0 +1,29 @@ +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}) => { + let tileObject; + switch (tile.objectType) { + case "RACK": + tileObject = ; + break; + default: + tileObject = null; + } + + return ( + + + {tileObject} + + ); +}; + +TileGroup.propTypes = { + tile: Shapes.Tile, +}; + +export default TileGroup; -- cgit v1.2.3