From e13826fec23a90e31855e7084c4aa3563973fa4d Mon Sep 17 00:00:00 2001
From: SF4524LogeshKumar <logeshkumar.dhamodharan@syncfusion.com>
Date: Mon, 16 Dec 2024 15:20:58 +0530
Subject: [PATCH] 834567: Sample on How to Add Rectangle Annotations Using
 Search Text Bounds

---
 .../.editorconfig                             |   0
 .../.gitignore                                |   0
 .../README.md                                 |   0
 .../angular.json                              |   0
 .../package.json                              |   0
 .../src/app/app.component.css                 |   0
 .../src/app/app.component.html                |   0
 .../src/app/app.component.spec.ts             |   0
 .../src/app/app.component.ts                  |  84 ++++++++++++++++++
 .../src/app/app.module.ts                     |   0
 .../src/assets/.gitkeep                       |   0
 .../src/favicon.ico                           | Bin
 .../src/index.html                            |   0
 .../src/main.ts                               |   0
 .../src/styles.css                            |   0
 .../tsconfig.app.json                         |   0
 .../tsconfig.json                             |   0
 .../tsconfig.spec.json                        |   0
 .../src/app/app.component.ts                  |  51 -----------
 19 files changed, 84 insertions(+), 51 deletions(-)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/.editorconfig (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/.gitignore (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/README.md (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/angular.json (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/package.json (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/src/app/app.component.css (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/src/app/app.component.html (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/src/app/app.component.spec.ts (100%)
 create mode 100644 How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.component.ts
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/src/app/app.module.ts (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/src/assets/.gitkeep (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/src/favicon.ico (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/src/index.html (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/src/main.ts (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/src/styles.css (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/tsconfig.app.json (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/tsconfig.json (100%)
 rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/tsconfig.spec.json (100%)
 delete mode 100644 How to/Get co-ordinates of Annotations/src/app/app.component.ts

diff --git a/How to/Get co-ordinates of Annotations/.editorconfig b/How to/Add Rectangle Annotations Using Search Text Bounds/.editorconfig
similarity index 100%
rename from How to/Get co-ordinates of Annotations/.editorconfig
rename to How to/Add Rectangle Annotations Using Search Text Bounds/.editorconfig
diff --git a/How to/Get co-ordinates of Annotations/.gitignore b/How to/Add Rectangle Annotations Using Search Text Bounds/.gitignore
similarity index 100%
rename from How to/Get co-ordinates of Annotations/.gitignore
rename to How to/Add Rectangle Annotations Using Search Text Bounds/.gitignore
diff --git a/How to/Get co-ordinates of Annotations/README.md b/How to/Add Rectangle Annotations Using Search Text Bounds/README.md
similarity index 100%
rename from How to/Get co-ordinates of Annotations/README.md
rename to How to/Add Rectangle Annotations Using Search Text Bounds/README.md
diff --git a/How to/Get co-ordinates of Annotations/angular.json b/How to/Add Rectangle Annotations Using Search Text Bounds/angular.json
similarity index 100%
rename from How to/Get co-ordinates of Annotations/angular.json
rename to How to/Add Rectangle Annotations Using Search Text Bounds/angular.json
diff --git a/How to/Get co-ordinates of Annotations/package.json b/How to/Add Rectangle Annotations Using Search Text Bounds/package.json
similarity index 100%
rename from How to/Get co-ordinates of Annotations/package.json
rename to How to/Add Rectangle Annotations Using Search Text Bounds/package.json
diff --git a/How to/Get co-ordinates of Annotations/src/app/app.component.css b/How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.component.css
similarity index 100%
rename from How to/Get co-ordinates of Annotations/src/app/app.component.css
rename to How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.component.css
diff --git a/How to/Get co-ordinates of Annotations/src/app/app.component.html b/How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.component.html
similarity index 100%
rename from How to/Get co-ordinates of Annotations/src/app/app.component.html
rename to How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.component.html
diff --git a/How to/Get co-ordinates of Annotations/src/app/app.component.spec.ts b/How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.component.spec.ts
similarity index 100%
rename from How to/Get co-ordinates of Annotations/src/app/app.component.spec.ts
rename to How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.component.spec.ts
diff --git a/How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.component.ts b/How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.component.ts
new file mode 100644
index 0000000..0da2fc4
--- /dev/null
+++ b/How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.component.ts	
@@ -0,0 +1,84 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+  LinkAnnotationService,
+  BookmarkViewService,
+  MagnificationService,
+  ThumbnailViewService,
+  ToolbarService,
+  NavigationService,
+  AnnotationService,
+  TextSearchService,
+  TextSelectionService,
+  FormFieldsService,
+  FormDesignerService,
+  PrintService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div class="content-wrapper">
+      <div style="margin-top: 20px;">
+        <button (click)="handleSearch()">Search PDF</button>
+        <button (click)="handleSearchNext()">Search Next</button>
+        <button (click)="handleCancelSearch()">Cancel Search</button>
+      </div>
+      <ejs-pdfviewer #pdfViewer
+                     id="pdfViewer"
+             [documentPath]='document'
+                 [resourceUrl]='resource' 
+             style="height:640px;display:block"
+                     (textSearchHighlight)="handleTextSearchHighlight($event)">
+  </ejs-pdfviewer>
+    </div>
+  `,
+  providers: [
+    LinkAnnotationService,
+    BookmarkViewService,
+    MagnificationService,
+    ThumbnailViewService,
+    ToolbarService,
+    NavigationService,
+    AnnotationService,
+    TextSearchService,
+    TextSelectionService,
+    FormFieldsService,
+    FormDesignerService,
+    PrintService
+  ]
+})
+export class AppComponent implements OnInit {
+  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+  public resource: string = 'https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib';
+  pdfViewerComponent: any;
+  
+  ngOnInit(): void {
+  }
+  
+  handleSearch() {
+    var pdfviewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
+    pdfviewer.textSearchModule.searchText('PDF', false);
+  }
+
+  handleSearchNext() {
+    var pdfviewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
+    pdfviewer.textSearchModule.searchNext();
+}
+
+  handleCancelSearch() {
+    var pdfviewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
+    pdfviewer.textSearchModule.cancelTextSearch();
+  }
+  
+  handleTextSearchHighlight(args: any) {
+    var pdfviewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
+    console.log(args);
+    const bounds = args.bounds;
+    pdfviewer.annotationModule.addAnnotation('Rectangle', {
+      pageNumber: args.pageNumber,
+      offset: { x: bounds.left, y: bounds.top },
+      width: bounds.width,
+      height: bounds.height,
+    });
+  }
+}
\ No newline at end of file
diff --git a/How to/Get co-ordinates of Annotations/src/app/app.module.ts b/How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.module.ts
similarity index 100%
rename from How to/Get co-ordinates of Annotations/src/app/app.module.ts
rename to How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.module.ts
diff --git a/How to/Get co-ordinates of Annotations/src/assets/.gitkeep b/How to/Add Rectangle Annotations Using Search Text Bounds/src/assets/.gitkeep
similarity index 100%
rename from How to/Get co-ordinates of Annotations/src/assets/.gitkeep
rename to How to/Add Rectangle Annotations Using Search Text Bounds/src/assets/.gitkeep
diff --git a/How to/Get co-ordinates of Annotations/src/favicon.ico b/How to/Add Rectangle Annotations Using Search Text Bounds/src/favicon.ico
similarity index 100%
rename from How to/Get co-ordinates of Annotations/src/favicon.ico
rename to How to/Add Rectangle Annotations Using Search Text Bounds/src/favicon.ico
diff --git a/How to/Get co-ordinates of Annotations/src/index.html b/How to/Add Rectangle Annotations Using Search Text Bounds/src/index.html
similarity index 100%
rename from How to/Get co-ordinates of Annotations/src/index.html
rename to How to/Add Rectangle Annotations Using Search Text Bounds/src/index.html
diff --git a/How to/Get co-ordinates of Annotations/src/main.ts b/How to/Add Rectangle Annotations Using Search Text Bounds/src/main.ts
similarity index 100%
rename from How to/Get co-ordinates of Annotations/src/main.ts
rename to How to/Add Rectangle Annotations Using Search Text Bounds/src/main.ts
diff --git a/How to/Get co-ordinates of Annotations/src/styles.css b/How to/Add Rectangle Annotations Using Search Text Bounds/src/styles.css
similarity index 100%
rename from How to/Get co-ordinates of Annotations/src/styles.css
rename to How to/Add Rectangle Annotations Using Search Text Bounds/src/styles.css
diff --git a/How to/Get co-ordinates of Annotations/tsconfig.app.json b/How to/Add Rectangle Annotations Using Search Text Bounds/tsconfig.app.json
similarity index 100%
rename from How to/Get co-ordinates of Annotations/tsconfig.app.json
rename to How to/Add Rectangle Annotations Using Search Text Bounds/tsconfig.app.json
diff --git a/How to/Get co-ordinates of Annotations/tsconfig.json b/How to/Add Rectangle Annotations Using Search Text Bounds/tsconfig.json
similarity index 100%
rename from How to/Get co-ordinates of Annotations/tsconfig.json
rename to How to/Add Rectangle Annotations Using Search Text Bounds/tsconfig.json
diff --git a/How to/Get co-ordinates of Annotations/tsconfig.spec.json b/How to/Add Rectangle Annotations Using Search Text Bounds/tsconfig.spec.json
similarity index 100%
rename from How to/Get co-ordinates of Annotations/tsconfig.spec.json
rename to How to/Add Rectangle Annotations Using Search Text Bounds/tsconfig.spec.json
diff --git a/How to/Get co-ordinates of Annotations/src/app/app.component.ts b/How to/Get co-ordinates of Annotations/src/app/app.component.ts
deleted file mode 100644
index 2361df0..0000000
--- a/How to/Get co-ordinates of Annotations/src/app/app.component.ts	
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import {
-  LinkAnnotationService,
-  BookmarkViewService,
-  MagnificationService,
-  ThumbnailViewService,
-  ToolbarService,
-  NavigationService,
-  AnnotationService,
-  TextSearchService,
-  TextSelectionService,
-  FormFieldsService,
-  FormDesignerService,
-  PrintService
-} from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
-  selector: 'app-root',
-  // specifies the template string for the PDF Viewer component
-  template: `<div class="content-wrapper">
-  <ejs-pdfviewer id="pdfViewer"
-             [documentPath]='document'
-                 [resourceUrl]='resource' 
-             style="height:640px;display:block"
-             (annotationAdd)="onAnnotationAdd($event)">
-  </ejs-pdfviewer>
-</div>`,
-  providers: [
-    LinkAnnotationService,
-    BookmarkViewService,
-    MagnificationService,
-    ThumbnailViewService,
-    ToolbarService,
-    NavigationService,
-    AnnotationService,
-    TextSearchService,
-    TextSelectionService,
-    FormFieldsService,
-    FormDesignerService,
-    PrintService]
-})
-export class AppComponent implements OnInit {
-  public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-  public resource: string = 'https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2-pdfviewer-lib';;
-  ngOnInit(): void {
-  }
-  onAnnotationAdd(args: any) {
-    console.log(args);  // Log the event arguments
-  }
-
-}
\ No newline at end of file