diff options
Diffstat (limited to 'pages/index.tsx')
| -rw-r--r-- | pages/index.tsx | 137 |
1 files changed, 71 insertions, 66 deletions
diff --git a/pages/index.tsx b/pages/index.tsx index 5b3c35d..ad01741 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -17,11 +17,12 @@ import type { } from 'react-force-graph' import { OrgRoamGraphReponse, OrgRoamLink, OrgRoamNode } from '../api' import { GraphData, NodeObject, LinkObject } from 'force-graph' +import Sidebar from '../components/Sidebar' import { useWindowSize } from '@react-hook/window-size' import { useAnimation } from '@lilib/hooks' -import { Box, useDisclosure, useTheme } from '@chakra-ui/react' +import { Box, Flex, IconButton, useDisclosure, useTheme } from '@chakra-ui/react' import { initialPhysics, @@ -41,6 +42,8 @@ import SpriteText from 'three-spritetext' import wrap from 'word-wrap' import ReconnectingWebSocket from 'reconnecting-websocket' +import { getOrgText, deleteNodeInEmacs, openNodeInEmacs, createNodeInEmacs } from "../util/webSocketFunctions" +import { ChevronLeftIcon } from '@chakra-ui/icons' // react-force-graph fails on import when server-rendered // https://github.com/vasturiano/react-force-graph/issues/155 const ForceGraph2D = ( @@ -84,11 +87,9 @@ export function GraphPage() { const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null) const [behavior, setBehavior] = usePersistantState('behavior', initialBehavior) const [mouse, setMouse] = usePersistantState('mouse', initialMouse) - const [orgText, setOrgText] = useState('') - - useEffect(() => { - console.log(orgText) - }, [orgText]) + const [orgText, setOrgText] = useState("") + const [previewNode, setPreviewNode] = useState<NodeObject>({}) + const { isOpen, onOpen, onClose } = useDisclosure() const nodeByIdRef = useRef<NodeById>({}) const linksByNodeIdRef = useRef<LinksByNodeId>({}) @@ -364,7 +365,7 @@ export function GraphPage() { case 'graphdata': return updateGraphData(message.data) case 'orgText': - return setOrgText(message.data) + return setOrgText(message.data) case 'theme': return setEmacsTheme(message.data) case 'command': @@ -414,25 +415,50 @@ export function GraphPage() { return ( <Box display="flex" alignItems="flex-start" flexDirection="row" height="100%" overflow="hidden"> - <Tweaks - {...{ - physics, - setPhysics, - threeDim, - setThreeDim, - filter, - setFilter, - visuals, - setVisuals, - mouse, - setMouse, - behavior, - setBehavior, - tagColors, - setTagColors, + <Box display="flex" justifyContent="space-between" flexDirection="row" height="100%" width="100%"> + <Sidebar + {...{ + isOpen, + onClose, + previewNode, + orgText, }} - tags={tagsRef.current} - /> + /> + <Tweaks + {...{ + physics, + setPhysics, + threeDim, + setThreeDim, + filter, + setFilter, + visuals, + setVisuals, + mouse, + setMouse, + behavior, + setBehavior, + tagColors, + setTagColors, + }} + tags={tagsRef.current} + /> + <Flex height="100%" flexDirection="column" marginLeft="auto"> + {!isOpen && ( + <IconButton + icon={<ChevronLeftIcon />} + height={100} + aria-label="Open org-viewer" + position="relative" + zIndex="overlay" + colorScheme="purple" + onClick={onOpen} + variant="ghost" + marginTop={10} + /> + )} + </Flex> + </Box> <Box position="absolute" alignItems="top" overflow="hidden"> <Graph ref={graphRef} @@ -451,6 +477,7 @@ export function GraphPage() { scope, setScope, tagColors, + setPreviewNode, }} /> </Box> @@ -473,9 +500,10 @@ export interface GraphProps { setScope: any webSocket: any tagColors: { [tag: string]: string } + setPreviewNode: any } -export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { +export const Graph = forwardRef(function(props: GraphProps, graphRef: any) { const { physics, graphData, @@ -491,6 +519,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { setScope, webSocket, tagColors, + setPreviewNode, } = props // react-force-graph does not track window size @@ -522,28 +551,6 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { return } - const sendMessageToEmacs = (command: string, data: {}) => { - webSocket.send(JSON.stringify({ command: command, data: data })) - } - - const getOrgText = (node: OrgRoamNode) => { - sendMessageToEmacs('getText', { id: node.id }) - } - - const openNodeInEmacs = (node: OrgRoamNode) => { - sendMessageToEmacs('open', { id: node.id }) - } - - const deleteNodeInEmacs = (node: OrgRoamNode) => { - if (node.level !== 0) { - return - } - sendMessageToEmacs('delete', { id: node.id, file: node.file }) - } - - const createNodeInEmacs = (node: OrgRoamNode) => { - sendMessageToEmacs('create', { id: node.id, title: node.title, ref: node.properties.ROAM_REFS }) - } const contextMenu = useDisclosure() @@ -560,7 +567,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { break } case mouse.follow: { - openNodeInEmacs(node) + openNodeInEmacs(node, webSocket) break } case mouse.context: { @@ -772,7 +779,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { ]) useEffect(() => { - ;(async () => { + ; (async () => { const fg = graphRef.current const d3 = await d3promise if (physics.gravityOn && !(scope.nodeIds.length && !physics.gravityLocal)) { @@ -934,15 +941,15 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { return needsHighlighting ? getThemeColor(visuals.citeNodeColor) : highlightColors[visuals.citeNodeColor][visuals.backgroundColor]( - visuals.highlightFade * opacity, - ) + visuals.highlightFade * opacity, + ) } if (visuals.refNodeColor && node.properties.ROAM_REFS) { return needsHighlighting ? getThemeColor(visuals.refNodeColor) : highlightColors[visuals.refNodeColor][visuals.backgroundColor]( - visuals.highlightFade * opacity, - ) + visuals.highlightFade * opacity, + ) } if (!needsHighlighting) { return highlightColors[getNodeColorById(node.id as string)][visuals.backgroundColor]( @@ -1090,20 +1097,20 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { if (visuals.refLinkColor && roamLink.type === 'ref') { return needsHighlighting && (visuals.refLinkHighlightColor || visuals.linkHighlight) ? highlightColors[visuals.refLinkColor][ - visuals.refLinkHighlightColor || visuals.linkHighlight - ](opacity) + visuals.refLinkHighlightColor || visuals.linkHighlight + ](opacity) : highlightColors[visuals.refLinkColor][visuals.backgroundColor]( - visuals.highlightFade * opacity, - ) + visuals.highlightFade * opacity, + ) } if (visuals.citeLinkColor && roamLink.type?.includes('cite')) { return needsHighlighting && (visuals.citeLinkHighlightColor || visuals.linkHighlight) ? highlightColors[visuals.citeLinkColor][ - visuals.citeLinkHighlightColor || visuals.linkHighlight - ](opacity) + visuals.citeLinkHighlightColor || visuals.linkHighlight + ](opacity) : highlightColors[visuals.citeLinkColor][visuals.backgroundColor]( - visuals.highlightFade * opacity, - ) + visuals.highlightFade * opacity, + ) } return getLinkColor(sourceId as string, targetId as string, needsHighlighting) @@ -1192,10 +1199,8 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { coordinates={contextPos} handleLocal={handleLocal} menuClose={contextMenu.onClose.bind(contextMenu)} - openNodeInEmacs={openNodeInEmacs} - deleteNodeInEmacs={deleteNodeInEmacs} - createNodeInEmacs={createNodeInEmacs} - getOrgText={getOrgText} + webSocket={webSocket} + setPreviewNode={setPreviewNode} /> )} {threeDim ? ( |