From 26d822f83cc13d377666413981245ab793a577e4 Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Mon, 16 Dec 2024 13:09:38 +0530 Subject: [PATCH] 834567: Sample on How to Add Rectangle Annotations Using Search Text Bounds --- .../.gitignore | 0 .../README.md | 0 .../e2e/index.spec.js | 0 .../e2e/protractor.conf.js | 0 .../gulpfile.js | 0 .../license | 0 .../package.json | 0 .../src/app/app.ts | 49 ++++++++++++++++++ .../src/index.html | 3 ++ .../src/resources/favicon.ico | Bin .../src/styles/styles.css | 0 .../tsconfig.json | 0 .../webpack.config.js | 0 .../src/app/app.ts | 17 ------ 14 files changed, 52 insertions(+), 17 deletions(-) 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}/e2e/index.spec.js (100%) rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/e2e/protractor.conf.js (100%) rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/gulpfile.js (100%) rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/license (100%) rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/package.json (100%) create mode 100644 How to/Add Rectangle Annotations Using Search Text Bounds/src/app/app.ts rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/src/index.html (79%) rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/src/resources/favicon.ico (100%) rename How to/{Get co-ordinates of Annotations => Add Rectangle Annotations Using Search Text Bounds}/src/styles/styles.css (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}/webpack.config.js (100%) delete mode 100644 How to/Get co-ordinates of Annotations/src/app/app.ts 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/e2e/index.spec.js b/How to/Add Rectangle Annotations Using Search Text Bounds/e2e/index.spec.js similarity index 100% rename from How to/Get co-ordinates of Annotations/e2e/index.spec.js rename to How to/Add Rectangle Annotations Using Search Text Bounds/e2e/index.spec.js diff --git a/How to/Get co-ordinates of Annotations/e2e/protractor.conf.js b/How to/Add Rectangle Annotations Using Search Text Bounds/e2e/protractor.conf.js similarity index 100% rename from How to/Get co-ordinates of Annotations/e2e/protractor.conf.js rename to How to/Add Rectangle Annotations Using Search Text Bounds/e2e/protractor.conf.js diff --git a/How to/Get co-ordinates of Annotations/gulpfile.js b/How to/Add Rectangle Annotations Using Search Text Bounds/gulpfile.js similarity index 100% rename from How to/Get co-ordinates of Annotations/gulpfile.js rename to How to/Add Rectangle Annotations Using Search Text Bounds/gulpfile.js diff --git a/How to/Get co-ordinates of Annotations/license b/How to/Add Rectangle Annotations Using Search Text Bounds/license similarity index 100% rename from How to/Get co-ordinates of Annotations/license rename to How to/Add Rectangle Annotations Using Search Text Bounds/license 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/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 new file mode 100644 index 0000000..ace958d --- /dev/null +++ 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/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 79% 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 index 5d1a94b..4b454c1 100644 --- a/How to/Get co-ordinates of Annotations/src/index.html +++ b/How to/Add Rectangle Annotations Using Search Text Bounds/src/index.html @@ -12,6 +12,9 @@ + + +
diff --git a/How to/Get co-ordinates of Annotations/src/resources/favicon.ico b/How to/Add Rectangle Annotations Using Search Text Bounds/src/resources/favicon.ico similarity index 100% rename from How to/Get co-ordinates of Annotations/src/resources/favicon.ico rename to How to/Add Rectangle Annotations Using Search Text Bounds/src/resources/favicon.ico diff --git a/How to/Get co-ordinates of Annotations/src/styles/styles.css b/How to/Add Rectangle Annotations Using Search Text Bounds/src/styles/styles.css similarity index 100% rename from How to/Get co-ordinates of Annotations/src/styles/styles.css rename to How to/Add Rectangle Annotations Using Search Text Bounds/src/styles/styles.css 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/webpack.config.js b/How to/Add Rectangle Annotations Using Search Text Bounds/webpack.config.js similarity index 100% rename from How to/Get co-ordinates of Annotations/webpack.config.js rename to How to/Add Rectangle Annotations Using 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 deleted file mode 100644 index b8076d2..0000000 --- a/How to/Get co-ordinates of Annotations/src/app/app.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { pdf } from '@syncfusion/ej2'; -import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } 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/27.2.2/dist/ej2-pdfviewer-lib' -}); - -// Append the PdfViewer to the DOM -pdfviewer.appendTo('#PdfViewer'); - -pdfviewer.annotationAdd = function (args: object) { - console.log(args); - }; \ No newline at end of file