ng-whiteboard

Lightweight angular 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:

   yarn add ng-whiteboard --save

   or

   npm install ng-whiteboard --save

2. Add the module to your project

   import { NgWhiteboardModule } from 'ng-whiteboard';
   ...
   
   @NgModule({
       imports: [
           ...
           NgWhiteboardModule
       ]
       ...
   )}

3. Insert the Whiteboard Component element in the html.

   <ng-whiteboard></ng-whiteboard>

Options

| Input | Type | Default | Description | | ----------------- | ---------------------------------------------------------------------------------------- | --------------- | ------------------------------------------------------------------- | | [data] | [WhiteboardElement] | [] | The whiteboard data | | [options] | WhiteboardOptions | 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

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:)