diff options
Diffstat (limited to 'subprojects/frontend/src/graph/GraphArea.tsx')
-rw-r--r-- | subprojects/frontend/src/graph/GraphArea.tsx | 46 |
1 files changed, 42 insertions, 4 deletions
diff --git a/subprojects/frontend/src/graph/GraphArea.tsx b/subprojects/frontend/src/graph/GraphArea.tsx index a1a741f3..f8f40d22 100644 --- a/subprojects/frontend/src/graph/GraphArea.tsx +++ b/subprojects/frontend/src/graph/GraphArea.tsx | |||
@@ -4,13 +4,51 @@ | |||
4 | * SPDX-License-Identifier: EPL-2.0 | 4 | * SPDX-License-Identifier: EPL-2.0 |
5 | */ | 5 | */ |
6 | 6 | ||
7 | import Box from '@mui/material/Box'; | ||
8 | import { useTheme } from '@mui/material/styles'; | ||
9 | import { observer } from 'mobx-react-lite'; | ||
10 | import { useResizeDetector } from 'react-resize-detector'; | ||
11 | |||
12 | import Loading from '../Loading'; | ||
13 | import { useRootStore } from '../RootStoreProvider'; | ||
14 | |||
7 | import DotGraphVisualizer from './DotGraphVisualizer'; | 15 | import DotGraphVisualizer from './DotGraphVisualizer'; |
16 | import VisibilityPanel from './VisibilityPanel'; | ||
8 | import ZoomCanvas from './ZoomCanvas'; | 17 | import ZoomCanvas from './ZoomCanvas'; |
9 | 18 | ||
10 | export default function GraphArea(): JSX.Element { | 19 | function GraphArea(): JSX.Element { |
20 | const { editorStore } = useRootStore(); | ||
21 | const { breakpoints } = useTheme(); | ||
22 | const { ref, width, height } = useResizeDetector({ | ||
23 | refreshMode: 'debounce', | ||
24 | }); | ||
25 | |||
26 | if (editorStore === undefined) { | ||
27 | return <Loading />; | ||
28 | } | ||
29 | |||
30 | const { graph } = editorStore; | ||
31 | const breakpoint = breakpoints.values.sm; | ||
32 | const dialog = | ||
33 | width === undefined || | ||
34 | height === undefined || | ||
35 | width < breakpoint || | ||
36 | height < breakpoint; | ||
37 | |||
11 | return ( | 38 | return ( |
12 | <ZoomCanvas> | 39 | <Box |
13 | {(fitZoom) => <DotGraphVisualizer fitZoom={fitZoom} />} | 40 | width="100%" |
14 | </ZoomCanvas> | 41 | height="100%" |
42 | overflow="hidden" | ||
43 | position="relative" | ||
44 | ref={ref} | ||
45 | > | ||
46 | <ZoomCanvas> | ||
47 | {(fitZoom) => <DotGraphVisualizer graph={graph} fitZoom={fitZoom} />} | ||
48 | </ZoomCanvas> | ||
49 | <VisibilityPanel graph={graph} dialog={dialog} /> | ||
50 | </Box> | ||
15 | ); | 51 | ); |
16 | } | 52 | } |
53 | |||
54 | export default observer(GraphArea); | ||