From 30d502ff637bce778ec3ec5de86e357e61f0d68a Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 14 Apr 2022 11:41:13 +0200
Subject: fix(web/ui): Fix hotkeys support in React 18

This change fixes an issue where the library for hotkeys that we
previously used does not (yet) support React 18. Instead, we switch to a
simpler solution based on React Hooks which is compatible with React 18.
---
 .../src/components/topologies/TopologyMap.js       | 27 ++++++++--------------
 .../src/components/topologies/map/MapStage.js      | 26 ++++++++++++---------
 2 files changed, 25 insertions(+), 28 deletions(-)

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

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
-- 
cgit v1.2.3