diff options
Diffstat (limited to 'components/contextmenu.tsx')
| -rw-r--r-- | components/contextmenu.tsx | 152 |
1 files changed, 84 insertions, 68 deletions
diff --git a/components/contextmenu.tsx b/components/contextmenu.tsx index 755bd9d..118b8bb 100644 --- a/components/contextmenu.tsx +++ b/components/contextmenu.tsx @@ -43,82 +43,90 @@ import { } from '@chakra-ui/icons' import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api' +import { deleteNodeInEmacs, openNodeInEmacs, createNodeInEmacs } from '../util/webSocketFunctions' +import { BiNetworkChart } from 'react-icons/bi' export default interface ContextMenuProps { background: Boolean - node?: OrgRoamNode + target: OrgRoamNode | null nodeType?: string - coordinates: number[] + coordinates: { [direction: string]: number | undefined } handleLocal: (node: OrgRoamNode, add: string) => void - openNodeInEmacs: (node: OrgRoamNode) => void menuClose: () => void scope: { nodeIds: string[] } - deleteNodeInEmacs: (node: OrgRoamNode) => void - createNodeInEmacs: (node: OrgRoamNode) => void + webSocket: any + setPreviewNode: any } export const ContextMenu = (props: ContextMenuProps) => { const { background, - node, + target, nodeType, coordinates, handleLocal, menuClose, scope, - openNodeInEmacs, - deleteNodeInEmacs, - createNodeInEmacs, + webSocket, + setPreviewNode, } = props const { isOpen, onOpen, onClose } = useDisclosure() const copyRef = useRef<any>() return ( <> - <Box - position="absolute" - zIndex="overlay" - left={coordinates[0] + 10} - top={coordinates[1] - 10} - padding={5} - > - <Menu closeOnBlur={false} defaultIsOpen onClose={() => menuClose()}> - <MenuList zIndex="overlay" bgColor="alt.100" borderColor="gray.500" maxWidth="xs"> - {node && ( - <> - <Heading size="sm" isTruncated px={3} py={1}> - {node.title} - </Heading> - <MenuDivider borderColor="gray.500" /> - </> - )} - {scope.nodeIds.length !== 0 && ( - <> - <MenuItem onClick={() => handleLocal(node!, 'add')} icon={<PlusSquareIcon />}> - Expand local graph at node - </MenuItem> - <MenuItem onClick={() => handleLocal(node!, 'replace')} icon={<ViewIcon />}> - Open local graph for this node - </MenuItem> - </> - )} - {!node?.properties.FILELESS ? ( - <MenuItem icon={<EditIcon />} onClick={() => openNodeInEmacs(node as OrgRoamNode)}> - Open in Emacs + <Menu defaultIsOpen closeOnBlur={false} onClose={() => menuClose()}> + <MenuList + zIndex="overlay" + bgColor="white" + color="black" + borderColor="gray.500" + maxWidth="xs" + position="absolute" + left={coordinates.left} + top={coordinates.top} + right={coordinates.right} + bottom={coordinates.bottom} + fontSize="xs" + > + {target && ( + <> + <Heading size="xs" isTruncated px={3} py={1}> + {target.title} + </Heading> + <MenuDivider borderColor="gray.500" /> + </> + )} + {scope.nodeIds.length !== 0 && ( + <> + <MenuItem onClick={() => handleLocal(target!, 'add')} icon={<PlusSquareIcon />}> + Expand local graph at node </MenuItem> - ) : ( - <MenuItem icon={<AddIcon />} onClick={() => createNodeInEmacs(node)}> - Create node + <MenuItem onClick={() => handleLocal(target!, 'replace')} icon={<BiNetworkChart />}> + Open local graph for this node </MenuItem> - )} - {node?.properties.ROAM_REFS && ( - <MenuItem icon={<ExternalLinkIcon />}>Open in Zotero</MenuItem> - )} - {scope.nodeIds.length === 0 && ( - <MenuItem icon={<ViewIcon />} onClick={() => handleLocal(node!, 'replace')}> - Open local graph - </MenuItem> - )} - {/* Doesn't work at the moment + </> + )} + {!target?.properties?.FILELESS ? ( + <MenuItem + icon={<EditIcon />} + onClick={() => openNodeInEmacs(target as OrgRoamNode, webSocket)} + > + Open in Emacs + </MenuItem> + ) : ( + <MenuItem icon={<AddIcon />} onClick={() => createNodeInEmacs(target, webSocket)}> + Create node + </MenuItem> + )} + {target?.properties?.ROAM_REFS && ( + <MenuItem icon={<ExternalLinkIcon />}>Open in Zotero</MenuItem> + )} + {scope.nodeIds.length === 0 && ( + <MenuItem icon={<BiNetworkChart />} onClick={() => handleLocal(target!, 'replace')}> + Open local graph + </MenuItem> + )} + {/* Doesn't work at the moment <MenuItem closeOnSelect={false} closeOnBlur={false}> <Box _hover={{ bg: 'gray.200' }} width="100%"> <Popover @@ -147,19 +155,27 @@ export const ContextMenu = (props: ContextMenuProps) => { </Popover> </Box> </MenuItem> */} - {node?.level === 0 && ( - <MenuItem - closeOnSelect={false} - icon={<DeleteIcon color="red.500" />} - color="red.500" - onClick={onOpen} - > - Permenantly delete note - </MenuItem> - )} - </MenuList> - </Menu> - </Box> + + <MenuItem + icon={<ViewIcon />} + onClick={() => { + setPreviewNode(target) + }} + > + Preview + </MenuItem> + {target?.level === 0 && ( + <MenuItem + closeOnSelect={false} + icon={<DeleteIcon color="red.500" />} + color="red.500" + onClick={onOpen} + > + Permenantly delete note + </MenuItem> + )} + </MenuList> + </Menu> <Modal isCentered isOpen={isOpen} onClose={onClose}> <ModalOverlay /> <ModalContent zIndex="popover"> @@ -168,8 +184,8 @@ export const ContextMenu = (props: ContextMenuProps) => { <ModalBody> <VStack spacing={4} display="flex" alignItems="flex-start"> <Text>This will permanently delete your note:</Text> - <Text fontWeight="bold">{node?.title}</Text> - {node?.level !== 0 && ( + <Text fontWeight="bold">{target?.title}</Text> + {target?.level !== 0 && ( <Text> This will only delete the from this heading until but not including the next node. Your parent file and all other nodes will not be deleted. @@ -195,7 +211,7 @@ export const ContextMenu = (props: ContextMenuProps) => { ml={3} onClick={() => { console.log('aaaaa') - deleteNodeInEmacs(node!) + deleteNodeInEmacs(target!, webSocket) onClose() menuClose() }} |