From 689f0afe33f80c2c259c4614acbf3f12af57690e Mon Sep 17 00:00:00 2001
From: NathanViaud <nathan.viaud@inria.fr>
Date: Fri, 5 May 2023 16:42:57 +0200
Subject: [PATCH] Adding edge update to undo redo
---
src/features/ePocFlow/ePocFlow.vue | 21 +++++++++++++++-----
src/shared/interfaces/undoRedo.interface.ts | 8 ++++++++
src/shared/stores/undoRedoStore.ts | 22 ++++++++++++++-------
3 files changed, 39 insertions(+), 12 deletions(-)
diff --git a/src/features/ePocFlow/ePocFlow.vue b/src/features/ePocFlow/ePocFlow.vue
index 4f14919d..fdb462d9 100644
--- a/src/features/ePocFlow/ePocFlow.vue
+++ b/src/features/ePocFlow/ePocFlow.vue
@@ -8,7 +8,7 @@ import { useEditorStore, useGraphStore } from '@/src/shared/stores';
import ChapterNode from './nodes/ChapterNode.vue';
import ePocNode from './nodes/ePocNode.vue';
import AddChapterNode from './nodes/AddChapterNode.vue';
-import { EdgeAction, NodeElement, SideAction } from '@/src/shared/interfaces';
+import { EdgeAction, EdgeUpdatedAction, NodeMovedAction, NodeElement, SideAction } from '@/src/shared/interfaces';
import { addPage, createPageFromContent, removeContentFromPage } from '@/src/shared/services/graph';
import { useUndoRedoStore } from '@/src/shared/stores/undoRedoStore';
@@ -73,10 +73,21 @@ function selectionStart() {
}
function update(event) {
- updateEdge(event.edge, {
- source: event.connection.source,
- target: event.connection.target,
- });
+ const { edge, connection } = event;
+
+ const newEdge = updateEdge(edge, {
+ source: connection.source,
+ target: connection.target,
+ }, false);
+
+ if(!newEdge) return;
+
+ const undoRedoAction: EdgeUpdatedAction = {
+ type: 'edgeUpdated',
+ newEdge,
+ oldEdge: edge
+ };
+ undoRedoStore.addAction(undoRedoAction);
}
function nodeChange(event) {
diff --git a/src/shared/interfaces/undoRedo.interface.ts b/src/shared/interfaces/undoRedo.interface.ts
index 727ef335..aaad9de7 100644
--- a/src/shared/interfaces/undoRedo.interface.ts
+++ b/src/shared/interfaces/undoRedo.interface.ts
@@ -1,3 +1,5 @@
+import { GraphEdge } from '@vue-flow/core';
+
export interface UndoRedoAction {
type: 'nodeMoved' | 'nodeAdded' | 'nodeRemoved' | 'nodeUpdated' | 'edgeAdded' | 'edgeUpdated' | 'edgeRemoved';
}
@@ -23,4 +25,10 @@ export interface NodeUpdatedAction extends UndoRedoAction {
export interface EdgeAction extends UndoRedoAction {
type: 'edgeAdded' | 'edgeUpdated' | 'edgeRemoved';
edge: string;
+}
+
+export interface EdgeUpdatedAction extends UndoRedoAction {
+ type: 'edgeUpdated';
+ newEdge: GraphEdge;
+ oldEdge: GraphEdge
}
\ No newline at end of file
diff --git a/src/shared/stores/undoRedoStore.ts b/src/shared/stores/undoRedoStore.ts
index ceb56251..a5a7d9db 100644
--- a/src/shared/stores/undoRedoStore.ts
+++ b/src/shared/stores/undoRedoStore.ts
@@ -1,9 +1,9 @@
import { defineStore } from 'pinia';
-import { UndoRedoAction, NodeMovedAction, NodeMutatedAction, EdgeAction } from '../interfaces';
+import { UndoRedoAction, NodeMovedAction, NodeMutatedAction, EdgeAction, EdgeUpdatedAction } from '../interfaces';
import { applyEdgeChanges, applyNodeChanges, getConnectedEdges, useVueFlow } from '@vue-flow/core';
import { toRaw } from 'vue';
-const { findNode, addNodes, nodes, edges, addEdges } = useVueFlow({ id: 'main' });
+const { findNode, addNodes, nodes, edges, addEdges, updateEdge } = useVueFlow({ id: 'main' });
interface UndoRedoState {
undoStack: UndoRedoAction[];
@@ -54,7 +54,7 @@ export const useUndoRedoStore = defineStore('epoc', {
this.deleteEdge(action, reverseStack);
break;
case 'edgeUpdated':
- this.updateEdge(action, reverseStack);
+ this.updateEdgeAction(action, reverseStack);
break;
case 'edgeRemoved':
this.addEdge(action, reverseStack);
@@ -138,12 +138,20 @@ export const useUndoRedoStore = defineStore('epoc', {
reverseStack.push(reverseAction);
},
- updateEdge(action: EdgeAction, reverseStack: UndoRedoAction[]): void {
- const edge = JSON.parse(action.edge);
+ updateEdgeAction(action: EdgeUpdatedAction, reverseStack: UndoRedoAction[]): void {
+ const { newEdge, oldEdge } = action;
+
+ const reverseNewEdge = updateEdge(newEdge, {
+ source: oldEdge.source,
+ target: oldEdge.target
+ }, false);
+
+ if(!reverseNewEdge) return;
- const reverseAction: EdgeAction = {
+ const reverseAction: EdgeUpdatedAction = {
type: 'edgeUpdated',
- edge: action.edge
+ newEdge: reverseNewEdge,
+ oldEdge: newEdge
};
reverseStack.push(reverseAction);
},
--
GitLab