diff --git a/src/features/ePocFlow/ePocFlow.vue b/src/features/ePocFlow/ePocFlow.vue index 4f14919d9834d5d57720f9dd80a491c19817cfa0..fdb462d9db5f4fc911615d8485a037a667d4066d 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 727ef335dd016375f9e6c68214fb11009463dbd1..aaad9de7f5927a9458b9b5f88260ca7091df1a81 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 ceb56251441b1480fa5ee18db0618240390cc81f..a5a7d9dbb94ede4fab67e614ea6dd9ff969f6fd2 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); },