Easy-UndoRedo is a very simple implementation of a typical undo redo stack for VueJS.
Installation
# Use npm
npm install vue-easy-undoredo --save
# Use yarn
yarn add vue-easy-undoredo
Demo
https://codesandbox.io/s/easy-undoredo-demo-1t17q
Content of the library
Mixins
The library defines two mixins :
-
UndoRedoStackMixin
: grafts an undo redo stack on any component that incorporates it -
UndoRedoClientMixin
: provides easy access to the nearest component in the ancestor chain with an undo redo stack grafted onto it
Interfaces
The library defines one interface : Command
.
Command interface
A command is an object that can be placed onto an undo redo stack for execution.
Commands simply updates (forward and backward) whatever data model drives the UI. Provided the data model is reactive, Vue will update the UI according to whatever modification the command applied to the model, as it usually does.
ALL modifications of the model must be done by using commands.
A command must implement three methods :
-
redo(first: boolean): void
: Executed when the command is put initially onto the stack (in that case first = true) or when it must be played forward (in that case first = false). -
undo(): void
: Executed when the command must be played backward. -
label() : string
: Returns the label of the command if any.
UndoRedoStackMixin
An undo redo stack is actually two stacks :
- The stack of commands that can be undone (
undoStack
data of the UndoRedoStack mixin) - The stack of commands that can be redone (
redoStack
data of the UndoRedoStack mixin)
Methods
-
execute(command: Command): void
: executes the given command, puts it on theundoStack
and flushes theredoStack
-
undo(): void
: calls undo on the command on top of theundoStack
and moves it to theredoStack
-
redo(): void
: calls redo on the command on top of theredoStack
and moves it to theundoStack
-
reset() : void
: flushes both stacks -
markSaved() : void
: informs the stack that the data model has just been saved. See thedirty
computed field for the usefulness of this.
Computed
-
canUndo : boolean
: true if there are commands on theundoStack
-
canRedo : boolean
: true if there are commands on theredoStack
-
undoLabel : string
: the label of the command on top of theundoStack
-
redoLabel : string
: the label of the command on top of theredoStack
-
dirty : boolean
: true if the model has unsaved changes given the current state of the stack
UndoRedoClientMixin
Simply provides one computed : undoRedoStack
. Returns the nearest component in the ancestor chain with an undo redo stack grafted onto it.