Javascript API for the annotations document viewer

Functions

  .addMark(Mark mark) The mark which is passed in is drawn in the document. If it is already drawn, no action is taken. The mark is created as a note if the note property has been populated on the mark object (see Data Structures).
  .addMarks([Mark mark, ...]) As above except as input an array of marks is used.
  .scrollToMark(Mark mark) The document is scrolled such as the passed in mark is visible.
  .removeMark(Mark mark) The given mark is removed (undrawn) from the document. If it doesn’t exist, no action is taken.
  .clearMarks() All marks are cleared from the document.
  .getMarkList() Returns an array of marks (See Data Structures) that has been created in the document.
  .createMark(color) If a selection exists, the selection is converted to a highlight and a mark is returned. The color is added to the returned mark object. If the selection doesn't exist, a mark is returned with a reference to the current page (see Data Structures)

Events

  onMarkClicked(mark) Thrown when the user clicks on a drawn mark within FlowPaper.
  onMarkCreated(mark) Thrown when a mark has been created.
  onMarkDeleted(mark) Thrown when a mark has been deleted.
  onMarkChanged(mark) Thrown when a mark has been changed. The javascript callback for this function is delayed by 5 seconds to avoid excessive calls over the flash/javascript bridge.


Data Structures

A mark can be created either as a selection, a drawing or as a note. The data structures below show the two different types of marks and their corresponding properties.


Mark (type: highlight)
Contains the text of the selection and the necessary info required in order to draw/find the highlight again in the document.
{
id: A unique identifier for the mark. Will be generated if not set or set to null.
selection_text: The text of the selection.
has_selection: true/false based on whether text has been selected.
color: HEX String representing color (e.g #FFAABB)
selection_info: String representing a selection as such "page number;start index;end index" where start and end
index is where the selection starts and ends.
color: Color to be used/which has been used for the highlight
readonly: Makes the selection read-only.
type: Describes the mark as "highlight".
displayFormat: Used for compatibility and gets set to either flash or html depending on where the mark got created
}


Mark (type: strikeout)
Contains the text of the selection and the necessary info required in order to draw/find the highlight again in the document.
{
id: A unique identifier for the mark. Will be generated if not set or set to null.
selection_text: The text of the selection.
has_selection: true/false based on whether text has been selected.
color: HEX String representing color (e.g #FFAABB)
selection_info: String representing a selection as such "page number;start index;end index" where start
and end index is where the selection starts and ends.
readonly: Makes the selection read-only.
type: Describes the mark as "strikeout"
displayFormat: Used for compability and gets set to either flash or html depending on where the mark got created
}


Mark (type: note)
Contains the text of the note and the necessary info required in order to position the note again in the document.
{
id: A unique identifier for the mark. Will be generated if not set or set to null.
note: The text of the note
pageIndex: The page of where the note is positioned
positionX: The X position of the note
positionY: The Y position of the note
width: The width of the note
height: The height of the note
collapsed: Indicating whether the note shall appear as collapsed (icon) or expanded
readonly: Makes the mark read-only.
type: Describes the mark as "note"
displayFormat: Used for compability and gets set to either flash or html depending on where the mark got created
}


Mark (type: drawing)
Contains the points about a drawing
{
id: A unique identifier for the mark. Will be generated if not set or set to null.
color: HEX String representing color (e.g #FFAABB)
pageIndex: The page of where the drawing is positioned
readonly: Makes the selection read-only.
points: The drawing points that make up the drawing in the form of "X1,Y1:X2,Y2"
type: Describes the mark as "drawing"
displayFormat: Used for compatibility and gets set to either flash or html depending on where the mark got created
}