diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-10-07 01:42:14 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-10-07 01:42:14 +0200 |
commit | fd4edbd6a854275c10c5b21173f0875921d547d1 (patch) | |
tree | ae25a9a95609636be0fadf79f70f4ef8eb01b4b5 /pages | |
parent | 33839479e269bed905f9eefc374060b9d3ee7e19 (diff) |
feat(preview): hover links + ui upgrade
Diffstat (limited to 'pages')
-rw-r--r-- | pages/index.tsx | 36 |
1 files changed, 19 insertions, 17 deletions
diff --git a/pages/index.tsx b/pages/index.tsx index 6ebdc6c..48394c0 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -43,7 +43,7 @@ import wrap from 'word-wrap' import ReconnectingWebSocket from 'reconnecting-websocket' import { deleteNodeInEmacs, openNodeInEmacs, createNodeInEmacs } from '../util/webSocketFunctions' -import { ChevronLeftIcon } from '@chakra-ui/icons' +import { ChevronLeftIcon, HamburgerIcon } from '@chakra-ui/icons' // react-force-graph fails on import when server-rendered // https://github.com/vasturiano/react-force-graph/issues/155 const ForceGraph2D = ( @@ -419,13 +419,6 @@ export function GraphPage() { height="100%" width="100%" > - <Sidebar - {...{ - isOpen, - onClose, - previewNode, - }} - /> <Tweaks {...{ physics, @@ -448,20 +441,18 @@ export function GraphPage() { <Flex height="100%" flexDirection="column" marginLeft="auto"> {!isOpen && ( <IconButton - icon={<ChevronLeftIcon />} - height={100} + icon={<HamburgerIcon />} aria-label="Open org-viewer" - position="relative" - zIndex="overlay" - colorScheme="purple" + zIndex={2} onClick={onOpen} variant="ghost" marginTop={10} + mr={8} /> )} </Flex> </Box> - <Box position="absolute" alignItems="top" overflow="hidden"> + <Flex position="absolute" alignItems="top" overflow="hidden"> <Graph ref={graphRef} nodeById={nodeByIdRef.current!} @@ -482,7 +473,18 @@ export function GraphPage() { setPreviewNode, }} /> - </Box> + <Sidebar + {...{ + isOpen, + onOpen, + onClose, + previewNode, + setPreviewNode, + }} + nodeById={nodeByIdRef.current!} + linksByNodeId={linksByNodeIdRef.current!} + /> + </Flex> </Box> ) } @@ -996,7 +998,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { const [zoom, setZoom] = useState(1) const graphCommonProps: ComponentPropsWithoutRef<typeof TForceGraph2D> = { graphData: scope.nodeIds.length ? scopedGraphData : filteredGraphData, - width: windowWidth, + //width: windowWidth, height: windowHeight, backgroundColor: theme.colors.gray[visuals.backgroundColor], warmupTicks: scope.nodeIds.length === 1 ? 100 : scope.nodeIds.length > 1 ? 20 : 0, @@ -1262,7 +1264,7 @@ function numberWithinRange(num: number, min: number, max: number) { return Math.min(Math.max(num, min), max) } -function normalizeLinkEnds(link: OrgRoamLink | LinkObject): [string, string] { +export function normalizeLinkEnds(link: OrgRoamLink | LinkObject): [string, string] { // we need to cover both because force-graph modifies the original data // but if we supply the original data on each render, the graph will re-render sporadically const sourceId = |