From de8f12d74faef5fa3f9e38d1340948cab2d06ea3 Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Wed, 1 Jul 2020 13:33:31 +0200 Subject: Manually generate IDs --- frontend/src/components/app/map/LoadingScreen.js | 16 +- frontend/src/components/app/map/MapConstants.js | 44 ++--- .../src/components/app/map/MapStageComponent.js | 218 ++++++++++----------- .../app/map/controls/ExportCanvasComponent.js | 20 +- .../app/map/controls/ScaleIndicatorComponent.js | 22 +-- .../app/map/controls/ScaleIndicatorComponent.sass | 14 +- .../app/map/controls/ToolPanelComponent.js | 20 +- .../app/map/controls/ToolPanelComponent.sass | 8 +- .../app/map/controls/ZoomControlComponent.js | 28 +-- .../src/components/app/map/elements/Backdrop.js | 26 +-- .../src/components/app/map/elements/GrayLayer.js | 28 +-- .../src/components/app/map/elements/HoverTile.js | 47 +++-- .../components/app/map/elements/ImageComponent.js | 80 ++++---- .../src/components/app/map/elements/RackFillBar.js | 160 +++++++-------- .../src/components/app/map/elements/RoomTile.js | 30 +-- .../src/components/app/map/elements/TileObject.js | 44 ++--- .../components/app/map/elements/TilePlusIcon.js | 88 ++++----- .../src/components/app/map/elements/WallSegment.js | 66 +++---- .../components/app/map/groups/DatacenterGroup.js | 66 +++---- .../src/components/app/map/groups/GridGroup.js | 65 +++--- .../src/components/app/map/groups/RackGroup.js | 74 +++---- .../src/components/app/map/groups/RoomGroup.js | 100 +++++----- .../src/components/app/map/groups/TileGroup.js | 69 ++++--- .../src/components/app/map/groups/WallGroup.js | 34 ++-- .../app/map/layers/HoverLayerComponent.js | 146 +++++++------- .../components/app/map/layers/MapLayerComponent.js | 38 ++-- .../app/map/layers/ObjectHoverLayerComponent.js | 16 +- .../app/map/layers/RoomHoverLayerComponent.js | 8 +- 28 files changed, 778 insertions(+), 797 deletions(-) (limited to 'frontend/src/components/app/map') diff --git a/frontend/src/components/app/map/LoadingScreen.js b/frontend/src/components/app/map/LoadingScreen.js index 9f379e0b..ca159982 100644 --- a/frontend/src/components/app/map/LoadingScreen.js +++ b/frontend/src/components/app/map/LoadingScreen.js @@ -1,11 +1,11 @@ -import React from "react"; -import FontAwesome from "react-fontawesome"; +import React from 'react' +import FontAwesome from 'react-fontawesome' const LoadingScreen = () => ( -
- - Loading your datacenter... -
-); +
+ + Loading your datacenter... +
+) -export default LoadingScreen; +export default LoadingScreen diff --git a/frontend/src/components/app/map/MapConstants.js b/frontend/src/components/app/map/MapConstants.js index 32438b5e..286920e2 100644 --- a/frontend/src/components/app/map/MapConstants.js +++ b/frontend/src/components/app/map/MapConstants.js @@ -1,29 +1,29 @@ -export const MAP_SIZE = 50; -export const TILE_SIZE_IN_PIXELS = 100; -export const TILE_SIZE_IN_METERS = 0.5; -export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS; +export const MAP_SIZE = 50 +export const TILE_SIZE_IN_PIXELS = 100 +export const TILE_SIZE_IN_METERS = 0.5 +export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS -export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5; -export const TILE_PLUS_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 3; +export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5 +export const TILE_PLUS_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 3 export const OBJECT_SIZE_IN_PIXELS = - TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2; + TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 -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 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 SIDEBAR_WIDTH = 350; -export const VIEWPORT_PADDING = 50; +export const SIDEBAR_WIDTH = 350 +export const VIEWPORT_PADDING = 50 -export const RACK_FILL_ICON_WIDTH = OBJECT_SIZE_IN_PIXELS / 3; -export const RACK_FILL_ICON_OPACITY = 0.8; +export const RACK_FILL_ICON_WIDTH = OBJECT_SIZE_IN_PIXELS / 3 +export const RACK_FILL_ICON_OPACITY = 0.8 -export const MAP_MOVE_PIXELS_PER_EVENT = 20; -export const MAP_SCALE_PER_EVENT = 1.1; -export const MAP_MIN_SCALE = 0.5; -export const MAP_MAX_SCALE = 1.5; +export const MAP_MOVE_PIXELS_PER_EVENT = 20 +export const MAP_SCALE_PER_EVENT = 1.1 +export const MAP_MIN_SCALE = 0.5 +export const MAP_MAX_SCALE = 1.5 -export const MAX_NUM_UNITS_PER_MACHINE = 4; -export const DEFAULT_RACK_SLOT_CAPACITY = 42; -export const DEFAULT_RACK_POWER_CAPACITY = 10000; +export const MAX_NUM_UNITS_PER_MACHINE = 4 +export const DEFAULT_RACK_SLOT_CAPACITY = 42 +export const DEFAULT_RACK_POWER_CAPACITY = 10000 diff --git a/frontend/src/components/app/map/MapStageComponent.js b/frontend/src/components/app/map/MapStageComponent.js index 67b3349c..455604e4 100644 --- a/frontend/src/components/app/map/MapStageComponent.js +++ b/frontend/src/components/app/map/MapStageComponent.js @@ -1,126 +1,126 @@ -import React from "react"; -import { Stage } from "react-konva"; -import { Shortcuts } from "react-shortcuts"; -import MapLayer from "../../../containers/app/map/layers/MapLayer"; -import ObjectHoverLayer from "../../../containers/app/map/layers/ObjectHoverLayer"; -import RoomHoverLayer from "../../../containers/app/map/layers/RoomHoverLayer"; -import jQuery from "../../../util/jquery"; -import { NAVBAR_HEIGHT } from "../../navigation/Navbar"; -import { MAP_MOVE_PIXELS_PER_EVENT } from "./MapConstants"; -import { Provider } from "react-redux"; -import { store } from "../../../store/configure-store"; +import React from 'react' +import { Stage } from 'react-konva' +import { Shortcuts } from 'react-shortcuts' +import MapLayer from '../../../containers/app/map/layers/MapLayer' +import ObjectHoverLayer from '../../../containers/app/map/layers/ObjectHoverLayer' +import RoomHoverLayer from '../../../containers/app/map/layers/RoomHoverLayer' +import jQuery from '../../../util/jquery' +import { NAVBAR_HEIGHT } from '../../navigation/Navbar' +import { MAP_MOVE_PIXELS_PER_EVENT } from './MapConstants' +import { Provider } from 'react-redux' +import { store } from '../../../store/configure-store' class MapStageComponent extends React.Component { - state = { - mouseX: 0, - mouseY: 0 - }; + state = { + mouseX: 0, + mouseY: 0, + } - constructor(props) { - super(props); + constructor(props) { + super(props) - this.updateDimensions = this.updateDimensions.bind(this); - this.updateScale = this.updateScale.bind(this); - } + this.updateDimensions = this.updateDimensions.bind(this) + this.updateScale = this.updateScale.bind(this) + } - componentWillMount() { - this.updateDimensions(); - } + componentWillMount() { + this.updateDimensions() + } - componentDidMount() { - window.addEventListener("resize", this.updateDimensions); - window.addEventListener("wheel", this.updateScale); + componentDidMount() { + window.addEventListener('resize', this.updateDimensions) + window.addEventListener('wheel', this.updateScale) - window["exportCanvasToImage"] = () => { - const download = document.createElement("a"); - download.href = this.stage.getStage().toDataURL(); - download.download = "opendc-canvas-export-" + Date.now() + ".png"; - download.click(); - }; - } + window['exportCanvasToImage'] = () => { + const download = document.createElement('a') + download.href = this.stage.getStage().toDataURL() + download.download = 'opendc-canvas-export-' + Date.now() + '.png' + download.click() + } + } - componentWillUnmount() { - window.removeEventListener("resize", this.updateDimensions); - window.removeEventListener("wheel", this.updateScale); - } + componentWillUnmount() { + window.removeEventListener('resize', this.updateDimensions) + window.removeEventListener('wheel', this.updateScale) + } - updateDimensions() { - this.props.setMapDimensions( - jQuery(window).width(), - jQuery(window).height() - NAVBAR_HEIGHT - ); - } + updateDimensions() { + this.props.setMapDimensions( + jQuery(window).width(), + jQuery(window).height() - NAVBAR_HEIGHT, + ) + } - updateScale(e) { - e.preventDefault(); - this.props.zoomInOnPosition( - e.deltaY < 0, - this.state.mouseX, - this.state.mouseY - ); - } + updateScale(e) { + e.preventDefault() + this.props.zoomInOnPosition( + e.deltaY < 0, + this.state.mouseX, + this.state.mouseY, + ) + } - updateMousePosition() { - const mousePos = this.stage.getStage().getPointerPosition(); - this.setState({ mouseX: mousePos.x, mouseY: mousePos.y }); - } + updateMousePosition() { + const mousePos = this.stage.getStage().getPointerPosition() + this.setState({ mouseX: mousePos.x, mouseY: mousePos.y }) + } - handleShortcuts(action) { - switch (action) { - case "MOVE_LEFT": - this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0); - break; - case "MOVE_RIGHT": - this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0); - break; - case "MOVE_UP": - this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT); - break; - case "MOVE_DOWN": - this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT); - break; - default: - break; + handleShortcuts(action) { + switch (action) { + case 'MOVE_LEFT': + this.moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0) + break + case 'MOVE_RIGHT': + this.moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0) + break + case 'MOVE_UP': + this.moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT) + break + case 'MOVE_DOWN': + this.moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT) + break + default: + break + } } - } - moveWithDelta(deltaX, deltaY) { - this.props.setMapPositionWithBoundsCheck( - this.props.mapPosition.x + deltaX, - this.props.mapPosition.y + deltaY - ); - } + moveWithDelta(deltaX, deltaY) { + this.props.setMapPositionWithBoundsCheck( + this.props.mapPosition.x + deltaX, + this.props.mapPosition.y + deltaY, + ) + } - render() { - return ( - - { - this.stage = stage; - }} - width={this.props.mapDimensions.width} - height={this.props.mapDimensions.height} - onMouseMove={this.updateMousePosition.bind(this)} - > - - - - - - - - ); - } + render() { + return ( + + { + this.stage = stage + }} + width={this.props.mapDimensions.width} + height={this.props.mapDimensions.height} + onMouseMove={this.updateMousePosition.bind(this)} + > + + + + + + + + ) + } } -export default MapStageComponent; +export default MapStageComponent diff --git a/frontend/src/components/app/map/controls/ExportCanvasComponent.js b/frontend/src/components/app/map/controls/ExportCanvasComponent.js index ee934f21..d166bcc8 100644 --- a/frontend/src/components/app/map/controls/ExportCanvasComponent.js +++ b/frontend/src/components/app/map/controls/ExportCanvasComponent.js @@ -1,13 +1,13 @@ -import React from "react"; +import React from 'react' const ExportCanvasComponent = () => ( - -); + +) -export default ExportCanvasComponent; +export default ExportCanvasComponent diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js index b7b5cc36..daaf8ec6 100644 --- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js +++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js @@ -1,14 +1,14 @@ -import React from "react"; -import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from "../MapConstants"; -import "./ScaleIndicatorComponent.css"; +import React from 'react' +import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants' +import './ScaleIndicatorComponent.css' const ScaleIndicatorComponent = ({ scale }) => ( -
- {TILE_SIZE_IN_METERS}m -
-); +
+ {TILE_SIZE_IN_METERS}m +
+) -export default ScaleIndicatorComponent; +export default ScaleIndicatorComponent diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass index f2d2b55b..03a72c99 100644 --- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass +++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.sass @@ -1,9 +1,9 @@ .scale-indicator - position: absolute - right: 10px - bottom: 10px - z-index: 50 + position: absolute + right: 10px + bottom: 10px + z-index: 50 - border: solid 2px #212529 - border-top: none - border-left: none + border: solid 2px #212529 + border-top: none + border-left: none diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.js b/frontend/src/components/app/map/controls/ToolPanelComponent.js index 605e9887..e3bb1dbb 100644 --- a/frontend/src/components/app/map/controls/ToolPanelComponent.js +++ b/frontend/src/components/app/map/controls/ToolPanelComponent.js @@ -1,13 +1,13 @@ -import React from "react"; -import ZoomControlContainer from "../../../../containers/app/map/controls/ZoomControlContainer"; -import ExportCanvasComponent from "./ExportCanvasComponent"; -import "./ToolPanelComponent.css"; +import React from 'react' +import ZoomControlContainer from '../../../../containers/app/map/controls/ZoomControlContainer' +import ExportCanvasComponent from './ExportCanvasComponent' +import './ToolPanelComponent.css' const ToolPanelComponent = () => ( -
- - -
-); +
+ + +
+) -export default ToolPanelComponent; +export default ToolPanelComponent diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.sass b/frontend/src/components/app/map/controls/ToolPanelComponent.sass index 996712b3..8b27d24a 100644 --- a/frontend/src/components/app/map/controls/ToolPanelComponent.sass +++ b/frontend/src/components/app/map/controls/ToolPanelComponent.sass @@ -1,5 +1,5 @@ .tool-panel - position: absolute - left: 10px - bottom: 10px - z-index: 50 + position: absolute + left: 10px + bottom: 10px + z-index: 50 diff --git a/frontend/src/components/app/map/controls/ZoomControlComponent.js b/frontend/src/components/app/map/controls/ZoomControlComponent.js index e1b7491e..bd6527a6 100644 --- a/frontend/src/components/app/map/controls/ZoomControlComponent.js +++ b/frontend/src/components/app/map/controls/ZoomControlComponent.js @@ -1,24 +1,24 @@ -import React from "react"; +import React from 'react' const ZoomControlComponent = ({ zoomInOnCenter }) => { - return ( - + return ( + - ); -}; + ) +} -export default ZoomControlComponent; +export default ZoomControlComponent diff --git a/frontend/src/components/app/map/elements/Backdrop.js b/frontend/src/components/app/map/elements/Backdrop.js index 57414463..556d6a7b 100644 --- a/frontend/src/components/app/map/elements/Backdrop.js +++ b/frontend/src/components/app/map/elements/Backdrop.js @@ -1,16 +1,16 @@ -import React from "react"; -import { Rect } from "react-konva"; -import { BACKDROP_COLOR } from "../../../../util/colors"; -import { MAP_SIZE_IN_PIXELS } from "../MapConstants"; +import React from 'react' +import { Rect } from 'react-konva' +import { BACKDROP_COLOR } from '../../../../util/colors' +import { MAP_SIZE_IN_PIXELS } from '../MapConstants' const Backdrop = () => ( - -); + +) -export default Backdrop; +export default Backdrop diff --git a/frontend/src/components/app/map/elements/GrayLayer.js b/frontend/src/components/app/map/elements/GrayLayer.js index 28fadd8a..c54a34ad 100644 --- a/frontend/src/components/app/map/elements/GrayLayer.js +++ b/frontend/src/components/app/map/elements/GrayLayer.js @@ -1,17 +1,17 @@ -import React from "react"; -import { Rect } from "react-konva"; -import { GRAYED_OUT_AREA_COLOR } from "../../../../util/colors"; -import { MAP_SIZE_IN_PIXELS } from "../MapConstants"; +import React from 'react' +import { Rect } from 'react-konva' +import { GRAYED_OUT_AREA_COLOR } from '../../../../util/colors' +import { MAP_SIZE_IN_PIXELS } from '../MapConstants' const GrayLayer = ({ onClick }) => ( - -); + +) -export default GrayLayer; +export default GrayLayer diff --git a/frontend/src/components/app/map/elements/HoverTile.js b/frontend/src/components/app/map/elements/HoverTile.js index 42e6547c..912229c4 100644 --- a/frontend/src/components/app/map/elements/HoverTile.js +++ b/frontend/src/components/app/map/elements/HoverTile.js @@ -1,30 +1,27 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Rect } from "react-konva"; -import { - ROOM_HOVER_INVALID_COLOR, - ROOM_HOVER_VALID_COLOR -} from "../../../../util/colors"; -import { TILE_SIZE_IN_PIXELS } from "../MapConstants"; +import PropTypes from 'prop-types' +import React from 'react' +import { Rect } from 'react-konva' +import { ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR } from '../../../../util/colors' +import { TILE_SIZE_IN_PIXELS } from '../MapConstants' const HoverTile = ({ pixelX, pixelY, isValid, scale, onClick }) => ( - -); + +) HoverTile.propTypes = { - pixelX: PropTypes.number.isRequired, - pixelY: PropTypes.number.isRequired, - isValid: PropTypes.bool.isRequired, - onClick: PropTypes.func.isRequired -}; + pixelX: PropTypes.number.isRequired, + pixelY: PropTypes.number.isRequired, + isValid: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired, +} -export default HoverTile; +export default HoverTile diff --git a/frontend/src/components/app/map/elements/ImageComponent.js b/frontend/src/components/app/map/elements/ImageComponent.js index cf41ddfe..2b5c569f 100644 --- a/frontend/src/components/app/map/elements/ImageComponent.js +++ b/frontend/src/components/app/map/elements/ImageComponent.js @@ -1,48 +1,48 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Image } from "react-konva"; +import PropTypes from 'prop-types' +import React from 'react' +import { Image } from 'react-konva' class ImageComponent extends React.Component { - static imageCaches = {}; - static propTypes = { - src: PropTypes.string.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - width: PropTypes.number.isRequired, - height: PropTypes.number.isRequired, - opacity: PropTypes.number.isRequired - }; - - state = { - image: null - }; + static imageCaches = {} + static propTypes = { + src: PropTypes.string.isRequired, + x: PropTypes.number.isRequired, + y: PropTypes.number.isRequired, + width: PropTypes.number.isRequired, + height: PropTypes.number.isRequired, + opacity: PropTypes.number.isRequired, + } - componentDidMount() { - if (ImageComponent.imageCaches[this.props.src]) { - this.setState({ image: ImageComponent.imageCaches[this.props.src] }); - return; + state = { + image: null, } - const image = new window.Image(); - image.src = this.props.src; - image.onload = () => { - this.setState({ image }); - ImageComponent.imageCaches[this.props.src] = image; - }; - } + componentDidMount() { + if (ImageComponent.imageCaches[this.props.src]) { + this.setState({ image: ImageComponent.imageCaches[this.props.src] }) + return + } - render() { - return ( - - ); - } + const image = new window.Image() + image.src = this.props.src + image.onload = () => { + this.setState({ image }) + ImageComponent.imageCaches[this.props.src] = image + } + } + + render() { + return ( + + ) + } } -export default ImageComponent; +export default ImageComponent diff --git a/frontend/src/components/app/map/elements/RackFillBar.js b/frontend/src/components/app/map/elements/RackFillBar.js index 43701d97..6e56e059 100644 --- a/frontend/src/components/app/map/elements/RackFillBar.js +++ b/frontend/src/components/app/map/elements/RackFillBar.js @@ -1,89 +1,89 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Group, Rect } from "react-konva"; +import PropTypes from 'prop-types' +import React from 'react' +import { Group, Rect } from 'react-konva' import { - RACK_ENERGY_BAR_BACKGROUND_COLOR, - RACK_ENERGY_BAR_FILL_COLOR, - RACK_SPACE_BAR_BACKGROUND_COLOR, - RACK_SPACE_BAR_FILL_COLOR -} from "../../../../util/colors"; + RACK_ENERGY_BAR_BACKGROUND_COLOR, + RACK_ENERGY_BAR_FILL_COLOR, + RACK_SPACE_BAR_BACKGROUND_COLOR, + RACK_SPACE_BAR_FILL_COLOR, +} from '../../../../util/colors' import { - OBJECT_BORDER_WIDTH_IN_PIXELS, - OBJECT_MARGIN_IN_PIXELS, - RACK_FILL_ICON_OPACITY, - RACK_FILL_ICON_WIDTH, - TILE_SIZE_IN_PIXELS -} from "../MapConstants"; -import ImageComponent from "./ImageComponent"; + OBJECT_BORDER_WIDTH_IN_PIXELS, + OBJECT_MARGIN_IN_PIXELS, + RACK_FILL_ICON_OPACITY, + RACK_FILL_ICON_WIDTH, + TILE_SIZE_IN_PIXELS, +} from '../MapConstants' +import ImageComponent from './ImageComponent' const RackFillBar = ({ positionX, positionY, type, fillFraction }) => { - const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2; - const x = - positionX * TILE_SIZE_IN_PIXELS + - OBJECT_MARGIN_IN_PIXELS + - (type === "space" - ? halfOfObjectBorderWidth - : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS)); - const startY = - positionY * TILE_SIZE_IN_PIXELS + - OBJECT_MARGIN_IN_PIXELS + - halfOfObjectBorderWidth; - const width = - 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - - halfOfObjectBorderWidth; - const fullHeight = - TILE_SIZE_IN_PIXELS - - OBJECT_MARGIN_IN_PIXELS * 2 - - OBJECT_BORDER_WIDTH_IN_PIXELS; + const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2 + const x = + positionX * TILE_SIZE_IN_PIXELS + + OBJECT_MARGIN_IN_PIXELS + + (type === 'space' + ? halfOfObjectBorderWidth + : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS)) + const startY = + positionY * TILE_SIZE_IN_PIXELS + + OBJECT_MARGIN_IN_PIXELS + + halfOfObjectBorderWidth + const width = + 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - + halfOfObjectBorderWidth + const fullHeight = + TILE_SIZE_IN_PIXELS - + OBJECT_MARGIN_IN_PIXELS * 2 - + OBJECT_BORDER_WIDTH_IN_PIXELS - const fractionHeight = fillFraction * fullHeight; - const fractionY = - (positionY + 1) * TILE_SIZE_IN_PIXELS - - OBJECT_MARGIN_IN_PIXELS - - halfOfObjectBorderWidth - - fractionHeight; + const fractionHeight = fillFraction * fullHeight + const fractionY = + (positionY + 1) * TILE_SIZE_IN_PIXELS - + OBJECT_MARGIN_IN_PIXELS - + halfOfObjectBorderWidth - + fractionHeight - return ( - - - - - - ); -}; + return ( + + + + + + ) +} RackFillBar.propTypes = { - positionX: PropTypes.number.isRequired, - positionY: PropTypes.number.isRequired, - type: PropTypes.string.isRequired, - fillFraction: PropTypes.number.isRequired -}; + positionX: PropTypes.number.isRequired, + positionY: PropTypes.number.isRequired, + type: PropTypes.string.isRequired, + fillFraction: PropTypes.number.isRequired, +} -export default RackFillBar; +export default RackFillBar diff --git a/frontend/src/components/app/map/elements/RoomTile.js b/frontend/src/components/app/map/elements/RoomTile.js index 71c3bf15..43bf918e 100644 --- a/frontend/src/components/app/map/elements/RoomTile.js +++ b/frontend/src/components/app/map/elements/RoomTile.js @@ -1,20 +1,20 @@ -import React from "react"; -import { Rect } from "react-konva"; -import Shapes from "../../../../shapes/index"; -import { TILE_SIZE_IN_PIXELS } from "../MapConstants"; +import React from 'react' +import { Rect } from 'react-konva' +import Shapes from '../../../../shapes/index' +import { TILE_SIZE_IN_PIXELS } from '../MapConstants' const RoomTile = ({ tile, color }) => ( - -); + +) RoomTile.propTypes = { - tile: Shapes.Tile -}; + tile: Shapes.Tile, +} -export default RoomTile; +export default RoomTile diff --git a/frontend/src/components/app/map/elements/TileObject.js b/frontend/src/components/app/map/elements/TileObject.js index c1b631db..9e87cc82 100644 --- a/frontend/src/components/app/map/elements/TileObject.js +++ b/frontend/src/components/app/map/elements/TileObject.js @@ -1,29 +1,25 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Rect } from "react-konva"; -import { OBJECT_BORDER_COLOR } from "../../../../util/colors"; -import { - OBJECT_BORDER_WIDTH_IN_PIXELS, - OBJECT_MARGIN_IN_PIXELS, - TILE_SIZE_IN_PIXELS -} from "../MapConstants"; +import PropTypes from 'prop-types' +import React from 'react' +import { Rect } from 'react-konva' +import { OBJECT_BORDER_COLOR } from '../../../../util/colors' +import { OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants' const TileObject = ({ positionX, positionY, color }) => ( - -); + +) TileObject.propTypes = { - positionX: PropTypes.number.isRequired, - positionY: PropTypes.number.isRequired, - color: PropTypes.string.isRequired -}; + positionX: PropTypes.number.isRequired, + positionY: PropTypes.number.isRequired, + color: PropTypes.string.isRequired, +} -export default TileObject; +export default TileObject diff --git a/frontend/src/components/app/map/elements/TilePlusIcon.js b/frontend/src/components/app/map/elements/TilePlusIcon.js index 06377152..dd6e0beb 100644 --- a/frontend/src/components/app/map/elements/TilePlusIcon.js +++ b/frontend/src/components/app/map/elements/TilePlusIcon.js @@ -1,52 +1,48 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Group, Line } from "react-konva"; -import { TILE_PLUS_COLOR } from "../../../../util/colors"; -import { - TILE_PLUS_MARGIN_IN_PIXELS, - TILE_PLUS_WIDTH_IN_PIXELS, - TILE_SIZE_IN_PIXELS -} from "../MapConstants"; +import PropTypes from 'prop-types' +import React from 'react' +import { Group, Line } from 'react-konva' +import { TILE_PLUS_COLOR } from '../../../../util/colors' +import { TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants' const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => { - const linePoints = [ - [ - pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, - pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, - pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, - pixelY + - TILE_SIZE_IN_PIXELS * mapScale - - TILE_PLUS_MARGIN_IN_PIXELS * mapScale - ], - [ - pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, - pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, - pixelX + - TILE_SIZE_IN_PIXELS * mapScale - - TILE_PLUS_MARGIN_IN_PIXELS * mapScale, - pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale + const linePoints = [ + [ + pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, + pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, + pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, + pixelY + + TILE_SIZE_IN_PIXELS * mapScale - + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, + ], + [ + pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, + pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, + pixelX + + TILE_SIZE_IN_PIXELS * mapScale - + TILE_PLUS_MARGIN_IN_PIXELS * mapScale, + pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale, + ], ] - ]; - return ( - - {linePoints.map((points, index) => ( - - ))} - - ); -}; + return ( + + {linePoints.map((points, index) => ( + + ))} + + ) +} TilePlusIcon.propTypes = { - pixelX: PropTypes.number, - pixelY: PropTypes.number, - mapScale: PropTypes.number -}; + pixelX: PropTypes.number, + pixelY: PropTypes.number, + mapScale: PropTypes.number, +} -export default TilePlusIcon; +export default TilePlusIcon diff --git a/frontend/src/components/app/map/elements/WallSegment.js b/frontend/src/components/app/map/elements/WallSegment.js index c5011656..d1ba6157 100644 --- a/frontend/src/components/app/map/elements/WallSegment.js +++ b/frontend/src/components/app/map/elements/WallSegment.js @@ -1,39 +1,39 @@ -import React from "react"; -import { Line } from "react-konva"; -import Shapes from "../../../../shapes/index"; -import { WALL_COLOR } from "../../../../util/colors"; -import { TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS } from "../MapConstants"; +import React from 'react' +import { Line } from 'react-konva' +import Shapes from '../../../../shapes/index' +import { WALL_COLOR } from '../../../../util/colors' +import { TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS } from '../MapConstants' const WallSegment = ({ wallSegment }) => { - let points; - if (wallSegment.isHorizontal) { - points = [ - wallSegment.startPosX * TILE_SIZE_IN_PIXELS, - wallSegment.startPosY * TILE_SIZE_IN_PIXELS, - (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS, - wallSegment.startPosY * TILE_SIZE_IN_PIXELS - ]; - } else { - points = [ - wallSegment.startPosX * TILE_SIZE_IN_PIXELS, - wallSegment.startPosY * TILE_SIZE_IN_PIXELS, - wallSegment.startPosX * TILE_SIZE_IN_PIXELS, - (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS - ]; - } + let points + if (wallSegment.isHorizontal) { + points = [ + wallSegment.startPosX * TILE_SIZE_IN_PIXELS, + wallSegment.startPosY * TILE_SIZE_IN_PIXELS, + (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS, + wallSegment.startPosY * TILE_SIZE_IN_PIXELS, + ] + } else { + points = [ + wallSegment.startPosX * TILE_SIZE_IN_PIXELS, + wallSegment.startPosY * TILE_SIZE_IN_PIXELS, + wallSegment.startPosX * TILE_SIZE_IN_PIXELS, + (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS, + ] + } - return ( - - ); -}; + return ( + + ) +} WallSegment.propTypes = { - wallSegment: Shapes.WallSegment -}; + wallSegment: Shapes.WallSegment, +} -export default WallSegment; +export default WallSegment diff --git a/frontend/src/components/app/map/groups/DatacenterGroup.js b/frontend/src/components/app/map/groups/DatacenterGroup.js index 51e32db6..3d3b9702 100644 --- a/frontend/src/components/app/map/groups/DatacenterGroup.js +++ b/frontend/src/components/app/map/groups/DatacenterGroup.js @@ -1,40 +1,40 @@ -import React from "react"; -import { Group } from "react-konva"; -import GrayContainer from "../../../../containers/app/map/GrayContainer"; -import RoomContainer from "../../../../containers/app/map/RoomContainer"; -import Shapes from "../../../../shapes/index"; +import React from 'react' +import { Group } from 'react-konva' +import GrayContainer from '../../../../containers/app/map/GrayContainer' +import RoomContainer from '../../../../containers/app/map/RoomContainer' +import Shapes from '../../../../shapes/index' const DatacenterGroup = ({ datacenter, interactionLevel }) => { - if (!datacenter) { - return ; - } + if (!datacenter) { + return + } - if (interactionLevel.mode === "BUILDING") { - return ( - - {datacenter.roomIds.map(roomId => ( - - ))} - - ); - } + if (interactionLevel.mode === 'BUILDING') { + return ( + + {datacenter.roomIds.map(roomId => ( + + ))} + + ) + } - return ( - - {datacenter.roomIds - .filter(roomId => roomId !== interactionLevel.roomId) - .map(roomId => )} - {interactionLevel.mode === "ROOM" ? : null} - {datacenter.roomIds - .filter(roomId => roomId === interactionLevel.roomId) - .map(roomId => )} - - ); -}; + return ( + + {datacenter.roomIds + .filter(roomId => roomId !== interactionLevel.roomId) + .map(roomId => )} + {interactionLevel.mode === 'ROOM' ? : null} + {datacenter.roomIds + .filter(roomId => roomId === interactionLevel.roomId) + .map(roomId => )} + + ) +} DatacenterGroup.propTypes = { - datacenter: Shapes.Datacenter, - interactionLevel: Shapes.InteractionLevel -}; + datacenter: Shapes.Datacenter, + interactionLevel: Shapes.InteractionLevel, +} -export default DatacenterGroup; +export default DatacenterGroup diff --git a/frontend/src/components/app/map/groups/GridGroup.js b/frontend/src/components/app/map/groups/GridGroup.js index bbb1eb68..10554834 100644 --- a/frontend/src/components/app/map/groups/GridGroup.js +++ b/frontend/src/components/app/map/groups/GridGroup.js @@ -1,41 +1,36 @@ -import React from "react"; -import { Group, Line } from "react-konva"; -import { GRID_COLOR } from "../../../../util/colors"; -import { - GRID_LINE_WIDTH_IN_PIXELS, - MAP_SIZE, - MAP_SIZE_IN_PIXELS, - TILE_SIZE_IN_PIXELS -} from "../MapConstants"; +import React from 'react' +import { Group, Line } from 'react-konva' +import { GRID_COLOR } from '../../../../util/colors' +import { GRID_LINE_WIDTH_IN_PIXELS, MAP_SIZE, MAP_SIZE_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants' -const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i); +const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i) const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [ - 0, - index * TILE_SIZE_IN_PIXELS, - MAP_SIZE_IN_PIXELS, - index * TILE_SIZE_IN_PIXELS -]); + 0, + index * TILE_SIZE_IN_PIXELS, + MAP_SIZE_IN_PIXELS, + index * TILE_SIZE_IN_PIXELS, +]) const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [ - index * TILE_SIZE_IN_PIXELS, - 0, - index * TILE_SIZE_IN_PIXELS, - MAP_SIZE_IN_PIXELS -]); + index * TILE_SIZE_IN_PIXELS, + 0, + index * TILE_SIZE_IN_PIXELS, + MAP_SIZE_IN_PIXELS, +]) const GridGroup = () => ( - - {HORIZONTAL_POINT_PAIRS.concat( - VERTICAL_POINT_PAIRS - ).map((points, index) => ( - - ))} - -); + + {HORIZONTAL_POINT_PAIRS.concat( + VERTICAL_POINT_PAIRS, + ).map((points, index) => ( + + ))} + +) -export default GridGroup; +export default GridGroup diff --git a/frontend/src/components/app/map/groups/RackGroup.js b/frontend/src/components/app/map/groups/RackGroup.js index 69d6ac10..708dcf69 100644 --- a/frontend/src/components/app/map/groups/RackGroup.js +++ b/frontend/src/components/app/map/groups/RackGroup.js @@ -1,43 +1,43 @@ -import React from "react"; -import { Group } from "react-konva"; -import RackEnergyFillContainer from "../../../../containers/app/map/RackEnergyFillContainer"; -import RackSpaceFillContainer from "../../../../containers/app/map/RackSpaceFillContainer"; -import Shapes from "../../../../shapes/index"; -import { RACK_BACKGROUND_COLOR } from "../../../../util/colors"; -import { convertLoadToSimulationColor } from "../../../../util/simulation-load"; -import TileObject from "../elements/TileObject"; +import React from 'react' +import { Group } from 'react-konva' +import RackEnergyFillContainer from '../../../../containers/app/map/RackEnergyFillContainer' +import RackSpaceFillContainer from '../../../../containers/app/map/RackSpaceFillContainer' +import Shapes from '../../../../shapes/index' +import { RACK_BACKGROUND_COLOR } from '../../../../util/colors' +import { convertLoadToSimulationColor } from '../../../../util/simulation-load' +import TileObject from '../elements/TileObject' const RackGroup = ({ tile, inSimulation, rackLoad }) => { - let color = RACK_BACKGROUND_COLOR; - if (inSimulation && rackLoad >= 0) { - color = convertLoadToSimulationColor(rackLoad); - } + let color = RACK_BACKGROUND_COLOR + if (inSimulation && rackLoad >= 0) { + color = convertLoadToSimulationColor(rackLoad) + } - return ( - - - - - - - - ); -}; + return ( + + + + + + + + ) +} RackGroup.propTypes = { - tile: Shapes.Tile -}; + tile: Shapes.Tile, +} -export default RackGroup; +export default RackGroup diff --git a/frontend/src/components/app/map/groups/RoomGroup.js b/frontend/src/components/app/map/groups/RoomGroup.js index c8f0d3db..230e3c9b 100644 --- a/frontend/src/components/app/map/groups/RoomGroup.js +++ b/frontend/src/components/app/map/groups/RoomGroup.js @@ -1,56 +1,56 @@ -import React from "react"; -import { Group } from "react-konva"; -import GrayContainer from "../../../../containers/app/map/GrayContainer"; -import TileContainer from "../../../../containers/app/map/TileContainer"; -import WallContainer from "../../../../containers/app/map/WallContainer"; -import Shapes from "../../../../shapes/index"; +import React from 'react' +import { Group } from 'react-konva' +import GrayContainer from '../../../../containers/app/map/GrayContainer' +import TileContainer from '../../../../containers/app/map/TileContainer' +import WallContainer from '../../../../containers/app/map/WallContainer' +import Shapes from '../../../../shapes/index' const RoomGroup = ({ - room, - interactionLevel, - currentRoomInConstruction, - onClick -}) => { - if (currentRoomInConstruction === room.id) { - return ( - - {room.tileIds.map(tileId => ( - - ))} - - ); - } + room, + interactionLevel, + currentRoomInConstruction, + onClick, + }) => { + if (currentRoomInConstruction === room.id) { + return ( + + {room.tileIds.map(tileId => ( + + ))} + + ) + } - return ( - - {(() => { - if ( - (interactionLevel.mode === "RACK" || - interactionLevel.mode === "MACHINE") && - interactionLevel.roomId === room.id - ) { - return [ - room.tileIds - .filter(tileId => tileId !== interactionLevel.tileId) - .map(tileId => ), - , - room.tileIds - .filter(tileId => tileId === interactionLevel.tileId) - .map(tileId => ) - ]; - } else { - return room.tileIds.map(tileId => ( - - )); - } - })()} - - - ); -}; + return ( + + {(() => { + if ( + (interactionLevel.mode === 'RACK' || + interactionLevel.mode === 'MACHINE') && + interactionLevel.roomId === room.id + ) { + return [ + room.tileIds + .filter(tileId => tileId !== interactionLevel.tileId) + .map(tileId => ), + , + room.tileIds + .filter(tileId => tileId === interactionLevel.tileId) + .map(tileId => ), + ] + } else { + return room.tileIds.map(tileId => ( + + )) + } + })()} + + + ) +} RoomGroup.propTypes = { - room: Shapes.Room -}; + room: Shapes.Room, +} -export default RoomGroup; +export default RoomGroup diff --git a/frontend/src/components/app/map/groups/TileGroup.js b/frontend/src/components/app/map/groups/TileGroup.js index 8f3953d7..49e2e52b 100644 --- a/frontend/src/components/app/map/groups/TileGroup.js +++ b/frontend/src/components/app/map/groups/TileGroup.js @@ -1,43 +1,40 @@ -import PropTypes from "prop-types"; -import React from "react"; -import { Group } from "react-konva"; -import RackContainer from "../../../../containers/app/map/RackContainer"; -import Shapes from "../../../../shapes/index"; -import { - ROOM_DEFAULT_COLOR, - ROOM_IN_CONSTRUCTION_COLOR -} from "../../../../util/colors"; -import { convertLoadToSimulationColor } from "../../../../util/simulation-load"; -import RoomTile from "../elements/RoomTile"; +import PropTypes from 'prop-types' +import React from 'react' +import { Group } from 'react-konva' +import RackContainer from '../../../../containers/app/map/RackContainer' +import Shapes from '../../../../shapes/index' +import { ROOM_DEFAULT_COLOR, ROOM_IN_CONSTRUCTION_COLOR } from '../../../../util/colors' +import { convertLoadToSimulationColor } from '../../../../util/simulation-load' +import RoomTile from '../elements/RoomTile' const TileGroup = ({ tile, newTile, inSimulation, roomLoad, onClick }) => { - let tileObject; - switch (tile.objectType) { - case "RACK": - tileObject = ; - break; - default: - tileObject = null; - } + let tileObject + switch (tile.objectType) { + case 'RACK': + tileObject = + break + default: + tileObject = null + } - let color = ROOM_DEFAULT_COLOR; - if (newTile) { - color = ROOM_IN_CONSTRUCTION_COLOR; - } else if (inSimulation && roomLoad >= 0) { - color = convertLoadToSimulationColor(roomLoad); - } + let color = ROOM_DEFAULT_COLOR + if (newTile) { + color = ROOM_IN_CONSTRUCTION_COLOR + } else if (inSimulation && roomLoad >= 0) { + color = convertLoadToSimulationColor(roomLoad) + } - return ( - onClick(tile)}> - - {tileObject} - - ); -}; + return ( + onClick(tile)}> + + {tileObject} + + ) +} TileGroup.propTypes = { - tile: Shapes.Tile, - newTile: PropTypes.bool -}; + tile: Shapes.Tile, + newTile: PropTypes.bool, +} -export default TileGroup; +export default TileGroup diff --git a/frontend/src/components/app/map/groups/WallGroup.js b/frontend/src/components/app/map/groups/WallGroup.js index 43de66e8..81c72d94 100644 --- a/frontend/src/components/app/map/groups/WallGroup.js +++ b/frontend/src/components/app/map/groups/WallGroup.js @@ -1,22 +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"; +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 ( - - {deriveWallLocations(tiles).map((wallSegment, index) => ( - - ))} - - ); -}; + return ( + + {deriveWallLocations(tiles).map((wallSegment, index) => ( + + ))} + + ) +} WallGroup.propTypes = { - tiles: PropTypes.arrayOf(Shapes.Tile).isRequired -}; + tiles: PropTypes.arrayOf(Shapes.Tile).isRequired, +} -export default WallGroup; +export default WallGroup diff --git a/frontend/src/components/app/map/layers/HoverLayerComponent.js b/frontend/src/components/app/map/layers/HoverLayerComponent.js index c39532f1..25c9c412 100644 --- a/frontend/src/components/app/map/layers/HoverLayerComponent.js +++ b/frontend/src/components/app/map/layers/HoverLayerComponent.js @@ -1,85 +1,85 @@ -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"; +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 HoverLayerComponent extends React.Component { - static propTypes = { - mouseX: PropTypes.number.isRequired, - mouseY: PropTypes.number.isRequired, - mapPosition: PropTypes.object.isRequired, - mapScale: PropTypes.number.isRequired, - isEnabled: PropTypes.func.isRequired, - onClick: PropTypes.func.isRequired - }; - - state = { - positionX: -1, - positionY: -1, - validity: false - }; + static propTypes = { + mouseX: PropTypes.number.isRequired, + mouseY: PropTypes.number.isRequired, + mapPosition: PropTypes.object.isRequired, + mapScale: PropTypes.number.isRequired, + isEnabled: PropTypes.func.isRequired, + onClick: PropTypes.func.isRequired, + } - componentDidUpdate() { - if (!this.props.isEnabled()) { - return; + state = { + positionX: -1, + positionY: -1, + validity: false, } - const positionX = Math.floor( - (this.props.mouseX - this.props.mapPosition.x) / - (this.props.mapScale * TILE_SIZE_IN_PIXELS) - ); - const positionY = Math.floor( - (this.props.mouseY - this.props.mapPosition.y) / - (this.props.mapScale * TILE_SIZE_IN_PIXELS) - ); + componentDidUpdate() { + if (!this.props.isEnabled()) { + return + } - if ( - positionX !== this.state.positionX || - positionY !== this.state.positionY - ) { - this.setState({ - positionX, - positionY, - validity: this.props.isValid(positionX, positionY) - }); - } - } + const positionX = Math.floor( + (this.props.mouseX - this.props.mapPosition.x) / + (this.props.mapScale * TILE_SIZE_IN_PIXELS), + ) + const positionY = Math.floor( + (this.props.mouseY - this.props.mapPosition.y) / + (this.props.mapScale * TILE_SIZE_IN_PIXELS), + ) - render() { - if (!this.props.isEnabled()) { - return ; + if ( + positionX !== this.state.positionX || + positionY !== this.state.positionY + ) { + this.setState({ + positionX, + positionY, + validity: this.props.isValid(positionX, positionY), + }) + } } - const pixelX = - this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS + - this.props.mapPosition.x; - const pixelY = - this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS + - this.props.mapPosition.y; + render() { + if (!this.props.isEnabled()) { + return + } - return ( - - - this.state.validity - ? this.props.onClick(this.state.positionX, this.state.positionY) - : undefined} - /> - {this.props.children - ? React.cloneElement(this.props.children, { - pixelX, - pixelY, - scale: this.props.mapScale - }) - : undefined} - - ); - } + const pixelX = + this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS + + this.props.mapPosition.x + const pixelY = + this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS + + this.props.mapPosition.y + + return ( + + + this.state.validity + ? this.props.onClick(this.state.positionX, this.state.positionY) + : undefined} + /> + {this.props.children + ? React.cloneElement(this.props.children, { + pixelX, + pixelY, + scale: this.props.mapScale, + }) + : undefined} + + ) + } } -export default HoverLayerComponent; +export default HoverLayerComponent diff --git a/frontend/src/components/app/map/layers/MapLayerComponent.js b/frontend/src/components/app/map/layers/MapLayerComponent.js index 6ad3cb88..1a31f2b9 100644 --- a/frontend/src/components/app/map/layers/MapLayerComponent.js +++ b/frontend/src/components/app/map/layers/MapLayerComponent.js @@ -1,22 +1,22 @@ -import React from "react"; -import { Group, Layer } from "react-konva"; -import DatacenterContainer from "../../../../containers/app/map/DatacenterContainer"; -import Backdrop from "../elements/Backdrop"; -import GridGroup from "../groups/GridGroup"; +import React from 'react' +import { Group, Layer } from 'react-konva' +import DatacenterContainer from '../../../../containers/app/map/DatacenterContainer' +import Backdrop from '../elements/Backdrop' +import GridGroup from '../groups/GridGroup' const MapLayerComponent = ({ mapPosition, mapScale }) => ( - - - - - - - -); + + + + + + + +) -export default MapLayerComponent; +export default MapLayerComponent diff --git a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js index e7342d3c..31689635 100644 --- a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js +++ b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js @@ -1,11 +1,11 @@ -import React from "react"; -import TilePlusIcon from "../elements/TilePlusIcon"; -import HoverLayerComponent from "./HoverLayerComponent"; +import React from 'react' +import TilePlusIcon from '../elements/TilePlusIcon' +import HoverLayerComponent from './HoverLayerComponent' const ObjectHoverLayerComponent = props => ( - - - -); + + + +) -export default ObjectHoverLayerComponent; +export default ObjectHoverLayerComponent diff --git a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js index feea5ae5..d3d5e9b2 100644 --- a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js +++ b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js @@ -1,6 +1,6 @@ -import React from "react"; -import HoverLayerComponent from "./HoverLayerComponent"; +import React from 'react' +import HoverLayerComponent from './HoverLayerComponent' -const RoomHoverLayerComponent = props => ; +const RoomHoverLayerComponent = props => -export default RoomHoverLayerComponent; +export default RoomHoverLayerComponent -- cgit v1.2.3