adding node moved action

src/features/ePocFlow/ePocFlow.vue

@@ -15,6 +15,7 @@ const { vueFlowRef, project, updateEdge, edges, nodes, findNode }  = useVueFlow(
 
 const editorStore = useEditorStore();
 const graphStore = useGraphStore();
+const undoRedoStore = useUndoRedoStore();
 
 const nodeTypes = {
     activity: markRaw(ActivityNode),
@@ -173,6 +174,10 @@ function nodeDrag(event) {
         @edgeclick="onEdgeclick"
         @pane-click="editorStore.closeFormPanel()"
         @connect="connect"
+        @node-drag-start="nodeDragStart"
+        @node-drag-stop="nodeDragStop"
+        @keydown.meta.z="undo"
+        @keydown.meta.y="redo"
     >
         <template #node-custom="{ id, data }">
             <PageNode :id="id" :data="data" />

src/shared/interfaces/index.ts

@@ -5,4 +5,5 @@ export * from './form.interface';
 export * from './nodeElement.interface';
 export * from './formButton.interface';
 export * from './field.interface';
-export * from './pageModel.interface';
+export * from './pageModel.interface';
\ No newline at end of file
+export * from './undoRedo.interface';
\ No newline at end of file

src/shared/interfaces/undoRedo.interface.ts

+export interface UndoRedoAction {
+    type: string;
+}
+
+export interface NodeMovedAction extends UndoRedoAction {
+    type: 'nodeMoved';
+    nodeId: string;
+    deltaMovement: { x: number; y: number };
+}
+
+//? Is saving an entire node in this situation a good idea?
+export interface NodeAddedAction extends UndoRedoAction {
+    type: 'nodeAdded';
+    //TODO: use the type defined by vue flow
+    node: any;
+    position: { x: number; y: number };
+}
+
+export interface NodeRemovedAction extends UndoRedoAction {
+    type: 'nodeRemoved';
+    node: any;
+    position: { x: number; y: number }
+}
+
+export interface NodeUpdatedAction extends UndoRedoAction {
+    type: 'nodeUpdated';
+    node: any;
+}
+
+export interface EdgeConnectedAction extends UndoRedoAction {
+    type: 'edgeConnected';
+    edge: any;
+}
+
+export interface EdgeUpdatedAction extends UndoRedoAction {
+    type: 'edgeUpdated';
+    edge: any;
+}
+
+export interface EdgeRemovedAction extends UndoRedoAction {
+    type: 'edgeRemoved';
+    edge: any;
+}
\ No newline at end of file

src/shared/stores/undoRedoStore.ts

+import { defineStore } from 'pinia';
+import { UndoRedoAction, NodeMovedAction } from '../interfaces';
+import { useVueFlow } from '@vue-flow/core';
+
+const { findNode } = useVueFlow({ id: 'main' });
+
+interface UndoRedoState {
+    undoStack: UndoRedoAction[];
+    redoStack: UndoRedoAction[];
+}
+
+export const useUndoRedoStore = defineStore('epoc', {
+    state: (): UndoRedoState => ({
+        undoStack: [],
+        redoStack: [],
+    }),
+
+    actions: {
+        undo(): void {
+            if(this.undoStack.length === 0) return;
+
+            const action = this.undoStack.pop();
+            this.executeAction(action, this.redoStack);
+        },
+        redo(): void {
+            if(this.redoStack.length === 0) return;
+
+            const action = this.redoStack.pop();
+            this.executeAction(action, this.undoStack);
+        },
+        addAction(action: UndoRedoAction): void {
+            this.undoStack.push(action);
+            this.redoStack = [];
+        },
+        executeAction(action: UndoRedoAction, reverseStack: UndoRedoAction[]): void {
+            switch(action.type) {
+            case 'nodeMoved':
+                this.moveNode(action, reverseStack);
+                break;
+            case 'nodeRemoved':
+                this.deleteNode(action);
+                break;
+            case 'nodeAdded':
+                this.addNode(action);
+                break;
+            case 'nodeUpdated':
+                this.updateNode(action);
+                break;
+            case 'edgeConnected':
+                this.connectEdge(action);
+                break;
+            case 'edgeUpdated':
+                this.updateEdge(action);
+                break;
+            case 'edgeRemoved':
+                this.deleteEdge(action);
+                break;
+            }
+        },
+        moveNode(action: NodeMovedAction, reverseStack: UndoRedoAction[]): void {
+            const node = findNode(action.nodeId);
+            node.position.x -= action.deltaMovement.x;
+            node.position.y -= action.deltaMovement.y;
+            
+            const reverseAction: NodeMovedAction = {
+                type: 'nodeMoved',
+                nodeId: action.nodeId,
+                deltaMovement: {
+                    x: -action.deltaMovement.x,
+                    y: -action.deltaMovement.y
+                }
+            };
+            reverseStack.push(reverseAction);
+        },
+        deleteNode() {
+            return;
+        },
+        addNode() {
+            return;
+        },
+        updateNode() {
+            return;
+        },
+        connectEdge() {
+            return;
+        },
+        updateEdge() {
+            return;
+        },
+        deleteEdge() {
+            return;
+        }
+    }
+});
\ No newline at end of file