diff options
| author | Georgios Andreadis <G.Andreadis@student.tudelft.nl> | 2017-10-04 23:23:09 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2017-10-04 23:23:09 +0200 |
| commit | fcaaae65d34003874c76e0c01134dedf94248e09 (patch) | |
| tree | 2aae1422168651e832a1904623f6f5b100fc17ec /src/components/app/map/layers/HoverLayerComponent.js | |
| parent | 0a62dfb55c5700013d42a589b930c7448e5bff71 (diff) | |
| parent | 606d1de0be09f3597165248f65d54e158a13860c (diff) | |
Merge pull request #42 from atlarge-research/auto-reformat
Standardize code format
Diffstat (limited to 'src/components/app/map/layers/HoverLayerComponent.js')
| -rw-r--r-- | src/components/app/map/layers/HoverLayerComponent.js | 128 |
1 files changed, 75 insertions, 53 deletions
diff --git a/src/components/app/map/layers/HoverLayerComponent.js b/src/components/app/map/layers/HoverLayerComponent.js index aa2e8313..c39532f1 100644 --- a/src/components/app/map/layers/HoverLayerComponent.js +++ b/src/components/app/map/layers/HoverLayerComponent.js @@ -1,63 +1,85 @@ import PropTypes from "prop-types"; -import React from 'react'; -import {Layer} from "react-konva"; +import React from "react"; +import { Layer } from "react-konva"; import HoverTile from "../elements/HoverTile"; -import {TILE_SIZE_IN_PIXELS} from "../MapConstants"; +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, - }; - - componentDidUpdate() { - if (!this.props.isEnabled()) { - return; - } - - 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)); - - if (positionX !== this.state.positionX || positionY !== this.state.positionY) { - this.setState({positionX, positionY, validity: this.props.isValid(positionX, positionY)}); - } + 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 + }; + + componentDidUpdate() { + if (!this.props.isEnabled()) { + return; } - render() { - if (!this.props.isEnabled()) { - return <Layer/>; - } - - 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 ( - <Layer opacity={0.6}> - <HoverTile - pixelX={pixelX} - pixelY={pixelY} - scale={this.props.mapScale} - isValid={this.state.validity} - onClick={() => 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 - } - </Layer> - ); + 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) + ); + + if ( + positionX !== this.state.positionX || + positionY !== this.state.positionY + ) { + this.setState({ + positionX, + positionY, + validity: this.props.isValid(positionX, positionY) + }); } + } + + render() { + if (!this.props.isEnabled()) { + return <Layer />; + } + + 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 ( + <Layer opacity={0.6}> + <HoverTile + pixelX={pixelX} + pixelY={pixelY} + scale={this.props.mapScale} + isValid={this.state.validity} + onClick={() => + 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} + </Layer> + ); + } } export default HoverLayerComponent; |
