Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mostafazke/ng-whiteboard
angular whiteboard component
https://github.com/mostafazke/ng-whiteboard
angular ng-library ng-whiteboard svg typescript whiteboard whiteboard-component
Last synced: 1 day ago
JSON representation
angular whiteboard component
- Host: GitHub
- URL: https://github.com/mostafazke/ng-whiteboard
- Owner: mostafazke
- License: mit
- Created: 2019-08-17T14:30:58.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-11T18:17:30.000Z (about 1 month ago)
- Last Synced: 2024-10-15T04:41:19.209Z (about 1 month ago)
- Topics: angular, ng-library, ng-whiteboard, svg, typescript, whiteboard, whiteboard-component
- Language: TypeScript
- Homepage: https://mostafazke.github.io/ng-whiteboard/
- Size: 11.2 MB
- Stars: 50
- Watchers: 4
- Forks: 29
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# ng-whiteboard
## Lightweight angular whiteboard
[](https://dl.circleci.com/status-badge/redirect/gh/mostafazke/ng-whiteboard/tree/master)
[](https://badge.fury.io/js/ng-whiteboard) [](https://opensource.org/licenses/MIT)
[](https://www.npmjs.com/package/ng-whiteboard)
[](https://codecov.io/gh/mostafazke/ng-whiteboard)
## Demo
https://mostafazke.github.io/ng-whiteboard
## Features
- Supports touch.
- Highly Customizable.
- Lightweight.
- Easy to use.
- Custom colors.
- Custom background colors.
- (Brush | Image | Line | Rect | Ellipse | Text | Eraser) Tools.
- Custom stroke size.
- Save drawn as (svg | png | jpeg | base64) images.
- Undo - Redo.
**_And more to come_...**
## Installation
1. Install `ng-whiteboard` via:
```bash
yarn add ng-whiteboard --save
```
or
```bash
npm install ng-whiteboard --save
```
2. Add the module to your project
```typescript
import { NgWhiteboardModule } from 'ng-whiteboard';
...
@NgModule({
imports: [
...
NgWhiteboardModule
]
...
)}
```
3. Insert the Whiteboard Component element in the html.
```html
```
## Options
| Input | Type | Default | Description |
| ----------------- | ---------------------------------------------------------------------------------------- | --------------- | ------------------------------------------------------------------- |
| [data] | [[WhiteboardElement](projects\ng-whiteboard\src\lib\models\whiteboard-element.model.ts)] | [] | The whiteboard data |
| [options] | [WhiteboardOptions](projects\ng-whiteboard\src\lib\models\whiteboard-options.model.ts) | null | component configuration object, properties described below |
| [drawingEnabled] | boolean | true | Enable mouse/touch interactions |
| [selectedTool] | ToolsEnum | ToolsEnum.BRUSH | The current selected tool |
| [canvasWidth] | number | 800 | The width of whiteboard canvas |
| [canvasHeight] | number | 600 | The height of whiteboard canvas |
| [fullScreen] | boolean | true | if true change (canvasWidth, canvasHeight) to fit the parentainer |
| [strokeColor] | string | #000000 | The default stroke color |
| [backgroundColor] | string | #FFFFFF | The default background color |
| [fill] | string | #333333 | The default fill color |
| [strokeWidth] | number | 2 | The default stroke width |
| [zoom] | number | 1 | Zoom level |
| [fontFamily] | string | sans-serif | The default font family |
| [fontSize] | number | 24 | The default font size |
| [center] | boolean | true | Center the canvas in parent component, works with fullScreen: false |
| [x] | number | 0 | if center is false, set the X axis |
| [y] | number | 0 | if center is false, set the Y axis |
| [enableGrid] | boolean | false | Enable the grid pattern |
| [gridSize] | number | 10 | Set the grid inner boxes size |
| [snapToGrid] | boolean | false | Enable snaping to grid |
| [lineJoin] | LineJoinEnum .ROUND | LineJoinEnum | The default Line join |
| [lineCap] | LineCapEnum .ROUND | LineCapEnum | The default Line cap |
| [dasharray] | string | '' | The default dash-array |
| [dashoffset] | number | 0 | The default dash-offset |
## Outputs
| Name | Description | Arguments |
| --------------- | ------------------------------------------------ | ------------------------ |
| (ready) | Emitted when the component is ready | None |
| (dataChange) | Emitted when the data is changed | WhiteboardElement[] |
| (clear) | Emitted when the canvas is cleared | None |
| (undo) | Emitted when the user undo an action | None |
| (redo) | Emitted when the user redo an action | None |
| (imageAdded) | Emitted when the user add an image to the canvas | None |
| (save) | Emitted when the user save the canvas | base64 image |
| (selectElement) | Emitted when the user select/deselect an element | WhiteboardElement / null |
| (deleteElement) | Emitted when the user delete an element | WhiteboardElement |
| (toolChanged) | Emitted when the user change the tool | ToolsEnum |
## Methods
| Name | Description | Arguments | Defaults |
| -------- | ----------------------- | -------------------------------- | --------------------------------------- |
| save | Save the current board | [format]: string, [name]: string | [format]: 'base64', [name]: 'New board' |
| addImage | Add images to the board | image: (string; ArrayBuffer) | None |
| erase | Clean the whiteboard | None | None |
| undo | Undo last action | None | None |
| redo | Redo last action | None | None |
to use these Methods inject NgWhiteboardService in your project
```typescript
import { NgWhiteboardService, FormatType } from 'ng-whiteboard';
...
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
...
)}
constructor(private whiteboardService: NgWhiteboardService) {
this.whiteboardService.save(FormatType.Base64);
}
```
## Contributing
The project is open for contributors! Please file an issue or make a PR:)