@hmcts/annotation-ui-lib
Version:
PDF Viewer and ability to highlight text with and comment tracking
85 lines (77 loc) • 2.78 kB
Markdown
# @hmcts/annotation-ui-lib
[](https://coveralls.io/github/hmcts/annotation-ui-lib?branch=upload-npm-in-pipeline)
[](https://travis-ci.com/hmcts/annotation-ui-lib)
This is an angular library that provides components to view and annotate PDF documents, as well as view images.
### Building annotation library
- npm run package
- distributable will be created under dist/annotation-ui-lib
### Add as a dependency in your angular app
- add @hmcts/annotation-ui-lib as a dependency in package.json
- import HmctsEmViewerUiModule and declare it in your NgModule imports.
For example:
```
import { HmctsEmViewerUiModule } from 'annotation-ui-lib';
@NgModule({
imports: [
...,
HmctsEmViewerUiModule,
]
})
```
- import assets to your angular.json
```
{
"glob": "**/*",
"input": "node_modules/@hmcts/annotation-ui-lib/assets",
"output": "/assets"
}
```
- and styles
```
"styles": [
"node_modules/@hmcts/annotation-ui-lib/assets/aui-styles.scss",
...
],
```
- import JS dependencies as scripts within angular.json
```
"scripts": [
"node_modules/@hmcts/annotation-ui-lib/assets/js/pdf.combined.min.js",
"node_modules/@hmcts/annotation-ui-lib/assets/js/pdf_viewer.min.js",
"node_modules/@hmcts/annotation-ui-lib/assets/js/pdf-annotate.min.js"
...
]
```
- component entry point:
```
<app-document-viewer
[baseUrl]="'http://localhost:3000/api'"
[annotate]="true"
[url]="'https://dm-store-aat.service.core-compute-aat.internal/documents/35f3714e-30e0-45d6-b4fb-08f51c271f8e'"
></app-document-viewer>
```
for non document store files:
```
<app-document-viewer
[baseUrl]="'http://localhost:3000/api'"
[annotate]="false"
[url]="'http://localhost:3000/assets/non-dm.pdf'"
[isDM]="false"
[contentType]="'pdf'">
</app-document-viewer>
```
Note: The file needs to be retrievable.
### Running development application (only for use with hmcts document store)
- set environment variable to define if app connects to localhost or aat:
```
export APP_ENV=local
```
- start app server
```
yarn install; export S2S_SECRET={{insert secret here}}; export IDAM_SECRET={{insert secret here}}; export APP_ENV=local; yarn start-dev-proxy;
```
- start node server
```
yarn install; export S2S_SECRET={{insert secret here}}; export IDAM_SECRET={{insert secret here}}; export APP_ENV=local; yarn watch-dev-node;
```
- go to http://localhost:3000 and the viewer should load the document.