bug(web): Do not offset hover layer after dragging

This change fixes #136 which reported that the grid and cursor will fall
out of sync when dragging or moving the grid when placing rooms or
objects.

Fixes #136

3 files changed, 7 insertions, 11 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js
index 2b1060c0..d7e0c56a 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/HoverLayerComponent.js
@@ -15,11 +15,11 @@ function HoverLayerComponent({ isEnabled, isValid, onClick, children }) {
 
         const stage = layer.getStage()
 
-        // Transform used to convert mouse coordinates to world coordinates
-        const transform = stage.getAbsoluteTransform().copy()
-        transform.invert()
-
         stage.on('mousemove.hover', () => {
+            // Transform used to convert mouse coordinates to world coordinates
+            const transform = stage.getAbsoluteTransform().copy()
+            transform.invert()
+
             const { x, y } = transform.point(stage.getPointerPosition())
             setPos([x, y])
         })
@@ -38,7 +38,7 @@ function HoverLayerComponent({ isEnabled, isValid, onClick, children }) {
     const y = gridY * TILE_SIZE_IN_PIXELS
 
     return (
-        <Layer opacity={0.6} ref={layerRef}>
+        <Layer opacity={0.2} 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>
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
index 1f00de36..5e741a3b 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/ObjectHoverLayer.js
@@ -27,7 +27,7 @@ import { findTileWithPosition } from '../../../../util/tile-calculations'
 import HoverLayerComponent from './HoverLayerComponent'
 import TilePlusIcon from '../elements/TilePlusIcon'
 
-function ObjectHoverLayer() {
+export default function ObjectHoverLayer() {
     const isEnabled = useSelector((state) => state.construction.inRackConstructionMode)
     const isValid = useSelector((state) => (x, y) => {
         if (state.interactionLevel.mode !== 'ROOM') {
@@ -49,5 +49,3 @@ function ObjectHoverLayer() {
         </HoverLayerComponent>
     )
 }
-
-export default ObjectHoverLayer
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
index 727f4e25..b9cfcaf4 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/layers/RoomHoverLayer.js
@@ -30,7 +30,7 @@ import {
 } from '../../../../util/tile-calculations'
 import HoverLayerComponent from './HoverLayerComponent'
 
-function RoomHoverLayer() {
+export default function RoomHoverLayer() {
     const dispatch = useDispatch()
     const onClick = (x, y) => dispatch(toggleTileAtLocation(x, y))
     const isEnabled = useSelector((state) => state.construction.currentRoomInConstruction !== '-1')
@@ -57,5 +57,3 @@ function RoomHoverLayer() {
 
     return <HoverLayerComponent onClick={onClick} isEnabled={isEnabled} isValid={isValid} />
 }
-
-export default RoomHoverLayer