stephanrauh/ngx-extended-pdf-viewer#1825 allow users to modify the ed…

…itor annotations interactively

src/app/extended-pdf-viewer/export-annotations/export-annotations.component.html

@@ -4,6 +4,8 @@
       <p>
         You can export text and drawings you've added to a PDF file.
       </p>
+      <p><b>Breaking change between pdf.js 3.5 and 3.9:</b> The coordinates of the serialized drawings have changed.
+        Please keep in mind that this is an internal API of pdf.js, so it's subject to change without notice.</p>
       <button mat-raised-button color="primary" (click)="exportAnnotations()" style="margin-left: 16px">Export annotations</button>
       <button mat-raised-button color="primary" (click)="addTextEditor()" style="margin-left: 16px">Add text editor</button>
       <button mat-raised-button color="primary" (click)="addDrawing()" style="margin-left: 16px">Add drawing</button>
@@ -28,8 +30,9 @@
         <mat-tab label="live demo">
           <div class="distance16">
             <div *ngIf="rawAnnotations">
-              <ul *ngFor="let anno of rawAnnotations">
-                <li>{{anno | json }}</li>
+              <p>You can edit the annotations. They are updated when you click outside the text area.</p>
+              <ul *ngFor="let anno of rawAnnotations; let i = index">
+                <li><textarea [value]="rawAnnotations[i]|json" (change)="updateAnnotation(i, $event)"></textarea></li>
               </ul>
             </div>
             <div *ngIf="!rawAnnotations">No annotations. Use the editor or the buttons to add text or drawings to the PDF file.</div>

src/app/extended-pdf-viewer/export-annotations/export-annotations.component.ts

@@ -55,21 +55,21 @@ export class ExportAnnotationsComponent {
   }
 
   public addDrawing(): void {
-    const x = 400*Math.random();
-    const y = 350+500*Math.random();
+    const x = 400 * Math.random();
+    const y = 350 + 500 * Math.random();
     const drawing: InkEditorAnnotation = {
       annotationType: 15,
       color: [Math.floor(Math.random() * 255), Math.floor(Math.random() * 255), Math.floor(Math.random() * 255)],
-      thickness: Math.random()*10,
+      thickness: Math.random() * 10,
       opacity: 1,
       paths: [
         {
-          bezier: [0.5, 14, 0.5, 44, 44, 66, 88, 44],
-          points: [0.5, 14, 0.5, 44],
+          bezier: [x + 0.5, y, x + 0.5, y + 44, x + 44, y + 66, x + 88, y + 44],
+          points: [x + 0.5, y, x + 0.5, y + 44],
         },
       ],
       pageIndex: 0,
-      rect: [x, y, x+100, y+100],
+      rect: [x, y, x + 100, y + 66],
       rotation: 0,
     };
     this.pdfViewerService.addEditorAnnotation(drawing);
@@ -80,12 +80,26 @@ export class ExportAnnotationsComponent {
   }
 
   public removeTextEditors(): void {
-    const filter = (serial: any) => serial.annotationType === 3;
+    const filter = (serial: any) => serial?.annotationType === 3;
     this.pdfViewerService.removeEditorAnnotations(filter);
   }
 
   public removeDrawingEditors(): void {
-    const filter = (serial: any) => serial.annotationType === 15;
+    const filter = (serial: any) => serial?.annotationType === 15;
     this.pdfViewerService.removeEditorAnnotations(filter);
   }
+
+  public updateAnnotation(index: number, event: Event): void {
+    const textarea = event.target as HTMLTextAreaElement;
+    if (this.rawAnnotations) {
+      const value = textarea.value.replace(/\n/g, '');
+      debugger;
+      this.rawAnnotations[index] = JSON.parse(value);
+
+      this.removeEditors();
+      for (const annotation of this.rawAnnotations) {
+        this.pdfViewerService.addEditorAnnotation(annotation);
+      }
+    }
+  }
 }

src/app/extended-pdf-viewer/export-annotations/ts - add drawing.md

@@ -9,12 +9,12 @@ public addDrawing(): void {
     opacity: 1,
     paths: [
       {
-        bezier: [0.5, 14, 0.5, 44, 44, 66, 88, 44],
-        points: [0.5, 14, 0.5, 44],
+        bezier: [x+0.5, y, x+0.5, y+44, x+44, y+66, x+88, y+44],
+        points: [x+0.5, y, x+0.5, y+44],
       },
     ],
     pageIndex: 0,
-    rect: [x, y, x+100, y+100],
+    rect: [x, y, x+100, y+66],
     rotation: 0,
   };
   this.pdfViewerService.addEditorAnnotation(drawing);

src/app/nav/versions.ts

@@ -1,4 +1,4 @@
 export const versions = {
   angular: '15.2.9',
-  extendedPdfViewer: '18.0.0-beta.0',
+  extendedPdfViewer: '18.0.0-beta.2',
 }