Render Annotation (Added By Other Library) Immediately?

[juqing27]

@stephanrauh Hi! This is related my previous message. Thanks for your response. I've been able to reach the underlying pdf.js via the global object PDFViewerApplication, and was able to start using the HighKite PDFAnnotate Library together with this viewer.

The issue is, when an annotation is added by using the annotationFactory provided by the PDFAnnotate library, the annotation is not immediately visible in the viewer. From the Console you can tell it's indeed added, but not visible in the viewer (see 1st snapshot attached). As a workaround, I now update the [src] of the viewer every time an annotation is added, forcing a reload. This will make the annotation just added show up. However apparently it may not be a good approach.

My question - I noticed that when using the ngx-extended-pdf-viewer native function NgxExtendedPdfViewerService.addEditorAnnotation(), the created annotation is immediately visible in the viewer without having to reload the source. How's that achieved? I'm hoping it's possible to replicate that and provide better viewing/annotating experience in my case.

On a sidenote, when [src] is updated, it seems that the onPDFLoaded() is called twice - see 2nd snapshot attached. On the 1st call, the pdfDocument is actually not ready. It's ready on the second call. Do you know why it happens twice?

Below is my code for reference:

html:

<button (click)="addSquareAnnotation()">Add Square Annotation</button>
<ngx-extended-pdf-viewer
  #ngxpdfViewer
  [src]="pdfSrc"
  [textLayer]="true"
  [page]="0"
  [showHandToolButton]="true"
  [handTool]="false"
  (pdfLoaded)="onPDFLoaded()"
></ngx-extended-pdf-viewer>

ts:

import { Component} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SharedUtilsModule } from '../../shared/shared-utils/shared-utils.module';
import {AnnotationFactory} from 'annotpdf';

declare var PDFViewerApplication: any; // This line declares the global variable

@Component({
  selector: 'app-review-2',
  standalone: true,
  imports: [
    SharedUtilsModule,
    FormsModule,
  ],
  templateUrl: './bep-review-2.component.html',
  styleUrl: './bep-review-2.component.css'
})
export class Review2Component {
  private annotationFactory!: AnnotationFactory;
  private isAnnotationFactoryInitialized: boolean = false;
  pdfSrc : string = '/assets/pdfs/ue_1page.pdf';

  onPDFLoaded() {
    console.log("onPDFLoaded triggered");
    if (PDFViewerApplication?.pdfDocument) {
      // Check if the AnnotationFactory has already been initialized
      if (!this.isAnnotationFactoryInitialized) {
        PDFViewerApplication.pdfDocument.getData().then((data: Uint8Array) => {
          this.annotationFactory = new AnnotationFactory(data);
          this.isAnnotationFactoryInitialized = true; // Set the flag to true
          console.log('AnnotationFactory initialized:', this.annotationFactory);
        }).catch((error: any) => {
          console.error('Error getting PDF data:', error);
        });
      }
    } else {
      console.warn('pdfDocument is not available yet.');
    }
  }

  addSquareAnnotation() {
    if (!this.annotationFactory) {
      console.error("Annotation factory is not initialized yet.");
      return;
  }
  else
  {
    console.log("button clicked")

    const pageNumber = 0;
    const x = Math.floor(Math.random() * 200) + 116; // x can be 300 +- 100
    const y = Math.floor(Math.random() * 400) + 320; // y can be 400 +- 200
    const size = Math.floor(Math.random() * 60) + 20; // size can be 50 +- 30
    const content = "A Square Annotation";
    const author = "Author Name123";
    const color = { r: 0, g: 0, b: 0 }; // Black color
    const fill = {r: 100, g: 150, b: 0 };

    this.annotationFactory.createSquareAnnotation(
      pageNumber,
      [x, y, x + size, y + size],
      content,
      author,
      color,
      fill
    );

    const updatedPdfBlob = this.annotationFactory.write();
    const blobUrl = URL.createObjectURL(new Blob([updatedPdfBlob]));

    // Update pdfSrc to the new Blob URL
    this.pdfSrc = blobUrl;
  }
  }  
}

[stephanrauh]

You can try to call the low-level API

PDFViewerApplication.forceRendering();

or

PDFViewerApplication.pdfViewer.forceRendering()

[stephanrauh]

Emitting (pdfLoaded) twice seems to be a bug.

[stephanrauh]

Did my hints help you? If so, I'd like to add a page to the showcase. Adding and editing annotations seems to be popular, and your approach sounds promising to me because it avoids using the undocumented internal API of pds.js.

[perljuls]

I'm interested in this functionality as well, is it possible to add annotation from other library(i also use annotpdf) in addEditorAnnotation so it can be rendered immediately & i can collect all the annotations?

[stephanrauh]

I haven't tested it myself yet, but here's a recipe that should work:

• Load the PDF as a blob and store it in a TypeScript variable.
• Pass this variable to ngx-extended-pdf-viewer to display the PDF.
• Manipulate the PDF file and store the result in a new blob. The bottom line is that the new blob is stored at a different location in memory, so Angular can easily detect it has to re-render.
• Pass the new blob to ngx-extended-pdf-viewer.

This approach triggers a complete re-load. I believe it works well for small PDF file, but it might run into performance issues with big PDF files.

I've also described this approach here: #2948 (comment). Follow the discussion over there, maybe there's some new insight.