From efe1cebb4c1d8f07c0f1afb8bf08732d9fe20125 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 26 Mar 2023 21:49:26 +0100
Subject: 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
---
 .../opendc-web-ui/src/components/topologies/map/MapStage.js  | 12 ++++--------
 .../components/topologies/map/layers/HoverLayerComponent.js  | 10 +++++-----
 .../src/components/topologies/map/layers/ObjectHoverLayer.js |  4 +---
 .../src/components/topologies/map/layers/RoomHoverLayer.js   |  4 +---
 4 files changed, 11 insertions(+), 19 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
index 1b9fff72..e2b626ec 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/MapStage.js
@@ -1,9 +1,8 @@
-import React, { useRef, useState, useContext } from 'react'
+import React, { useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { Stage } from 'react-konva'
 import { MAP_MAX_SCALE, MAP_MIN_SCALE, MAP_MOVE_PIXELS_PER_EVENT, MAP_SCALE_PER_EVENT } from './MapConstants'
-import { ReactReduxContext } from 'react-redux'
 import useResizeObserver from 'use-resize-observer'
 import { mapContainer } from './MapStage.module.css'
 import MapLayer from './layers/MapLayer'
@@ -13,7 +12,6 @@ import ScaleIndicator from './controls/ScaleIndicator'
 import Toolbar from './controls/Toolbar'
 
 function MapStage({ hotkeysRef }) {
-    const reduxContext = useContext(ReactReduxContext)
     const stageRef = useRef(null)
     const { width = 500, height = 500 } = useResizeObserver({ ref: stageRef.current?.attrs?.container })
     const [[x, y], setPos] = useState([0, 0])
@@ -68,11 +66,9 @@ function MapStage({ hotkeysRef }) {
                 x={x}
                 y={y}
             >
-                <ReactReduxContext.Provider value={reduxContext}>
-                    <MapLayer />
-                    <RoomHoverLayer />
-                    <ObjectHoverLayer />
-                </ReactReduxContext.Provider>
+                <MapLayer />
+                <RoomHoverLayer />
+                <ObjectHoverLayer />
             </Stage>
             <ScaleIndicator scale={scale} />
             <Toolbar onZoom={onZoomButton} onExport={onExport} />
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
-- 
cgit v1.2.3