summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
diff options
context:
space:
mode:
authorFabian Mastenbroek <mail.fabianm@gmail.com>2021-07-19 15:47:23 +0200
committerFabian Mastenbroek <mail.fabianm@gmail.com>2021-07-19 16:03:11 +0200
commit5e5ab63b280eb446db4090733cd3ad2e97d02018 (patch)
tree352766be8a86c78f2aa233bb24db1a2711cc0f21 /opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
parent54d07120191eb81de91a49cdebf619cfecce2666 (diff)
refactor(ui): Restructure components per page
This change updates the source structure of the OpenDC frontend to follow the page structure.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js')
-rw-r--r--opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js55
1 files changed, 0 insertions, 55 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
deleted file mode 100644
index 2b1060c0..00000000
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useMemo, useState } from 'react'
-import { Layer } from 'react-konva/lib/ReactKonva'
-import HoverTile from '../elements/HoverTile'
-import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
-import { useEffectRef } from '../../../../util/effect-ref'
-
-function HoverLayerComponent({ isEnabled, isValid, onClick, children }) {
- const [[mouseWorldX, mouseWorldY], setPos] = useState([0, 0])
-
- const layerRef = useEffectRef((layer) => {
- if (!layer) {
- return
- }
-
- const stage = layer.getStage()
-
- // Transform used to convert mouse coordinates to world coordinates
- const transform = stage.getAbsoluteTransform().copy()
- transform.invert()
-
- stage.on('mousemove.hover', () => {
- const { x, y } = transform.point(stage.getPointerPosition())
- setPos([x, y])
- })
- return () => stage.off('mousemove.hover')
- })
-
- const gridX = Math.floor(mouseWorldX / TILE_SIZE_IN_PIXELS)
- const gridY = Math.floor(mouseWorldY / TILE_SIZE_IN_PIXELS)
- const valid = useMemo(() => isEnabled && isValid(gridX, gridY), [isEnabled, isValid, gridX, gridY])
-
- if (!isEnabled) {
- return <Layer />
- }
-
- const x = gridX * TILE_SIZE_IN_PIXELS
- const y = gridY * TILE_SIZE_IN_PIXELS
-
- return (
- <Layer opacity={0.6} ref={layerRef}>
- <HoverTile x={x} y={y} isValid={valid} onClick={() => (valid ? onClick(gridX, gridY) : undefined)} />
- {children ? React.cloneElement(children, { x, y, scale: 1 }) : undefined}
- </Layer>
- )
-}
-
-HoverLayerComponent.propTypes = {
- isEnabled: PropTypes.bool.isRequired,
- isValid: PropTypes.func.isRequired,
- onClick: PropTypes.func.isRequired,
- children: PropTypes.node,
-}
-
-export default HoverLayerComponent