From 42778e8be409b97059fa519b53c303cdba502e01 Mon Sep 17 00:00:00 2001 From: Georgios Andreadis Date: Tue, 5 Sep 2017 09:30:42 +0200 Subject: Implement rack creation --- src/components/map/layers/HoverLayerComponent.js | 59 ++++++++++++++++++++++ .../map/layers/HoverTileLayerComponent.js | 57 --------------------- .../map/layers/ObjectHoverLayerComponent.js | 11 ++++ .../map/layers/RoomHoverLayerComponent.js | 8 +++ 4 files changed, 78 insertions(+), 57 deletions(-) create mode 100644 src/components/map/layers/HoverLayerComponent.js delete mode 100644 src/components/map/layers/HoverTileLayerComponent.js create mode 100644 src/components/map/layers/ObjectHoverLayerComponent.js create mode 100644 src/components/map/layers/RoomHoverLayerComponent.js (limited to 'src/components/map/layers') diff --git a/src/components/map/layers/HoverLayerComponent.js b/src/components/map/layers/HoverLayerComponent.js new file mode 100644 index 00000000..861d2b9a --- /dev/null +++ b/src/components/map/layers/HoverLayerComponent.js @@ -0,0 +1,59 @@ +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, + mainGroupX: PropTypes.number.isRequired, + mainGroupY: 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.mainGroupX) / TILE_SIZE_IN_PIXELS); + const positionY = Math.floor((this.props.mouseY - this.props.mainGroupY) / 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 ; + } + + const positionX = Math.floor((this.props.mouseX - this.props.mainGroupX) / TILE_SIZE_IN_PIXELS); + const positionY = Math.floor((this.props.mouseY - this.props.mainGroupY) / TILE_SIZE_IN_PIXELS); + const pixelX = positionX * TILE_SIZE_IN_PIXELS + this.props.mainGroupX; + const pixelY = positionY * TILE_SIZE_IN_PIXELS + this.props.mainGroupY; + + return ( + + this.state.validity ? this.props.onClick(positionX, positionY) : undefined} + /> + {this.props.children ? React.cloneElement(this.props.children, {pixelX, pixelY}) : undefined} + + ); + } +} + +export default HoverLayerComponent; diff --git a/src/components/map/layers/HoverTileLayerComponent.js b/src/components/map/layers/HoverTileLayerComponent.js deleted file mode 100644 index bd07596a..00000000 --- a/src/components/map/layers/HoverTileLayerComponent.js +++ /dev/null @@ -1,57 +0,0 @@ -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, - validity: false, - }; - - componentDidUpdate() { - if (this.props.currentRoomInConstruction === -1) { - return; - } - - const positionX = Math.floor((this.props.mouseX - this.props.mainGroupX) / TILE_SIZE_IN_PIXELS); - const positionY = Math.floor((this.props.mouseY - this.props.mainGroupY) / 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.currentRoomInConstruction === -1) { - return ; - } - - const positionX = Math.floor((this.props.mouseX - this.props.mainGroupX) / TILE_SIZE_IN_PIXELS); - const positionY = Math.floor((this.props.mouseY - this.props.mainGroupY) / TILE_SIZE_IN_PIXELS); - const pixelX = positionX * TILE_SIZE_IN_PIXELS + this.props.mainGroupX; - const pixelY = positionY * TILE_SIZE_IN_PIXELS + this.props.mainGroupY; - - return ( - - this.props.onClick(positionX, positionY)} - /> - - ); - } -} - -export default HoverTileLayerComponent; diff --git a/src/components/map/layers/ObjectHoverLayerComponent.js b/src/components/map/layers/ObjectHoverLayerComponent.js new file mode 100644 index 00000000..91757cb3 --- /dev/null +++ b/src/components/map/layers/ObjectHoverLayerComponent.js @@ -0,0 +1,11 @@ +import React from 'react'; +import TilePlusIcon from "../elements/TilePlusIcon"; +import HoverLayerComponent from "./HoverLayerComponent"; + +const ObjectHoverLayerComponent = (props) => ( + + + +); + +export default ObjectHoverLayerComponent; diff --git a/src/components/map/layers/RoomHoverLayerComponent.js b/src/components/map/layers/RoomHoverLayerComponent.js new file mode 100644 index 00000000..2133c8d8 --- /dev/null +++ b/src/components/map/layers/RoomHoverLayerComponent.js @@ -0,0 +1,8 @@ +import React from 'react'; +import HoverLayerComponent from "./HoverLayerComponent"; + +const RoomHoverLayerComponent = (props) => ( + +); + +export default RoomHoverLayerComponent; -- cgit v1.2.3