From 6dac7a9aad241c9c2a01eb359fd240c18c7e5dec Mon Sep 17 00:00:00 2001
From: NathanViaud <nathan.viaud@inria.fr>
Date: Tue, 11 Apr 2023 09:16:46 +0200
Subject: [PATCH] Remember connected edges when undo or redo
---
src/shared/interfaces/undoRedo.interface.ts | 2 ++
src/shared/stores/undoRedoStore.ts | 33 ++++++++++++++-------
2 files changed, 25 insertions(+), 10 deletions(-)
diff --git a/src/shared/interfaces/undoRedo.interface.ts b/src/shared/interfaces/undoRedo.interface.ts
index a6cfcbd2..7d6c6b9a 100644
--- a/src/shared/interfaces/undoRedo.interface.ts
+++ b/src/shared/interfaces/undoRedo.interface.ts
@@ -13,11 +13,13 @@ export interface NodeAddedAction extends UndoRedoAction {
type: 'nodeAdded';
//TODO: use the type defined by vue flow
node: any;
+ edges: any;
}
export interface NodeRemovedAction extends UndoRedoAction {
type: 'nodeRemoved';
node: any;
+ edges: any;
}
export interface NodeUpdatedAction extends UndoRedoAction {
diff --git a/src/shared/stores/undoRedoStore.ts b/src/shared/stores/undoRedoStore.ts
index a88a6aa8..2d955b53 100644
--- a/src/shared/stores/undoRedoStore.ts
+++ b/src/shared/stores/undoRedoStore.ts
@@ -1,8 +1,9 @@
import { defineStore } from 'pinia';
import { UndoRedoAction, NodeMovedAction, NodeRemovedAction, NodeAddedAction } from '../interfaces';
-import { applyNodeChanges, useVueFlow } from '@vue-flow/core';
+import { applyNodeChanges, getConnectedEdges, useVueFlow } from '@vue-flow/core';
+import { toRaw } from 'vue';
-const { findNode, addNodes, nodes } = useVueFlow({ id: 'main' });
+const { findNode, addNodes, nodes, edges, addEdges } = useVueFlow({ id: 'main' });
interface UndoRedoState {
undoStack: UndoRedoAction[];
@@ -38,6 +39,8 @@ export const useUndoRedoStore = defineStore('epoc', {
this.moveNode(action, reverseStack);
break;
case 'nodeRemoved':
+ console.log('action:', action);
+ console.log('reverseStack:', reverseStack);
this.addNode(action, reverseStack);
break;
case 'nodeAdded':
@@ -72,28 +75,38 @@ export const useUndoRedoStore = defineStore('epoc', {
};
reverseStack.push(reverseAction);
},
- deleteNode(action: NodeRemovedAction, reverseStack: UndoRedoAction[]) {
+ deleteNode(action: NodeRemovedAction, reverseStack: UndoRedoAction[]): void {
const node = JSON.parse(action.node);
- applyNodeChanges(
- [{ id: node.id, type: 'remove' }],
- nodes.value
- );
-
const reverseAction: NodeRemovedAction = {
type: 'nodeRemoved',
node: action.node,
+ edges: JSON.stringify(getConnectedEdges([node], edges.value))
};
+
+ applyNodeChanges(
+ [{ id: node.id, type: 'remove' }],
+ nodes.value
+ );
reverseStack.push(reverseAction);
},
- addNode(action: NodeAddedAction, reverseStack: UndoRedoAction[]) {
+ addNode(action: NodeAddedAction, reverseStack: UndoRedoAction[]): void {
const node = JSON.parse(action.node);
-
addNodes([node]);
+ let edges = toRaw(action.edges);
+
+ if(edges) {
+ edges = JSON.parse(action.edges);
+ edges = Array.isArray(edges) ? edges : [edges];
+ addEdges(edges);
+ }
+
+
const reverseAction: NodeAddedAction = {
type: 'nodeAdded',
node: action.node,
+ edges: action.edges
};
reverseStack.push(reverseAction);
--
GitLab