jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Undo and redo shortcuts working properly now

Browse source
This commit is contained in:
Lucas Oliveira 2023-05-06 20:18:46 -03:00
commit ab1bbf8d90
2 changed files with 18 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/pages/FlowPage/hooks/useUndoRedo.ts
View file

@ -81,6 +81,10 @@ export const useUndoRedo: UseUndoRedo = ({
const keyDownHandler = (event: KeyboardEvent) => { const keyDownHandler = (event: KeyboardEvent) => {
if (event.key === 'z' && (event.ctrlKey || event.metaKey) && event.shiftKey) { if (event.key === 'z' && (event.ctrlKey || event.metaKey) && event.shiftKey) {
redo(); redo();
}
else if (event.key === 'y' && (event.ctrlKey || event.metaKey)) {
event.preventDefault(); // prevent the default action
redo();
} else if (event.key === 'z' && (event.ctrlKey || event.metaKey)) { } else if (event.key === 'z' && (event.ctrlKey || event.metaKey)) {
undo(); undo();
} }
@ -97,8 +101,8 @@ export const useUndoRedo: UseUndoRedo = ({
undo, undo,
redo, redo,
takeSnapshot, takeSnapshot,
canUndo: !past.length, canUndo: !!past.length,
canRedo: !future.length, canRedo: !!future.length,
}; };
}; };

35
src/frontend/src/pages/FlowPage/index.tsx
View file

@ -45,20 +45,16 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
const { undo, redo, canUndo, canRedo, takeSnapshot } = useUndoRedo(); const { undo, redo, canUndo, canRedo, takeSnapshot } = useUndoRedo();
const copied = useKeyPress(['Meta+c', 'Strg+c', 'Ctrl+c']); const onKeyDown = (event : React.KeyboardEvent<HTMLDivElement>) => {
const pasted = useKeyPress(['Meta+v', 'Strg+v', 'Ctrl+v']); if ((event.ctrlKey || event.metaKey) && (event.key === 'c') && lastSelection){
const undoed = useKeyPress(['Meta+z', 'Strg+z', 'Ctrl+z']); event.preventDefault();
const redoed = useKeyPress(['Meta+Shift+z', 'Strg+Shift+z', 'Ctrl+Shift+z']); setLastCopiedSelection(lastSelection);
useEffect(() => {
if(canUndo && undoed){
undo();
} }
if(canRedo && redoed){ if ((event.ctrlKey || event.metaKey) && (event.key === 'v') && lastCopiedSelection){
redo(); event.preventDefault();
paste();
} }
}
}, [undoed, redoed])
const [lastSelection, setLastSelection] = useState(null); const [lastSelection, setLastSelection] = useState(null);
const [lastCopiedSelection, setLastCopiedSelection] = useState(null); const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
@ -73,15 +69,8 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
onChange: (flow) => {setLastSelection(flow);}, onChange: (flow) => {setLastSelection(flow);},
}) })
useEffect(() => { let paste = () => {
if(copied === true && lastSelection){ let minimumX = Infinity;
setLastCopiedSelection(lastSelection);
}
}, [copied])
useEffect(() => {
if(pasted === true && lastCopiedSelection){
let minimumX = Infinity;
let minimumY = Infinity; let minimumY = Infinity;
let idsMap = {}; let idsMap = {};
lastCopiedSelection.nodes.forEach((n) => { lastCopiedSelection.nodes.forEach((n) => {
@ -135,8 +124,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
addEdge({ source, target, sourceHandle, targetHandle, id, className: "animate-pulse", selected: false }, eds.map((e) => ({...e, selected: false}))) addEdge({ source, target, sourceHandle, targetHandle, id, className: "animate-pulse", selected: false }, eds.map((e) => ({...e, selected: false})))
); );
}) })
} }
}, [pasted])
const { setExtraComponent, setExtraNavigation } = useContext(locationContext); const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
@ -319,6 +307,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
edges={edges} edges={edges}
onNodesChange={onNodesChange} onNodesChange={onNodesChange}
onEdgesChange={onEdgesChangeMod} onEdgesChange={onEdgesChangeMod}
onKeyDown={(e) => onKeyDown(e)}
onConnect={onConnect} onConnect={onConnect}
onLoad={setReactFlowInstance} onLoad={setReactFlowInstance}
onInit={setReactFlowInstance} onInit={setReactFlowInstance}