@architrixs/ngx-annotation NPM

NgxAnnotation

An Angular Wrapper Library for @recogito/annotorious and @recogito/annotorious-openseadragon with some extra features.

This library was generated with Angular CLI version 12.2.0.

Library Components

The library contains the following components:

lib-annotation (for Standard version API)
lib-annotation-openseadragon (for OpenSeadragon plugin API)

Input properties:

For the standard version API:

Property	Type	Default	Description
imageId	string	-	The id of the image to annotate.
disableEditor	boolean	true	Whether to disable the editor.
drawOnSingleClick	boolean	true	Whether to draw on single click.
readOnly	boolean	false	Display annotations in read-only mode.
allowEmpty	boolean	false	Whether to allow empty annotations.
crosshair	boolean	true	Whether to show the crosshair.
tagValue	string	'tag'	The value of the tag.
strokeColour	string	#ff0000	The colour of the stroke.
strokeWidth	string	'2'	The width of the stroke.
colorLabels	boolean	true	Whether to color the labels.
startArrow	boolean	true	Whether to show the start/up arrow.
endArrow	boolean	true	Whether to show the end/down arrow.
toolbarId	string	'toolbar'	The id of the toolbar.
extraDrawingTools	string array	[]	The extra drawing tools.

For the OpenSeadragon plugin API:

Property	Type	Default	Description
viewerId	string	'seadragon-viewer'	The dom id of the osd viewer.
toolbarId	string	-	The id of the dom element where toolbar should be placed. By default it is placed on top left of the viewer.
imagePath	string	-	The path to the image.
OsdOptions	object	-	The options for the osd viewer. Osd Provides many configuration settings. Ex:OsdOPtions = { id: this.viewerId, tileSources: { type: "image", url: this.imagePath, } maxZoomLevel: 20, minZoomLevel: 1, panHorizontal: true, panVertical: true, constrainDuringPan: false }
showNavigationControl	boolean	true	Whether to show the navigation control.
disableEditor	boolean	true	Whether to disable the editor.
pan	object	{panHorizontal:false, panVertical:false}	The pan settings for the osd viewer. Ex:pan="{panHorizontal:false, panVertical:false}"
zoom	object	{minZoomLevel: 0, maxZoomLevel: 20}	The zoom settings for the osd viewer. Ex. For No zooming:zoom="{minZoomLevel: 1, maxZoomLevel: 1}"
drawOnSingleClick	boolean	true	Whether to draw on single click.
readOnly	boolean	false	Display annotations in read-only mode.
allowEmpty	boolean	false	Whether to allow empty annotations.
crosshair	boolean	false	Whether to show the crosshair.
clickToZoom	boolean	false	Whether to click to zoom.
extraDrawingTools	string array	[]	The extra drawing tools.
tagValue	string	'tag'	The value of the tag.
strokeColour	string	#ff0000	The colour of the stroke.
strokeWidth	string	'2'	The width of the stroke.
group	string	-	The group annotation belongs to
colorLabels	boolean	true	Whether to color the labels.
ContinousDraw	boolean	false	Whether to draw continuously.
activeTool	string	'rect'	The active drawing tool. From: 'rect', 'polygon', 'line', 'polyline', etc.
startArrow	boolean	false	Whether to show the start/up arrow.
endArrow	boolean	false	Whether to show the end/down arrow.
canvasNonPrimaryPress	boolean	false	Whether to attach canvas-nonprimary-release handler for rightMouseClick event

Output callback Events:

Callback	Description
Annotation	The callback for getting Instance of Annotation after Initialization.
createdAnnotation	The callback that is called when an annotation is created.
clickedAnnotation	The callback that is called when an annotation is clicked.
cancelSelected	The callback that is called when the `ESC` button or outside region is clicked on active selection.
mouseEnter	The callback that is called when the mouse enters the region.
mouseLeave	The callback that is called when the mouse leaves the region.
updateAnnotation	The callback that is called when an annotation is updated.
deleteAnnotation	The callback that is called when an annotation is deleted using `Delete` Key
rightMouseClick	The callback that is called when right mouse click is performed on the Osd Canvas

Example:

<div id="toolbar"></div>
  <span style="display: block;"><button id="button" (click)="selectLineTool()">Line</button></span>
  <img style="height:calc(100vh - 230px);width:100%;border: 1px solid" id="hallstatt" src="../assets/1024px-Hallstatt.jpg">

  <lib-annotation [imageId]="hallstatt" 
                  [disableEditor]="isdisableEditor"
                  [drawOnSingleClick]="isdrawOnSingleClick"
                  [readOnly]="false"
                  [allowEmpty]="true"
                  [crosshair]="true"
                  [tagValue]="tagValue"
                  [strokeColour]="strokeColour"
                  [strokeWidth]="strokeWidth"
                  [colorLabels]="false"
                  (createdAnnotation)="GetCreated($event)"
                  [startArrow]="startArrow"
                  [endArrow]="endArrow"
                  (cancelSelected)="GetCancel($event)"
                  (Annotation)="GetInstance($event)"
                  (mouseEnter)="GetMouseEnter($event)"
                  (mouseLeave)="GetMouseLeave($event)"
                  (updateAnnotation)="GetUpdate($event)"
                  [toolbarId]="toolbarId"
                  [extraDrawingTools]="extraDrawingTools">
  </lib-annotation>

<div id="toolbarDiv"></div>
  <span style="display: block;"><button id="button" (click)="selectLineTool()">Line</button></span>
  <div id="seadragon-viewer" style="height:calc(100vh - 230px);width:60%;border: 1px solid"></div>
  <lib-annotation-openseadragon [viewerId]="seadragon-viewer"
                                [toolbarId]="'toolbarDiv'"
                                [imagePath]="'../assets/1024px-Hallstatt.jpg'"
                                [disableEditor]="isdisableEditor"
                                [pan]="{panHorizontal:true, panVertical:true}"
                                [drawOnSingleClick]="isdrawOnSingleClick"
                                [readOnly]="false"
                                [allowEmpty]="false"
                                [crosshair]="true"
                                [clickToZoom]="false"
                                [extraDrawingTools]="extraDrawingTools"
                                [tagValue]="tagValue"
                                [strokeColour]="strokeColour"
                                [strokeWidth]="strokeWidth"
                                [colorLabels]="colorLabels"
                                [ContinousDraw]="ContinousDraw"
                                [activeTool]="currentDrawingTool"
                                [startArrow]="startArrow"
                                [endArrow]="endArrow"
                                (createdAnnotation)="GetCreated($event)"
                                (clickedAnnotation)="GetClicked($event)"
                                (cancelSelected)="GetCancel($event)"
                                (Annotation)="GetInstance($event)"
                                (OsdViewer)="GetOsdViewer($event)"
                                (mouseEnter)="GetMouseEnter($event)"
                                (mouseLeave)="GetMouseLeave($event)"
                                (updateAnnotation)="GetUpdate($event)"
  ></lib-annotation-openseadragon>

Change Image in Viewer:

GetOsdViewer(event: any) {
    this.osdViewer = event;
}
changeImage() {
  var newImage = {
        type: 'image',
        url: this.snapshot
      }
  this.osdViewer.open(newImage);
}

For further functionality, please refer to the recogito documentation and openSeadragon documentation.