Screenboard component for MediaSFU-Angular application.

This component provides a screenboard with drawing, freehand, shape, and erase modes. It supports mouse and touch events for drawing on a canvas.

app-screenboard

./screenboard.component.html

./screenboard.component.css

CommonModule, FontAwesomeModule, FormsModule

Screenboard

OnInit, AfterViewInit, OnDestroy, OnChanges

Injected custom width.

Injected custom height.

Injected parameters.

Injected show aspect flag.

ngOnInit - Lifecycle hook that is called after data-bound properties are initialized.

ngOnChanges - Lifecycle hook that is called when any data-bound property changes.

ngAfterViewInit - Lifecycle hook that is called after the component's view has been fully initialized.

ngOnDestroy - Lifecycle hook that is called just before the component is destroyed.

addListeners - Adds event listeners to the canvas.

handleMouseDown - Handles mouse down events.

handleMouseMove - Handles mouse move events.

handleMouseUp - Handles mouse up events.

handleTouchStart - Handles touch start events.

handleTouchMove - Handles touch move events.

handleTouchEnd - Handles touch end events.

handleClickOutside - Handles click events outside the component.

handleDropdownClick - Handles dropdown click events.

setDrawMode - Sets the drawing mode.

setFreehandMode - Sets the freehand mode.

setShapeMode - Sets the shape mode.

setEraseMode - Sets the erase mode.

startDrawing - Starts the drawing process.

draw - Draws on the canvas.

stopDrawing - Stops the drawing process.

drawLine - Draws a line on the canvas.

drawShapes - Draws all shapes on the canvas.

drawFreehand - Draws freehand on the canvas.

drawShape - Draws a shape on the canvas.

drawPolygon - Draws a polygon on the canvas.

removeShape - Removes the first shape from the shapes array.

erase - Erases part of the drawing.

isPointNearLine - Checks if a point is near a line.

toggleToolbar - Toggles the visibility of the toolbar.

toggleAnnotate - Toggles the annotation mode.

<app-screenboard
[customWidth]="customWidth"
[customHeight]="customHeight"
[parameters]="screenboardParameters"
[showAspect]="showAspect"
></app-screenboard>

Implements

  • OnInit
  • AfterViewInit
  • OnDestroy
  • OnChanges

Constructors

Methods

  • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

    Returns void

  • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

    Parameters

    • changes: SimpleChanges

      The changed properties.

    Returns void

Properties

customWidth: number

Custom width for the screenboard.

customHeight: number

Custom height for the screenboard.

parameters: ScreenboardParameters = ...

Parameters for the screenboard.

showAspect: boolean

Flag to show aspect ratio.

canvasRef: ElementRef<HTMLCanvasElement>

Reference to the canvas element.

screenboardRef: ElementRef<HTMLDivElement>

Reference to the screenboard div element.

screenboardContentRef: ElementRef<HTMLDivElement>

Reference to the screenboard content div element.

faChevronRight: IconDefinition = faChevronRight

FontAwesome icon for chevron right.

faChevronLeft: IconDefinition = faChevronLeft

FontAwesome icon for chevron left.

faPencilAlt: IconDefinition = faPencilAlt

FontAwesome icon for pencil.

faPaintBrush: IconDefinition = faPaintBrush

FontAwesome icon for paint brush.

faShapes: IconDefinition = faShapes

FontAwesome icon for shapes.

faEraser: IconDefinition = faEraser

FontAwesome icon for eraser.

faSearch: IconDefinition = faSearch

FontAwesome icon for search.

faSearchPlus: IconDefinition = faSearchPlus

FontAwesome icon for search plus.

faSearchMinus: IconDefinition = faSearchMinus

FontAwesome icon for search minus.

faFont: IconDefinition = faFont

FontAwesome icon for font.

faTextHeight: IconDefinition = faTextHeight

FontAwesome icon for text height.

faUndo: IconDefinition = faUndo

FontAwesome icon for undo.

faRedo: IconDefinition = faRedo

FontAwesome icon for redo.

faSave: IconDefinition = faSave

FontAwesome icon for save.

faTrash: IconDefinition = faTrash

FontAwesome icon for trash.

faTimes: IconDefinition = faTimes

FontAwesome icon for times.

faMousePointer: IconDefinition = faMousePointer

FontAwesome icon for mouse pointer.

mode:
    | "draw"
    | "freehand"
    | "shape"
    | "erase" = 'draw'

Current drawing mode.

isDrawing: boolean = false

Flag to indicate if drawing is in progress.

startX: number = 0

Starting X coordinate for drawing.

startY: number = 0

Starting Y coordinate for drawing.

currentX: number = 0

Current X coordinate for drawing.

currentY: number = 0

Current Y coordinate for drawing.

freehandDrawing: {
    x: number;
    y: number;
    color: string;
    thickness: number;
}[] = []

Array of points for freehand drawing.

shapes: any[] = []

Array of shapes drawn on the canvas.

eraserThickness: number = 10

Thickness of the eraser.

brushThickness: number = 6

Thickness of the brush.

lineThickness: number = 6

Thickness of the line.

lineType: string = 'solid'

Type of the line (solid, dashed, dotted, dashDot).

color: string = '#000000'

Color for drawing.

font: string = 'Arial'

Font for text.

fontSize: number = 20

Font size for text.

shape: null | string = null

Current shape being drawn.

toolbarVisible: boolean = false

Flag to indicate if the toolbar is visible.

dropdownOpen: null | string = null

ID of the currently open dropdown.

canvas: HTMLCanvasElement

Canvas element.

ctx: CanvasRenderingContext2D

Canvas rendering context.