How to Draw and Save Rectangle Annotations with Coordinates in ngx-extended-pdf-viewer

[AshokKumarKunchala]

Hi,

I have started using the ngx-extended-pdf-viewer and have a specific requirement. I need to:

1. Draw a rectangle box on the PDF viewer and fill it with a color (e.g., black).
2. Capture the coordinates of the drawn rectangle box.
3. Save these coordinates in a database in JSON format.
4. Load and display the rectangle box on the document when it is viewed again in the viewer.

Could you please guide me on how to achieve this with ngx-extended-pdf-viewer? Any examples or references would be greatly appreciated.

Thank you!

[stephanrauh]

If you're asking me: I've collected all my knowledge at https://pdfviewer.net/extended-pdf-viewer/export-annotations. It's not much because exporting and importing annotation uses an internal API of pdf.js. It may change at any point in time. You can use it as long as you're aware of this.

[rms2219]

@AshokAnvesa Have you found a solution for # 1 or 2 ? I have a similar need to draw a rectangle on the annotation layer and capture it's coordinates, along with the page that it's annotated on. I looked through the link provided by @stephanrauh but I didn't see anything to suggest a rectangle could be placed on the layer or resized.

Presumably, I will have to resort to a custom solution, maybe using canvas and build support for a resizable/moveable rectangle.

[Varadharavi]

For anyone who is wondering, how to draw a rectangle annotation and export the annotation to pdf. Please follow the below steps

1. Initialize a overlay canvas on .annotationEditorLayer.inkEditorCanvas once the pdf viewer is loaded.
2. Then add mouse event listener in that canvas to draw a rectangle.
3. Now the tricky part, you need to get the co-ordinates of the mouse event and map it to the pdf.js api co-ordinates. You can find that in returnCoordinates() function in the below code.
4. I also added my custom code to create bezier points value to draw a perfect rectangle so that it can be exported and downloaded into a pdf.

@stephanrauh - You can add it as a feature in your module

rectangle-annotation.component.html

<ngx-extended-pdf-viewer
      [src]="'assets/sample.pdf'"
      [showToolbar]="true"
      (pdfLoaded)="onPdfLoaded()"
      [customToolbar]="additionalButtons"
      [textLayer]="false"
></ngx-extended-pdf-viewer>
<ng-template #additionalButtons>
      <pdf-download></pdf-download>
      <pdf-draw-editor (click)="initializeCanvas()"></pdf-draw-editor>
</ng-template> 

rectangle-annotation.component.ts

import { NgxExtendedPdfViewerService, InkEditorAnnotation, PdfDrawEditorComponent, PDFNotificationService } from 'ngx-extended-pdf-viewer';

@Component({
  selector: 'app-rectangle-annotation',
  templateUrl: './rectangle-annotation.component.html',
  styleUrls: ['./rectangle-annotation.component.css']
})
export class RectangleAnnotationComponent implements AfterViewInit {

  private overlayCanvas!: HTMLCanvasElement;
  private annotationCanvas!: HTMLElement;  // Use plain DOM reference
  private isDrawing = false;
  private startX: number = 0;
  private startY: number = 0;
  private endX: number = 0;
  private endY: number = 0;
  private rectWidth: number = 0;
  private rectHeight: number = 0;
  private overlayCtx!: CanvasRenderingContext2D;
  private x:number = 0;
  private y:number = 0;
  private width: number = 0;
  private height: number = 0;
  private bbox: any = [];
  constructor(private renderer: Renderer2,
    private pdfViewerService: NgxExtendedPdfViewerService,
    notificationService: PDFNotificationService
  ) {

  }
  ngOnInit() {
  }

  ngAfterViewInit() {
    this.initializeCanvas();
  }

