diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src')
3 files changed, 25 insertions, 34 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js index 2f27749f..47235c7e 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyMap.js @@ -20,7 +20,7 @@ * SOFTWARE. */ -import React, { useState } from 'react' +import React, { useState, useRef } from 'react' import { Bullseye, Drawer, @@ -31,8 +31,6 @@ import { Spinner, Title, } from '@patternfly/react-core' -import { configure, HotKeys } from 'react-hotkeys' -import { KeymapConfiguration } from '../../hotkeys' import MapStage from './map/MapStage' import Collapse from './map/controls/Collapse' import { useSelector } from 'react-redux' @@ -45,10 +43,7 @@ function TopologyMap() { const [isExpanded, setExpanded] = useState(true) const panelContent = <TopologySidebar interactionLevel={interactionLevel} onClose={() => setExpanded(false)} /> - // Make sure that holding down a key will generate repeated events - configure({ - ignoreRepeatedEventsWhenKeyHeldDown: false, - }) + const hotkeysRef = useRef() return topologyIsLoading ? ( <Bullseye> @@ -60,16 +55,14 @@ function TopologyMap() { </EmptyState> </Bullseye> ) : ( - <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="full-height"> - <Drawer isExpanded={isExpanded}> - <DrawerContent panelContent={panelContent}> - <DrawerContentBody> - <MapStage /> - <Collapse onClick={() => setExpanded(true)} /> - </DrawerContentBody> - </DrawerContent> - </Drawer> - </HotKeys> + <Drawer isExpanded={isExpanded} className="full-height"> + <DrawerContent panelContent={panelContent}> + <DrawerContentBody> + <MapStage hotkeysRef={hotkeysRef} /> + <Collapse onClick={() => setExpanded(true)} /> + </DrawerContentBody> + </DrawerContent> + </Drawer> ) } 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 d8735cf1..7b96f548 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,5 +1,6 @@ import React, { useRef, useState, useContext } from 'react' -import { HotKeys } from 'react-hotkeys' +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' @@ -11,10 +12,10 @@ import ObjectHoverLayer from './layers/ObjectHoverLayer' import ScaleIndicator from './controls/ScaleIndicator' import Toolbar from './controls/Toolbar' -function MapStage() { +function MapStage({ hotkeysRef }) { const reduxContext = useContext(ReactReduxContext) - const { ref, width = 100, height = 100 } = useResizeObserver() const stageRef = useRef(null) + const { width = 100, height = 100 } = useResizeObserver({ ref: stageRef.current?.attrs?.container }) const [[x, y], setPos] = useState([0, 0]) const [scale, setScale] = useState(1) @@ -48,16 +49,15 @@ function MapStage() { download.click() } - const handlers = { - MOVE_LEFT: () => moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0), - MOVE_RIGHT: () => moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0), - MOVE_UP: () => moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT), - MOVE_DOWN: () => moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT), - } + useHotkeys('left, a', () => moveWithDelta(MAP_MOVE_PIXELS_PER_EVENT, 0), { element: hotkeysRef.current }) + useHotkeys('right, d', () => moveWithDelta(-MAP_MOVE_PIXELS_PER_EVENT, 0), { element: hotkeysRef.current }) + useHotkeys('up, w', () => moveWithDelta(0, MAP_MOVE_PIXELS_PER_EVENT), { element: hotkeysRef.current }) + useHotkeys('down, s', () => moveWithDelta(0, -MAP_MOVE_PIXELS_PER_EVENT), { element: hotkeysRef.current }) return ( - <HotKeys handlers={handlers} allowChanges={true} innerRef={ref} className={mapContainer}> + <> <Stage + className={mapContainer} ref={stageRef} onWheel={onZoom} onDragEnd={onDragEnd} @@ -76,8 +76,12 @@ function MapStage() { </Stage> <ScaleIndicator scale={scale} /> <Toolbar onZoom={onZoomButton} onExport={onExport} /> - </HotKeys> + </> ) } +MapStage.propTypes = { + hotkeysRef: PropTypes.object.isRequired, +} + export default MapStage diff --git a/opendc-web/opendc-web-ui/src/hotkeys.js b/opendc-web/opendc-web-ui/src/hotkeys.js deleted file mode 100644 index 1c4d2621..00000000 --- a/opendc-web/opendc-web-ui/src/hotkeys.js +++ /dev/null @@ -1,6 +0,0 @@ -export const KeymapConfiguration = { - MOVE_LEFT: ['a', 'left'], - MOVE_RIGHT: ['d', 'right'], - MOVE_UP: ['w', 'up'], - MOVE_DOWN: ['s', 'down'], -} |