summaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-10-01 19:11:08 +0200
committerThomas F. K. Jorna <[email protected]>2021-10-01 19:11:08 +0200
commit56eeb1fc6b03c4e8ed9405e301c7edc7be5fd5d9 (patch)
tree0c7e889f2d749abad3d65a16d4ee0449002c4d89 /components
parent56e81e56ad181129c9f36b75e5ca076162b7cac7 (diff)
feat: basic preview feature
Diffstat (limited to 'components')
-rw-r--r--components/Sidebar/index.tsx273
-rw-r--r--components/contextmenu.tsx22
2 files changed, 283 insertions, 12 deletions
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
new file mode 100644
index 0000000..64436f2
--- /dev/null
+++ b/components/Sidebar/index.tsx
@@ -0,0 +1,273 @@
+import React, { useContext, useEffect, useState } from 'react'
+
+import { UniOrg } from "../../util/uniorg"
+import { getOrgText } from "../../util/webSocketFunctions"
+
+import {
+ Button,
+ Slide,
+ VStack,
+ Flex,
+ Heading,
+ Box,
+ CloseButton,
+ Text,
+ Drawer,
+ DrawerOverlay,
+ DrawerHeader,
+ DrawerBody,
+ DrawerCloseButton,
+ DrawerContent,
+ DrawerFooter,
+ IconButton,
+} from '@chakra-ui/react'
+import { Scrollbars } from 'react-custom-scrollbars-2'
+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
+
+import { GraphData, NodeObject, LinkObject } from 'force-graph'
+import { OrgRoamNode } from '../../api'
+import {ThemeContext} from '../../util/themecontext'
+
+export interface SidebarProps {
+ isOpen: boolean
+ onClose: any
+ openNode: string
+ nodeById: any
+ previewNode: NodeObject,
+ orgText: string
+}
+
+const Sidebar = (props: SidebarProps) => {
+
+ const { isOpen, onClose, openNode, nodeById, previewNode, orgText } = props
+
+ const {highlightColor}= useContext(ThemeContext)
+
+ useEffect(() => {
+ (async () => {
+ if (!openNode) {
+ return
+ }
+ if (openNode === 'nil') {
+ return
+ }
+ })()
+
+ const previewRoamNode = previewNode as OrgRoamNode
+ }, [previewNode])
+
+ //maybe want to close it when clicking outside, but not sure
+ //const outsideClickRef = useRef();
+ return (
+ <Slide direction="right" in={isOpen} style={{ zIndex: 200, width: 500 }} unmountOnExit>
+ <Flex flexDirection="row" height="100%">
+ <IconButton
+ icon={<ChevronRightIcon height={30} />}
+ colorScheme="white"
+ aria-label="Close file-viewer"
+ height={100}
+ variant="ghost"
+ marginRight={-2}
+ bg="alt.100"
+ onClick={onClose}
+ marginTop={20}
+ />
+ <Box
+ color="gray.800"
+ bg="alt.100"
+ boxShadow="xl"
+ w={500}
+ height="98%"
+ position="relative"
+ zIndex="overlay"
+ marginTop={10}
+ paddingBottom={15}
+ borderRadius="xl"
+ right={-2}
+ >
+ <Flex
+ justifyContent="space-between"
+ padding={4}
+ paddingTop={10}
+ paddingLeft={10}
+ width="80%"
+ alignItems="center"
+ color="black"
+ >
+ <Heading size="md">{previewNode.title}</Heading>
+ </Flex>
+ <Scrollbars
+ //autoHeight
+ //autoHeightMax={600}
+ autoHide
+ renderThumbVertical={({ style, ...props }) => (
+ <Box
+ {...props}
+ style={{
+ ...style,
+ borderRadius: 10,
+ }}
+ bg={highlightColor}
+ />
+ )}
+ >
+ <VStack alignItems="left" bg="alt.100" paddingLeft={10} paddingRight={10}>
+ <Box
+ className="org"
+ sx={{
+ h1: { display: 'none' },
+ h2: {
+ fontSize: '20',
+ fontWeight: 'bold !important',
+ marginBottom: '1em',
+ color: 'black',
+ },
+ h3: {
+ fontSize: '18',
+ fontWeight: '600 !important',
+ marginBottom: '.5em',
+ },
+ h4: {
+ fontSize: '16',
+ fontWeight: '500 !important',
+ marginBottom: '.25em',
+ fontStyle: 'italic',
+ },
+ a: {
+ color: highlightColor,
+ pointerEvents: 'none',
+ },
+ ol: {
+ paddingLeft: '5',
+ },
+ ul: {
+ paddingLeft: '5',
+ },
+ p: {
+ paddingBottom: '.5em',
+ },
+ ".katex-html": {visibility: 'hidden',
+ width: '0px', position: 'absolute'},
+ '#content': { textAlign: 'justify' },
+ '.title': {
+ textAlign: 'center',
+ marginBottom: '.2em',
+ },
+ '.subtitle': {
+ textAlign: 'center',
+ fontSize: 'medium',
+ fontWeight: 'bold',
+ marginTop: 0,
+ },
+ '.todo': { fontFamily: 'monospace', color: 'red' },
+ '.equationContainer': {
+ display: 'table',
+ textAlign: 'center',
+ width: '100%',
+ },
+ '.equation': {
+ verticalAlign: 'middle',
+ },
+ '.equation-label': {
+ display: 'tableCell',
+ textAlign: 'right',
+ verticalAlign: 'middle',
+ },
+ '.inlinetask': {
+ padding: '10px',
+ border: '2px solid gray',
+ margin: '10px',
+ background: '#ffffcc',
+ },
+ '#org-div-home-and-up': {
+ textAlign: 'right',
+ fontSize: '70 % ',
+ whiteSpace: 'nowrap',
+ },
+ textarea: { overflowX: 'auto' },
+ '.linenr': { fontSize: 'smaller' },
+ '.code-highlighted': { backgroundColor: '#ffff00' },
+ '.org-info-js_info-navigation': { borderStyle: 'none' },
+ '#org-info-js_console-label': {
+ fontSize: '10px',
+ fontWeight: 'bold',
+ whiteSpace: 'nowrap',
+ },
+ '.org-info-js_search-highlight': {
+ backgroundColor: '#ffff00',
+ color: '#000000',
+ fontWeight: 'bold',
+ },
+ '.org-svg': { width: '90%' },
+ '.done': { fontFamily: 'monospace', color: 'green' },
+ '.priority': { fontFamily: 'monospace', color: 'orange' },
+ '.tag': {
+ backgroundColor: '#eee',
+ fontFamily: 'monospace',
+ padding: '2px',
+ fontSize: '80%',
+ fontWeight: 'normal',
+ },
+ '.timestamp': { color: '#bebebe' },
+ '.timestamp-kwd': { color: '#5f9ea0' },
+ '.org-right': { marginLeft: 'auto', marginRight: '0px', textAlign: 'right' },
+ '.org-left': { marginLeft: '0px', marginRight: 'auto', textAlign: 'left' },
+ '.org-center': { marginLeft: 'auto', marginRight: 'auto', textAlign: 'center' },
+ '.underline': { textDecoration: 'underline' },
+ '#postamble p': { fontSize: '90%', margin: '.2em' },
+ '#preamble p': { fontSize: '90%', margin: '.2em' },
+ 'p.verse': { marginLeft: '3%' },
+ pre: {
+ border: '1px solid #e6e6e6',
+ borderRadius: '3px',
+ backgroundColor: '#f2f2f2',
+ padding: '8pt',
+ fontFamily: 'monospace',
+ overflow: 'auto',
+ margin: '1.2em',
+ },
+ 'pre.src': {
+ position: 'relative',
+ overflow: 'auto',
+ },
+ 'pre.src:before': {
+ display: 'none',
+ position: 'absolute',
+ top: '-8px',
+ right: '12px',
+ padding: '3px',
+ color: '#555',
+ backgroundColor: '#f2f2f299',
+ },
+ 'caption.t-above': { captionSide: 'top' },
+ 'caption.t-bottom': { captionSide: 'bottom' },
+ 'th.org-right': { textAlign: 'center' },
+ 'th.org-left': { textAlign: 'center' },
+ 'th.org-center': { textAlign: 'center' },
+ 'td.org-right': { textAlign: 'right' },
+ 'td.org-left': { textAlign: 'left' },
+ 'td.org-center': { textAlign: 'center' },
+ '.footpara': { display: 'inline' },
+ '.footdef': { marginBottom: '1em' },
+ '.figure': { padding: '1em' },
+ '.figure p': { textAlign: 'center' },
+ }}
+ >
+ <UniOrg orgText={orgText} />
+ </Box>
+ </VStack>
+ </Scrollbars>
+ </Box>
+ </Flex>
+ </Slide>
+ )
+}
+
+export default Sidebar
+
+
+
+
+/* <Box marginLeft="auto" zIndex={5000} bg="alt.100" maxHeight="100%" width= "30%" padding={8} borderRadius={2}>
+ <Heading size="sm">{previewNode.title}</Heading>
+</Box> */
diff --git a/components/contextmenu.tsx b/components/contextmenu.tsx
index 39b1895..ff3dd81 100644
--- a/components/contextmenu.tsx
+++ b/components/contextmenu.tsx
@@ -43,6 +43,7 @@ import {
} from '@chakra-ui/icons'
import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api'
+import { getOrgText, deleteNodeInEmacs, openNodeInEmacs, createNodeInEmacs } from "../util/webSocketFunctions"
export default interface ContextMenuProps {
background: Boolean
@@ -50,12 +51,10 @@ export default interface ContextMenuProps {
nodeType?: string
coordinates: number[]
handleLocal: (node: OrgRoamNode, add: string) => void
- openNodeInEmacs: (node: OrgRoamNode) => void
menuClose: () => void
scope: { nodeIds: string[] }
- deleteNodeInEmacs: (node: OrgRoamNode) => void
- createNodeInEmacs: (node: OrgRoamNode) => void
- getOrgText: any
+ webSocket: any
+ setPreviewNode: any,
}
export const ContextMenu = (props: ContextMenuProps) => {
@@ -67,10 +66,8 @@ export const ContextMenu = (props: ContextMenuProps) => {
handleLocal,
menuClose,
scope,
- openNodeInEmacs,
- deleteNodeInEmacs,
- createNodeInEmacs,
- getOrgText,
+ webSocket,
+ setPreviewNode,
} = props
const { isOpen, onOpen, onClose } = useDisclosure()
const copyRef = useRef<any>()
@@ -104,11 +101,11 @@ export const ContextMenu = (props: ContextMenuProps) => {
</>
)}
{!node?.properties.FILELESS ? (
- <MenuItem icon={<EditIcon />} onClick={() => openNodeInEmacs(node as OrgRoamNode)}>
+ <MenuItem icon={<EditIcon />} onClick={() => openNodeInEmacs(node as OrgRoamNode, webSocket)}>
Open in Emacs
</MenuItem>
) : (
- <MenuItem icon={<AddIcon />} onClick={() => createNodeInEmacs(node)}>
+ <MenuItem icon={<AddIcon />} onClick={() => createNodeInEmacs(node, webSocket)}>
Create node
</MenuItem>
)}
@@ -159,7 +156,8 @@ export const ContextMenu = (props: ContextMenuProps) => {
Permenantly delete note
</MenuItem>
)}
- <MenuItem onClick={() => getOrgText(node)}>Preview</MenuItem>
+ <MenuItem onClick={() => {getOrgText(node!, webSocket)
+ setPreviewNode(node)}}>Preview</MenuItem>
</MenuList>
</Menu>
</Box>
@@ -198,7 +196,7 @@ export const ContextMenu = (props: ContextMenuProps) => {
ml={3}
onClick={() => {
console.log('aaaaa')
- deleteNodeInEmacs(node!)
+ deleteNodeInEmacs(node!, webSocket)
onClose()
menuClose()
}}