@anth0nycodes/fabric-history 0.1.0

package/.claude/settings.local.json

@@ -0,0 +1,14 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(ls:*)",
+      "Bash(npm run build:*)",
+      "Bash(npm create:*)",
+      "Bash(npm install)",
+      "Bash(npm install:*)",
+      "mcp__context7__query-docs",
+      "Bash(pnpm remove:*)",
+      "Bash(pnpm add:*)"
+    ]
+  }
+}

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,45 @@
+---
+name: Bug Report
+about: Report a bug or unexpected behavior
+title: "[BUG] "
+labels: bug
+assignees: ""
+---
+
+## Description
+
+<!-- A clear and concise description of the bug -->
+
+## Steps to Reproduce
+
+1.
+2.
+3.
+4.
+
+## Expected Behavior
+
+<!-- What you expected to happen -->
+
+## Actual Behavior
+
+<!-- What actually happened -->
+
+## Environment
+
+- **OS:** <!-- e.g., macOS 14.0, Windows 11, Ubuntu 22.04 -->
+- **Node.js version:** <!-- run `node --version` -->
+- **Package version:** <!-- run `npm list -g @anth0nycodes/fabric-history` -->
+- **Installation method:** <!-- npm or pnpm -->
+
+## Error Output
+
+<!-- If applicable, paste any error messages or screenshots -->
+
+```
+Paste error output here
+```
+
+## Additional Context
+
+<!-- Add any other context about the problem here -->

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,36 @@
+---
+name: Feature Request
+about: Suggest a new feature or enhancement
+title: "[FEATURE] "
+labels: enhancement
+assignees: ""
+---
+
+## Feature Description
+
+<!-- A clear and concise description of the feature you'd like to see -->
+
+## Problem/Use Case
+
+<!-- What problem does this solve? Why would this feature be useful? -->
+
+## Proposed Solution
+
+<!-- How do you envision this feature working? -->
+
+## Alternative Solutions
+
+<!-- Have you considered any alternative solutions or features? -->
+
+## Examples
+
+<!-- If applicable, provide examples of how this feature would be used -->
+
+## Additional Context
+
+<!-- Add any other context, screenshots, or references about the feature request -->
+
+## Would you like to contribute this feature?
+
+- [ ] Yes, I'd like to work on this
+- [ ] No, just suggesting

package/.github/pull_request_template.md

@@ -0,0 +1,44 @@
+## Description
+
+<!-- Provide a brief description of the changes in this PR -->
+
+## Type of Change
+
+<!-- Mark the relevant option with an "x" -->
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] Documentation update
+- [ ] Refactoring (no functional changes)
+- [ ] Other (please describe):
+
+## Related Issues
+
+<!-- Link to related issues using #issue_number -->
+
+Fixes #
+
+## Changes Made
+
+<!-- List the specific changes made in this PR -->
+
+-
+-
+-
+
+## Testing
+
+<!-- Describe the testing you've done -->
+
+- [ ] Tests pass locally with `pnpm test`
+- [ ] Type checking passes with `pnpm check`
+- [ ] Build succeeds with `pnpm build`
+
+## Checklist
+
+- [ ] My code follows the project's coding style
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code where necessary
+- [ ] My changes generate no new warnings or errors
+- [ ] I have updated the documentation (if applicable)

package/.prettierignore

@@ -0,0 +1,23 @@
+# Dependencies
+node_modules
+
+# Build outputs
+dist
+build
+.next
+out
+
+# Coverage
+coverage
+
+# Lock files
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+
+# Environment files
+.env
+.env.*
+
+# Generated files
+*.log

package/.prettierrc

@@ -0,0 +1,18 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "importOrder": [
+    "^react",
+    "^next",
+    "<THIRD_PARTY_MODULES>",
+    "^@/(.*)$",
+    "^[./]"
+  ]
+}

package/CONTRIBUTING.md

