From 9cc4d84580fadea1f854d5a34e29ed6153e67907 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Fri, 5 May 2023 12:18:47 -0300 Subject: [PATCH] Undo and redo working --- .../src/pages/FlowPage/hooks/useUndoRedo.ts | 105 ++++++++++++++++++ src/frontend/src/pages/FlowPage/index.tsx | 67 ++++++++--- 2 files changed, 154 insertions(+), 18 deletions(-) create mode 100644 src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts diff --git a/src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts b/src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts new file mode 100644 index 000000000..5108e1767 --- /dev/null +++ b/src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts @@ -0,0 +1,105 @@ +import { useCallback, useEffect, useState } from 'react'; +import { Edge, Node, useReactFlow } from 'reactflow'; + +type UseUndoRedoOptions = { + maxHistorySize: number; + enableShortcuts: boolean; +}; + +type UseUndoRedo = (options?: UseUndoRedoOptions) => { + undo: () => void; + redo: () => void; + takeSnapshot: () => void; + canUndo: boolean; + canRedo: boolean; +}; + +type HistoryItem = { + nodes: Node[]; + edges: Edge[]; +}; + +const defaultOptions: UseUndoRedoOptions = { + maxHistorySize: 100, + enableShortcuts: true, +}; + +// https://redux.js.org/usage/implementing-undo-history +export const useUndoRedo: UseUndoRedo = ({ + maxHistorySize = defaultOptions.maxHistorySize, + enableShortcuts = defaultOptions.enableShortcuts, +} = defaultOptions) => { + // the past and future arrays store the states that we can jump to + const [past, setPast] = useState([]); + const [future, setFuture] = useState([]); + + const { setNodes, setEdges, getNodes, getEdges } = useReactFlow(); + + const takeSnapshot = useCallback(() => { + // push the current graph to the past state + setPast((past) => [ + ...past.slice(past.length - maxHistorySize + 1, past.length), + { nodes: getNodes(), edges: getEdges() }, + ]); + + // whenever we take a new snapshot, the redo operations need to be cleared to avoid state mismatches + setFuture([]); + }, [getNodes, getEdges, maxHistorySize]); + + const undo = useCallback(() => { + // get the last state that we want to go back to + const pastState = past[past.length - 1]; + + if (pastState) { + // first we remove the state from the history + setPast((past) => past.slice(0, past.length - 1)); + // we store the current graph for the redo operation + setFuture((future) => [...future, { nodes: getNodes(), edges: getEdges() }]); + // now we can set the graph to the past state + setNodes(pastState.nodes); + setEdges(pastState.edges); + } + }, [setNodes, setEdges, getNodes, getEdges, past]); + + const redo = useCallback(() => { + const futureState = future[future.length - 1]; + + if (futureState) { + setFuture((future) => future.slice(0, future.length - 1)); + setPast((past) => [...past, { nodes: getNodes(), edges: getEdges() }]); + setNodes(futureState.nodes); + setEdges(futureState.edges); + } + }, [setNodes, setEdges, getNodes, getEdges, future]); + + useEffect(() => { + // this effect is used to attach the global event handlers + if (!enableShortcuts) { + return; + } + + const keyDownHandler = (event: KeyboardEvent) => { + if (event.key === 'z' && (event.ctrlKey || event.metaKey) && event.shiftKey) { + redo(); + } else if (event.key === 'z' && (event.ctrlKey || event.metaKey)) { + undo(); + } + }; + + document.addEventListener('keydown', keyDownHandler); + + return () => { + document.removeEventListener('keydown', keyDownHandler); + }; + }, [undo, redo, enableShortcuts]); + + return { + undo, + redo, + takeSnapshot, + canUndo: !past.length, + canRedo: !future.length, + }; +}; + +export default useUndoRedo; diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx index ef1c44660..aead42fea 100644 --- a/src/frontend/src/pages/FlowPage/index.tsx +++ b/src/frontend/src/pages/FlowPage/index.tsx @@ -12,6 +12,10 @@ import ReactFlow, { Edge, useKeyPress, useOnSelectionChange, + NodeDragHandler, + OnEdgesDelete, + OnNodesDelete, + SelectionDragHandler, } from "reactflow"; import { locationContext } from "../../contexts/locationContext"; import ExtraSidebar from "./components/extraSidebarComponent"; @@ -24,6 +28,7 @@ import ConnectionLineComponent from "./components/ConnectionLineComponent"; import { FlowType, NodeType } from "../../types/flow"; import { APIClassType } from "../../types/api"; import { isValidConnection } from "../../utils"; +import useUndoRedo from "./hooks/useUndoRedo"; const nodeTypes = { genericNode: GenericNode, @@ -38,13 +43,25 @@ export default function FlowPage({ flow }:{flow:FlowType}) { useContext(typesContext); const reactFlowWrapper = useRef(null); - const copied = useKeyPress(['Meta+c', 'Strg+c']) - const pasted = useKeyPress(['Meta+v', 'Strg+v']) - const undo = useKeyPress(['Meta+z', 'Strg+z']) - const redo = useKeyPress(['Meta+Shift+z', 'Strg+Shift+z']) + const { undo, redo, canUndo, canRedo, takeSnapshot } = useUndoRedo(); + + const copied = useKeyPress(['Meta+c', 'Strg+c']); + const pasted = useKeyPress(['Meta+v', 'Strg+v']); + const undoed = useKeyPress(['Meta+z', 'Strg+z']); + const redoed = useKeyPress(['Meta+Shift+z', 'Strg+Shift+z']); + + useEffect(() => { + if(canUndo && undoed){ + undo(); + } + if(canRedo && redoed){ + redo(); + } + + }, [undoed, redoed]) + const [lastSelection, setLastSelection] = useState(null); const [lastCopiedSelection, setLastCopiedSelection] = useState(null); - const [actualActionIndex] = useState(0); const [position, setPosition] = useState({ x: 0, y: 0 }); @@ -56,15 +73,6 @@ export default function FlowPage({ flow }:{flow:FlowType}) { onChange: (flow) => {setLastSelection(flow);}, }) - useEffect(() => { - if(undo) { - - } - else if(redo) { - - } - }, [redo, undo]) - useEffect(() => { if(copied === true && lastSelection){ setLastCopiedSelection(lastSelection); @@ -180,6 +188,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) { const onConnect = useCallback( (params: Connection) => { + takeSnapshot(); setEdges((eds) => addEdge({ ...params, className: "animate-pulse" }, eds) ); @@ -188,9 +197,26 @@ export default function FlowPage({ flow }:{flow:FlowType}) { return newX; }); }, - [setEdges, setNodes] + [setEdges, setNodes, takeSnapshot] ); + const onNodeDragStart: NodeDragHandler = useCallback(() => { + // 👇 make dragging a node undoable + takeSnapshot(); + // 👉 you can place your event handlers here + }, [takeSnapshot]); + + const onSelectionDragStart: SelectionDragHandler = useCallback(() => { + // 👇 make dragging a selection undoable + takeSnapshot(); + }, [takeSnapshot]); + + + const onEdgesDelete: OnEdgesDelete = useCallback(() => { + // 👇 make deleting edges undoable + takeSnapshot(); + }, [takeSnapshot]); + const onDragOver = useCallback((event: React.DragEvent) => { event.preventDefault(); event.dataTransfer.dropEffect = "move"; @@ -199,6 +225,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) { const onDrop = useCallback( (event: React.DragEvent) => { event.preventDefault(); + takeSnapshot(); // Get the current bounds of the ReactFlow wrapper element const reactflowBounds = reactFlowWrapper.current.getBoundingClientRect(); @@ -246,16 +273,17 @@ export default function FlowPage({ flow }:{flow:FlowType}) { } }, // Specify dependencies for useCallback - [incrementNodeId, reactFlowInstance, setErrorData, setNodes] + [incrementNodeId, reactFlowInstance, setErrorData, setNodes, takeSnapshot] ); - const onDelete = (mynodes) => { + const onDelete = useCallback((mynodes) => { + takeSnapshot(); setEdges( edges.filter( (ns) => !mynodes.some((n) => ns.source === n.id || ns.target === n.id) ) ); - }; + }, [takeSnapshot, edges, setEdges]); const onEdgeUpdateStart = useCallback(() => { edgeUpdateSuccessful.current = false; @@ -298,6 +326,9 @@ export default function FlowPage({ flow }:{flow:FlowType}) { onEdgeUpdate={onEdgeUpdate} onEdgeUpdateStart={onEdgeUpdateStart} onEdgeUpdateEnd={onEdgeUpdateEnd} + onNodeDragStart={onNodeDragStart} + onSelectionDragStart={onSelectionDragStart} + onEdgesDelete={onEdgesDelete} connectionLineComponent={ConnectionLineComponent} onDragOver={onDragOver} onDrop={onDrop}