From 801839261bb063470797907bbdb7e626ad0bf99f Mon Sep 17 00:00:00 2001
From: NathanViaud <nathan.viaud@inria.fr>
Date: Thu, 6 Apr 2023 17:10:35 +0200
Subject: [PATCH] Node added & removed

---
 src/features/ePocFlow/ePocFlow.vue          |  2 --
 src/shared/interfaces/undoRedo.interface.ts |  2 --
 src/shared/stores/undoRedoStore.ts          | 38 ++++++++++++++++-----
 src/views/EditorPage.vue                    | 17 +++++++++
 4 files changed, 46 insertions(+), 13 deletions(-)

diff --git a/src/features/ePocFlow/ePocFlow.vue b/src/features/ePocFlow/ePocFlow.vue
index bea8182b..e007e27a 100644
--- a/src/features/ePocFlow/ePocFlow.vue
+++ b/src/features/ePocFlow/ePocFlow.vue
@@ -176,8 +176,6 @@ function nodeDrag(event) {
         @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" />
diff --git a/src/shared/interfaces/undoRedo.interface.ts b/src/shared/interfaces/undoRedo.interface.ts
index b35f079f..a6cfcbd2 100644
--- a/src/shared/interfaces/undoRedo.interface.ts
+++ b/src/shared/interfaces/undoRedo.interface.ts
@@ -13,13 +13,11 @@ 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 {
diff --git a/src/shared/stores/undoRedoStore.ts b/src/shared/stores/undoRedoStore.ts
index c364b87e..a88a6aa8 100644
--- a/src/shared/stores/undoRedoStore.ts
+++ b/src/shared/stores/undoRedoStore.ts
@@ -1,8 +1,8 @@
 import { defineStore } from 'pinia';
-import { UndoRedoAction, NodeMovedAction } from '../interfaces';
-import { useVueFlow } from '@vue-flow/core';
+import { UndoRedoAction, NodeMovedAction, NodeRemovedAction, NodeAddedAction } from '../interfaces';
+import { applyNodeChanges, useVueFlow } from '@vue-flow/core';
 
-const { findNode } = useVueFlow({ id: 'main' });
+const { findNode, addNodes, nodes } = useVueFlow({ id: 'main' });
 
 interface UndoRedoState {
     undoStack: UndoRedoAction[];
@@ -38,10 +38,10 @@ export const useUndoRedoStore = defineStore('epoc', {
                 this.moveNode(action, reverseStack);
                 break;
             case 'nodeRemoved':
-                this.deleteNode(action);
+                this.addNode(action, reverseStack);
                 break;
             case 'nodeAdded':
-                this.addNode(action);
+                this.deleteNode(action, reverseStack);
                 break;
             case 'nodeUpdated':
                 this.updateNode(action);
@@ -72,11 +72,31 @@ export const useUndoRedoStore = defineStore('epoc', {
             };
             reverseStack.push(reverseAction);
         },
-        deleteNode() {
-            return;
+        deleteNode(action: NodeRemovedAction, reverseStack: UndoRedoAction[]) {
+            const node = JSON.parse(action.node);
+
+            applyNodeChanges(
+                [{ id: node.id, type: 'remove' }],
+                nodes.value
+            );
+
+            const reverseAction: NodeRemovedAction = {
+                type: 'nodeRemoved',
+                node: action.node,
+            };
+            reverseStack.push(reverseAction);
         },
-        addNode() {
-            return;
+        addNode(action: NodeAddedAction, reverseStack: UndoRedoAction[]) {
+            const node = JSON.parse(action.node);
+
+            addNodes([node]);
+
+            const reverseAction: NodeAddedAction = {
+                type: 'nodeAdded',
+                node: action.node,
+            };
+            reverseStack.push(reverseAction);
+            
         },
         updateNode() {
             return;
diff --git a/src/views/EditorPage.vue b/src/views/EditorPage.vue
index 00cc66a4..cf24f6ed 100644
--- a/src/views/EditorPage.vue
+++ b/src/views/EditorPage.vue
@@ -7,8 +7,10 @@ import ValidationModal from '../components/ValidationModal.vue';
 import { useEditorStore } from '@/src/shared/stores';
 import { editorService } from '@/src/shared/services';
 import { confirmDelete } from '@/src/shared/services/graph';
+import { useUndoRedoStore } from '../shared/stores/undoRedoStore';
 
 const editorStore = useEditorStore();
+const undoRedoStore = useUndoRedoStore();
 
 editorService.setup();
 
@@ -20,6 +22,15 @@ document.body.addEventListener('keydown', function(event) {
             confirmDelete();
         }
     }
+
+    if (event.ctrlKey || event.metaKey) {
+        if (event.key === 'z') {
+            undo();
+        }
+        if (event.key === 'y') {
+            redo();
+        }
+    }
 });
 
 
@@ -35,6 +46,12 @@ function onCursorAllowed() {
 
 function onRemoveCursor() {
     document.body.classList.remove('cursor-not-allowed', 'cursor-allowed');
+function undo() {
+    undoRedoStore.undo();
+}
+
+function redo() {
+    undoRedoStore.redo();
 }
 
 </script>
-- 
GitLab