@@ -0,0 +1,79 @@
+# Contributing to fabric-history
+
+Thank you for your interest in contributing to fabric-history! We welcome contributions from the community.
+
+## Getting Started
+
+1. Fork the repository
+2. Clone your fork:
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/fabric-history.git
+   cd fabric-history
+   ```
+3. Install dependencies:
+   ```bash
+   pnpm install
+   ```
+
+## Development Workflow
+
+1. Create a new branch for your feature or bug fix:
+
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+2. Make your changes and ensure they follow the project's coding standards
+
+3. Run the test suite to ensure all tests pass:
+
+   ```bash
+   pnpm test
+   ```
+
+   For test coverage:
+
+   ```bash
+   pnpm coverage
+   ```
+
+4. Run type checking to ensure there are no TypeScript errors:
+
+   ```bash
+   pnpm check
+   ```
+
+5. Build the project to verify everything compiles:
+
+   ```bash
+   pnpm build
+   ```
+
+7. Commit your changes with a clear and descriptive commit message:
+
+   ```bash
+   git commit -m "Add: description of your changes"
+   ```
+
+8. Push to your fork:
+
+   ```bash
+   git push origin feature/your-feature-name
+   ```
+
+9. Open a pull request against the main repository
+
+## Reporting Issues
+
+If you find a bug or have a feature request, please create an issue on GitHub with:
+
+- A clear title and description
+- Steps to reproduce (for bugs)
+- Expected vs actual behavior
+- Your environment details (fabric.js version, browser, etc.)
+
+## Questions?
+
+Feel free to open an issue for any questions or concerns.
+
+Thank you for contributing!

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 anth0nycodes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,127 @@
+# fabric-history
+
+A library built on top of fabric.js that provides undo/redo history management for canvas operations.
+
+## Features
+
+- Undo/Redo functionality for fabric.js canvases
+- Automatic history tracking for object additions, removals, and modifications
+- Support for path creation and erasing events
+- Easy integration with existing fabric.js projects
+- Support for fabric.js v6 and v7
+
+## Installation
+
+```bash
+npm install @anth0nycodes/fabric-history
+```
+
+or with pnpm:
+
+```bash
+pnpm add @anth0nycodes/fabric-history
+```
+
+or with yarn:
+
+```bash
+yarn add @anth0nycodes/fabric-history
+```
+
+## Usage
+
+```typescript
+import { CanvasWithHistory } from "@anth0nycodes/fabric-history";
+import { Rect } from "fabric";
+
+// Create a canvas with history support (same constructor as fabric.Canvas)
+const canvas = new CanvasWithHistory("my-canvas", {
+  width: 800,
+  height: 600,
+});
+
+// Add objects - history is tracked automatically
+const rect = new Rect({
+  left: 100,
+  top: 100,
+  width: 50,
+  height: 50,
+  fill: "red",
+});
+canvas.add(rect);
+
+// Undo the last action
+await canvas.undo();
+
+// Redo the undone action
+await canvas.redo();
+
+// Clear history if needed
+canvas.clearHistory();
+```
+
+## API
+
+### `CanvasWithHistory`
+
+Extends fabric.js `Canvas` class with history management capabilities.
+
+#### Methods
+
+| Method           | Returns         | Description                                     |
+| ---------------- | --------------- | ----------------------------------------------- |
+| `undo()`         | `Promise<void>` | Undo the most recent action                     |
+| `redo()`         | `Promise<void>` | Redo the most recently undone action            |
+| `canUndo()`      | `boolean`       | Check if an undo action is available            |
+| `canRedo()`      | `boolean`       | Check if a redo action is available             |
+| `clearHistory()` | `void`          | Clear all undo and redo history                 |
+| `dispose()`      | `void`          | Clean up event listeners and dispose the canvas |
+
+#### Tracked Events
+
+History is automatically saved when these fabric.js events occur:
+
+- `object:added` - When an object is added to the canvas
+- `object:removed` - When an object is removed from the canvas
+- `object:modified` - When an object is modified (moved, scaled, rotated, etc.)
+- `path:created` - When a path is created (e.g., freehand drawing)
+- `erasing:end` - When an erasing operation completes
+- `canvas:cleared` - When the canvas is cleared
+
+## Requirements
+
+- fabric.js 6.x or 7.x
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run development server
+pnpm dev
+
+# Build the project
+pnpm build
+
+# Type check
+pnpm check
+
+# Run tests
+pnpm test
+
+# Run tests with coverage
+pnpm coverage
+```
+
+## Contributing
+
+Contributions are welcome! Please read our [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to submit pull requests.
+
+## License
+
+MIT
+
+## Author
+
+Anthony Hoang

package/dist/canvas.d.ts

@@ -0,0 +1,70 @@
+import { Canvas } from "fabric";
+export declare class CanvasWithHistory extends Canvas {
+    private _historyUndo;
+    private _historyRedo;
+    private _isMoving;
+    private _historyProcessing;
+    private _historyCurrentState;
+    constructor(...args: ConstructorParameters<typeof Canvas>);
+    /**
+     * Binds all relevant fabric event listeners.
+     */
+    private _bindEventListeners;
+    /**
+     * Saves the initial state of the canvas.
+     */
+    private _saveInitialState;
+    /**
+     * Starts the movement event listener for objects.
+     */
+    private _objectMoving;
+    /**
+     * Handles object modification events, including moving, resizing, rotating,
+     * scaling, and skewing.
+     *
+     * @see {@link https://fabricjs.com/api/type-aliases/ObjectModificationEvents/ | Fabric.js ObjectModificationEvents}
+     */
+    private _handleObjectModified;
+    /**
+     * Returns the current state of the canvas as a string.
+     *
+     * @see {@link https://fabricjs.com/docs/old-docs/fabric-intro-part-3/#serialization | Fabric.js Serialization} for why we use toDatalessJSON() instead of toJSON().
+     */
+    private _historyCurrent;
+    /**
+     * Records the current canvas, object, or path state into the history stack for undo/redo.
+     */
+    private _historySaveAction;
+    /**
+     * Undo the most recent action.
+     */
+    undo(): Promise<void>;
+    /**
+     * Checks for whether or not an action can be undone.
+     */
+    canUndo(): boolean;
+    /**
+     * Redo the most recently undone action.
+     */
+    redo(): Promise<void>;
+    /**
+     * Checks for whether or not an action can be redone.
+     */
+    canRedo(): boolean;
+    /**
+     * Loads a canvas history state from the history stack and renders it on the canvas.
+     *
+     * @param historyState - The JSON string representing the canvas history state to load.
+     */
+    private _loadFromHistory;
+    /**
+     * Clears the history stacks for undo and redo.
+     */
+    clearHistory(): void;
+    /**
+     * Unsubscribes all relevant fabric event listeners.
+     */
+    private _disposeEventListeners;
+    dispose(): Promise<boolean>;
+}
+//# sourceMappingURL=canvas.d.ts.map

package/dist/canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../src/canvas.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,qBAAa,iBAAkB,SAAQ,MAAM;IAE3C,OAAO,CAAC,YAAY,CAAW;IAC/B,OAAO,CAAC,YAAY,CAAW;IAG/B,OAAO,CAAC,SAAS,CAAU;IAC3B,OAAO,CAAC,kBAAkB,CAAU;IAEpC,OAAO,CAAC,oBAAoB,CAAS;gBAEzB,GAAG,IAAI,EAAE,qBAAqB,CAAC,OAAO,MAAM,CAAC;IAazD;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAY3B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;OAEG;IACH,OAAO,CAAC,aAAa;IAIrB;;;;;OAKG;IACH,OAAO,CAAC,qBAAqB;IAM7B;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAIvB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAU1B;;OAEG;IACG,IAAI;IAgBV;;OAEG;IACH,OAAO;IAIP;;OAEG;IACG,IAAI;IAcV;;OAEG;IACH,OAAO;IAIP;;;;OAIG;YACW,gBAAgB;IAe9B;;OAEG;IACH,YAAY;IAKZ;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAY9B,OAAO;CAIR"}

package/dist/canvas.js

@@ -0,0 +1,171 @@
+import { Canvas } from "fabric";
+export class CanvasWithHistory extends Canvas {
+    // History stacks
+    _historyUndo;
+    _historyRedo;
+    // Boolean values to determine whether or not we should save to history
+    _isMoving;
+    _historyProcessing;
+    _historyCurrentState;
+    constructor(...args) {
+        super(...args);
+        this._historyUndo = [];
+        this._historyRedo = [];
+        this._isMoving = false;
+        this._historyProcessing = false;
+        this._historyCurrentState = this._historyCurrent();
+        this._bindEventListeners();
+        this._saveInitialState();
+    }
+    /**
+     * Binds all relevant fabric event listeners.
+     */
+    _bindEventListeners() {
+        this.on({
+            "path:created": this._historySaveAction.bind(this),
+            "erasing:end": this._historySaveAction.bind(this),
+            "object:added": this._historySaveAction.bind(this),
+            "object:removed": this._historySaveAction.bind(this),
+            "object:moving": this._objectMoving.bind(this),
+            "object:modified": this._handleObjectModified.bind(this),
+            "canvas:cleared": this._historySaveAction.bind(this),
+        });
+    }
+    /**
+     * Saves the initial state of the canvas.
+     */
+    _saveInitialState() {
+        const initialState = this._historyCurrent();
+        this._historyUndo = [initialState];
+        this._historyCurrentState = initialState;
+    }
+    /**
+     * Starts the movement event listener for objects.
+     */
+    _objectMoving() {
+        this._isMoving = true;
+    }
+    /**
+     * Handles object modification events, including moving, resizing, rotating,
+     * scaling, and skewing.
+     *
+     * @see {@link https://fabricjs.com/api/type-aliases/ObjectModificationEvents/ | Fabric.js ObjectModificationEvents}
+     */
+    _handleObjectModified() {
+        // object:moving -> object:modified - modification is triggered as soon as the movement of an object halts
+        this._isMoving = false;
+        this._historySaveAction();
+    }
+    /**
+     * Returns the current state of the canvas as a string.
+     *
+     * @see {@link https://fabricjs.com/docs/old-docs/fabric-intro-part-3/#serialization | Fabric.js Serialization} for why we use toDatalessJSON() instead of toJSON().
+     */
+    _historyCurrent() {
+        return JSON.stringify(this.toDatalessJSON());
+    }
+    /**
+     * Records the current canvas, object, or path state into the history stack for undo/redo.
+     */
+    _historySaveAction() {
+        if (this._historyProcessing || this._isMoving)
+            return;
+        const latestJSON = this._historyCurrent();
+        if (this._historyCurrentState === latestJSON)
+            return;
+        this._historyUndo.push(latestJSON);
+        this._historyCurrentState = latestJSON;
+        this._historyRedo = [];
+    }
+    /**
+     * Undo the most recent action.
+     */
+    async undo() {
+        if (this._historyUndo.length <= 1)
+            return;
+        this._historyProcessing = true;
+        const poppedState = this._historyUndo.pop();
+        if (!poppedState)
+            return;
+        this._historyRedo.push(poppedState);
+        // refresh canvas to load what remains on the undo stack after popping
+        const previousState = this._historyUndo[this._historyUndo.length - 1];
+        if (!previousState)
+            return;
+        this._historyCurrentState = previousState;
+        await this._loadFromHistory(previousState);
+    }
+    /**
+     * Checks for whether or not an action can be undone.
+     */
+    canUndo() {
+        return this._historyUndo.length > 1;
+    }
+    /**
+     * Redo the most recently undone action.
+     */
+    async redo() {
+        if (this._historyRedo.length === 0)
+            return;
+        this._historyProcessing = true;
+        const poppedState = this._historyRedo.pop();
+        if (!poppedState)
+            return;
+        this._historyUndo.push(poppedState);
+        // refresh canvas to load the popped state
+        this._historyCurrentState = poppedState;
+        await this._loadFromHistory(poppedState);
+    }
+    /**
+     * Checks for whether or not an action can be redone.
+     */
+    canRedo() {
+        return this._historyRedo.length > 0;
+    }
+    /**
+     * Loads a canvas history state from the history stack and renders it on the canvas.
+     *
+     * @param historyState - The JSON string representing the canvas history state to load.
+     */
+    async _loadFromHistory(historyState) {
+        this.clear();
+        this.discardActiveObject();
+        try {
+            const parsed = JSON.parse(historyState);
+            await this.loadFromJSON(parsed);
+            this.renderAll();
+        }
+        catch (error) {
+            console.error("Error loading from history:", error);
+        }
+        finally {
+            this._historyProcessing = false;
+        }
+    }
+    /**
+     * Clears the history stacks for undo and redo.
+     */
+    clearHistory() {
+        this._historyUndo = [];
+        this._historyRedo = [];
+    }
+    /**
+     * Unsubscribes all relevant fabric event listeners.
+     */
+    _disposeEventListeners() {
+        this.off({
+            "path:created": this._historySaveAction.bind(this),
+            "erasing:end": this._historySaveAction.bind(this),
+            "object:added": this._historySaveAction.bind(this),
+            "object:removed": this._historySaveAction.bind(this),
+            "object:moving": this._objectMoving.bind(this),
+            "object:modified": this._handleObjectModified.bind(this),
+            "canvas:cleared": this._historySaveAction.bind(this),
+        });
+    }
+    dispose() {
+        this._disposeEventListeners();
+        return super.dispose();
+    }
+}
+//# sourceMappingURL=canvas.js.map

package/dist/canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../src/canvas.ts"],"names":[],"mappings":"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"}

package/dist/canvas.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=canvas.test.d.ts.map

package/dist/canvas.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.test.d.ts","sourceRoot":"","sources":["../src/canvas.test.ts"],"names":[],"mappings":""}

package/dist/canvas.test.js

@@ -0,0 +1,137 @@
+// @vitest-environment jsdom
+import { Circle, Path, Rect } from "fabric";
+import { beforeEach, describe, expect, test } from "vitest";
+import { CanvasWithHistory } from "./canvas";
+describe("canvas operations with history management", () => {
+    let canvas;
+    let circle;
+    let path;
+    let rect;
+    beforeEach(() => {
+        const canvasEl = document.createElement("canvas");
+        canvas = new CanvasWithHistory(canvasEl);
+        circle = new Circle({
+            radius: 20,
+            fill: "green",
+            left: 100,
+            top: 100,
+        });
+        path = new Path("M 0 0 L 100 100 L 0 100 z", {
+            fill: "",
+            stroke: "red",
+        });
+        rect = new Rect({
+            left: 100,
+            top: 100,
+            fill: "red",
+            width: 50,
+            height: 50,
+        });
+    });
+    test("canvas only contains rect and circle after undo", async () => {
+        canvas.add(rect);
+        canvas.add(circle);
+        canvas.add(path);
+        await canvas.undo();
+        // After undo: canvas should only contain rect and circle object
+        expect(canvas.contains(path)).toBe(false);
+    });
+    test("canvas only contains circle after undo", async () => {
+        canvas.add(circle);
+        canvas.add(rect);
+        canvas.add(path);
+        await canvas.undo();
+        await canvas.undo();
+        // After undo: canvas should only contain circle object
+        expect(canvas.contains(rect) && canvas.contains(path)).toBe(false);
+    });
+    test("canvas contains nothing after undo", async () => {
+        canvas.add(path);
+        await canvas.undo();
+        // After undo: canvas should have 0 objects
+        expect(canvas.contains(path)).toBe(false);
+    });
+    // Redo tests
+    test("canvas contains path again after undo then redo", async () => {
+        canvas.add(rect);
+        canvas.add(circle);
+        canvas.add(path);
+        await canvas.undo();
+        await canvas.redo();
+        // After redo: canvas should contain all 3 objects again
+        expect(canvas.getObjects().length).toBe(3);
+    });
+    test("canvas contains rect and path after two undos then one redo", async () => {
+        canvas.add(rect);
+        canvas.add(circle);
+        canvas.add(path);
+        await canvas.undo();
+        await canvas.undo();
+        await canvas.redo();
+        // After 2 undos and 1 redo: canvas should contain rect and circle
+        expect(canvas.getObjects().length).toBe(2);
+    });
+    test("canvas contains all objects after multiple undos then multiple redos", async () => {
+        canvas.add(rect);
+        canvas.add(circle);
+        canvas.add(path);
+        await canvas.undo();
+        await canvas.undo();
+        await canvas.undo();
+        // After 3 undos: canvas should be empty
+        expect(canvas.getObjects().length).toBe(0);
+        await canvas.redo();
+        await canvas.redo();
+        await canvas.redo();
+        // After 3 redos: canvas should contain all 3 objects
+        expect(canvas.getObjects().length).toBe(3);
+    });
+    test("redo does nothing when there is nothing to redo", async () => {
+        canvas.add(rect);
+        canvas.add(circle);
+        await canvas.redo();
+        // Redo with no prior undo: canvas should still contain 2 objects
+        expect(canvas.getObjects().length).toBe(2);
+    });
+    test("redo stack is cleared after new action", async () => {
+        canvas.add(rect);
+        canvas.add(circle);
+        canvas.add(path);
+        await canvas.undo();
+        // Add a new object after undo (this should clear redo stack)
+        const newRect = new Rect({
+            left: 200,
+            top: 200,
+            fill: "blue",
+            width: 30,
+            height: 30,
+        });
+        canvas.add(newRect);
+        // Try to redo - should do nothing since redo stack was cleared
+        await canvas.redo();
+        // Canvas should still have 3 objects (rect, circle, newRect) - path should not come back
+        expect(canvas.getObjects().length).toBe(3);
+        expect(canvas.canRedo()).toBe(false);
+    });
+    test("canUndo returns correct value", async () => {
+        expect(canvas.canUndo()).toBe(false);
+        canvas.add(rect);
+        expect(canvas.canUndo()).toBe(true);
+        await canvas.undo();
+        expect(canvas.canUndo()).toBe(false);
+    });
+    test("canRedo returns correct value", async () => {
+        canvas.add(rect);
+        expect(canvas.canRedo()).toBe(false);
+        await canvas.undo();
+        expect(canvas.canRedo()).toBe(true);
+        await canvas.redo();
+        expect(canvas.canRedo()).toBe(false);
+    });
+    test("undo does nothing when there is nothing to undo", async () => {
+        await canvas.undo();
+        // Undo on empty canvas: should still be empty with no errors
+        expect(canvas.getObjects().length).toBe(0);
+    });
+});
+//# sourceMappingURL=canvas.test.js.map

package/dist/canvas.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.test.js","sourceRoot":"","sources":["../src/canvas.test.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { CanvasWithHistory } from "./canvas.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { CanvasWithHistory } from "./canvas.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC"}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@anth0nycodes/fabric-history",
+  "version": "0.1.0",
+  "description": "A library built on top of fabric.js that allows for easy access to canvas history.",
+  "type": "module",
+  "main": "dist/index.js",
+  "keywords": [
+    "fabric",
+    "fabric.js",
+    "canvas history",
+    "canvas undo",
+    "canvas redo",
+    "canvas"
+  ],
+  "author": "Anthony Hoang",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/anth0nycodes/fabric-history.git"
+  },
+  "bugs": {
+    "url": "https://github.com/anth0nycodes/fabric-history/issues"
+  },
+  "homepage": "https://github.com/anth0nycodes/fabric-history#readme",
+  "peerDependencies": {
+    "fabric": ">=6.0.0 <8.0.0"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+    "@vitest/coverage-v8": "^4.0.18",
+    "canvas": "^3.2.1",
+    "jsdom": "^28.0.0",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "dev": "tsx src/index.ts",
+    "build": "tsc",
+    "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "start": "node dist/index.js",
+    "check": "tsc --noEmit",
+    "publish:npm": "pnpm publish --access public"
+  }
+}

