{"id":45072270,"url":"https://github.com/anth0nycodes/fabric-history","last_synced_at":"2026-03-05T10:03:47.097Z","repository":{"id":337890728,"uuid":"1149195253","full_name":"anth0nycodes/fabric-history","owner":"anth0nycodes","description":"A library built on top of fabric.js that allows for easy access to canvas history.","archived":false,"fork":false,"pushed_at":"2026-02-11T20:14:52.000Z","size":42,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-12T04:26:52.859Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anth0nycodes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-03T20:42:08.000Z","updated_at":"2026-02-11T20:08:34.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/anth0nycodes/fabric-history","commit_stats":null,"previous_names":["anth0nycodes/fabric-history"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/anth0nycodes/fabric-history","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anth0nycodes%2Ffabric-history","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anth0nycodes%2Ffabric-history/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anth0nycodes%2Ffabric-history/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anth0nycodes%2Ffabric-history/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anth0nycodes","download_url":"https://codeload.github.com/anth0nycodes/fabric-history/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anth0nycodes%2Ffabric-history/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29613218,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T10:52:55.328Z","status":"ssl_error","status_checked_at":"2026-02-19T10:52:26.323Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-19T12:33:31.065Z","updated_at":"2026-03-05T10:03:47.077Z","avatar_url":"https://github.com/anth0nycodes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# fabric-history\n\nA library built on top of fabric.js that provides undo/redo history management for canvas operations.\n\n\u003cp\u003e\n  \u003cimg alt=\"GitHub Stars\" src=\"https://img.shields.io/github/stars/anth0nycodes/fabric-history?style=plastic\"\u003e\n  \u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/d18m/%40anth0nycodes%2Ffabric-history?style=plastic\"\u003e\n\u003c/p\u003e\n\n## Features\n\n- Undo/Redo functionality for fabric.js canvases\n- Automatic history tracking for path creation, erasing events, object additions, removals, and modifications\n- Multi-selection batching: operations on multiple selected objects are recorded as a single history entry\n- Custom events for history state changes\n- Fully type-safe\n- Support for fabric.js v6 and v7\n\n## Installation\n\n```bash\nnpm install @anth0nycodes/fabric-history\n```\n\nor with pnpm:\n\n```bash\npnpm add @anth0nycodes/fabric-history\n```\n\nor with yarn:\n\n```bash\nyarn add @anth0nycodes/fabric-history\n```\n\n## Usage\n\n```typescript\nimport { CanvasWithHistory } from \"@anth0nycodes/fabric-history\";\nimport { Rect } from \"fabric\";\n\n// Create a canvas with history support (same constructor as fabric.Canvas)\nconst canvas = new CanvasWithHistory(\"my-canvas\", {\n  width: 800,\n  height: 600,\n});\n\n// Add objects - history is tracked automatically\nconst rect = new Rect({\n  left: 100,\n  top: 100,\n  width: 50,\n  height: 50,\n  fill: \"red\",\n});\ncanvas.add(rect);\n\n// Undo the last action\nawait canvas.undo();\n\n// Redo the undone action\nawait canvas.redo();\n```\n\n### Using with `@erase2d/fabric`\n\nTo enable history tracking for erasing operations, use the `setEraserBrush` method with an `EraserBrush` from [`@erase2d/fabric`](https://github.com/erase2d/fabric). This ensures that erasing actions trigger the `erasing:end` event required for history tracking.\n\n```typescript\nimport { CanvasWithHistory } from \"@anth0nycodes/fabric-history\";\nimport { EraserBrush } from \"@erase2d/fabric\";\n\nconst canvas = new CanvasWithHistory(\"my-canvas\", {\n  width: 800,\n  height: 600,\n});\n\n// Create and set the eraser brush\nconst eraser = new EraserBrush(canvas);\neraser.width = 20;\ncanvas.setEraserBrush(eraser);\n\n// Enable drawing mode to use the eraser\ncanvas.isDrawingMode = true;\n```\n\n## API\n\n### `CanvasWithHistory`\n\nExtends fabric.js `Canvas` class with history management capabilities.\n\n#### Methods\n\n| Method                   | Returns         | Description                                                                                          |\n| ------------------------ | --------------- | ---------------------------------------------------------------------------------------------------- |\n| `undo()`                 | `Promise\u003cvoid\u003e` | Undo the most recent action                                                                          |\n| `redo()`                 | `Promise\u003cvoid\u003e` | Redo the most recently undone action                                                                 |\n| `canUndo()`              | `boolean`       | Check if an undo action is available                                                                 |\n| `canRedo()`              | `boolean`       | Check if a redo action is available                                                                  |\n| `setEraserBrush(eraser)` | `void`          | Set an `EraserBrush` from `@erase2d/fabric` to enable history tracking for erasing operations        |\n| `clearHistory()`         | `void`          | Clear the undo and redo history stacks                                                               |\n| `clearCanvas()`          | `void`          | Clear the canvas and save the cleared state to history (use this instead of the inherited `clear()`) |\n| `dispose()`              | `void`          | Clean up event listeners and dispose the canvas                                                      |\n\n#### Tracked Events\n\nHistory is automatically saved when these fabric.js events occur:\n\n- `path:created` - When a path is created (e.g., freehand drawing)\n- `erasing:end` - When an erasing operation completes\n- `object:added` - When an object is added to the canvas\n- `object:removed` - When an object is removed from the canvas\n- `object:modified` - When an object is modified (moved, scaled, rotated, etc.)\n\n#### Custom Events\n\n`CanvasWithHistory` fires custom events that you can listen to for history state changes:\n\n| Event             | Payload                              | Description                       |\n| ----------------- | ------------------------------------ | --------------------------------- |\n| `history:append`  | `{ json: string, initial: boolean }` | Fired when a state is saved       |\n| `history:undo`    | `{ lastUndoAction: string }`         | Fired when an undo is performed   |\n| `history:redo`    | `{ lastRedoAction: string }`         | Fired when a redo is performed    |\n| `history:cleared` | `{}`                                 | Fired when history stacks cleared |\n\n**Example:**\n\n```typescript\ncanvas.on(\"history:append\", ({ json, initial }) =\u003e {\n  console.log(\"State saved:\", initial ? \"initial\" : \"action\");\n});\n\ncanvas.on(\"history:undo\", ({ lastUndoAction }) =\u003e {\n  console.log(\"Undo performed\");\n});\n```\n\n## Requirements\n\n- fabric.js 6.x or 7.x\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Run development server\npnpm dev\n\n# Build the project\npnpm build\n\n# Type check\npnpm check\n\n# Run all tests\npnpm test\n\n# Run integration tests only\npnpm test:it\n\n# Run E2E tests only (uses Playwright)\npnpm test:e2e\n\n# Run tests with coverage\npnpm coverage\n```\n\n## Contributing\n\nContributions are welcome! Please read our [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to submit pull requests.\n\n## License\n\nMIT\n\n## Author\n\nAnthony Hoang\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanth0nycodes%2Ffabric-history","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanth0nycodes%2Ffabric-history","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanth0nycodes%2Ffabric-history/lists"}