  initializeCanvas() {
    const annotationLayer = document.querySelector('.annotationEditorLayer');
    if (annotationLayer) {
      // Find the target canvas
      const targetCanvas = annotationLayer.querySelector('.inkEditorCanvas') as HTMLCanvasElement;
      if (targetCanvas) {
        const targetRect = targetCanvas.getBoundingClientRect();
        this.overlayCanvas = this.renderer.createElement('canvas') as HTMLCanvasElement;
        this.renderer.appendChild(annotationLayer, this.overlayCanvas);
        // Set id and class name
        this.renderer.setAttribute(this.overlayCanvas, 'id', 'overlay-canvas-1');  // Set a unique ID
        this.renderer.addClass(this.overlayCanvas, 'overlay-canvas-1');            // Add a class for styling

        // Set the overlay canvas size and position
        this.renderer.setStyle(this.overlayCanvas, 'position', 'absolute');
        // this.renderer.setStyle(this.overlayCanvas, 'top', `${targetRect.top}px`);
        // this.renderer.setStyle(this.overlayCanvas, 'left', `${targetRect.left}px`);
        this.renderer.setStyle(this.overlayCanvas, 'width', `${targetRect.width}px`);
        this.renderer.setStyle(this.overlayCanvas, 'height', `${targetRect.height}px`);
        this.renderer.setStyle(this.overlayCanvas, 'border', '1px solid blue');
        this.renderer.setStyle(this.overlayCanvas, 'z-index', '9999'); // Ensure it stays on top
        this.renderer.setStyle(this.overlayCanvas, 'pointer-events', 'auto'); // Allow interaction with the target canvas below

        // Set canvas width and height
        this.overlayCanvas.width = targetRect.width;
        this.overlayCanvas.height = targetRect.height;

        // Get the canvas 2D context to draw
        this.overlayCtx = this.overlayCanvas.getContext('2d')!;

        // Add mouse event listeners to handle drawing
        this.overlayCanvas.addEventListener('mousedown', this.onMouseDown.bind(this));
        this.overlayCanvas.addEventListener('mousemove', this.onMouseMove.bind(this));
        this.overlayCanvas.addEventListener('mouseup', this.onMouseUp.bind(this));
        // this.overlayCanvas.addEventListener('mouseout', this.onMouseUp.bind(this)); // Stop drawing if mouse leaves
      }
    }
  }

  onPdfLoaded() {
    console.log("PDF loaded");
  }

  onMouseDown(event: MouseEvent) {
    console.log("Mouse Down Event Triggered");
    if (!this.overlayCanvas) {
      console.error("overlayCanvas is not initialized");
      return;
    }
    this.isDrawing = true;
    const canvasRect = this.overlayCanvas.getBoundingClientRect();
    this.startX = event.clientX - canvasRect.left;
    this.startY = event.clientY - canvasRect.top;
    const annotationLayer = document.querySelector('.annotationEditorLayer.inkEditing') as HTMLElement;
    if (annotationLayer) {
      this.annotationCanvas = annotationLayer;
      console.log("Test");
      const pointerDownEvent = new PointerEvent('pointerdown', {
        bubbles: true, 
        cancelable: true, 
        clientX: event.clientX,        
        clientY: event.clientY,        
        button: 0,               
        pressure: 0.5,           
        pointerId: 1,            
        isPrimary: true,         
      });
      this.annotationCanvas.dispatchEvent(pointerDownEvent);
    }
  }

  onMouseMove(event: MouseEvent) {
    // console.log("Mouse Move Event Triggered");

      const pointerMoveEvent = new PointerEvent('pointermove', {
        bubbles: true,           // Allow the event to propagate up the DOM
        cancelable: true,        // The event can be canceled
        clientX: event.clientX,  // X coordinate of the pointer
        clientY: event.clientY,  // Y coordinate of the pointer
        button: event.button,    // Which mouse button was pressed (0 = left, 1 = middle, 2 = right)
        pointerId: 1,            // Unique pointer identifier (usually 1 for mouse)
        isPrimary: true,         // If this is the primary pointer (true for mouse)
      });

      // this.annotationCanvas.dispatchEvent(pointerMoveEvent);
    if (!this.isDrawing) return;
    // event.stopPropagation();
    const canvasRect = this.overlayCanvas.getBoundingClientRect();
    this.rectWidth = event.clientX - canvasRect.left - this.startX;
    this.rectHeight = event.clientY - canvasRect.top - this.startY;
    this.endX = event.clientX - canvasRect.left;
    this.endY = event.clientY - canvasRect.top;

    this.drawRectangle();
  }

  onMouseUp(event: MouseEvent) {
    console.log("Mouse Up Event Triggered");
    if (!this.isDrawing) return;
    this.isDrawing = false;
  }

  returnCoordinates(startX: number, startY: number, boxtype: string){
    const pdfviewerapp = (window as any).PDFViewerApplication;
    if (pdfviewerapp) {
      console.log(pdfviewerapp);
      let scale = pdfviewerapp?.pdfViewer._pages[0].viewport.scale;
      let actualWidth = pdfviewerapp?.pdfViewer._pages[0].viewport.viewBox[2];
      let actualHeight = pdfviewerapp?.pdfViewer._pages[0].viewport.viewBox[3];
      console.log("Actual Width and Height : ", actualWidth, actualHeight);
      let parentWidth = actualWidth * scale;
      let parentHeight = actualHeight * scale;
      console.log("Parent Width and Height : ", parentWidth, parentHeight);
      this.x = startX/parentWidth;
      this.y = startY/parentHeight;
      this.width = this.x;
      this.height = this.y;
      console.log("Normalize Point", this.x, this.y, this.width, this.height);
      let margin = 3 + 0.5 * scale;
      let marginX = margin / parentWidth;
      let marginY = margin / parentHeight;
      this.x = Math.min(1, Math.max(0, this.x - marginX));
      this.y = Math.min(1, Math.max(0, this.y - marginY));
      this.width = Math.min(1, Math.max(0, this.width + marginX));
      this.height = Math.min(1, Math.max(0, this.height + marginY));
      this.width -= this.x;
      this.height -= this.y;
      console.log("After Margin Components", this.x, this.y, this.width, this.height)
      const x = this.x * actualWidth;
      const y = this.y * actualHeight;
      const width = this.width * actualWidth;
      const height = this.height * actualHeight;
      console.log(x, actualHeight - y - height, x + width, actualHeight - y);
      if(boxtype == "start"){
        this.bbox[0] = x;
        this.bbox[3] = actualHeight - y - height;
      }else{
        this.bbox[1] = x + width;
        this.bbox[2] = actualHeight - y - height;
      }
      return [x, actualHeight - y]
    }
    return;

  }

