Note Store #

Pinia store that implements the externalization capabilities, storing layers all configuration options (e.g. brush size, colors, etc.)

State #

Getters #

currentLayer #

Return the currently active layer object if it exists, null otherwise.

previewLayer #

Returns the preview layer object if it exists, null otherwise.

color #

Currently active color.

layerColors #

Array of layer colors.

nextColor #

Next available color from the default colors. Will cycle if the number of layers exceeds the number of default colors.

nextID #

An ID for a next layer.

Methods #

enable #

Enable the VEXT annotation functionalities.

disable #

Disable the VEXT annotation functionalities.

enablePointerEvents #

Enable or disable pointer events for the canvas node.
@param {Boolean} value

emit #

Emit an event from the note event handler.
@param {String} name - event name
@param {*} data - event payload

on #

Register an event handler.
@param {String} name - event name
@param {Function} hadler - event callback handler
@returns handle id

off #

Remove an event handler for the given event.
@param {String} name - event name
@param {Number} handler - event handle
@returns true if the event was removed

isUniqueID #

Whether the given id already exists for another layer.
@param {String} id
@returns true if the id already exists, else false

getLayerIndex #

Get the index in the layers array for a given layer id
@param {String} id
@returns index if exists, else -1

getLayer #

Get the AnnotationLayer object for a given layer id
@param {String} id
@returns AnnotationLayer object if exists, else null

overwriteState #

Set the current application state as the associated state of the currently active layer.
@param {Object} state - current application state

renameLayer #

Rename the given layer. If id is null, active layer will be renamed.
@param {String} oldId - layer id
@param {String} newId - new layer name/id
@returns true if the layer was renamed, otherwise false

addLayerComment #

Add a comment to the given layer. If id is null, the comment is added to the active layer.
@param {String} comment - comment
@param {String} id - layer id (default null)
@returns true if the comment was added, otherwise false

updateLayerComment #

Update the comment of the given layer. If id is null, the active layer is assumed.
@param {String} comment - comment
@param {String} id - layer id (default null)
@param {Number} index - comment index (default 0)
@returns true if the comment was updated, otherwise false

removeLayerComment #

Remove the comment of the given layer. If id is null, the active layer is assumed.
@param {String} id - layer id (default null)
@param {Number} index - comment index (default 0)
@returns true if the comment was removed, otherwise false

removeLayerComments #

Remove all comments of the given layer. If id is null, the active layer is assumed.
@param {String} id - layer id (default null)
@returns true if the comments were removed, otherwise false

mergeLayers #

Merge annotations from one layer into another. The state of the merged layer is lost in the process. If idInto is null, the active layer is assumed.
@param {String} idFrom - layer to merge
@param {String} idInto - layer to merge into (default null)

addLayer #

Create a new layer with the given state and set it as the active layer.
@param {Object} state - application state
@param {Boolean} record - whether to record this action in history (default true)
@param {String} id - layer id (default null)
@param {String} color - layer color (default null)
@param {Number} width - canvas width (default null)
@param {Number} height - canvas height (default null)
@param {Array} items - annotation items (default [])
@param {Array} comments - comments (default [])
@param {Array} connections - connections (default [])

removeLayer #

Remove the layer with the given id, if it exists.
@param {String} id - layer id
@param {Boolean} record - whether to record this action in history (default true)

removeEmptyLayers #

Remove all layers that contain no annotations.
@param {Boolean} record - whether to record this action in history (default true)

setActiveLayer #

Set the active layer to the layer with id.
@param {String} id
@param {Boolean} record - whether to record this action in history (default true)

setLayerVisibility #

Set the visibility for the layer with id.
@param {Boolean} visible
@param {String} id - layer id (default null)
@param {Boolean} record - whether to record this action in history
@param {Boolean} render - whether to request a re-render of the canvas

setLayerOpacity #

Set the opacity for the layer with id.
@param {Number} value
@param {String} id - layer id (default null)
@param {Boolean} record - whether to record this action in history (default true)
@param {Boolean} render - whether to request a re-render of the canvas (default true)

setMode #

Set the active mode.
@param {String} mode
@param {Boolean} record - whether to record this action in history (default true)

setPreviousMode #

Go to the previous mode.
@param {Boolean} record - whether to record this action in history (default true)

addObject #

Add an object to the active layer.
@param {Object} obj - fabric.js object
@param {String} layer - layer id (default null)
@param {Boolean} addToCanvas - whether to add them to the canvas (default true)
@param {Boolean} record - whether to record this action in history (default true)

addObjects #

