diff options
| author | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-07-16 14:20:34 +0200 |
|---|---|---|
| committer | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-07-16 14:20:34 +0200 |
| commit | e5caf6c6122684e441d1d73e2e0507fdd36c67e0 (patch) | |
| tree | bbc808d1d7fd52387c6e1dc8e7b074f7f499210d /opendc-web | |
| parent | db1d2c2f8c18850dedf34b5d690b6cd6a1d1f6b5 (diff) | |
feat(ui): Support panning of the datacenter topology
This change enables support for panning the visualized datacenter
topology by using the mouse or holding shortcuts. Previously, this could
only be done through repeated key presses.
Diffstat (limited to 'opendc-web')
| -rw-r--r-- | opendc-web/opendc-web-ui/src/components/app/map/MapStage.js | 2 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js | 7 |
2 files changed, 7 insertions, 2 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js index 73accf3f..684ddf28 100644 --- a/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js +++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStage.js @@ -52,7 +52,7 @@ function MapStage() { return ( <HotKeys handlers={handlers} allowChanges={true} innerRef={ref} className={mapContainer}> - <Stage ref={stage} width={width} height={height} onMouseMove={updateMousePosition} onWheel={updateScale}> + <Stage ref={stage} width={width} height={height} onMouseMove={updateMousePosition} onWheel={updateScale} draggable> <Provider store={store}> <MapLayer /> <RoomHoverLayer mouseX={x} mouseY={y} /> diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index 5873ed11..786bed07 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -24,7 +24,7 @@ import { useRouter } from 'next/router' import { useProject } from '../../../../data/project' import { useDispatch, useSelector } from 'react-redux' import React, { useEffect, useState } from 'react' -import { HotKeys } from 'react-hotkeys' +import {configure, HotKeys} from 'react-hotkeys' import { KeymapConfiguration } from '../../../../hotkeys' import Head from 'next/head' import MapStage from '../../../../components/app/map/MapStage' @@ -70,6 +70,11 @@ function Topology() { 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 + }) + return ( <AppPage> <Head> |