@1nd/fabric-history-pure-browser

Undo and redo implementations on fabric-pure-browser version of fabric.js

Usage no npm install needed!

<script type="module">
  import 1ndFabricHistoryPureBrowser from 'https://cdn.skypack.dev/@1nd/fabric-history-pure-browser';
</script>

README

fabric-history

npm npm

Fabric.js history implementation

Setup

Node projects

npm i fabric-history

import 'fabric-history';

HTML

<script src="https://raw.githubusercontent.com/lyzerk/fabric-history/master/src/index.js"></script>

Usage

Following commands will undo and redo the canvas.

canvas.undo();

canvas.redo();

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fabric with history</title>
</head>
<body>
  <canvas></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
  <script src="//raw.githubusercontent.com/lyzerk/fabric-history/master/src/index.js"></script>

  <script>
    const canvas = new fabric.Canvas(document.querySelector('canvas'), {
      isDrawingMode: true
    })

    document.addEventListener('keyup', ({ keyCode, ctrlKey } = event) => {
      // Check Ctrl key is pressed.
      if (!ctrlKey) {
        return
      }

      // Check pressed button is Z - Ctrl+Z.
      if (keyCode === 90) {
        canvas.undo()
      }

      // Check pressed button is Y - Ctrl+Y.
      if (keyCode === 89) {
        canvas.redo()
      }
    })
    </script>
</body>
</html>

You can find an advanced example on demo folder.

Events

  • history:append
    • Fired when a history appended to stack
  • history:undo
    • Fired when an undo process is happening
  • history:redo
    • Fired when a redo process is happening
  • history:clear
    • Fired when whole history cleared

Callbacks

canvas.undo(function() { 
  console.log('post undo');
});

canvas.redo(function() { 
  console.log('post redo');
});

Functions

  • undo
  • redo
  • clearHistory