A very simple implementation of a typical undo redo stack for VueJS 2 https://codesandbox.io/s/easy-undoredo-demo-1t17q
MIT License
Easy-UndoRedo is a very simple implementation of a typical undo redo stack for VueJS.
# Use npm
npm install vue-easy-undoredo --save
# Use yarn
yarn add vue-easy-undoredo
https://codesandbox.io/s/easy-undoredo-demo-1t17q
The library defines two mixins :
UndoRedoStackMixin
: grafts an undo redo stack on any component that incorporates itUndoRedoClientMixin
: provides easy access to the nearest component in the ancestor chain with an undo redo stack grafted onto itThe library defines one interface : Command
.
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 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.An undo redo stack is actually two stacks :
undoStack
data of UndoRedoStackMixin)redoStack
data of UndoRedoStackMixin)execute(command: Command): void
: executes the given command, puts it on the undoStack
and flushes the redoStack
undo(): void
: calls undo on the command on top of the undoStack
and moves it to the redoStack
redo(): void
: calls redo on the command on top of the redoStack
and moves it to the undoStack
reset() : void
: flushes both stacksmarkSaved() : void
: informs the stack that the data model has just been saved. See the dirty
computed field for the usefulness of this.canUndo : boolean
: true if there are commands on the undoStack
canRedo : boolean
: true if there are commands on the redoStack
undoLabel : string
: the label of the command on top of the undoStack
redoLabel : string
: the label of the command on top of the redoStack
dirty : boolean
: true if the model has unsaved changes given the current state of the stackSimply provides one computed : undoRedoStack
. Returns the nearest component in the ancestor chain with an undo redo stack grafted onto it.