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

…Bounds

How to/Add Rectangle Annotations Using Search Text Bounds/PDFViewerSample/PDFViewerSample/Pages/Index.cshtml

@@ -0,0 +1,58 @@
+@page "{handler?}"
+@model IndexModel
+@{
+    ViewData["Title"] = "Home page";
+}
+<div class="text-center">
+    <!-- Control buttons for PDF Search functionality -->
+    <div style="margin-top: 20px;">
+        <button onclick="handleSearch()">Search PDF</button>
+        <button onclick="handleSearchNext()">Search Next</button>
+        <button onclick="handleCancelSearch()">Cancel Search</button>
+    </div>
+    <ejs-pdfviewer id="pdfviewer" style="height:600px"
+                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
+                   resourceUrl="https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib"
+                   textSearchHighlight="handleTextSearchHighlight">
+    </ejs-pdfviewer>
+</div>
+<script type="text/javascript">
+
+    // Function to get the PDF Viewer instance
+    function getPdfViewerInstance() {
+        return document.getElementById('pdfviewer').ej2_instances[0];
+    }
+
+    // Initiates a search for the term 'PDF' in the document
+    function handleSearch() {
+        const pdfViewer = getPdfViewerInstance();
+        pdfViewer.textSearchModule.searchText('PDF', false);
+    }
+
+    // Searches for the next occurrence of the term
+    function handleSearchNext() {
+        const pdfViewer = getPdfViewerInstance();
+        pdfViewer.textSearchModule.searchNext();
+    }
+
+    // Cancels the current text search operation
+    function handleCancelSearch() {
+        const pdfViewer = getPdfViewerInstance();
+        pdfViewer.textSearchModule.cancelTextSearch();
+    }
+
+
+    // Event handler for annotation addition
+    // Adds a rectangle annotation around highlighted text
+    function handleTextSearchHighlight(args) {
+        console.log(args);   // Log details of the added annotation around highlighted text
+        const pdfViewer = getPdfViewerInstance();
+        const bounds = args.bounds;
+        pdfViewer.annotationModule.addAnnotation('Rectangle', {
+            pageNumber: args.pageNumber,
+            offset: { x: bounds.left, y: bounds.top },
+            width: bounds.width,
+            height: bounds.height,
+        });
+    }
+</script>