{"id":15024643,"url":"https://github.com/mostafazke/ng-whiteboard","last_synced_at":"2025-04-04T21:09:11.802Z","repository":{"id":35068790,"uuid":"202891117","full_name":"mostafazke/ng-whiteboard","owner":"mostafazke","description":"angular whiteboard component","archived":false,"fork":false,"pushed_at":"2024-10-11T18:17:30.000Z","size":11786,"stargazers_count":50,"open_issues_count":5,"forks_count":29,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-15T04:41:19.209Z","etag":null,"topics":["angular","ng-library","ng-whiteboard","svg","typescript","whiteboard","whiteboard-component"],"latest_commit_sha":null,"homepage":"https://mostafazke.github.io/ng-whiteboard/","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/mostafazke.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-17T14:30:58.000Z","updated_at":"2024-10-11T18:17:33.000Z","dependencies_parsed_at":"2023-01-15T13:15:44.797Z","dependency_job_id":"2ae1f7c4-dc34-490c-9b92-44a1c407222e","html_url":"https://github.com/mostafazke/ng-whiteboard","commit_stats":{"total_commits":214,"total_committers":7,"mean_commits":"30.571428571428573","dds":0.4532710280373832,"last_synced_commit":"0c64e600963740f5e46e9d21fd4208c7eb1750eb"},"previous_names":[],"tags_count":80,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mostafazke%2Fng-whiteboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mostafazke%2Fng-whiteboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mostafazke%2Fng-whiteboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mostafazke%2Fng-whiteboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mostafazke","download_url":"https://codeload.github.com/mostafazke/ng-whiteboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247249528,"owners_count":20908212,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["angular","ng-library","ng-whiteboard","svg","typescript","whiteboard","whiteboard-component"],"created_at":"2024-09-24T20:00:40.906Z","updated_at":"2025-04-04T21:09:11.793Z","avatar_url":"https://github.com/mostafazke.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Dec 16, 2024](/content/2024/12/16/README.md)","Visual Effects"],"readme":"\u003cp align=\"center\"\u003e\n \u003ca href=\"https://mostafazke.github.io/ng-whiteboard\"\u003e\n \u003cimg width=\"256\" src=\"https://mostafazke.github.io/ng-whiteboard/assets/icons/icon-512x512.png\"\u003e\n \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\nng-whiteboard\n\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\nLightweight angular whiteboard.\n\n[![Build Status](https://dl.circleci.com/status-badge/img/gh/mostafazke/ng-whiteboard/tree/master.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/mostafazke/ng-whiteboard/tree/master)\n[![ng-whiteboard](https://img.shields.io/badge/angular-whiteboard-blue)](https://mostafazke.github.io/ng-whiteboard)\n[![npm version](https://img.shields.io/npm/v/ng-whiteboard.svg)](https://www.npmjs.com/package/ng-whiteboard)\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n[![Downloads](https://img.shields.io/npm/dm/ng-whiteboard.svg)](https://www.npmjs.com/package/ng-whiteboard)\n[![codecov](https://codecov.io/gh/mostafazke/ng-whiteboard/branch/master/graph/badge.svg?token=4VewQU6OZN)](https://codecov.io/gh/mostafazke/ng-whiteboard)\n\n\u003c/div\u003e\n\n**ng-whiteboard** is a feature-rich, modular, and flexible whiteboard library for Angular. Designed for ease of use, performance, and a seamless drawing experience. It provides essential drawing tools and features with a scalable architecture.\n\nšŸ”— **[Live Demo](https://mostafazke.github.io/ng-whiteboard)**\n\n## āœØ Features\n\n- šŸŽØ **SVG-based rendering** for high-quality visuals\n- āš” **Optimized performance** for smooth interactions\n- šŸ“¦ **Modular, tree-shakable, and lightweight architecture**\n- šŸ› ļø **Comprehensive Public API** via `WhiteboardService` and component bindings\n- šŸ“ **Undo/Redo, Zoom, and Save functionalities**\n- šŸ–Šļø **Multiple drawing tools** (pen, shapes, text, etc.)\n- šŸ— **Future-proof and scalable design**\n\n## šŸ“¦ Installation\n\nInstall via yarn:\n\n```sh\nyarn add ng-whiteboard\n```\n\nor npm:\n\n```sh\nnpm install ng-whiteboard\n```\n\nImport the module in your `app.module.ts`:\n\n```typescript\nimport { NgWhiteboardModule } from 'ng-whiteboard';\n\n@NgModule({\n imports: [BrowserModule, NgWhiteboardModule],\n bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\n## šŸš€ Usage\n\n### Basic Example\n\n```html\n\u003cng-whiteboard\u003e\u003c/ng-whiteboard\u003e\n```\n\n### Advanced Example With Persist Data\n\n```typescript\nimport { Component, OnInit } from '@angular/core';\nimport { WhiteboardService } from 'ng-whiteboard';\n\n@Component({\n selector: 'app-whiteboard-container',\n templateUrl: './whiteboard-container.component.html',\n styleUrls: ['./whiteboard-container.component.css'],\n})\nexport class WhiteboardContainerComponent implements OnInit {\n whiteboardOptions: WhiteboardOptions = {\n backgroundColor: '#fff',\n strokeColor: '#2c80b1',\n strokeWidth: 5,\n };\n\n constructor(private whiteboardService: WhiteboardService) {}\n\n ngOnInit() {\n const savedData = localStorage.getItem('whiteboardData');\n if (savedData) {\n this.data = JSON.parse(savedData);\n }\n }\n\n onDataChange(data: WhiteboardElement[]) {\n localStorage.setItem('whiteboardData', JSON.stringify(data));\n }\n\n clearBoard() {\n this.whiteboardService.clear();\n }\n}\n```\n\n### Component Integration\n\n```html\n\u003cng-whiteboard (dataChange)=\"onDataChange($event)\" [options]=\"whiteboardOptions\"\u003e\u003c/ng-whiteboard\u003e\n```\n\n## āš™ļø Configuration\n\n| Input | Type | Default | Description |\n| ------------------- | --------------------- | ---------------- | ----------------------------------------------------------------------- |\n| `[data]` | `WhiteboardElement[]` | `[]` | The whiteboard data |\n| `[options]` | `WhiteboardOptions` | `null` | Component configuration object, properties described below |\n| `[drawingEnabled]` | `boolean` | `true` | Enable mouse/touch interactions |\n| `[selectedTool]` | `ToolType` | `ToolType.Pen` | The current selected tool |\n| `[canvasWidth]` | `number` | `800` | The width of whiteboard canvas |\n| `[canvasHeight]` | `number` | `600` | The height of whiteboard canvas |\n| `[fullScreen]` | `boolean` | `true` | If true, change (canvasWidth, canvasHeight) to fit the parent container |\n| `[strokeColor]` | `string` | `#333333` | The default stroke color |\n| `[backgroundColor]` | `string` | `#F8F9FA` | The default background color |\n| `[fill]` | `string` | `transparent` | The default fill color |\n| `[strokeWidth]` | `number` | `2` | The default stroke width |\n| `[zoom]` | `number` | `1` | Zoom level |\n| `[fontFamily]` | `string` | `sans-serif` | The default font family |\n| `[fontSize]` | `number` | `24` | The default font size |\n| `[center]` | `boolean` | `true` | Center the canvas in parent component, works with `fullScreen: false` |\n| `[x]` | `number` | `0` | If `center` is false, set the X axis |\n| `[y]` | `number` | `0` | If `center` is false, set the Y axis |\n| `[enableGrid]` | `boolean` | `false` | Enable the grid pattern |\n| `[gridSize]` | `number` | `10` | Set the grid inner boxes size |\n| `[snapToGrid]` | `boolean` | `false` | Enable snapping to grid |\n| `[lineJoin]` | `LineJoin` | `LineJoin.Miter` | The default Line join |\n| `[lineCap]` | `LineCap` | `LineCap.Butt` | The default Line cap |\n| `[dasharray]` | `string` | `''` | The default dash-array |\n| `[dashoffset]` | `number` | `0` | The default dash-offset |\n\n## šŸ“– API Reference\n\n### `WhiteboardService` Methods\n\n### šŸ“Œ Element Management\n\n- **`addElement(element: WhiteboardElement)`** Adds a new element (e.g., shape, text) to the whiteboard.\n- **`addImage(image: string, x?: number, y?: number)`** Adds an image to the whiteboard at a specified position.\n- **`removeElement(id: string)`** Removes an element from the whiteboard by its ID.\n- **`updateElement(element: WhiteboardElement)`** Updates an existing element with new properties.\n- **`updateSelectedElement(partialElement: Partial\u003cWhiteboardElement\u003e)`** Modifies only specific properties of the currently selected element.\n- **`selectElement(element: WhiteboardElement | null)`** Selects or deselects an element on the whiteboard.\n\n### šŸ”„ State Management\n\n- **`clear()`** Clears all elements from the whiteboard.\n- **`undo()`** Reverts the last action.\n- **`redo()`** Restores the last undone action.\n- **`save(format = FormatType.Base64, name = 'New board')`** Saves the current whiteboard state in the specified format (e.g., Base64, JSON, SVG).\n\n### šŸ–Œ Drawing Tools \u0026 Interaction\n\n- **`setActiveTool(tool: ToolType)`** Sets the current drawing tool (e.g., pen, eraser, shape).\n\n### šŸŽØ Canvas Control\n\n- **`setCanvasDimensions(width: number, height: number)`** Sets the width and height of the whiteboard canvas.\n- **`setCanvasPosition(x: number, y: number)`** Moves the canvas to a specific position.\n- **`centerCanvas()`** Centers the whiteboard canvas within the viewport.\n- **`fullScreen()`** Toggles full-screen mode for the whiteboard.\n- **`toggleGrid()`** Enables or disables the background grid for alignment.\n\n## šŸ“¢ Whiteboard Events (Outputs)\n\nThe `NgWhiteboardComponent` emits the following events to notify about changes and interactions.\n\n### šŸŸ¢ Lifecycle Events\n\n- **`ready`** Emitted when the whiteboard is fully initialized and ready for use.\n- **`destroyed`** Emitted when the whiteboard is destroyed, allowing for cleanup.\n\n### āœļø Drawing Events\n\n- **`drawStart`** Triggered when a user starts drawing on the whiteboard.\n- **`drawing`** Emitted continuously while the user is drawing.\n- **`drawEnd`** Triggered when the user stops drawing.\n\n### šŸ”„ State \u0026 Data Events\n\n- **`undo`** Emitted when an undo action is performed.\n- **`redo`** Emitted when a redo action is performed.\n- **`clear`** Triggered when the whiteboard is cleared.\n- **`dataChange`** Emitted when the whiteboard's internal data state changes.\n- **`save`** Triggered when the whiteboard state is saved.\n\n### šŸ“Œ Element Events\n\n- **`elementAdded`** Emitted when a new element is added to the whiteboard.\n- **`elementUpdated`** Triggered when an existing element is modified.\n- **`elementSelected`** Emitted when an element is selected.\n- **`elementDeleted`** Triggered when an element is removed.\n\n### šŸ–¼ Image Events\n\n- **`imageAdded`** Emitted when an image is added to the whiteboard.\n\n### šŸ›  Configuration \u0026 Tool Events\n\n- **`selectedToolChange`** Triggered when the active drawing tool is changed.\n- **`configChanged`** Emitted when the whiteboard configuration settings are updated.\n\n## šŸ¤ Contributing\n\nWe welcome contributions! Feel free to submit issues, feature requests, or pull requests.\n\n## šŸ“œ License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmostafazke%2Fng-whiteboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmostafazke%2Fng-whiteboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmostafazke%2Fng-whiteboard/lists"}