Class WhiteboardAddin`Abstract`

Base class for whiteboard add-ins

Add-ins extend whiteboard functionality with custom tools, objects, and behaviors. Each add-in has access to the canvas and can broadcast messages to other users.

Example

class StickyNotesAddin extends WhiteboardAddin {
  constructor() {
    super({
      id: 'sticky-notes',
      name: 'Sticky Notes',
      description: 'Add colorful sticky notes to the whiteboard',
    });
  }

  getToolbarButtons(): ToolbarButton[] {
    return [{
      id: 'add-sticky',
      label: 'Add Sticky Note',
      icon: <NoteAddIcon />,
      action: () => this.addStickyNote(),
    }];
  }

  getObjectTypes(): string[] {
    return ['sticky-note'];
  }
}

Hierarchy (View Summary)

WhiteboardAddin
- StickyNotesAddin

Constructors

constructor

new WhiteboardAddin(config: WhiteboardAddinConfig): WhiteboardAddin
Parameters
- config: WhiteboardAddinConfig
Returns WhiteboardAddin
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:100

Properties

`Protected`canvas

canvas: Canvas | null = null

Fabric.js canvas instance

`Protected`context

context: WhiteboardAddinContext | null = null

Whiteboard context

`Optional` `Readonly`description

description?: string

Description

enabled

enabled: boolean = false

Whether the add-in is currently enabled

`Optional` `Readonly`icon

icon?: ReactNode

Icon (optional)

`Readonly`id

id: string

Unique add-in ID

`Readonly`name

name: string

Display name

Methods

`Protected`broadcastMessage

broadcastMessage(data: unknown): void
Broadcast a message to other users
Parameters
- data: unknown
  Data to broadcast
Returns void
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:197

createObject

createObject(
    _type: string,
    _options: Record<string, unknown>,
):
    | FabricObject<
        Partial<FabricObjectProps>,
        SerializedObjectProps,
        ObjectEvents,
    >
    | null
Create an object of a specific type Override to implement custom object creation
Parameters
- _type: string
  Object type
- _options: Record<string, unknown>
  Creation options
Returns
    | FabricObject<
        Partial<FabricObjectProps>,
        SerializedObjectProps,
        ObjectEvents,
    >
    | null
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:264

exportData

exportData(): unknown
Export add-in data for saving Override to save custom add-in state

Returns unknown
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:287

`Protected`findObjectById

findObjectById(objectId: string): WhiteboardObject | null
Find an add-in object by its ID
Parameters
- objectId: string
  Object ID to find
Returns WhiteboardObject | null
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:360

`Protected`forceUpdate

forceUpdate(): void
Force whiteboard to re-render

Returns void
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:338

`Protected`generateObjectId

generateObjectId(): string
Generate a unique object ID for this add-in

Returns string
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:307

`Protected`getAddinObjects

getAddinObjects(): WhiteboardObject[]
Get all objects belonging to this add-in

Returns WhiteboardObject[]
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:345

getContextMenuItems

getContextMenuItems(_object: WhiteboardObject): ContextMenuItem[]
Get context menu items for a selected object Override to provide custom context menu items
Parameters
- _object: WhiteboardObject
  Selected object
Returns ContextMenuItem[]
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:242

`Protected`getCurrentColor

getCurrentColor(): string
Get current drawing color

Returns string
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:324

`Protected`getDebouncedBroadcast

getDebouncedBroadcast(objectId: string, delay?: number): (data: unknown) => void
Get a debounced broadcast function for a specific object Useful for batching frequent updates (e.g., text editing)
Parameters
- objectId: string
  Object ID for debouncing
- delay: number = 500
  Debounce delay in milliseconds
Returns (data: unknown) => void
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:212

getObjectTypes

getObjectTypes(): string[]
Get object types this add-in handles Override to specify custom object types

Returns string[]
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:254

getToolbarButtons

getToolbarButtons(): ToolbarButton[]
Get toolbar buttons to add to the whiteboard toolbar Override to provide custom toolbar buttons

Returns ToolbarButton[]
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:233

`Protected`getUserId

getUserId(): string
Get current user ID

Returns string
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:317

importData

