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.

Code scaffolding

Run ng generate component component-name --project ngx-Annotation to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-Annotation.

Note: Don't forget to add --project ngx-Annotation or else it will be added to the default project in your angular.json file.

Build

Run ng build ngx-Annotation to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ngx-Annotation, go to the dist folder cd dist/ngx-annotation and run npm publish.