mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-10 06:34:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): Add undo/redo creating a node in new canvas (no-changelog) (#10142)

Browse source
This commit is contained in:
Alex Grozav 2024-07-23 09:49:53 +03:00 committed by GitHub
parent ee676fd934
commit aa15d22499
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 42 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts
View file

@ -333,6 +333,19 @@ describe('useCanvasOperations', () => {
});
});
describe('revertAddNode', () => {
it('deletes node if it exists', async () => {
const node = createTestNode();
vi.spyOn(workflowsStore, 'getNodeByName').mockReturnValueOnce(node);
vi.spyOn(workflowsStore, 'getNodeById').mockReturnValueOnce(node);
const removeNodeByIdSpy = vi.spyOn(workflowsStore, 'removeNodeById');
await canvasOperations.revertAddNode(node.name);
expect(removeNodeByIdSpy).toHaveBeenCalledWith(node.id);
});
});
describe('deleteNode', () => {
it('should delete node and track history', () => {
const removeNodeByIdSpy = vi

22
packages/editor-ui/src/composables/useCanvasOperations.ts
View file

@ -395,11 +395,17 @@ export function useCanvasOperations({
options: {
dragAndDrop?: boolean;
position?: XYPosition;
trackHistory?: boolean;
trackBulk?: boolean;
} = {},
) {
let insertPosition = options.position;
let lastAddedNode: INodeUi | undefined;
if (options.trackBulk) {
historyStore.startRecordingUndo();
}
for (const nodeAddData of nodes) {
const { isAutoAdd, openDetail: openNDV, ...node } = nodeAddData;
const position = node.position ?? insertPosition;
@ -414,7 +420,7 @@ export function useCanvasOperations({
...options,
openNDV,
isAutoAdd,
trackHistory: true,
trackHistory: options.trackHistory,
},
);
} catch (error) {
@ -433,6 +439,10 @@ export function useCanvasOperations({
// @TODO Figure out what this does and why it's needed
updatePositionForNodeWithMultipleInputs(lastAddedNode);
}
if (options.trackBulk) {
historyStore.stopRecordingUndo();
}
}
function updatePositionForNodeWithMultipleInputs(node: INodeUi) {
@ -507,6 +517,15 @@ export function useCanvasOperations({
return nodeData;
}
async function revertAddNode(nodeName: string) {
const node = workflowsStore.getNodeByName(nodeName);
if (!node) {
return;
}
deleteNode(node.id);
}
function createConnectionToLastInteractedWithNode(node: INodeUi, options: AddNodeOptions = {}) {
const lastInteractedWithNode = uiStore.lastInteractedWithNode;
if (!lastInteractedWithNode) {
@ -1628,6 +1647,7 @@ export function useCanvasOperations({
triggerNodes,
addNodes,
addNode,
revertAddNode,
updateNodePosition,
setNodeActive,
setNodeActiveByName,

11
packages/editor-ui/src/views/NodeView.v2.vue
View file

@ -149,6 +149,7 @@ const {
duplicateNodes,
revertDeleteNode,
addNodes,
revertAddNode,
createConnection,
revertCreateConnection,
deleteConnection,
@ -784,7 +785,7 @@ async function onAddNodesAndConnections(
return;
}
await addNodes(nodes, { dragAndDrop, position });
await addNodes(nodes, { dragAndDrop, position, trackHistory: true });
const offsetIndex = editableWorkflow.value.nodes.length - nodes.length;
const mappedConnections: CanvasConnectionCreateData[] = connections.map(({ from, to }) => {
@ -812,6 +813,10 @@ async function onAddNodesAndConnections(
uiStore.resetLastInteractedWith();
}
async function onRevertAddNode({ node }: { node: INodeUi }) {
await revertAddNode(node.name);
}
async function onSwitchActiveNode(nodeName: string) {
setNodeActiveByName(nodeName);
}
@ -982,7 +987,7 @@ const chatTriggerNodePinnedData = computed(() => {
function addUndoRedoEventBindings() {
// historyBus.on('nodeMove', onMoveNode);
// historyBus.on('revertAddNode', onRevertAddNode);
historyBus.on('revertAddNode', onRevertAddNode);
historyBus.on('revertRemoveNode', onRevertDeleteNode);
historyBus.on('revertAddConnection', onRevertCreateConnection);
historyBus.on('revertRemoveConnection', onRevertDeleteConnection);
@ -992,7 +997,7 @@ function addUndoRedoEventBindings() {
function removeUndoRedoEventBindings() {
// historyBus.off('nodeMove', onMoveNode);
// historyBus.off('revertAddNode', onRevertAddNode);
historyBus.off('revertAddNode', onRevertAddNode);
historyBus.off('revertRemoveNode', onRevertDeleteNode);
historyBus.off('revertAddConnection', onRevertCreateConnection);
historyBus.off('revertRemoveConnection', onRevertDeleteConnection);