diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src')
5 files changed, 14 insertions, 22 deletions
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 diff --git a/opendc-web/opendc-web-ui/src/util/effect-ref.js b/opendc-web/opendc-web-ui/src/util/effect-ref.js index cda0324b..78528585 100644 --- a/opendc-web/opendc-web-ui/src/util/effect-ref.js +++ b/opendc-web/opendc-web-ui/src/util/effect-ref.js @@ -26,9 +26,9 @@ const noop = () => {} /** * A hook that will invoke the specified callback when the reference returned by this function is initialized. - * The callback can return an optional clean up function. + * The callback can return an optional clean-up function. */ -export function useEffectRef(callback) { +export function useEffectRef(callback, deps = []) { const disposeRef = useRef(noop) return useCallback((element) => { disposeRef.current() @@ -37,5 +37,5 @@ export function useEffectRef(callback) { if (element) { disposeRef.current = callback(element) || noop } - }, []) // eslint-disable-line react-hooks/exhaustive-deps + }, deps) // eslint-disable-line react-hooks/exhaustive-deps } |