importData(_data: unknown): void
Import add-in data on load Override to restore custom add-in state
Parameters
- _data: unknown
  Data to import
Returns void
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:296

isAddinObject

isAddinObject(object: WhiteboardObject): boolean
Check if an object belongs to this add-in
Parameters
- object: WhiteboardObject
  Object to check
Returns boolean
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:275

`Protected`isReadOnly

isReadOnly(): boolean
Check if in read-only mode

Returns boolean
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:331

onMessage

onMessage(_message: unknown, _fromUserId: string): void
Called when a message is received from another user Override to handle incoming messages
Parameters
- _message: unknown
- _fromUserId: string
Returns void
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:189

onMount

onMount(context: WhiteboardAddinContext): void
Called when the add-in is mounted/enabled Override to perform initialization
Parameters
- context: WhiteboardAddinContext
Returns void
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:115

onObjectAdded

onObjectAdded(_object: WhiteboardObject): void
Called when an object is added to the canvas Override to handle object additions
Parameters
- _object: WhiteboardObject
Returns void
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:145

onObjectLoaded

onObjectLoaded(_object: WhiteboardObject): void
Called when an object is loaded from a saved file Override to handle object loading (e.g., restore event handlers)
Parameters
- _object: WhiteboardObject
Returns void
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:177

onObjectModified

onObjectModified(_object: WhiteboardObject): void
Called when an object is modified on the canvas Override to handle object modifications
Parameters
- _object: WhiteboardObject
Returns void
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:153

onObjectRemoved

onObjectRemoved(_object: WhiteboardObject): void
Called when an object is removed from the canvas Override to handle object removals
Parameters
- _object: WhiteboardObject
Returns void
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:161

onSelectionChanged

onSelectionChanged(_objects: WhiteboardObject[]): void
Called when selection changes Override to handle selection changes
Parameters
- _objects: WhiteboardObject[]
Returns void
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:169

onUnmount

onUnmount(): void
Called when the add-in is unmounted/disabled Override to perform cleanup

Returns void
- Defined in packages/react-whiteboard/src/addins/WhiteboardAddin.ts:126

Class WhiteboardAddinAbstract

Example

Hierarchy (View Summary)

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns WhiteboardAddin

Properties

Protectedcanvas

Protectedcontext

Optional Readonlydescription

enabled

Optional Readonlyicon

Readonlyid

Readonlyname

Methods

ProtectedbroadcastMessage

Parameters

Returns void

createObject

Parameters

Returns | FabricObject< Partial<FabricObjectProps>, SerializedObjectProps, ObjectEvents, > | null

exportData

Returns unknown

ProtectedfindObjectById

Parameters

Returns WhiteboardObject | null

ProtectedforceUpdate

Returns void

ProtectedgenerateObjectId

Returns string

ProtectedgetAddinObjects

Returns WhiteboardObject[]

getContextMenuItems

Parameters

Returns ContextMenuItem[]

ProtectedgetCurrentColor

Returns string

ProtectedgetDebouncedBroadcast

Parameters

Returns (data: unknown) => void

getObjectTypes

Returns string[]

getToolbarButtons

Returns ToolbarButton[]

ProtectedgetUserId

Returns string

importData

Parameters

Returns void

isAddinObject

Parameters

Returns boolean

ProtectedisReadOnly

Returns boolean

onMessage

Parameters

Returns void

onMount

Parameters

Returns void

onObjectAdded

Parameters

Returns void

onObjectLoaded

Parameters

Returns void

onObjectModified

Parameters

Returns void

onObjectRemoved

Parameters

Returns void

onSelectionChanged

Parameters

Returns void

Class WhiteboardAddin`Abstract`

`Protected`canvas

`Protected`context

`Optional` `Readonly`description

`Optional` `Readonly`icon

`Readonly`id

`Readonly`name

`Protected`broadcastMessage

Returns
| FabricObject<
Partial<FabricObjectProps>,
SerializedObjectProps,
ObjectEvents,
>
| null

`Protected`findObjectById

`Protected`forceUpdate

`Protected`generateObjectId

`Protected`getAddinObjects

`Protected`getCurrentColor

`Protected`getDebouncedBroadcast

`Protected`getUserId

`Protected`isReadOnly