From ad51f29505dced9f1cca28fc86a14130cac6d23e Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Tue, 23 Sep 2025 13:08:53 +0530 Subject: [PATCH] 983203: Sample on How to Add and Zoom to a Programmatic Annotation Using zoomToRect --- .../package.json | 43 + .../public/index.html | 23 + .../src/index.css | 819 ++++++++++++++++++ .../src/index.js | 124 +++ 4 files changed, 1009 insertions(+) create mode 100644 How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/package.json create mode 100644 How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/public/index.html create mode 100644 How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/src/index.css create mode 100644 How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/src/index.js diff --git a/How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/package.json b/How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/package.json new file mode 100644 index 0000000..e4f7012 --- /dev/null +++ b/How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/package.json @@ -0,0 +1,43 @@ +{ + "name": "gcvprcmf--run", + "version": "0.0.0", + "private": true, + "dependencies": { + "react": "18.1.0", + "react-dom": "18.1.0", + "@syncfusion/ej2-base": "30.2.4", + "@syncfusion/ej2-react-base": "30.2.4", + "@syncfusion/ej2-pdfviewer": "30.2.4", + "@syncfusion/ej2-react-pdfviewer": "30.2.4", + "@syncfusion/ej2-buttons": "30.2.4", + "@syncfusion/ej2-react-buttons": "30.2.4", + "@syncfusion/ej2-react-charts": "30.2.4", + "undefined": "0.1.0", + "@syncfusion/ej2-lists": "30.2.4", + "@syncfusion/ej2-documenteditor": "30.2.4", + "@syncfusion/ej2-splitbuttons": "30.2.4", + "@syncfusion/ej2-navigations": "30.2.4", + "@syncfusion/ej2-react-popups": "30.2.4" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "devDependencies": { + "react-scripts": "latest" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/public/index.html b/How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/public/index.html new file mode 100644 index 0000000..eb7418e --- /dev/null +++ b/How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/public/index.html @@ -0,0 +1,23 @@ + + + + Syncfusion React Sample + + + + + + + + + + + +
+ + diff --git a/How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/src/index.css b/How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/src/index.css new file mode 100644 index 0000000..ff41a99 --- /dev/null +++ b/How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/src/index.css @@ -0,0 +1,819 @@ +#pdfviewer { + height: 640px; +} + +#linear-pdfviewer { + width: fit-content; +} + +#uploader-pdfviewer { + display: none; +} + +.content-wrapper-pdfviewer { + border: 1px dashed #c3c3cc; + position: relative; + text-align: center; + padding: 20px 0 10px; +} + +.e-pv-e-sign.control-section { + margin-top: 0px !important; +} + +#e-pv-e-sign-userMenu .e-input-value { + width: 84% !important; +} + +.e-pv-e-sign-user-dropdown .e-input-group-icon.e-ddl-icon.e-search-icon { + padding: 0px ; +} + +.e-pv-sign-hide-toolbar { + display: none; +} + +.e-pv-sign-show-toolbar { + display: block; +} + +.e-pv-fit-page-icon::before { + content: '\e91b'; + font-family: "e-icons-pv"; +} + +@font-face { + font-family: "e-icons-pv"; + font-style: normal; + font-weight: normal; + src: url(data:application/x-font-ttf;charset=utf-8;base64,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ZWd1bGFyY3VzdG9tLXRvb2xiYXJbMTkwOF1jdXN0b20tdG9vbGJhclsxOTA4XVZlcnNpb24gMS4wY3VzdG9tLXRvb2xiYXJbMTkwOF1Gb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBSAGUAZwB1AGwAYQByAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBjAHUAcwB0AG8AbQAtAHQAbwBvAGwAYgBhAHIAWwAxADkAMAA4AF0AVgBlAHIAcwBpAG8AbgAgADEALgAwAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBbADEAOQAwADgAXQBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwAIVG9wLWljb24LZG93bi1hcnJvdzIKUFZfWm9vbW91dAlQVl9ab29taW4LUFZfRG93bmxvYWQLUFZfQm9va21hcmsJUFZfU2VhcmNoCFBWX1ByaW50C1BWX1ByZXZpb3VzB1BWX05leHQIUFZfQ2xvc2UMUFZfRml0VG9QYWdlB1BWX09wZW4AAA==) format('truetype'); +} + +.e-pv-e-sign-form-field-property { + width: 72px; + height: 72px; + margin: 9px; + border: 1px solid lightgrey !important; + border-radius: 8px; + display: grid; + place-content: center; + font-size: 12px; +} + +#e-pv-e-sign-download { + width: 115px; + height: 32px; + flex-shrink: 0; + border-radius: 16px; + border: 1px solid var(--Color-variables-outline, #79747E); +} + +#e-pv-e-sign-finishbtn { + width: 115px !important; + height: 28px; + padding: 0; + font-size: 12px; + flex-shrink: 0; + border-radius: 16px; +} + +.e-pv-e-sign-user-dropdown .e-input-group:not(.e-float-icon-left):not(.e-float-input).e-input-focus::before, +.e-pv-e-sign-user-dropdown .e-input-group:not(.e-float-icon-left):not(.e-float-input).e-input-focus::after { + width: 0px; +} + +#e-pv-e-sign-user-field { + color: #222933; + font-family: Heebo, open sans, "sans-serif", -apple-system, BlinkMacSystemFont; + border-radius: 4px; + display: flex; + position: relative; + +} + +#e-pv-e-sign-toolbar-user-viewer.e-toolbar .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child { + margin-left: 0px !important; +} + +#e-pv-e-sign-toolbar-user-viewer { + box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 1px 0px rgba(0, 0, 0, 0.30); + z-index: 1111; +} + +.e-pv-e-sign-form-field-property-mob { + border: none !important; + box-shadow: none; +} + +.e-pv-e-sign-toolbar-user-viewer, +.e-pv-e-sign-toolbar-user-viewer-mob { + z-index: 1001; + width: 100% !important; + height: 48px !important; + box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30); +} + +#e-pv-e-sign-defaultSidebar { + height: 640px; + position: absolute; + box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30); +} + +.e-pv-e-sign-user-dropdown> :first-child { + border: none !important; +} + +#magnificationToolbar { + background: transparent; + height: auto; + min-height: 56px; + width: auto; + border: none; + position: absolute; + z-index: 900; + top: calc(100% - 140px); + left: calc(100% - 150px); + transform: rotate(90deg); +} + +div#magnificationToolbar.e-toolbar .e-toolbar-items { + background: transparent; + padding: 2px 3px 2px 2px; +} + +#magnificationToolbar.e-toolbar .e-tbar-btn { + border-radius: 50%; + min-height: 30px; + min-width: 30px; + border: 1px solid #c8c8c8; + transform: rotate(90deg); +} + +#customToolbar { + top: 20px; + z-index: 900; +} + +.e-bookmark-popup { + height: 300px; + max-width: 300px; +} + +.e-text-search-popup { + height: 104px; + max-width: 348px; +} + +.e-custom-search-input { + width: 234px; +} + +.e-text-search-popup .e-footer-content, +.e-bookmark-popup .e-footer-content { + padding: 0; + height: 0; +} + +.search-button, +.search-button:disabled, +.search-button:focus, +.search-button:hover { + background: transparent; + box-shadow: none; +} + +#popup .e-dlg-content { + padding-left: 0; + padding-bottom: 0; +} + +.e-pv-bookmarks { + min-width: 234px; +} + +.e-pv-current-page-number { + width: 46px; + height: 28px; + text-align: center; +} + +.material .e-pv-current-page-number { + border-width: 1px; +} + +.e-btn-icon.e-pv-zoom-out-icon.e-icons { + transform: rotate(90deg); +} + +.flex-container { + display: flex; + justify-content: flex-end; + align-items: center; +} + +.e-pv-flex-container{ + display: flex; + justify-content: flex-end; + align-items: center; +} + +.render-mode-info { + background: none; + border: none; + padding-left: 0px; +} + +.render-mode-info .render-mode-info-icon { + height: 16px; + width: 16px; +} + +.switchLabel { + font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.24px; + text-align: right; + font-size: 14px; + margin-bottom: 3px; +} + +.e-pv-switchLabel{ + font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.24px; + text-align: right; + font-size: 14px; +} + +.render-mode-info .render-mode-info-icon::before { + line-height: normal; +} + +.buttonSwitch { + Width: 40px; + Height: 24px; +} + +.e-pv-buttonSwitch { + Width: 40px; + Height: 24px; +} + +.pdfviewer-property-section { + padding: 20px 15px; +} + +.pdfviewer-contextmenu-checkbox-label { + padding: 10px; +} + +.pdfviewer-control-section { + border-right: 1px solid #D7D7D7; +} + +.e-pv-pdfviewer-control-section { + border-right: 1px solid #D7D7D7; +} + +.pdfviewer-property-container { + padding: 20px 15px; +} + +.pdfviewer-document-list { + + #defaultDialog { + left: 23%; + top: 0% ! important; + } + + #targetElement .dlgbtn { + margin-right: 10px; + } + + @media screen and (min-width: 150px) and (max-width: 480px) { + .control-section { + margin-bottom: 30px; + } + + .control-wrapper { + margin-bottom: 0px; + } + } + + #defaultDialog .form-title { + width: 100%; + text-align: center; + padding: 10px; + font-size: 16px; + font-weight: 500; + color: rgba(0, 0, 0, 0.70); + } + + #defaultDialog .e-error, + #defaultDialog .e-float-text { + font-weight: 500; + } + + #defaultDialog .e-custom-label { + font-size: 14px; + font-weight: 500; + margin-left: 20px; + } + + #defaultDialog #formId { + padding-top: 10px; + border: 1px solid #ccc; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.36); + border-radius: 5px; + background: #f9f9f9; + height: 250px; + overflow-y: scroll; + } + + .material-dark #defaultDialog #formId, + .material3-dark #defaultDialog #formId, + .bootstrap5-dark #defaultDialog #formId { + background: #212529; + } + + .bootstrap-dark #defaultDialog #formId { + background: #1a1a1a; + } + + .fabric-dark #defaultDialog #formId { + background: #201f1f; + } + + .tailwind-dark #defaultDialog #formId { + background: #1f2937; + } + + .fluent-dark #defaultDialog #formId { + background: #111111; + } + + .e-pv-fit-page-icon::before { + content: '\e91b'; + font-family: "e-icons"; + } + + + .material-dark #defaultDialog .form-title, + .material3-dark #defaultDialog .form-title, + .bootstrap-dark #defaultDialog .form-title, + .fabric-dark #defaultDialog .form-title, + .tailwind-dark #defaultDialog .form-title, + .bootstrap5-dark #defaultDialog .form-title, + .fluent-dark #defaultDialog .form-title { + color: rgb(249 249 249); + } + + .highcontrast #defaultDialog form, + .highcontrast #defaultDialog .header { + color: #fff; + background: #000000; + } + + #defaultDialog .header { + color: rgba(0, 0, 0, 0.7); + } + + #defaultDialog .form-horizontal .form-group { + margin-left: 20px; + margin-right: 20px; + margin-bottom: 5px; + } + + #defaultDialog .e-submit-btn { + height: 40px; + width: 150px; + } + + #defaultDialog .e-reset-btn { + height: 40px; + width: 150px; + } + + #defaultDialog .submitRow { + width: 320px; + margin: 0px auto; + height: 100px; + padding-top: 25px; + } + + #defaultDialog #DialogChart { + text-align: center; + } + + #defaultDialog { + max-height: 500px; + } + + .file-name-container { + display: flex; + justify-content: left; + } + + .file-name-content { + display: flex; + align-items: center; + } + + .icon-and-text { + display: flex; + align-items: left; + } + + .file-name-text { + text-align: center; + margin-left: 8px; + margin-top: 5px; + } +} + +/*redaction style*/ +#e-pv-redact-sb-toolbar-secondary .e-input-group { + border: none !important; +} + +#e-pv-redact-sb-panel.control-section .e-appbar { + height: 36px; + font-size: 14px !important; +} + +#e-pv-redact-sb-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn { + flex-direction: column; +} + +#e-pv-redact-sb-toolbar.e-toolbar .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon { + font-size: 18px; + padding: 4px !important; +} + +#e-pv-redact-sb-toolbar { + height: 72px !important; +} + +#e-pv-redact-sb-toolbar .e-toolbar-items { + gap: 5px; +} + +#e-pv-redact-sb-toolbar .e-toolbar-item.e-separator { + height: 48px !important; +} + +#e-pv-redact-sb-toolbar, +#e-pv-redact-sb-toolbar.e-toolbar, +#e-pv-redact-sb-toolbar-secondary { + border-left-width: 1px !important; + border-right-width: 1px !important; +} + +.e-pv-redact-sb-toolbar, +#e-pv-redact-sb-toolbar-secondary { + border-top-width: 1px !important; + border: 0 solid var(--color-sf-border-light); + --color-sf-border-light: #e0e0e0; +} + +.e-pv-current-page-number { + font-size: 12px; +} + +.e-pv-total-page-number { + font-weight: 400; +} + +.e-pv-redact-sb-black-out-container .black-out { + background-color: black; + width: 18px !important; + height: 18px !important; + border: 1px solid white; + border-radius: 3px; + margin: 4px !important; +} + +.e-pv-redact-sb-white-out-container .white-out { + background-color: white; + width: 18px !important; + height: 18px !important; + border: 1px solid black; + border-radius: 3px; + margin: 4px !important; +} + +.e-bigger .e-pv-redact-sb-black-out-container .black-out, +.e-bigger .e-pv-redact-sb-black-out-container .white-out { + position: relative; + top: -4px; +} + +.e-bigger #e-pv-redact-sb-toolbar.e-toolbar .e-toolbar-item.e-pv-redact-sb-black-out-container .e-tbar-btn.e-btn, +.e-bigger #e-pv-redact-sb-toolbar.e-toolbar .e-toolbar-item.e-pv-redact-sb-white-out-container .e-tbar-btn.e-btn { + padding-top: 5px !important; +} + +.e-bigger .e-pv-redact-sb-black-out-container .e-tbar-btn .e-tbar-btn-text, +.e-bigger .e-pv-white-out-container .e-tbar-btn .e-tbar-btn-text { + padding: 2px 4px 7px 4px !important; +} + +/*upload image*/ +#e-pv-redact-sb-dialog.e-dialog #e-pv-redact-sb-defaultfileupload.e-upload-files { + border: none !important; +} + +#e-pv-redact-sb-panel.control-section #file-uploader { + display: flex; + border: 1px dashed #c8c6c4; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 12px; + padding: 16px; + border-radius: 6px; +} + +#e-pv-redact-sb-dialog.e-dialog .e-dlg-header-content { + border-bottom: 1px solid #C4C7C5 !important; + padding: 15px !important; +} + +#e-pv-redact-sb-dialog.e-dialog .e-footer-content { + border-top: 1px solid #C4C7C5 !important; + padding: 10px !important; +} + +#e-pv-redact-sb-dialog.e-dialog .e-dlg-header-content+.e-dlg-content { + padding: 20px !important; +} + +#e-pv-redact-sb-panel.control-section .e-file-select-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +#e-pv-redact-sb-dialog.e-dialog .e-footer-content .e-btn { + background: rgba(0, 0, 0, 0); + border-color: rgba(0, 0, 0, 0); + box-shadow: none; + color: #242424; +} + +#e-pv-redact-sb-defaultfileupload .e-upload-files { + border: none !important; +} + +.e-pv-redact-sb-image-source { + width: 70px; + height: 70px; +} + +.e-pv-redact-sb-image-container { + box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + align-items: center; + padding: 4px; + gap: 5px; + border-radius: 4px; +} + +.e-pv-redact-sb-image-list { + display: flex; + justify-content: center; + padding: 24px 15px; + gap: 35px; +} + +.e-pv-redact-sb-image-container-selected { + border: 1px solid #757575 !important; +} + +.e-pv-redact-sb-image-container:hover { + border: 1px solid #757575; +} + +#e-pv-redact-sb-drop-area-wrap { + display: flex; + border: 1px dashed #c8c6c4; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 12px; + padding: 16px; + border-radius: 6px; +} + +#e-pv-redact-sb-defaultfileupload .e-upload { + border: none; + margin-top: 10px; + width: 100%; + height: 100%; +} + +.e-icons.e-redaction:before { + content: "\e740"; +} + +#e-pv-redact-sb-panel.control-section .e-dlg-overlay { + background: none; + backdrop-filter: blur(2px) !important; +} + +.e-pv-header-panel { + display: flex; + justify-content: space-between; + align-items: center; + position: sticky; + top: 0px; + z-index: 2; + background-color: white; + border-bottom: 1px solid #D7D7D7; + padding-bottom: 5px; + margin-bottom: 16px; +} + +.e-pv-annot-inner-table td { + text-wrap: nowrap; + padding: 12px 12px 0 12px; + width: 50%; +} + +.e-pv-main-panel { + border-left: 1px solid #D7D7D7; + height: 700px; + overflow-y: scroll; + padding-bottom: 0px; +} + +.e-pv-input-item { + margin-top: 0px; +} + +.e-pv-annot-inner-container { + margin-top: 15px; + border: 1px solid rgba(196, 199, 197, 1); + padding: 12px; +} + +.e-pv-annot-inner-table { + width: 100%; + border-collapse: collapse; + table-layout: fixed; +} + +.e-pv-pdfViewer-coordinate-table { + border-spacing: 0px; +} + +.e-pv-pdfViewer-coordinate-table td { + border: 1px solid rgba(196, 199, 197, 1); + font-size: 11px; + text-align: center; + width: auto; + padding: 4px 0px; +} + +.e-pv-property-panel-footer { + padding: 10px 0px 16px 0px; + position: sticky; + bottom: 0; + background-color: white; + z-index: 1; + border-top: 1px solid #D7D7D7; + margin-top: 16px; +} + +.e-pv-annot-button-section { + text-align: center; + display: flex; + justify-content: end; + gap: 12px; + flex-wrap: wrap-reverse; +} + +.e-pv-pdfviewer-input-title .e-pv-check-box-row { + padding: 5px; + margin-top: 16px; +} +.fluent2 .e-pv-pdfviewer-input-title .e-pv-check-box-row, +.fluent2-dark .e-pv-pdfviewer-input-title .e-pv-check-box-row, +.fluent2-highcontrast .e-pv-pdfviewer-input-title .e-pv-check-box-row { + padding: 0; + margin-top: 16px; +} +.e-pv-pdfviewer-input-title { + margin-top: 12px; + font-size: 12px; +} + +.e-pv-table-items { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + gap: 2px; +} + +.e-pv-pdfviewer-table-input-title { + margin-top: 6px; + font-size: 11px; +} + +.e-pv-pdfviewer-text-content { + font-size: 12px; +} + +.e-pv-annot-bounds-list { + border: 1px solid rgba(196, 199, 197, 1); + border-spacing: 0px; +} + +.e-pv-annot-bounds-list td { + font-size: 11px; + text-align: center; + width: auto; + padding: 4px 0px; + border-bottom: 1px solid rgba(196, 199, 197, 1); +} + +.e-pv-reply-container { + display: flex; + align-items: center; + gap: 10px; + justify-content: space-between; + padding: 12px; +} +.e-pv-reply-main-container { + flex-grow: 1; +} +.e-pv-replies { + overflow-y: auto; + max-height: 180px; + padding: 0px !important; +} + +.inner-container { + margin-top: 15px; + border: 1px solid rgba(196, 199, 197, 1); + padding: 12px; +} + +.reply-text { + width: 100%; + font-size: 12px; + word-break: break-word; +} + +.upload-image { + width: 80px; + height: 80px; + margin: 12px; + border-radius: 5px; + border: 1px solid rgba(196, 199, 197, 1); + padding: 4px; +} + +div .file-name { + font-size: 14px; + padding: 0px 5px; + overflow: hidden; + text-overflow: ellipsis; + font-weight: 500; + width: 90px; + white-space: nowrap; +} +.wrapper { + display: flex; + align-items: center; +} + +.fluent-dark .e-pv-property-panel-footer, .fluent-dark .e-pv-header-panel { + background-color: #1B1A19; +} + +.bootstrap5_3-dark .e-pv-property-panel-footer, .bootstrap5_3-dark .e-pv-header-panel{ + background-color: #212529; +} + +.highcontrast .e-pv-property-panel-footer, .highcontrast .e-pv-header-panel { + background-color: #000000; +} + +.fluent2-highcontrast .e-pv-property-panel-footer, .fluent2-highcontrast .e-pv-header-panel, +.material3-dark .e-pv-property-panel-footer, .material3-dark .e-pv-header-panel, +.fluent2-dark .e-pv-property-panel-footer, .fluent2-dark .e-pv-header-panel { + background-color: #1C1B1F; +} + +.tailwind3-dark .e-pv-property-panel-footer, .tailwind3-dark .e-pv-header-panel { + background: #111827; +} + +.tailwind3-dark .e-pv-header-panel #e-pv-refresh-button-icon .e-btn-icon, +.tailwind3 .e-pv-header-panel #e-pv-refresh-button-icon .e-btn-icon{ + font-size: 18px; +} \ No newline at end of file diff --git a/How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/src/index.js b/How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/src/index.js new file mode 100644 index 0000000..179185d --- /dev/null +++ b/How to/Add and Zoom to a Programmatic Annotation Using zoomToRect/src/index.js @@ -0,0 +1,124 @@ +import { createRoot } from 'react-dom/client'; +import './index.css'; +import * as React from 'react'; +import { + PdfViewerComponent, + Toolbar, + Magnification, + Navigation, + LinkAnnotation, + BookmarkView, + ThumbnailView, + Print, + TextSelection, + TextSearch, + Annotation, + FormFields, + FormDesigner, + PageOrganizer, + Inject, +} from '@syncfusion/ej2-react-pdfviewer'; + +function Default() { + let viewer; + const addAnnotation = () => { + if (viewer) { + var targetPage = 3; + const pageSize = viewer.getPageInfo(targetPage); + + //convert the points to pixels + var pageHeight = (pageSize.height * 96) / 72; + var pageWidth = (pageSize.width * 96) / 72; + + var left = bounding_box['Left'] * pageWidth; + var top = bounding_box['Top'] * pageHeight; + var width = bounding_box['Width'] * pageWidth; + var height = bounding_box['Height'] * pageHeight; + var bounds = { x: left, y: top, width: width, height: height }; + + //add annotation programmatically + viewer.annotation.addAnnotation('Rectangle', { + offset: { x: bounds.x, y: bounds.y }, + pageNumber: targetPage, + width: bounds.width, + height: bounds.height, + }); + // Navigate to the page + viewer.navigation.goToPage(targetPage); + + var annotationBounds = viewer.annotationCollection[viewer.annotationCollection.length - 1].bounds; + var pageNumber = viewer.annotationCollection[viewer.annotationCollection.length - 1].pageNumber; + var pagePoint = { x: annotationBounds.left, y: annotationBounds.top }; + + //convert the page point to client point + var clientPoint = viewer.convertPagePointToClientPoint( + pagePoint, + parseInt(pageNumber) + 1 + ); + + //convert the client points to DOM rect + var rectangle = new DOMRect( + clientPoint.x, + clientPoint.y, + annotationBounds.width, + annotationBounds.height + ); + + viewer.zoomToRect(rectangle); + } + }; + + var bounding_box = { + Width: 0.11749080568552017, + + Height: 0.0258219875395298, + + Left: 0.06182936578989029, + + Top: 0.19671368598937988, + }; + + return ( +
+
+ {/* Add Annotation Button */} + + {/* Render the PDF Viewer */} + { + viewer = scope; + }} + id="container" + documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf" + resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib" + style={{ height: '640px' }} + > + + +
+
+ ); +} + +export default Default; + +const root = createRoot(document.getElementById('sample')); +root.render();