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.
Custom width for the screenboard.
Custom height for the screenboard.
Parameters for the screenboard.
Flag to show aspect ratio.
Reference to the canvas element.
Reference to the screenboard div element.
Reference to the screenboard content div element.
FontAwesome icon for chevron right.
FontAwesome icon for chevron left.
FontAwesome icon for pencil.
FontAwesome icon for paint brush.
FontAwesome icon for shapes.
FontAwesome icon for eraser.
FontAwesome icon for search.
FontAwesome icon for search plus.
FontAwesome icon for search minus.
FontAwesome icon for font.
FontAwesome icon for text height.
FontAwesome icon for undo.
FontAwesome icon for redo.
FontAwesome icon for save.
FontAwesome icon for trash.
FontAwesome icon for times.
FontAwesome icon for mouse pointer.
Current drawing mode.
Flag to indicate if drawing is in progress.
Starting X coordinate for drawing.
Starting Y coordinate for drawing.
Current X coordinate for drawing.
Current Y coordinate for drawing.
Array of points for freehand drawing.
Array of shapes drawn on the canvas.
Thickness of the eraser.
Thickness of the brush.
Thickness of the line.
Type of the line (solid, dashed, dotted, dashDot).
Color for drawing.
Font for text.
Font size for text.
Current shape being drawn.
Flag to indicate if the toolbar is visible.
ID of the currently open dropdown.
Canvas element.
Canvas rendering context.
Fileoverview
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.
Component
Selector
app-screenboard
Template Url
./screenboard.component.html
Style Urls
./screenboard.component.css
Imports
CommonModule, FontAwesomeModule, FormsModule
Screenboard
Implements
OnInit, AfterViewInit, OnDestroy, OnChanges
Param: injectedCustomWidth
Injected custom width.
Param: injectedCustomHeight
Injected custom height.
Param: injectedParameters
Injected parameters.
Param: injectedShowAspect
Injected show aspect flag.
Method
ngOnInit - Lifecycle hook that is called after data-bound properties are initialized.
Method
ngOnChanges - Lifecycle hook that is called when any data-bound property changes.
Method
ngAfterViewInit - Lifecycle hook that is called after the component's view has been fully initialized.
Method
ngOnDestroy - Lifecycle hook that is called just before the component is destroyed.
Method
addListeners - Adds event listeners to the canvas.
Method
handleMouseDown - Handles mouse down events.
Method
handleMouseMove - Handles mouse move events.
Method
handleMouseUp - Handles mouse up events.
Method
handleTouchStart - Handles touch start events.
Method
handleTouchMove - Handles touch move events.
Method
handleTouchEnd - Handles touch end events.
Method
handleClickOutside - Handles click events outside the component.
Method
handleDropdownClick - Handles dropdown click events.
Method
setDrawMode - Sets the drawing mode.
Method
setFreehandMode - Sets the freehand mode.
Method
setShapeMode - Sets the shape mode.
Method
setEraseMode - Sets the erase mode.
Method
startDrawing - Starts the drawing process.
Method
draw - Draws on the canvas.
Method
stopDrawing - Stops the drawing process.
Method
drawLine - Draws a line on the canvas.
Method
drawShapes - Draws all shapes on the canvas.
Method
drawFreehand - Draws freehand on the canvas.
Method
drawShape - Draws a shape on the canvas.
Method
drawPolygon - Draws a polygon on the canvas.
Method
removeShape - Removes the first shape from the shapes array.
Method
erase - Erases part of the drawing.
Method
isPointNearLine - Checks if a point is near a line.
Method
toggleToolbar - Toggles the visibility of the toolbar.
Method
toggleAnnotate - Toggles the annotation mode.
Example