https://github.com/rlemaigre/easy-undoredo

A very simple implementation of a typical undo redo stack for VueJS 2 https://codesandbox.io/s/easy-undoredo-demo-1t17q
https://github.com/rlemaigre/easy-undoredo

undo-redo vue vue2 vuejs vuejs2

Last synced: 3 days ago
JSON representation

A very simple implementation of a typical undo redo stack for VueJS 2 https://codesandbox.io/s/easy-undoredo-demo-1t17q

• Host: GitHub
• URL: https://github.com/rlemaigre/easy-undoredo
• Owner: rlemaigre
• License: mit
• Created: 2020-06-05T10:10:12.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T08:00:56.000Z (over 1 year ago)
• Last Synced: 2024-09-30T10:21:44.332Z (3 days ago)
• Topics: undo-redo, vue, vue2, vuejs, vuejs2
• Language: TypeScript
• Homepage:
• Size: 3.78 MB
• Stars: 3
• Watchers: 1
• Forks: 2
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Easy-UndoRedo is a very simple implementation of a typical undo redo stack for VueJS.

# Installation

Install via [npm](https://npmjs.com) or [yarn](https://yarnpkg.com)

```bash

# Use npm

npm install vue-easy-undoredo --save

# Use yarn

yarn add vue-easy-undoredo

```

# Demo

https://codesandbox.io/s/easy-undoredo-demo-1t17q

![demo](img/demo.gif)

# 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

 

 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.

 

# UndoRedoStackMixin

 

 An undo redo stack is actually two stacks :

  * The stack of commands that can be undone (`undoStack` data of UndoRedoStackMixin)

  * The stack of commands that can be redone (`redoStack` data of UndoRedoStackMixin)

   

## Methods

 

  * `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 stacks

  * `markSaved() : void` : informs the stack that the data model has just been saved. See the `dirty` computed field for the usefulness of this.

  

## Computed

 * `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 stack

 

# UndoRedoClientMixin

 

 Simply provides one computed : `undoRedoStack`. Returns the nearest component in the ancestor chain with an undo redo stack grafted onto it.