834567: Sample on How to Add Rectangle Annotations Using Search Text …

…Bounds
SyncfusionExamples · Dec 16, 2024 · 26d822f · 26d822f
1 parent fe6b6fc
commit 26d822f
Show file tree

Hide file tree

Showing 14 changed files with 52 additions and 17 deletions.
diff --git a/...et co-ordinates of Annotations/.gitignore → ...tions Using Search Text Bounds/.gitignore b/...et co-ordinates of Annotations/.gitignore → ...tions Using Search Text Bounds/.gitignore
diff --git a/...Get co-ordinates of Annotations/README.md → ...ations Using Search Text Bounds/README.md b/...Get co-ordinates of Annotations/README.md → ...ations Using Search Text Bounds/README.md
diff --git a/...rdinates of Annotations/e2e/index.spec.js → ...sing Search Text Bounds/e2e/index.spec.js b/...rdinates of Annotations/e2e/index.spec.js → ...sing Search Text Bounds/e2e/index.spec.js
diff --git a/...tes of Annotations/e2e/protractor.conf.js → ...Search Text Bounds/e2e/protractor.conf.js b/...tes of Annotations/e2e/protractor.conf.js → ...Search Text Bounds/e2e/protractor.conf.js
diff --git a/...t co-ordinates of Annotations/gulpfile.js → ...ions Using Search Text Bounds/gulpfile.js b/...t co-ordinates of Annotations/gulpfile.js → ...ions Using Search Text Bounds/gulpfile.js
diff --git a/...o/Get co-ordinates of Annotations/license → ...otations Using Search Text Bounds/license b/...o/Get co-ordinates of Annotations/license → ...otations Using Search Text Bounds/license
diff --git a/... co-ordinates of Annotations/package.json → ...ons Using Search Text Bounds/package.json b/... co-ordinates of Annotations/package.json → ...ons Using Search Text Bounds/package.json
diff --git a/How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.ts b/How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.ts
@@ -0,0 +1,49 @@
+import { pdf } from '@syncfusion/ej2';
+import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, TextSearchHighlightEventArgs, RectangleBounds, RectangleBoundsModel, RectangleSettings } from '@syncfusion/ej2-pdfviewer';
+
+// Inject required modules
+PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
+
+const pdfviewer: PdfViewer = new PdfViewer({
+    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
+    resourceUrl:'https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib'
+});
+
+pdfviewer.appendTo('#PdfViewer');
+
+// Highlight event handler for text search, which adds a rectangle annotation where the text is found
+pdfviewer.textSearchHighlight = function(args: TextSearchHighlightEventArgs): void {
+    console.log(args);
+    const pageNumber: number = args.pageNumber;
+    const bounds: RectangleBoundsModel = args.bounds;
+    pdfviewer.annotation.addAnnotation('Rectangle', {
+        offset: { x: bounds.left,  y: bounds.top },
+        pageNumber: pageNumber, 
+        width: bounds.width, 
+        height: bounds.height,
+    } as RectangleSettings);
+};
+
+// Add event listener to "searchText" button to trigger a search for the term 'PDF'
+const searchTextButton = document.getElementById('searchText');
+if (searchTextButton) {
+    searchTextButton.addEventListener('click', function() {
+        pdfviewer.textSearchModule.searchText('PDF', false);
+    });
+}
+
+// Add event listener to "searchNext" button to navigate to the next search result
+const searchNextButton = document.getElementById('searchNext');
+if (searchNextButton) {
+    searchNextButton.addEventListener('click', function() {
+    pdfviewer.textSearch.searchNext();
+    });
+}
+
+// Add event listener to "searchCancel" button to cancel the current text search operation
+const searchCancelButton = document.getElementById('searchCancel');
+if (searchCancelButton) {
+    searchCancelButton.addEventListener('click', function() {
+    pdfviewer.textSearch.cancelTextSearch();
+    });
+}
diff --git a/...o-ordinates of Annotations/src/index.html → ...s Using Search Text Bounds/src/index.html b/...o-ordinates of Annotations/src/index.html → ...s Using Search Text Bounds/src/index.html
@@ -12,6 +12,9 @@
 </head>
 
 <body>
+    <button id="searchText">Search Text</button>
+    <button id="searchNext">Search Next</button>
+    <button id="searchCancel">Cancel Search</button>
     <!--Element which will render as PDF Viewer -->
     <div id="PdfViewer"></div>
 </body>

diff --git a/... of Annotations/src/resources/favicon.ico → ...rch Text Bounds/src/resources/favicon.ico b/... of Annotations/src/resources/favicon.ico → ...rch Text Bounds/src/resources/favicon.ico
diff --git a/...ates of Annotations/src/styles/styles.css → ... Search Text Bounds/src/styles/styles.css b/...ates of Annotations/src/styles/styles.css → ... Search Text Bounds/src/styles/styles.css
diff --git a/...co-ordinates of Annotations/tsconfig.json → ...ns Using Search Text Bounds/tsconfig.json b/...co-ordinates of Annotations/tsconfig.json → ...ns Using Search Text Bounds/tsconfig.json
diff --git a/...rdinates of Annotations/webpack.config.js → ...sing Search Text Bounds/webpack.config.js b/...rdinates of Annotations/webpack.config.js → ...sing Search Text Bounds/webpack.config.js
diff --git a/How to/Get co-ordinates of Annotations/src/app/app.ts b/How to/Get co-ordinates of Annotations/src/app/app.ts