WarningThis is a lower-level API. Lower-level APIs are not recommended for most projects, and may not be available on all plans. See our page on recommended deployment patterns for more information.

Events

This page details the events available in Annotations API.

Annotations API provides methods which provide the ability to bind callback functions to particular events, usually triggered by user actions, or specific events occurring in an Annotations element.

On this page:

Events

Examples >>

Event name Description Event data
drawing:changeTool

Notifies you when the drawing tool changes state. Returns the name of the drawing tool in use. See an example.
drawing:enterDrawingMode

Notifies you when drawing mode has been entered. See an example.
drawing:exitDrawingMode

Notifies you when drawing mode has been exited. See an example.
drawing:hide

Notifies when drawings have been hidden. See an example.
drawing:show

Notifies when drawings have been shown. See an example.
notepad:setVisibility

Notifies you when setVisibility is called on the notepad module. See an example.
notepad:toggleVisibility
Notifies you when toggleVisibility is called on the notepad module. See an example.
stickynote:add
Triggered when a sticky note is created. Returns the payloadData object for the sticky note, containing the variables shown to the right. See an example.
  • collectionId - string
    A group of sticky notes is known as a collection. The collection id string will be populated from the name of the Item in context. Empty by default.
  • content - string
    The text shown inside the sticky note. Empty by default.
  • expanded - boolean
    The window state of the sticky note. True = expanded. False = collapsed.
  • height - number
    The vertical size of the sticky note window, in pixels.
  • id - string
    The unique id of the sticky note that was created.
  • visible - boolean
    The visibility state of the sticky note. True = visible. False = invisible.
  • width - number
    The horizontal size of the sticky note window, in pixels.
  • x - string
    The horizontal position of the top left corner of the sticky note window, in percentage or pixels.
  • y - string
    The vertical position of the top left corner of the sticky note window, in percentage or pixels.
stickynote:remove
Triggered when a sticky note is removed. See an example.
  • id - number
    The unique id of the sticky note that was removed.
texthighlight:add

Triggered whenever a text highlight is added. See an example.
  • id - string
    The unique id of the text highlight.
  • startContainerPath - string
    A string representing the location of the DOM node that contains the start of the selection.
  • endContainerPath - string
    A string representing the location of the DOM node that contains the end of the selection.
  • startOffset - number
    The offset, in characters, of the start of the selection within the start container.
  • endOffset - number
    The offset, in characters, of the end of the selection within the end container.
texthighlight:remove

Triggered whenever a text highlight is removed. See an example.
  • id - string
    The unique id of the text highlight.

Examples


drawing:changeTool

annotationsApp.on('drawing:changeTool', function () {
    console.log('The current drawing tool is: ' + annotationsApp.module('drawing').getDrawingTool());
});

drawing:enterDrawingMode

annotationsApp.on('drawing:enterDrawingMode', function () {
    console.log('We are now in drawing mode.');
});

drawing:exitDrawingMode

annotationsApp.on('drawing:exitDrawingMode', function () {
    console.log('We have left drawing mode.');
});

drawing:hide

annotationsApp.on('drawing:hide', function () {
    console.log('Drawings are now hidden.');
});

drawing:show

annotationsApp.on('drawing:show', function () {
    console.log('Drawings are now showing.');
});

notepad:setVisibility

annotationsApp.on('notepad:setVisibility', function () {
    console.log('Notepad visibility has been set to: ' + annotationsApp.module('notepad').isVisible());
});

notepad:toggleVisibility

annotationsApp.on('notepad:toggleVisibility', function () {
    console.log('Notepad visibility changed to: ' + annotationsApp.module('notepad').isVisible());
});

stickynote:add

annotationsApp.on('stickynote:add', function (payloadData) {
    console.log('Added a Sticky Note with an ID of ' + payloadData.id);
});

stickynote:remove

annotationsApp.on('stickynote:remove', function (payloadData) {
    console.log('Removed a Sticky Note with an ID of ' + payloadData.id);
});

texthighlight:add

annotationsApp.on('texthighlight:add', function (textHighlightInfo) {
    var textHighlightModule = annotationsApp.module('texthighlight');
    var id = textHighlightInfo.id;
    var startElement = textHighlightModule.utils.deserializePath(
        textHighlightInfo.startContainerPath,
        textHighlightInfo.startOffset,
    );
    var endElement = textHighlightModule.utils.deserializePath(
        textHighlightInfo.endContainerPath,
        textHighlightInfo.endOffset,
    );

    console.log('The text selection with id ' + id + ' ranges between:', startElement, endElement);
});

texthighlight:remove

annotationsApp.on('texthighlight:remove', function (textHighlightInfo) {
    console.log('Text highlight with id ' + textHighlightInfo.id + ' was removed.');
});