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

1 files changed, 5 insertions, 5 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>