package/src/canvas.test.ts

@@ -0,0 +1,178 @@
+// @vitest-environment jsdom
+
+import { Circle, Path, Rect } from "fabric";
+import { beforeEach, describe, expect, test } from "vitest";
+import { CanvasWithHistory } from "./canvas";
+
+describe("canvas operations with history management", () => {
+  let canvas: CanvasWithHistory;
+  let circle: Circle;
+  let path: Path;
+  let rect: Rect;
+
+  beforeEach(() => {
+    const canvasEl = document.createElement("canvas");
+    canvas = new CanvasWithHistory(canvasEl);
+
+    circle = new Circle({
+      radius: 20,
+      fill: "green",
+      left: 100,
+      top: 100,
+    });
+
+    path = new Path("M 0 0 L 100 100 L 0 100 z", {
+      fill: "",
+      stroke: "red",
+    });
+
+    rect = new Rect({
+      left: 100,
+      top: 100,
+      fill: "red",
+      width: 50,
+      height: 50,
+    });
+  });
+
+  test("canvas only contains rect and circle after undo", async () => {
+    canvas.add(rect);
+    canvas.add(circle);
+    canvas.add(path);
+
+    await canvas.undo();
+
+    // After undo: canvas should only contain rect and circle object
+    expect(canvas.contains(path)).toBe(false);
+  });
+
+  test("canvas only contains circle after undo", async () => {
+    canvas.add(circle);
+    canvas.add(rect);
+    canvas.add(path);
+
+    await canvas.undo();
+    await canvas.undo();
+
+    // After undo: canvas should only contain circle object
+    expect(canvas.contains(rect) && canvas.contains(path)).toBe(false);
+  });
+
+  test("canvas contains nothing after undo", async () => {
+    canvas.add(path);
+
+    await canvas.undo();
+
+    // After undo: canvas should have 0 objects
+    expect(canvas.contains(path)).toBe(false);
+  });
+
+  // Redo tests
+  test("canvas contains path again after undo then redo", async () => {
+    canvas.add(rect);
+    canvas.add(circle);
+    canvas.add(path);
+
+    await canvas.undo();
+    await canvas.redo();
+
+    // After redo: canvas should contain all 3 objects again
+    expect(canvas.getObjects().length).toBe(3);
+  });
+
+  test("canvas contains rect and path after two undos then one redo", async () => {
+    canvas.add(rect);
+    canvas.add(circle);
+    canvas.add(path);
+
+    await canvas.undo();
+    await canvas.undo();
+    await canvas.redo();
+
+    // After 2 undos and 1 redo: canvas should contain rect and circle
+    expect(canvas.getObjects().length).toBe(2);
+  });
+
+  test("canvas contains all objects after multiple undos then multiple redos", async () => {
+    canvas.add(rect);
+    canvas.add(circle);
+    canvas.add(path);
+
+    await canvas.undo();
+    await canvas.undo();
+    await canvas.undo();
+
+    // After 3 undos: canvas should be empty
+    expect(canvas.getObjects().length).toBe(0);
+
+    await canvas.redo();
+    await canvas.redo();
+    await canvas.redo();
+
+    // After 3 redos: canvas should contain all 3 objects
+    expect(canvas.getObjects().length).toBe(3);
+  });
+
+  test("redo does nothing when there is nothing to redo", async () => {
+    canvas.add(rect);
+    canvas.add(circle);
+
+    await canvas.redo();
+
+    // Redo with no prior undo: canvas should still contain 2 objects
+    expect(canvas.getObjects().length).toBe(2);
+  });
+
+  test("redo stack is cleared after new action", async () => {
+    canvas.add(rect);
+    canvas.add(circle);
+    canvas.add(path);
+
+    await canvas.undo();
+
+    // Add a new object after undo (this should clear redo stack)
+    const newRect = new Rect({
+      left: 200,
+      top: 200,
+      fill: "blue",
+      width: 30,
+      height: 30,
+    });
+    canvas.add(newRect);
+
+    // Try to redo - should do nothing since redo stack was cleared
+    await canvas.redo();
+
+    // Canvas should still have 3 objects (rect, circle, newRect) - path should not come back
+    expect(canvas.getObjects().length).toBe(3);
+    expect(canvas.canRedo()).toBe(false);
+  });
+
+  test("canUndo returns correct value", async () => {
+    expect(canvas.canUndo()).toBe(false);
+
+    canvas.add(rect);
+    expect(canvas.canUndo()).toBe(true);
+
+    await canvas.undo();
+    expect(canvas.canUndo()).toBe(false);
+  });
+
+  test("canRedo returns correct value", async () => {
+    canvas.add(rect);
+    expect(canvas.canRedo()).toBe(false);
+
+    await canvas.undo();
+    expect(canvas.canRedo()).toBe(true);
+
+    await canvas.redo();
+    expect(canvas.canRedo()).toBe(false);
+  });
+
+  test("undo does nothing when there is nothing to undo", async () => {
+    await canvas.undo();
+
+    // Undo on empty canvas: should still be empty with no errors
+    expect(canvas.getObjects().length).toBe(0);
+  });
+});

