diff --git a/src/features/ePocFlow/ePocFlow.vue b/src/features/ePocFlow/ePocFlow.vue index bea8182b5eca5410ec985e2f3ed5e2143c94ddb3..e007e27a7b4a67cd1cebc0f6661b1ec29bd10cc5 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 b35f079f771dd41f8eaeca3da61bcc0d0f73e8c3..a6cfcbd24cce0aba00f2cc98e77c35fbdbdb3f69 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 c364b87e8c657ced8ef67dedfbf117004a8d6472..a88a6aa840ea1d9251c9f8ed10a106bcd020a450 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 00cc66a48dcf93044604b8c79ac9ca22d3e4118b..cf24f6ed5773be898abcce4e1f8786f4c23861c1 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>