MediaSFU Angular
    Preparing search index...

    Class Screenboard

    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
    Index

    Constructors

    constructor

    Methods

    ngOnInit ngOnChanges ngAfterViewInit ngOnDestroy addListeners handleMouseDown handleMouseMove handleMouseUp handleTouchStart handleTouchMove handleTouchEnd handleClickOutside handleDropdownClick setDrawMode setFreehandMode setShapeMode setEraseMode startDrawing draw stopDrawing drawLine drawShapes drawFreehand drawShape drawPolygon removeShape erase isPointNearLine toggleToolbar toggleAnnotate

    Properties

    customWidth customHeight parameters showAspect canvasRef screenboardRef screenboardContentRef faChevronRight faChevronLeft faPencilAlt faPaintBrush faShapes faEraser faSearch faSearchPlus faSearchMinus faFont faTextHeight faUndo faRedo faSave faTrash faTimes faMousePointer mode isDrawing startX startY currentX currentY freehandDrawing shapes eraserThickness brushThickness lineThickness lineType color font fontSize shape toolbarVisible dropdownOpen canvas ctx

    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: string | null = null

    Current shape being drawn.

    toolbarVisible: boolean = false

    Flag to indicate if the toolbar is visible.

    dropdownOpen: string | null = null

    ID of the currently open dropdown.

    canvas: HTMLCanvasElement

    Canvas element.

    ctx: CanvasRenderingContext2D

    Canvas rendering context.

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Properties