package/src/canvas.ts

@@ -0,0 +1,189 @@
+import { Canvas } from "fabric";
+
+export class CanvasWithHistory extends Canvas {
+  // History stacks
+  private _historyUndo: string[];
+  private _historyRedo: string[];
+
+  // Boolean values to determine whether or not we should save to history
+  private _isMoving: boolean;
+  private _historyProcessing: boolean;
+
+  private _historyCurrentState: string;
+
+  constructor(...args: ConstructorParameters<typeof Canvas>) {
+    super(...args);
+
+    this._historyUndo = [];
+    this._historyRedo = [];
+    this._isMoving = false;
+    this._historyProcessing = false;
+    this._historyCurrentState = this._historyCurrent();
+
+    this._bindEventListeners();
+    this._saveInitialState();
+  }
+
+  /**
+   * Binds all relevant fabric event listeners.
+   */
+  private _bindEventListeners() {
+    this.on({
+      "path:created": this._historySaveAction.bind(this),
+      "erasing:end": this._historySaveAction.bind(this),
+      "object:added": this._historySaveAction.bind(this),
+      "object:removed": this._historySaveAction.bind(this),
+      "object:moving": this._objectMoving.bind(this),
+      "object:modified": this._handleObjectModified.bind(this),
+      "canvas:cleared": this._historySaveAction.bind(this),
+    });
+  }
+
+  /**
+   * Saves the initial state of the canvas.
+   */
+  private _saveInitialState() {
+    const initialState = this._historyCurrent();
+    this._historyUndo = [initialState];
+    this._historyCurrentState = initialState;
+  }
+
+  /**
+   * Starts the movement event listener for objects.
+   */
+  private _objectMoving() {
+    this._isMoving = true;
+  }
+
+  /**
+   * Handles object modification events, including moving, resizing, rotating,
+   * scaling, and skewing.
+   *
+   * @see {@link https://fabricjs.com/api/type-aliases/ObjectModificationEvents/ | Fabric.js ObjectModificationEvents}
+   */
+  private _handleObjectModified() {
+    // object:moving -> object:modified - modification is triggered as soon as the movement of an object halts
+    this._isMoving = false;
+    this._historySaveAction();
+  }
+
+  /**
+   * Returns the current state of the canvas as a string.
+   *
+   * @see {@link https://fabricjs.com/docs/old-docs/fabric-intro-part-3/#serialization | Fabric.js Serialization} for why we use toDatalessJSON() instead of toJSON().
+   */
+  private _historyCurrent() {
+    return JSON.stringify(this.toDatalessJSON());
+  }
+
+  /**
+   * Records the current canvas, object, or path state into the history stack for undo/redo.
+   */
+  private _historySaveAction() {
+    if (this._historyProcessing || this._isMoving) return;
+    const latestJSON = this._historyCurrent();
+
+    if (this._historyCurrentState === latestJSON) return;
+    this._historyUndo.push(latestJSON);
+    this._historyCurrentState = latestJSON;
+    this._historyRedo = [];
+  }
+
+  /**
+   * Undo the most recent action.
+   */
+  async undo() {
+    if (this._historyUndo.length <= 1) return;
+    this._historyProcessing = true;
+
+    const poppedState = this._historyUndo.pop();
+    if (!poppedState) return;
+
+    this._historyRedo.push(poppedState);
+
+    // refresh canvas to load what remains on the undo stack after popping
+    const previousState = this._historyUndo[this._historyUndo.length - 1];
+    if (!previousState) return;
+    this._historyCurrentState = previousState;
+    await this._loadFromHistory(previousState);
+  }
+
+  /**
+   * Checks for whether or not an action can be undone.
+   */
+  canUndo() {
+    return this._historyUndo.length > 1;
+  }
+
+  /**
+   * Redo the most recently undone action.
+   */
+  async redo() {
+    if (this._historyRedo.length === 0) return;
+    this._historyProcessing = true;
+
+    const poppedState = this._historyRedo.pop();
+    if (!poppedState) return;
+
+    this._historyUndo.push(poppedState);
+
+    // refresh canvas to load the popped state
+    this._historyCurrentState = poppedState;
+    await this._loadFromHistory(poppedState);
+  }
+
+  /**
+   * Checks for whether or not an action can be redone.
+   */
+  canRedo() {
+    return this._historyRedo.length > 0;
+  }
+
+  /**
+   * Loads a canvas history state from the history stack and renders it on the canvas.
+   *
+   * @param historyState - The JSON string representing the canvas history state to load.
+   */
+  private async _loadFromHistory(historyState: string) {
+    this.clear();
+    this.discardActiveObject();
+
+    try {
+      const parsed = JSON.parse(historyState);
+      await this.loadFromJSON(parsed);
+      this.renderAll();
+    } catch (error) {
+      console.error("Error loading from history:", error);
+    } finally {
+      this._historyProcessing = false;
+    }
+  }
+
+  /**
+   * Clears the history stacks for undo and redo.
+   */
+  clearHistory() {
+    this._historyUndo = [];
+    this._historyRedo = [];
+  }
+
+  /**
+   * Unsubscribes all relevant fabric event listeners.
+   */
+  private _disposeEventListeners() {
+    this.off({
+      "path:created": this._historySaveAction.bind(this),
+      "erasing:end": this._historySaveAction.bind(this),
+      "object:added": this._historySaveAction.bind(this),
+      "object:removed": this._historySaveAction.bind(this),
+      "object:moving": this._objectMoving.bind(this),
+      "object:modified": this._handleObjectModified.bind(this),
+      "canvas:cleared": this._historySaveAction.bind(this),
+    });
+  }
+
+  dispose() {
+    this._disposeEventListeners();
+    return super.dispose();
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { CanvasWithHistory } from "./canvas.js";

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022", "dom"],
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "skipDefaultLibCheck": true,
+    "allowJs": true,
+    "checkJs": false,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "src/**/*.test.ts"]
+}

