summaryrefslogtreecommitdiff
path: root/pages/index.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-10-09 22:20:34 +0200
committerThomas F. K. Jorna <[email protected]>2021-10-09 22:20:34 +0200
commit31d7477b376501bd80fe635b91412bc7f6ae7ea7 (patch)
treeb0fcc9b289cef86385805fe606b70d1ee14f1b25 /pages/index.tsx
parent9d1692fbcf322db2d95586b1ab6768ba9328e5df (diff)
feat(preview): node history
Diffstat (limited to 'pages/index.tsx')
-rw-r--r--pages/index.tsx42
1 files changed, 32 insertions, 10 deletions
diff --git a/pages/index.tsx b/pages/index.tsx
index 59fae1a..a1df7e7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -46,6 +46,7 @@ import ReconnectingWebSocket from 'reconnecting-websocket'
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 = (
@@ -97,7 +98,22 @@ export function GraphPage() {
const [emacsNodeId, setEmacsNodeId] = useState<string | null>(null)
const [behavior, setBehavior] = usePersistantState('behavior', initialBehavior)
const [mouse, setMouse] = usePersistantState('mouse', initialMouse)
- const [previewNode, setPreviewNode] = useState<NodeObject>({})
+ const [
+ previewNodeState,
+ {
+ set: setPreviewNode,
+ reset: resetPreviewNode,
+ undo: previousPreviewNode,
+ redo: nextPreviewNode,
+ canUndo,
+ canRedo,
+ },
+ ] = useUndo<NodeObject>({})
+ const {
+ past: pastPreviewNodes,
+ present: previewNode,
+ future: futurePreviewNodes,
+ } = previewNodeState
const [sidebarHighlightedNode, setSidebarHighlightedNode] = useState<OrgRoamNode | null>(null)
const { isOpen, onOpen, onClose } = useDisclosure()
@@ -509,6 +525,10 @@ export function GraphPage() {
onClose,
previewNode,
setPreviewNode,
+ canUndo,
+ canRedo,
+ previousPreviewNode,
+ nextPreviewNode,
setSidebarHighlightedNode,
}}
nodeById={nodeByIdRef.current!}
@@ -843,14 +863,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
algorithm: algos[visuals.algorithmName],
},
)
- useEffect(() => {
- console.log('aaa')
- if (sidebarHighlightedNode?.id) {
- setHoverNode(sidebarHighlightedNode)
- } else {
- setHoverNode(null)
- }
- }, [sidebarHighlightedNode])
+
const highlightedNodes = useMemo(() => {
if (!centralHighlightedNode.current) {
return {}
@@ -862,7 +875,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
}
return Object.fromEntries(
[
- centralHighlightedNode.current.id! as string,
+ centralHighlightedNode.current?.id! as string,
...links.flatMap((link) => [link.source, link.target]),
].map((nodeId) => [nodeId, {}]),
)
@@ -870,6 +883,15 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
JSON.stringify(centralHighlightedNode.current),
JSON.stringify(filteredLinksByNodeIdRef.current),
])
+
+ useEffect(() => {
+ if (sidebarHighlightedNode?.id) {
+ setHoverNode(sidebarHighlightedNode)
+ } else {
+ setHoverNode(null)
+ }
+ }, [sidebarHighlightedNode])
+
const lastHoverNode = useRef<OrgRoamNode | null>(null)
useEffect(() => {
centralHighlightedNode.current = hoverNode