Angular Whiteboard

Angular Whiteboard is an Angular library that allows creating and managing online whiteboards with powerful features. This library provides drawing tools, editing capabilities, and interaction with whiteboard content.

Installation

npm install angular-whiteboard

Usage

1. Import the component into your file:

import { AngularWhiteboardComponent } from 'angular-whiteboard';

@Component({
  selector: 'app-whiteboard',
  standalone: true,
  imports: [AngularWhiteboardComponent],
  template: `
    <lib-angular-whiteboard></lib-angular-whiteboard>
  `
})
export class WhiteboardComponent {
}

Main Features

1. Drawing Tools

• Pen: Freehand drawing
• Eraser: Erase drawn content
• Line: Draw straight lines
• Arrow: Draw arrows
• Highlighter: Highlight important parts

2. Shapes

• Rectangle: Draw rectangles
• Circle: Draw circles
• Triangle: Draw triangles

3. Text

• Add text to the whiteboard
• Choose text color

4. Customization

• Change tool colors
• Adjust stroke width
• Customize highlight color

5. Object Manipulation

• Select and move objects
• Delete objects

6. History Management

• Undo
• Redo
• Clear entire whiteboard

API

Public Methods

| Name | Description | |------|-------------| | clearCanvas() | Clear all whiteboard content | | undo() | Undo last action | | redo() | Redo last undone action | | setTool(tool: string) | Select drawing tool | | setColor(color: string) | Set tool color | | setSize(size: number) | Set stroke width | | setFontSize(size: number) | Set font size | | setHighlightColor(color: string) | Set highlight color |

Usage Example

import { Component } from '@angular/core';
import { AngularWhiteboardComponent } from 'angular-whiteboard';

@Component({
  selector: 'app-whiteboard',
  standalone: true,
  imports: [AngularWhiteboardComponent],
  template: `
    <lib-angular-whiteboard></lib-angular-whiteboard>
  `
})
export class WhiteboardComponent {
}

Available Tools

const tools = {
  pen: 'pen',          // Pen tool
  eraser: 'eraser',    // Eraser tool
  line: 'line',        // Line tool
  arrow: 'arrow',      // Arrow tool
  rectangle: 'rectangle', // Rectangle tool
  circle: 'circle',    // Circle tool
  triangle: 'triangle', // Triangle tool
  text: 'text',        // Text tool
  select: 'select',    // Selection tool
  highlight: 'highlight' // Highlighter tool
};

License

MIT