package/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    setupFiles: ["./vitest.setup.ts"],
+    exclude: ["node_modules", "dist"],
+  },
+});

package/vitest.setup.ts

@@ -0,0 +1,34 @@
+import { vi } from "vitest";
+
+// Mock canvas getContext for jsdom
+const getContext = vi.fn(() => ({
+  scale: vi.fn(),
+  clearRect: vi.fn(),
+  fillRect: vi.fn(),
+  getImageData: vi.fn(() => ({ data: [] })),
+  putImageData: vi.fn(),
+  createImageData: vi.fn(() => []),
+  setTransform: vi.fn(),
+  drawImage: vi.fn(),
+  save: vi.fn(),
+  restore: vi.fn(),
+  beginPath: vi.fn(),
+  moveTo: vi.fn(),
+  lineTo: vi.fn(),
+  closePath: vi.fn(),
+  stroke: vi.fn(),
+  fill: vi.fn(),
+  translate: vi.fn(),
+  rotate: vi.fn(),
+  arc: vi.fn(),
+  rect: vi.fn(),
+  clip: vi.fn(),
+  measureText: vi.fn(() => ({ width: 0 })),
+  transform: vi.fn(),
+  canvas: {
+    width: 300,
+    height: 150,
+  },
+}));
+
+HTMLCanvasElement.prototype.getContext = getContext as any;