feature: context menu and slightly less jumpy graph

1 files changed, 216 insertions, 0 deletions

diff --git a/components/contextmenu.tsx b/components/contextmenu.tsx
new file mode 100644
index 0000000..c20b3e9
--- /dev/null
+++ b/components/contextmenu.tsx
@@ -0,0 +1,216 @@
+import React, { useRef } from 'react'
+import {
+    Box,
+    Menu,
+    MenuItem,
+    MenuList,
+    MenuGroup,
+    MenuItemOption,
+    MenuOptionGroup,
+    Heading,
+    MenuDivider,
+    Modal,
+    ModalOverlay,
+    ModalContent,
+    ModalHeader,
+    ModalFooter,
+    ModalBody,
+    ModalCloseButton,
+    useDisclosure,
+    Button,
+    PopoverTrigger,
+    PopoverContent,
+    Popover,
+    Flex,
+    PopoverBody,
+    PopoverCloseButton,
+    PopoverArrow,
+    PopoverHeader,
+    PopoverFooter,
+    Portal,
+    Text,
+    VStack,
+} from '@chakra-ui/react'
+import {
+    DeleteIcon,
+    EditIcon,
+    CopyIcon,
+    AddIcon,
+    ViewIcon,
+    ExternalLinkIcon,
+    ChevronRightIcon,
+    PlusSquareIcon,
+} from '@chakra-ui/icons'
+
+import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api'
+
+export default interface ContextMenuProps {
+    background: Boolean
+    node?: OrgRoamNode
+    nodeType?: string
+    coordinates: number[]
+    handleLocal: (node: OrgRoamNode, add: string) => void
+    openNodeInEmacs: (node: OrgRoamNode) => void
+    menuClose: () => void
+    scope: { nodeIds: string[] }
+    deleteNodeInEmacs: (node: OrgRoamNode) => void
+}
+
+export const ContextMenu = (props: ContextMenuProps) => {
+    const { background, node, nodeType, coordinates, handleLocal, menuClose, scope, openNodeInEmacs, deleteNodeInEmacs } = 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)}>Open in Emacs</MenuItem>
+                        ) : (
+                            <MenuItem icon={<AddIcon />}>Create 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
+                            <MenuItem closeOnSelect={false} closeOnBlur={false}>
+                            <Box _hover={{ bg: 'gray.200' }} width="100%">
+                                <Popover
+                                    initialFocusRef={copyRef}
+                                    trigger="hover"
+                                    placement="right-start"
+                                    gutter={0}
+                                >
+                                    <PopoverTrigger>
+                                        <MenuItem closeOnSelect={false} icon={<CopyIcon />}>
+                                            <Flex justifyContent="space-between" alignItems="center">
+                                                Copy...
+                                                <ChevronRightIcon />
+                                            </Flex>
+                                        </MenuItem>
+                                    </PopoverTrigger>
+                                    <PopoverContent width={100}>
+                                        <Menu defaultIsOpen closeOnBlur={false} closeOnSelect={false}>
+                                            <MenuList bg="alt.100" zIndex="popover">
+                                                <MenuItem ref={copyRef}>ID</MenuItem>
+                                                <MenuItem>Title</MenuItem>
+                                                <MenuItem>File path</MenuItem>
+                                            </MenuList>
+                                        </Menu>
+                                    </PopoverContent>
+                                </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>
+            <Modal isCentered isOpen={isOpen} onClose={onClose}>
+                <ModalOverlay />
+                <ModalContent zIndex="popover" >
+                    <ModalHeader>Delete node?</ModalHeader>
+                    <ModalCloseButton />
+                    <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>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.</Text>}
+                            <Text>
+                                Are you sure you want to do continue?
+                            </Text>
+                        </VStack>
+                    </ModalBody>
+                    <ModalFooter>
+                        <Button mr={3} onClick={() => {
+                            console.log('closing')
+                            onClose()
+                        }}>
+                            Cancel
+                        </Button>
+                        <Button variant="link" colorScheme="red" ml={3}
+                            onClick={() => {
+                                console.log('aaaaa')
+                                deleteNodeInEmacs(node!)
+                                onClose()
+                            }}
+                        >
+                            Delete node
+                        </Button>
+                    </ModalFooter>
+                </ModalContent>
+            </Modal>
+        </>
+    )
+}
+
+/* <Box>
+ *     <Popover>
+ *         <PopoverTrigger>
+ *                 Permenantly delete node
+ *             </MenuItem>
+ *         </PopoverTrigger>
+ *         <PopoverContent borderColor="red.500" _focus={{}}>
+ *             <PopoverHeader fontWeight="semibold">Delete Node?</PopoverHeader>
+ *             <PopoverArrow />
+ *             <PopoverCloseButton onClick={onClose} />
+ *             <PopoverBody>
+ *                 This will permanently delete your node! Are you sure you want to do this?
+ *             </PopoverBody>
+ *             <PopoverFooter>
+ *                 <Flex justifyContent="space-between" py={1}>
+ *                     <Button colorScheme="gray" bg="gray.800" color="alt.100" width={30} onClick={onClose}>
+ *                         Nah
+ *                     </Button>
+ *                     <Button colorScheme="red" variant="link" onClick={onClose}>
+ *                         Delete node
+ *                     </Button>
+ *                 </Flex>
+ *             </PopoverFooter>
+ *         </PopoverContent>
+ *     </Popover>
+ * </Box> */