Add a list of objects to the active layer
@param {Array} objs - list of fabric.js objects
@param {String} layer - layer id (default null)
@param {Boolean} addToCanvas - whether to add them to the canvas
@param {Boolean} record - whether to record this action in history

addObjectFromJSON #

Add an object to the active layer
@param {String} json - JSON representation of a fabric.js object
@param {String} layer - layer id (default null)
@param {Boolean} record - whether to record this action in history (default true)

addObjectsFromJSON #

Add a list of object to the active layer
@param {Array} json - a list of JSON representations of frabic.js objects
@param {String} layer - layer id (default null)
@param {Boolean} record - whether to record this action in history (default true)

removeObject #

Remove the object with uuid from a layer
@param {String} uuid
@param {String} layer - layer id (default null)
@param {Boolean} record - whether to record this action in history (default true)

removeObjects #

Remove all objects with a UUID included in uuids from a layer
@param {Array} uuids
@param {String} layer - layer id (default null)
@param {Boolean} record - whether to record this action in history (default true)

removeLastObject #

Remove the last object that was added.
@param {String} layer - layer id (default null)
@param {Boolean} record - whether to record this action in history (default true)

removeLastObject #

Remove the most recently added annotation object.
@param {String} layer - layer id (default null)
@param {Boolean} record - whether to record this action in history (default true)

modifyObject #

Modify an annotation object.
@param {String} uuid - object UUID
@param {Object} transform - object transform
@param {String} layer - layer id (default null)
@param {Boolean} record - whether to record this action in history (default true)

setActiveObject #

Set a specific annotation object to be active.
@param {String} uuid - object UUID
@param {String} layer - layer id (default null)

getActiveObject #

Returns the currently active fabric.js object.
@returns active object or null

discardActiveObject #

Discards the currently active fabric.js object.

deleteActiveObject #

Deletes the object currently selected in fabric.js, if it exists.
@param {Boolean} record - whether to record this action in history (default true)

layerFromItem #

Get the layer object for a given fabric.js item.
@param {Object} item
@returns layer object if exists, else undefined

resizeCanvas #

Resize the fabric.js canvas to [width, height].
@param {Number} width
@param {Number} height

setCanvasZIndex #

Sets the z-index for the canvas and wrapper elements.
@param {number} value - z-index value to set

setContentNode #

Set the visualization HTML node to include when rendering a layer into a PDF.
@param {HTMLElement} node

setCanvas #

Set the fabric.js canvas object - since it cannot be instantiated in a store. This adds several event listeners to the canvas.
@param {Object} canvas

hasStateHash #

Whether a layer with the given state exists.
@param {String} hash
@returns true if exists, else false

layerFromStateHash #

Returns the corresponding layer for a given state hash.
@param {String} hash
@returns layer object if exists, else undefined

setState #

Set the current application state.
@param {object} state

selectPreviewLayer #

Select the preview layer as active layer.

addConnection #

Add a connection to a specific annotation in a layer.
@param {String} uuid - annotation UUID
@param {String} id - layer id (default null)
@param {Boolean} record - whether to record this action in history (default true)

addConnectionFromJSON #

Add a connection from a JSON object to a specific annotation in a layer.
@param {String} uuid - annotation UUID
@param {Object} json - connection
@param {String} id - layer id (default null)
@param {Boolean} record - whether to record this action in history (default true)

removeLastConnection #

Remove the most recently added connection of an annotation from a layer.
@param {String} uuid - annotation UUID
@param {String} id - layer id (default null)
@param {Boolean} record - whether to record this action in history (default true)

removeConnectionAtIndex #

Remove the a connection of an annotation from a layer.
@param {String} uuid - annotation UUID
@param {Number} index - connection index
@param {String} id - layer id (default null)
@param {Boolean} record - whether to record this action in history (default true)

startConnect #

Start a connection action.
@param {Object} element - data to connect to
@param {Number} x - x position in window coordinates
@param {Number} y - y position in window coordinates

moveConnect #

Move a started connection action.
@param {Number} x - new x position in window coordinates
@param {Number} y - new y position in window coordinates

endConnect #

End a started connection action.
@param {Number} x - final x position in window coordinates
@param {Number} y - final y position in window coordinates

async importLayer #

Reads the json file and creates a layer from it.
@param {File} file - JSON file
@returns promise that is resolved when the layer is added

exportLayer #

Return the currently active layer as a JSON object.
@returns layer object if exists, else throws an exception

async exportZIP #

Creates a .zip archive containing a report PDF, the layer as JSON, and state as JSON that is then automatically downloaded.
@param {String} name - name to use for the zip file (default available)
@param {Boolean} canvasOnly - one include the canvas, not the whole content in the report PDF