From b51fff10c04b4a24615f3c4e9dca779c5471f974 Mon Sep 17 00:00:00 2001
From: Stephan Rauh <3045767+stephanrauh@users.noreply.github.com>
Date: Sat, 19 Aug 2023 14:24:58 +0200
Subject: [PATCH] stephanrauh/ngx-extended-pdf-viewer#1825 allow users to
 modify the editor annotations interactively

---
 .../export-annotations.component.html         |  7 +++--
 .../export-annotations.component.ts           | 30 ++++++++++++++-----
 .../export-annotations/ts - add drawing.md    |  6 ++--
 src/app/nav/versions.ts                       |  2 +-
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/app/extended-pdf-viewer/export-annotations/export-annotations.component.html b/src/app/extended-pdf-viewer/export-annotations/export-annotations.component.html
index ff2ff88b..ddcf37f3 100644
--- a/src/app/extended-pdf-viewer/export-annotations/export-annotations.component.html
+++ b/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>
diff --git a/src/app/extended-pdf-viewer/export-annotations/export-annotations.component.ts b/src/app/extended-pdf-viewer/export-annotations/export-annotations.component.ts
index f8130d6e..dcd1a5b3 100644
--- a/src/app/extended-pdf-viewer/export-annotations/export-annotations.component.ts
+++ b/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);
+      }
+    }
+  }
 }
diff --git a/src/app/extended-pdf-viewer/export-annotations/ts - add drawing.md b/src/app/extended-pdf-viewer/export-annotations/ts - add drawing.md
index e8865020..69389ba3 100644
--- a/src/app/extended-pdf-viewer/export-annotations/ts - add drawing.md	
+++ b/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);
diff --git a/src/app/nav/versions.ts b/src/app/nav/versions.ts
index 80ec5db7..f5b3b2ea 100644
--- a/src/app/nav/versions.ts
+++ b/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',
 } 
\ No newline at end of file