  printBox() {
    console.log("Co-ordinates");
    console.log(this.startX, this.startY, this.endX, this.endY);
    console.log("Start: ", this.returnCoordinates(this.startX, this.startY, "start"));
    console.log("End: ", this.returnCoordinates(this.endX, this.endY, "end"));
  }

  drawRectangle() {
    const ctx = this.overlayCtx;

    // Clear the overlay canvas before drawing
    ctx.clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);

    // Draw the rectangle as the user drags the mouse
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 3;
    ctx.strokeRect(this.startX, this.startY, this.rectWidth, this.rectHeight);
  }

  drawAnnotation() {
    this.printBox();
    let x = this.bbox[0];
    let y = this.bbox[2];
    let width = this.bbox[1] - x;
    let height = this.bbox[3] - y;

    const textEditorAnnotation: InkEditorAnnotation = {
      "annotationType": 15,
      "color": [
        0,
        0,
        0
      ],
      "thickness": 1,
      "opacity": 1,
      "paths": [
        {
          "bezier": [
            x, y,
            x + width / 3, y,
            x + 2 * width / 3, y,
            x + width, y,
            x + width, y + height / 3,
            x + width, y + 2 * height / 3,
            x + width, y + height,
            x + 2 * width / 3, y + height,
            x + width / 3, y + height,
            x, y + height,
            x, y + 2 * height / 3,
            x, y + height / 3,
            x, y
          ],
          "points": [x, y, x, y + height]
        }
      ],
      "pageIndex": 0,
      "rect": [
        this.bbox[0],
        this.bbox[2],
        this.bbox[1],
        this.bbox[3]
      ],
      "rotation": 0
    };
    console.log("My Annotation", textEditorAnnotation);
    this.pdfViewerService.addEditorAnnotation(textEditorAnnotation);
    const selectedEditor = document.querySelector('.selectedEditor');
    const inkEditor = document.querySelector('.inkEditor');
    if (inkEditor && !selectedEditor) {
      // Add the 'new-class' to the element
      console.log("Selected Annotation");
      inkEditor.classList.add('selectedEditor');
    }
    console.log(this.pdfViewerService.getSerializedAnnotations());
  }

}

Using this example you can draw a rectangle box in PDF Annotation editor layer and download the annotations in pdf too. Hope it helps you all.

Functions used by PDF.js library to compute this co-ordinates

1. this.#normalizePoint(x, y) - inkdraw.js
2. this.#getMarginComponents() - inkdraw.js
3. getRect(tx, ty, rotation) - editor.js

[rivka-mak]

I draw rectengle highlight with set annotation struct of type any and annotationType 9, I set rect and quadPoints and the pdfService of ngx-extended-pdf-viewer succeeded paint it

[stephanrauh]

Just for the record, here's a list of all annotation type PDF supports. Please note that ngx-extended-pdf-viewer only supports a subset of them, and the built-in editors support even less. Also note that the list has been generated by ChatGPT. It looks correct to me, but before you rely on it, please double-check for hallucinations.

•	1: Text annotation (sticky note)
•	2: Link annotation (hyperlinks)
•	3: Free text annotation (you already mentioned this)
•	4: Line annotation
•	5: Square annotation
•	6: Circle annotation
•	7: Polygon annotation
•	8: Polyline annotation
•	9: Highlight annotation (you already mentioned this)
•	10: Underline annotation
•	11: Squiggly annotation
•	12: Strikeout annotation
•	13: Stamp annotation
•	14: Caret annotation (used for text insertions)
•	15: Ink annotation (you already mentioned this)
•	16: Popup annotation
•	17: File attachment annotation
•	18: Sound annotation
•	19: Movie annotation
•	20: Widget annotation (used in forms)
•	21: Screen annotation (for media clips)
•	22: Printer’s mark annotation
•	23: Trap network annotation
•	24: Watermark annotation
•	25: 3D annotation (for 3D content)