File size: 2,038 Bytes
f909d7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
import React from "react";
import { Menu, Text } from "@mantine/core";
import styled from "styled-components";
import { firaMono } from "src/constants/fonts";
import { Graph } from "src/containers/Views/GraphView";
import { TreeView } from "src/containers/Views/TreeView";
import { ViewMode } from "src/enums/viewMode.enum";
import useConfig from "src/store/useConfig";
const StyledLiveEditor = styled.div`
position: relative;
height: 100%;
background: ${({ theme }) => theme.GRID_BG_COLOR};
overflow: auto;
cursor: url("/assets/cursor.svg"), auto;
& > ul {
margin-top: 0 !important;
padding: 12px !important;
font-family: ${firaMono.style.fontFamily};
font-size: 14px;
font-weight: 500;
}
`;
const View = () => {
const viewMode = useConfig(state => state.viewMode);
if (viewMode === ViewMode.Graph) return <Graph />;
if (viewMode === ViewMode.Tree) return <TreeView />;
return null;
};
const LiveEditor: React.FC = () => {
const [contextOpened, setContextOpened] = React.useState(false);
const [contextPosition, setContextPosition] = React.useState({
x: 0,
y: 0,
});
return (
<StyledLiveEditor
onContextMenuCapture={e => {
e.preventDefault();
setContextOpened(true);
setContextPosition({ x: e.pageX, y: e.pageY });
}}
onClick={() => setContextOpened(false)}
>
<div
style={{
position: "fixed",
top: contextPosition.y,
left: contextPosition.x,
zIndex: 100,
}}
>
<Menu opened={false} shadow="sm">
<Menu.Dropdown>
<Menu.Item>
<Text size="xs">Download as Image</Text>
</Menu.Item>
<Menu.Item>
<Text size="xs">Zoom to Fit</Text>
</Menu.Item>
<Menu.Item>
<Text size="xs">Rotate</Text>
</Menu.Item>
</Menu.Dropdown>
</Menu>
</div>
<View />
</StyledLiveEditor>
);
};
export default LiveEditor;
|