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 --- .../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 +- 4 files changed, 104 insertions(+), 104 deletions(-) (limited to 'frontend/src/components/app/map/layers') 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