From 546a88ec37073840e98ed689f7139d04985e861c Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Mon, 11 Oct 2021 01:13:10 +0200 Subject: feat(preview): ui redo --- components/Sidebar/Backlinks.tsx | 3 + components/Sidebar/Link.tsx | 20 +- components/Sidebar/Note.tsx | 4 + components/Sidebar/Toolbar.tsx | 102 +++++----- components/Sidebar/index.tsx | 109 ++++++++--- components/Tweaks/BehaviorPanel.tsx | 1 + components/Tweaks/SliderWithInfo.tsx | 2 +- components/Tweaks/index.tsx | 27 +-- components/config.ts | 5 +- components/contextmenu.tsx | 146 +++++++------- package-lock.json | 31 +++ package.json | 1 + pages/_app.tsx | 5 + pages/index.tsx | 357 ++++++++++++++++++++++------------- util/processOrg.tsx | 7 +- util/uniorg.tsx | 11 +- 16 files changed, 532 insertions(+), 299 deletions(-) diff --git a/components/Sidebar/Backlinks.tsx b/components/Sidebar/Backlinks.tsx index 8c1e9bc..68ab551 100644 --- a/components/Sidebar/Backlinks.tsx +++ b/components/Sidebar/Backlinks.tsx @@ -14,6 +14,7 @@ export interface BacklinksProps { linksByNodeId: LinksByNodeId nodeByCite: NodeByCite setSidebarHighlightedNode: OrgRoamNode + openContextMenu: any } import { PreviewLink } from './Link' @@ -27,6 +28,7 @@ export const Backlinks = (props: BacklinksProps) => { nodeById, linksByNodeId, nodeByCite, + openContextMenu, } = props const links = linksByNodeId[previewNode?.id] ?? [] @@ -59,6 +61,7 @@ export const Backlinks = (props: BacklinksProps) => { href={`id:${link as string}`} nodeById={nodeById} setPreviewNode={setPreviewNode} + openContextMenu={openContextMenu} > {nodeById[link as string]?.title} diff --git a/components/Sidebar/Link.tsx b/components/Sidebar/Link.tsx index 16fc2ac..49fe9cf 100644 --- a/components/Sidebar/Link.tsx +++ b/components/Sidebar/Link.tsx @@ -35,6 +35,7 @@ export interface LinkProps { setSidebarHighlightedNode: any nodeByCite: NodeByCite nodeById: NodeById + openContextMenu: any } export interface NormalLinkProps { @@ -44,6 +45,7 @@ export interface NormalLinkProps { href: any children: any setSidebarHighlightedNode: any + openContextMenu: any } import { hexToRGBA, getThemeColor } from '../../pages/index' @@ -51,7 +53,8 @@ import noteStyle from './noteStyle' import { OrgImage } from './OrgImage' export const NormalLink = (props: NormalLinkProps) => { - const { setSidebarHighlightedNode, setPreviewNode, nodeById, href, children } = props + const { setSidebarHighlightedNode, setPreviewNode, nodeById, openContextMenu, href, children } = + props const { highlightColor } = useContext(ThemeContext) const theme = useTheme() @@ -67,12 +70,16 @@ export const NormalLink = (props: NormalLinkProps) => { fontWeight={500} color={highlightColor} textDecoration="underline" + onContextMenu={(e) => { + e.preventDefault() + openContextMenu(nodeById[uri], e) + }} onClick={() => setPreviewNode(nodeById[uri])} // TODO don't hardcode the opacitycolor _hover={{ textDecoration: 'none', cursor: 'pointer', bgColor: coolHighlightColor + '22' }} _focus={{ outlineColor: highlightColor }} > - {nodeById[uri]?.title} + {children} ) } @@ -86,6 +93,7 @@ export const PreviewLink = (props: LinkProps) => { previewNode, setPreviewNode, nodeByCite, + openContextMenu, } = props // TODO figure out how to properly type this // see https://github.com/rehypejs/rehype-react/issues/25 @@ -129,8 +137,9 @@ export const PreviewLink = (props: LinkProps) => { href={href} nodeById={nodeById} setPreviewNode={setPreviewNode} + openContextMenu={openContextMenu} > - {nodeById[id as string]?.title} + {children} ), img: ({ src }) => { @@ -186,6 +195,7 @@ export const PreviewLink = (props: LinkProps) => { href, children, nodeByCite, + openContextMenu, }} /> @@ -213,7 +223,9 @@ export const PreviewLink = (props: LinkProps) => { maxHeight={300} overflow="scroll" > - {orgText} + + {orgText} + diff --git a/components/Sidebar/Note.tsx b/components/Sidebar/Note.tsx index ef2e2b2..e425559 100644 --- a/components/Sidebar/Note.tsx +++ b/components/Sidebar/Note.tsx @@ -16,6 +16,7 @@ export interface NoteProps { justification: number justificationList: string[] linksByNodeId: LinksByNodeId + openContextMenu: any } export const Note = (props: NoteProps) => { @@ -28,6 +29,7 @@ export const Note = (props: NoteProps) => { nodeByCite, setSidebarHighlightedNode, linksByNodeId, + openContextMenu, } = props return ( { nodeById, nodeByCite, setSidebarHighlightedNode, + openContextMenu, }} /> { linksByNodeId, nodeByCite, setSidebarHighlightedNode, + openContextMenu, }} /> diff --git a/components/Sidebar/Toolbar.tsx b/components/Sidebar/Toolbar.tsx index f6f1e39..8741da5 100644 --- a/components/Sidebar/Toolbar.tsx +++ b/components/Sidebar/Toolbar.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Text, Flex, IconButton } from '@chakra-ui/react' +import { Text, Flex, IconButton, ButtonGroup, Tooltip } from '@chakra-ui/react' import { BiAlignJustify, BiAlignLeft, @@ -38,53 +38,65 @@ export const Toolbar = (props: ToolbarProps) => { nextPreviewNode, } = props return ( - + - } - aria-label="Previous node" - disabled={!canUndo} - onClick={() => previousPreviewNode()} - /> - } - aria-label="Next node" - disabled={!canRedo} - onClick={() => nextPreviewNode()} - /> + + + } + aria-label="Previous node" + disabled={!canUndo} + onClick={() => previousPreviewNode()} + /> + + + } + aria-label="Next node" + disabled={!canRedo} + onClick={() => nextPreviewNode()} + /> + + - , - , - , - , - ][justification] - } - onClick={() => setJustification((curr: number) => (curr + 1) % 4)} - /> - } - onClick={() => { - setIndent((curr: number) => (curr ? 0 : 1)) - }} - /> - } - onClick={() => { - setFont((curr: string) => (curr === 'sans serif' ? 'serif' : 'sans serif')) - }} - /> + + , + , + , + , + ][justification] + } + onClick={() => setJustification((curr: number) => (curr + 1) % 4)} + /> + + {/* + } + onClick={() => { + setIndent((curr: number) => (curr ? 0 : 1)) + }} + /> + + + } + onClick={() => { + setFont((curr: string) => (curr === 'sans serif' ? 'serif' : 'sans serif')) + }} + /> + */} ) diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx index 2e32f4f..cbc0cc9 100644 --- a/components/Sidebar/index.tsx +++ b/components/Sidebar/index.tsx @@ -3,15 +3,19 @@ import React, { useContext, useEffect, useRef, useState } from 'react' import { Toolbar } from './Toolbar' import { Note } from './Note' -import { Button, Slide, VStack, Flex, Heading, Box, IconButton } from '@chakra-ui/react' +import { Button, Slide, VStack, Flex, Heading, Box, IconButton, Tooltip } from '@chakra-ui/react' +import { Collapse } from './Collapse' import { Scrollbars } from 'react-custom-scrollbars-2' -import { ChevronLeftIcon, ChevronRightIcon, HamburgerIcon } from '@chakra-ui/icons' -import { BiFile } from 'react-icons/bi' +import { ChevronLeftIcon, ChevronRightIcon, CloseIcon, HamburgerIcon } from '@chakra-ui/icons' +import { BiDotsVerticalRounded, BiFile, BiNetworkChart } from 'react-icons/bi' +import { BsReverseLayoutSidebarInsetReverse } from 'react-icons/bs' import { GraphData, NodeObject, LinkObject } from 'force-graph' import { OrgRoamNode } from '../../api' import { ThemeContext } from '../../util/themecontext' -import { LinksByNodeId, NodeByCite, NodeById } from '../../pages/index' +import { LinksByNodeId, NodeByCite, NodeById, Scope } from '../../pages/index' +import { Resizable } from 're-resizable' +import { usePersistantState } from '../../util/persistant-state' export interface SidebarProps { isOpen: boolean @@ -28,6 +32,10 @@ export interface SidebarProps { resetPreviewNode: any previousPreviewNode: any nextPreviewNode: any + openContextMenu: any + scope: Scope + setScope: any + windowWidth: number } const Sidebar = (props: SidebarProps) => { @@ -46,10 +54,15 @@ const Sidebar = (props: SidebarProps) => { resetPreviewNode, previousPreviewNode, nextPreviewNode, + openContextMenu, + scope, + setScope, + windowWidth, } = props const { highlightColor } = useContext(ThemeContext) const [previewRoamNode, setPreviewRoamNode] = useState() + const [sidebarWidth, setSidebarWidth] = usePersistantState('sidebarWidth', 400) useEffect(() => { if (!previewNode?.id) { @@ -67,25 +80,58 @@ const Sidebar = (props: SidebarProps) => { //maybe want to close it when clicking outside, but not sure //const outsideClickRef = useRef(); return ( - - - + { + setSidebarWidth((curr: number) => curr + d.width) + }} + enable={{ + top: false, + right: false, + bottom: false, + left: true, + topRight: false, + bottomRight: false, + bottomLeft: false, + topLeft: false, + }} + minWidth="220px" + maxWidth={windowWidth - 200} + > + - - + { + e.preventDefault() + openContextMenu(previewNode, e) + }} + /> + { + e.preventDefault() + openContextMenu(previewNode, e) + }} + > { {previewRoamNode?.title} - } - aria-label="Close file-viewer" - variant="link" - onClick={onClose} - /> + + } + aria-label="Options" + variant="subtle" + onClick={(e) => { + openContextMenu(previewNode, e, { + left: undefined, + top: 12, + right: -windowWidth + 20, + bottom: undefined, + }) + }} + /> + { borderRadius: 10, backgroundColor: highlightColor, }} - color="black" + color="alt.100" {...props} /> )} @@ -148,13 +204,14 @@ const Sidebar = (props: SidebarProps) => { justification, justificationList, linksByNodeId, + openContextMenu, }} /> - - + + ) } diff --git a/components/Tweaks/BehaviorPanel.tsx b/components/Tweaks/BehaviorPanel.tsx index 651396d..5d61730 100644 --- a/components/Tweaks/BehaviorPanel.tsx +++ b/components/Tweaks/BehaviorPanel.tsx @@ -11,6 +11,7 @@ import { VStack, Text, Box, + Switch, } from '@chakra-ui/react' import React from 'react' import { initialBehavior, initialMouse } from '../config' diff --git a/components/Tweaks/SliderWithInfo.tsx b/components/Tweaks/SliderWithInfo.tsx index f70faae..9d6903a 100644 --- a/components/Tweaks/SliderWithInfo.tsx +++ b/components/Tweaks/SliderWithInfo.tsx @@ -30,7 +30,7 @@ export const SliderWithInfo = ({ const { onChange, label, infoText } = rest const { highlightColor } = useContext(ThemeContext) return ( - + {label} {infoText && } diff --git a/components/Tweaks/index.tsx b/components/Tweaks/index.tsx index c60e670..33f11ee 100644 --- a/components/Tweaks/index.tsx +++ b/components/Tweaks/index.tsx @@ -68,6 +68,7 @@ export const Tweaks = (props: TweakProps) => { tagColors, setTagColors, } = props + const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false) const { highlightColor, setHighlightColor } = useContext(ThemeContext) @@ -75,12 +76,12 @@ export const Tweaks = (props: TweakProps) => { } onClick={() => setShowTweaks(true)} @@ -88,17 +89,17 @@ export const Tweaks = (props: TweakProps) => { ) : ( { paddingTop={1} > - @@ -124,7 +125,7 @@ export const Tweaks = (props: TweakProps) => { setPhysics(initialPhysics) setBehavior(initialBehavior) }} - variant="none" + variant="subtle" size="sm" /> @@ -132,7 +133,7 @@ export const Tweaks = (props: TweakProps) => { size="sm" icon={} aria-label="Close Tweak Panel" - variant="ghost" + variant="subtle" onClick={() => setShowTweaks(false)} /> diff --git a/components/config.ts b/components/config.ts index e1923f2..fd77ba3 100644 --- a/components/config.ts +++ b/components/config.ts @@ -58,13 +58,13 @@ export const initialVisuals = { nodeOpacity: 1, nodeResolution: 12, labels: 2, - labelScale: 1.5, + labelScale: 1, labelFontSize: 13, labelLength: 40, labelWordWrap: 25, labelLineSpace: 1, highlight: true, - highlightNodeSize: 2, + highlightNodeSize: 1.2, highlightLinkSize: 2, highlightFade: 0.8, highlightAnim: true, @@ -123,6 +123,7 @@ export const initialMouse = { follow: 'never', context: 'right', preview: 'click', + backgroundExitsLocal: false, } export const colorList = [ diff --git a/components/contextmenu.tsx b/components/contextmenu.tsx index 73758a5..bff4861 100644 --- a/components/contextmenu.tsx +++ b/components/contextmenu.tsx @@ -48,20 +48,21 @@ 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 } handleLocal: (node: OrgRoamNode, add: string) => void menuClose: () => void scope: { nodeIds: string[] } webSocket: any setPreviewNode: any + contextMenuRef: any } export const ContextMenu = (props: ContextMenuProps) => { const { background, - node, + target, nodeType, coordinates, handleLocal, @@ -69,59 +70,65 @@ export const ContextMenu = (props: ContextMenuProps) => { scope, webSocket, setPreviewNode, + contextMenuRef, } = props const { isOpen, onOpen, onClose } = useDisclosure() const copyRef = useRef() return ( <> - - menuClose()}> - - {node && ( - <> - - {node.title} - - - - )} - {scope.nodeIds.length !== 0 && ( - <> - handleLocal(node!, 'add')} icon={}> - Expand local graph at node - - handleLocal(node!, 'replace')} icon={}> - Open local graph for this node - - - )} - {!node?.properties.FILELESS ? ( - } - onClick={() => openNodeInEmacs(node as OrgRoamNode, webSocket)} - > - Open in Emacs + menuClose()}> + + {target && ( + <> + + {target.title} + + + + )} + {scope.nodeIds.length !== 0 && ( + <> + handleLocal(target!, 'add')} icon={}> + Expand local graph at node - ) : ( - } onClick={() => createNodeInEmacs(node, webSocket)}> - Create node + handleLocal(target!, 'replace')} icon={}> + Open local graph for this node - )} - {node?.properties.ROAM_REFS && ( - }>Open in Zotero - )} - {scope.nodeIds.length === 0 && ( - } onClick={() => handleLocal(node!, 'replace')}> - Open local graph - - )} - {/* Doesn't work at the moment + + )} + {!target?.properties?.FILELESS ? ( + } + onClick={() => openNodeInEmacs(target as OrgRoamNode, webSocket)} + > + Open in Emacs + + ) : ( + } onClick={() => createNodeInEmacs(target, webSocket)}> + Create node + + )} + {target?.properties?.ROAM_REFS && ( + }>Open in Zotero + )} + {scope.nodeIds.length === 0 && ( + } onClick={() => handleLocal(target!, 'replace')}> + Open local graph + + )} + {/* Doesn't work at the moment { */} + } + onClick={() => { + setPreviewNode(target) + }} + > + Preview + + {target?.level === 0 && ( } - onClick={() => { - setPreviewNode(node) - }} + closeOnSelect={false} + icon={} + color="red.500" + onClick={onOpen} > - Preview + Permenantly delete note - {node?.level === 0 && ( - } - color="red.500" - onClick={onOpen} - > - Permenantly delete note - - )} - - - + )} + + @@ -180,8 +186,8 @@ export const ContextMenu = (props: ContextMenuProps) => { This will permanently delete your note: - {node?.title} - {node?.level !== 0 && ( + {target?.title} + {target?.level !== 0 && ( 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. @@ -207,7 +213,7 @@ export const ContextMenu = (props: ContextMenuProps) => { ml={3} onClick={() => { console.log('aaaaa') - deleteNodeInEmacs(node!, webSocket) + deleteNodeInEmacs(target!, webSocket) onClose() menuClose() }} diff --git a/package-lock.json b/package-lock.json index 1a6f57f..310c69b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "orgast-util-to-string": "^0.3.1", "orgast-util-visit-ids": "^0.3.1", "path": "^0.12.7", + "re-resizable": "^6.9.1", "react": "17.0.2", "react-custom-scrollbars-2": "^4.4.0", "react-dom": "17.0.2", @@ -4813,6 +4814,11 @@ "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", "dev": true }, + "node_modules/fast-memoize": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz", + "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==" + }, "node_modules/fast-shallow-equal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz", @@ -7539,6 +7545,18 @@ "node": ">=0.10.0" } }, + "node_modules/re-resizable": { + "version": "6.9.1", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.1.tgz", + "integrity": "sha512-KRYAgr9/j1PJ3K+t+MBhlQ+qkkoLDJ1rs0z1heIWvYbCW/9Vq4djDU+QumJ3hQbwwtzXF6OInla6rOx6hhgRhQ==", + "dependencies": { + "fast-memoize": "^2.5.1" + }, + "peerDependencies": { + "react": "^16.13.1 || ^17.0.0", + "react-dom": "^16.13.1 || ^17.0.0" + } + }, "node_modules/react": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", @@ -13414,6 +13432,11 @@ "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=", "dev": true }, + "fast-memoize": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz", + "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==" + }, "fast-shallow-equal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz", @@ -15572,6 +15595,14 @@ } } }, + "re-resizable": { + "version": "6.9.1", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.1.tgz", + "integrity": "sha512-KRYAgr9/j1PJ3K+t+MBhlQ+qkkoLDJ1rs0z1heIWvYbCW/9Vq4djDU+QumJ3hQbwwtzXF6OInla6rOx6hhgRhQ==", + "requires": { + "fast-memoize": "^2.5.1" + } + }, "react": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", diff --git a/package.json b/package.json index a0b4777..80f47d6 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "orgast-util-to-string": "^0.3.1", "orgast-util-visit-ids": "^0.3.1", "path": "^0.12.7", + "re-resizable": "^6.9.1", "react": "17.0.2", "react-custom-scrollbars-2": "^4.4.0", "react-dom": "17.0.2", diff --git a/pages/_app.tsx b/pages/_app.tsx index f623786..17554b1 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -173,6 +173,11 @@ function SubApp(props: any) { _hover: { bg: `inherit`, border: '1px solid', borderColor: highlightColor }, _active: { color: `inherit`, bg: highlightColor }, }, + subtle: { + color: 'gray.800', + _hover: { bg: `inherit`, color: highlightColor }, + _active: { color: `inherit`, bg: borderColor }, + }, }, }, Accordion: { diff --git a/pages/index.tsx b/pages/index.tsx index a1df7e7..c80fc50 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,52 +1,59 @@ +import { HamburgerIcon } from '@chakra-ui/icons' +import { + Box, + Flex, + Heading, + IconButton, + Slide, + Tooltip, + useDisclosure, + useOutsideClick, + useTheme, +} from '@chakra-ui/react' +import { useAnimation } from '@lilib/hooks' +import { useWindowSize, useWindowWidth } from '@react-hook/window-size' +import * as d3int from 'd3-interpolate' +import { GraphData, LinkObject, NodeObject } from 'force-graph' +import Head from 'next/head' import React, { ComponentPropsWithoutRef, + forwardRef, + useContext, useEffect, + useMemo, useRef, useState, - useMemo, - useContext, - forwardRef, } from 'react' - -import Head from 'next/head' -import { usePersistantState } from '../util/persistant-state' -const d3promise = import('d3-force-3d') -import * as d3int from 'd3-interpolate' - import type { ForceGraph2D as TForceGraph2D, ForceGraph3D as TForceGraph3D, } from 'react-force-graph' +import { BiChart, BiNetworkChart } from 'react-icons/bi' +import { BsReverseLayoutSidebarInsetReverse } from 'react-icons/bs' +import ReconnectingWebSocket from 'reconnecting-websocket' +import SpriteText from 'three-spritetext' +import useUndo from 'use-undo' +import wrap from 'word-wrap' 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, Flex, IconButton, useDisclosure, useTheme, WithCSSVar } from '@chakra-ui/react' - import { - initialPhysics, - initialFilter, - initialVisuals, + algos, + colorList, initialBehavior, + initialFilter, initialMouse, - algos, + initialPhysics, + initialVisuals, TagColors, - colorList, } from '../components/config' -import { Tweaks } from '../components/Tweaks' import { ContextMenu } from '../components/contextmenu' - +import Sidebar from '../components/Sidebar' +import { Tweaks } from '../components/Tweaks' +import { usePersistantState } from '../util/persistant-state' import { ThemeContext, ThemeContextProps } from '../util/themecontext' -import SpriteText from 'three-spritetext' -import wrap from 'word-wrap' -import ReconnectingWebSocket from 'reconnecting-websocket' +import { openNodeInEmacs } from '../util/webSocketFunctions' + +const d3promise = import('d3-force-3d') -import { deleteNodeInEmacs, openNodeInEmacs, createNodeInEmacs } from '../util/webSocketFunctions' -import { ChevronLeftIcon, HamburgerIcon } from '@chakra-ui/icons' -import useUndo from 'use-undo' // react-force-graph fails on import when server-rendered // https://github.com/vasturiano/react-force-graph/issues/155 const ForceGraph2D = ( @@ -450,53 +457,91 @@ export function GraphPage() { }, 50) }, [scope.nodeIds]) + const [windowWidth, windowHeight] = useWindowSize() + + const contextMenuRef = useRef() + const [contextMenuTarget, setContextMenuTarget] = useState(null) + const [contextPos, setContextPos] = useState({ + left: 0, + top: 0, + right: undefined, + bottom: undefined, + }) + + const contextMenu = useDisclosure() + useOutsideClick({ + ref: contextMenuRef, + handler: () => { + console.log('click') + contextMenu.onClose() + }, + }) + + const openContextMenu = (node: OrgRoamNode, event: any, coords?: number[]) => { + coords + ? setContextPos(coords) + : setContextPos({ left: event.pageX, top: event.pageY, right: undefined, bottom: undefined }) + setContextMenuTarget(node) + contextMenu.onOpen() + } + + const handleLocal = (node: OrgRoamNode, add: string) => { + if (add === 'replace') { + setScope({ nodeIds: [node.id] }) + return + } + if (scope.nodeIds.includes(node.id as string)) { + return + } + setScope((currentScope: Scope) => ({ + ...currentScope, + nodeIds: [...currentScope.nodeIds, node.id as string], + })) + return + } + + const [mainItem, setMainItem] = useState({ + type: 'Graph', + title: 'Graph', + icon: , + }) + + const [mainWindowWidth, setMainWindowWidth] = usePersistantState( + 'mainWindowWidth', + windowWidth, + ) if (!graphData) { return null } return ( - - - - - {!isOpen && ( - } - aria-label="Open org-viewer" - zIndex={2} - onClick={onOpen} - variant="ghost" - marginTop={10} - mr={8} - /> - )} - - - + + + + + + + + {/* + * + * {mainItem.icon} + * + * {mainItem.title} + * */} + + {scope.nodeIds.length > 0 && ( + + } + aria-label="Exit local mode" + onClick={() => + setScope((currentScope: Scope) => ({ + ...currentScope, + nodeIds: [], + })) + } + variant="subtle" + /> + + )} + + } + aria-label="Close file-viewer" + variant="subtle" + onClick={isOpen ? onClose : onOpen} + /> + + + + + + + - + + {contextMenu.isOpen && ( +
+ +
+ )} ) } @@ -557,6 +672,14 @@ export interface GraphProps { tagColors: { [tag: string]: string } setPreviewNode: any sidebarHighlightedNode: OrgRoamNode | null + windowWidth: number + windowHeight: number + setContextMenuTarget: any + openContextMenu: any + contextMenu: any + handleLocal: any + mainWindowWidth: number + setMainWindowWidth: any } export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { @@ -577,47 +700,25 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { tagColors, setPreviewNode, sidebarHighlightedNode, + windowWidth, + windowHeight, + setContextMenuTarget, + openContextMenu, + contextMenu, + handleLocal, } = props - // react-force-graph does not track window size - // https://github.com/vasturiano/react-force-graph/issues/233 - // does not work below a certain width - const [windowWidth, windowHeight] = useWindowSize() - const [hoverNode, setHoverNode] = useState(null) - const [rightClickedNode, setRightClickedNode] = useState(null) - const [contextPos, setContextPos] = useState([0, 0]) - const theme = useTheme() const { emacsTheme } = useContext(ThemeContext) - const handleLocal = (node: OrgRoamNode, add: string) => { - if (add === 'replace') { - setScope({ nodeIds: [node.id] }) - return - } - if (scope.nodeIds.includes(node.id as string)) { - return - } - setScope((currentScope: Scope) => ({ - ...currentScope, - nodeIds: [...currentScope.nodeIds, node.id as string], - })) - return - } - - const contextMenu = useDisclosure() - - const openContextMenu = (node: OrgRoamNode, event: any) => { - setContextPos([event.pageX, event.pageY]) - setRightClickedNode(node) - contextMenu.onOpen() - } - const handleClick = (click: string, node: OrgRoamNode, event: any) => { switch (click) { + case mouse.preview: { + setPreviewNode(node) + } case mouse.local: { handleLocal(node, behavior.localSame) break @@ -629,9 +730,6 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { case mouse.context: { openContextMenu(node, event) } - case mouse.preview: { - setPreviewNode(node) - } default: break } @@ -1062,7 +1160,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { backgroundColor: theme.colors.gray[visuals.backgroundColor], warmupTicks: scope.nodeIds.length === 1 ? 100 : scope.nodeIds.length > 1 ? 20 : 0, onZoom: ({ k, x, y }) => setZoom(k), - nodeLabel: (node) => (node as OrgRoamNode).title, + //nodeLabel: (node) => (node as OrgRoamNode).title, nodeColor: (node) => { return getNodeColor(node as OrgRoamNode, theme) }, @@ -1199,7 +1297,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { onNodeClick: (nodeArg: NodeObject, event: any) => { const node = nodeArg as OrgRoamNode - contextMenu.onClose() + //contextMenu.onClose() const doubleClickTimeBuffer = 200 const isDoubleClick = event.timeStamp - lastNodeClickRef.current < doubleClickTimeBuffer lastNodeClickRef.current = event.timeStamp @@ -1215,17 +1313,19 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { return handleClick('click', node, event) }, doubleClickTimeBuffer) }, - onBackgroundClick: () => { - contextMenu.onClose() - setHoverNode(null) - if (scope.nodeIds.length === 0) { - return - } - setScope((currentScope: Scope) => ({ - ...currentScope, - nodeIds: [], - })) - }, + /* onBackgroundClick: () => { + * contextMenu.onClose() + * setHoverNode(null) + * if (scope.nodeIds.length === 0) { + * return + * } + * if (mouse.backgroundExitsLocal) { + * setScope((currentScope: Scope) => ({ + * ...currentScope, + * nodeIds: [], + * })) + * } + * }, */ onNodeHover: (node) => { if (!visuals.highlight) { return @@ -1243,7 +1343,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { handleClick('right', node, event) }, onNodeDrag: (node) => { - contextMenu.onClose() + //contextMenu.onClose() setHoverNode(node) setDragging(true) }, @@ -1254,20 +1354,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) { } return ( - - {contextMenu.isOpen && ( - - )} + {threeDim ? ( { @@ -34,6 +35,7 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => { previewText, nodeByCite, previewNode, + openContextMenu, } = props const processor = unified() @@ -42,7 +44,7 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => { .use(attachments) .use(uniorgSlug) .use(uniorg2rehype) - .use(highlight) + // .use(highlight) .use(katex) .use(rehype2react, { createElement: React.createElement, @@ -56,6 +58,7 @@ export const ProcessedOrg = (props: ProcessedOrgProps) => { href={`${href as string}`} nodeById={nodeById} setPreviewNode={setPreviewNode} + openContextMenu={openContextMenu} > {children} diff --git a/util/uniorg.tsx b/util/uniorg.tsx index 217bad1..8802dd1 100644 --- a/util/uniorg.tsx +++ b/util/uniorg.tsx @@ -9,10 +9,18 @@ export interface UniOrgProps { setPreviewNode: any nodeByCite: NodeByCite setSidebarHighlightedNode: any + openContextMenu: any } export const UniOrg = (props: UniOrgProps) => { - const { setSidebarHighlightedNode, nodeById, nodeByCite, previewNode, setPreviewNode } = props + const { + openContextMenu, + setSidebarHighlightedNode, + nodeById, + nodeByCite, + previewNode, + setPreviewNode, + } = props const [previewText, setPreviewText] = useState('') @@ -44,6 +52,7 @@ export const UniOrg = (props: UniOrgProps) => { previewText, nodeByCite, setSidebarHighlightedNode, + openContextMenu, }} /> )} -- cgit v1.2.3