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) => {
if (event.key === 'z' && (event.ctrlKey || event.metaKey) && event.shiftKey) {
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)) {
undo();
}
@ -97,8 +101,8 @@ export const useUndoRedo: UseUndoRedo = ({
undo,
redo,
takeSnapshot,
canUndo: !past.length,
canRedo: !future.length,
canUndo: !!past.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 copied = useKeyPress(['Meta+c', 'Strg+c', 'Ctrl+c']);
const pasted = useKeyPress(['Meta+v', 'Strg+v', 'Ctrl+v']);
const undoed = useKeyPress(['Meta+z', 'Strg+z', 'Ctrl+z']);
const redoed = useKeyPress(['Meta+Shift+z', 'Strg+Shift+z', 'Ctrl+Shift+z']);
useEffect(() => {
if(canUndo && undoed){
undo();
const onKeyDown = (event : React.KeyboardEvent<HTMLDivElement>) => {
if ((event.ctrlKey || event.metaKey) && (event.key === 'c') && lastSelection){
event.preventDefault();
setLastCopiedSelection(lastSelection);
}
if(canRedo && redoed){
redo();
if ((event.ctrlKey || event.metaKey) && (event.key === 'v') && lastCopiedSelection){
event.preventDefault();
paste();
}
}, [undoed, redoed])
}
const [lastSelection, setLastSelection] = useState(null);
const [lastCopiedSelection, setLastCopiedSelection] = useState(null);
@ -73,15 +69,8 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
onChange: (flow) => {setLastSelection(flow);},
})
useEffect(() => {
if(copied === true && lastSelection){
setLastCopiedSelection(lastSelection);
}
}, [copied])
useEffect(() => {
if(pasted === true && lastCopiedSelection){
let minimumX = Infinity;
let paste = () => {
let minimumX = Infinity;
let minimumY = Infinity;
let idsMap = {};
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})))
);
})
}
}, [pasted])
}
const { setExtraComponent, setExtraNavigation } = useContext(locationContext);
@ -319,6 +307,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChangeMod}
onKeyDown={(e) => onKeyDown(e)}
onConnect={onConnect}
onLoad={setReactFlowInstance}
onInit={setReactFlowInstance}