@hmcts/annotation-ui-lib
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.23 • Public • Published

    @hmcts/annotation-ui-lib

    Coverage Status Build Status

    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.

    Install

    npm i @hmcts/annotation-ui-lib

    DownloadsWeekly Downloads

    10

    Version

    1.0.23

    License

    SEE LICENSE IN LICENSE

    Unpacked Size

    6.46 MB

    Total Files

    434

    Last publish

    Collaborators

    • timja
    • andrewwa-kainos
    • bendiggle
    • ellie-harrison
    • adrianc
    • hemantt
    • adamsilver
    • trevorsaint
    • timja-hmcts
    • dharmendrak
    • robertparkinson
    • pragnesh
    • damdun
    • p.jar
    • sabah.irfan
    • jenkins-reform-hmcts