diff --git a/Annotations/Import and export annotations/package.json b/Annotations/Import and export annotations/package.json index 1239cdb..39e07bb 100644 --- a/Annotations/Import and export annotations/package.json +++ b/Annotations/Import and export annotations/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@syncfusion/ej2-react-pdfviewer": "^20.2.50", + "@syncfusion/ej2-react-pdfviewer": "*", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/Annotations/Import and export annotations/src/index.js b/Annotations/Import and export annotations/src/index.js index 23e6a76..b689f2b 100644 --- a/Annotations/Import and export annotations/src/index.js +++ b/Annotations/Import and export annotations/src/index.js @@ -103,9 +103,11 @@ export class App extends React.Component { {/* Render the PDF Viewer */} {/* Inject the required services */} diff --git a/Custom Toolbar/package.json b/Custom Toolbar/package.json index 0a380cc..58d8782 100644 --- a/Custom Toolbar/package.json +++ b/Custom Toolbar/package.json @@ -3,19 +3,23 @@ "version": "0.1.0", "private": true, "dependencies": { - "@syncfusion/ej2-react-navigations": "*", + "@syncfusion/ej2-base": "*", + "@syncfusion/ej2-pdfviewer": "*", + "@syncfusion/ej2-react-base": "*", "@syncfusion/ej2-react-pdfviewer": "*", + "@syncfusion/ej2-navigations": "*", + "@syncfusion/ej2-react-navigations": "*", + "@syncfusion/ej2-buttons": "*", + "@syncfusion/ej2-react-buttons": "*", + "@syncfusion/ej2-lists": "*", + "@syncfusion/ej2-documenteditor": "*", + "@syncfusion/ej2-splitbuttons": "*", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", - "@types/jest": "^27.5.2", - "@types/node": "^16.18.37", - "@types/react": "^18.2.14", - "@types/react-dom": "^18.2.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", - "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/Custom Toolbar/public/index.html b/Custom Toolbar/public/index.html index 2a2ab78..7c1df22 100644 --- a/Custom Toolbar/public/index.html +++ b/Custom Toolbar/public/index.html @@ -1,45 +1,23 @@ - - + + + Syncfusion React Sample - - + + + + + - - - - - - - - React App - - - -
- - + + +
+ diff --git a/Custom Toolbar/src/App.css b/Custom Toolbar/src/App.css deleted file mode 100644 index 9149d7c..0000000 --- a/Custom Toolbar/src/App.css +++ /dev/null @@ -1,241 +0,0 @@ -@font-face { - font-family: "e-pv-icons"; - font-style: normal; - font-weight: normal; - src: url(data:application/x-font-ttf;charset=utf-8;base64,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Y3VzdG9tLXRvb2xiYXJjdXN0b20tdG9vbGJhclZlcnNpb24gMS4wY3VzdG9tLXRvb2xiYXJGb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBSAGUAZwB1AGwAYQByAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBjAHUAcwB0AG8AbQAtAHQAbwBvAGwAYgBhAHIAVgBlAHIAcwBpAG8AbgAgADEALgAwAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwAIVG9wLWljb24LZG93bi1hcnJvdzIKUFZfWm9vbW91dAlQVl9ab29taW4LUFZfRG93bmxvYWQLUFZfQm9va21hcmsJUFZfU2VhcmNoCFBWX1ByaW50C1BWX1ByZXZpb3VzB1BWX05leHQIUFZfQ2xvc2UMUFZfRml0VG9QYWdlB1BWX09wZW4AAA==) format('truetype'); -} - -.e-pv-file-open-document-icon::before { - font-family: 'e-pv-icons'; - content: '\ed13'; -} - -.e-pv-zoom-out-sample::before { - font-family: 'e-pv-icons'; - content: '\ed03'; -} - -.e-pv-zoom-in-icon::before { - font-family: 'e-pv-icons'; - content: '\ed04'; -} - -.e-pv-text-select-tool-icon::before { - font-family: 'e-icons'; - content: "\ec1d"; - -} - -.e-pv-pan-tool-icon::before { - font-family: 'e-icons'; - content: "\ec1a"; -} - -.e-pv-text-search-icon::before { - content: "\ec0d"; - font-family: "e-icons"; -} - -.e-pv-search-bar { - height: 104px; - width: 348px; -} - -.e-pv-search-icon::before { - content: "\ec0d"; - font-family: "e-icons"; -} -.e-pv-prev-search-icon::before { - content: "\ec06"; - font-family: "e-icons"; -} - -.e-pv-next-search-icon::before { - content: "\ec07"; - font-family: "e-icons"; -} - -.e-pv-search-input { - height: 31px; - width: 244px; -} - -.e-pv-search-close::before { - content: "\ec0f"; - font-family: "e-icons"; -} - -.textsearchInput { - height: 35px; - width: 230px; - background: none; - border: none; - border-bottom: 1px solid #000; -} - -.textsearchInput:focus { - outline: none; - border-bottom: 1.5px solid #e3165b; -} - -.matchCaseInput[type="checkbox"] -{ - width: 20px; - height: 20px; - position: absolute; -} - -.matchCaseInput[type="checkbox"]:checked:after { - background-color: #e3165b; - border-color: rgba(0,0,0,0); - color: #fff; -} - -.matchCaseSpan { - position: absolute; - margin-left: 30px; - margin-top: 3px; - font-weight: normal; -} - -.e-pv-download-document-icon::before { - font-family: 'e-pv-icons'; - content: '\ed05'; -} - -.e-pv-print-document-icon::before { - content: '\ed08'; - font-family: 'e-pv-icons'; -} - -.customtoolbar.e-toolbar { - background-color: #3f51b5; -} -.customtoolbar.e-toolbar .e-toolbar-items{ - background-color: #3f51b5; -} - -.e-pv-annotation-icon::before { - content: "\ec26"; - font-family: "e-icons"; -} - -.e-pv-highlight-icon { - content: "\ec15"; - font-family: "e-icons"; -} -.e-pv-underline-icon { - content: "\ec17"; - font-family: "e-icons"; -} -.e-pv-strikethrough-icon{ - content: "\ec18"; - font-family: "e-icons"; -} - -.e-pv-shape-line-icon::before { - content: "\e668"; - font-family: "e-icons"; -} -.e-pv-shape-arrow-icon::before { - content: "\e669"; - font-family: "e-icons"; -} - -.e-pv-shape-rectangle-icon::before { - content: "\e670"; - font-family: "e-icons"; -} - -.e-pv-shape-circle-icon::before { - content: "\e671"; - font-family: "e-icons"; -} - -.e-pv-shape-pentagon-icon::before { - content: "\e672"; - font-family: "e-icons"; -} - -.e-pv-calibrate-distance-icon::before { - content: "\e673"; - font-family: "e-icons"; -} - -.e-pv-calibrate-perimeter-icon::before { - content: "\e674"; - font-family: "e-icons"; -} - -.e-pv-calibrate-area-icon::before { - content: "\e675"; - font-family: "e-icons"; -} -.e-pv-calibrate-radius-icon::before { - content: "\e676"; - font-family: "e-icons"; -} -.e-pv-calibrate-volume-icon::before { - content: "\e677"; - font-family: "e-icons"; -} - -.e-pv-freetext-icon::before { - content: "\ec0e"; - font-family: "e-icons"; -} - -.e-pv-handwritten-icon::before { - content: "\e737"; - font-family: "e-icons"; -} - -.e-dropdown-popup { - z-index: 3; -} - -.e-btn{ - border: 1px solid; - border-color: #e3165b; - color: #e3165b; -} - -.e-pv-inkannotation-icon::before { - content: "\ec13"; - font-family: "e-icons"; -} - -.e-pv-stamp-icon::before { - font-family: "e-icons"; - content: "\ec28"; -} - -.e-pv-formdesigner-icon::before { - content: "\e90c"; - font-family: "e-icons"; -} - -.e-pv-textbox-icon::before { - content: "\e89f"; - font-family: "e-icons"; -} -.e-pv-password-icon::before { - content: "\e91a"; - font-family: "e-icons"; -} -.e-pv-checkbox-icon::before { - content: "\e90b"; - font-family: "e-icons"; -} -.e-pv-radiobutton-icon::before { - content: "\e90f"; - font-family: "e-icons"; -} -.e-pv-dropdown-icon::before { - content: "\e90e"; - font-family: "e-icons"; -} -.e-pv-listbox-icon::before { - content: "\e89e"; - font-family: "e-icons"; -} \ No newline at end of file diff --git a/Custom Toolbar/src/App.test.tsx b/Custom Toolbar/src/App.test.tsx deleted file mode 100644 index 2a68616..0000000 --- a/Custom Toolbar/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/Custom Toolbar/src/App.tsx b/Custom Toolbar/src/App.tsx deleted file mode 100644 index 998179e..0000000 --- a/Custom Toolbar/src/App.tsx +++ /dev/null @@ -1,769 +0,0 @@ -import React from 'react'; -import './App.css'; -import {PdfViewerComponent, Navigation, Magnification, TextSelection, TextSearch, Print, Annotation, DynamicStampItem, SignStampItem, StandardBusinessStampItem, FormDesigner, FormFields} from '@syncfusion/ej2-react-pdfviewer'; -import {ToolbarComponent, ItemsDirective, ItemDirective, ClickEventArgs, MenuComponent} from '@syncfusion/ej2-react-navigations'; -PdfViewerComponent.Inject(Navigation, Magnification, TextSelection, TextSearch, Print, Annotation, FormDesigner, FormFields); - -function App() { - let viewer: PdfViewerComponent ; - let matchCase: boolean ; - const data = [ - { - iconCss: 'e-pv-stamp-icon', - items: [ - { - text: 'Dynamic', - items: [ - { text: 'Revised', id: 'Dynamic' }, - { text: 'Reviewed', id: 'Dynamic' }, - { text: 'Received', id: 'Dynamic' }, - { text: 'Confidential', id: 'Dynamic' }, - { text: 'Approved', id: 'Dynamic' }, - { text: 'Not Approved', id: 'Dynamic' }, - ], - }, - { - text: 'Sign Here', - items: [ - { text: 'Witness' , id: 'Sign Here' }, - { text: 'Initial Here', id: 'Sign Here' }, - { text: 'Sign Here', id: 'Sign Here' }, - { text: 'Accepted', id: 'Sign Here'}, - { text: 'Rejected', id: 'Sign Here' }], - }, - { - text: 'Standard Business', - items: [ - { text: 'Approved' , id: 'Standard Business' }, - { text: 'Not Approved', id: 'Standard Business' }, - { text: 'Draft', id: 'Standard Business' }, - { text: 'Final', id: 'Standard Business'}, - { text: 'Completed', id: 'Standard Business' }, - { text: 'Confidential' , id: 'Standard Business' }, - { text: 'For Public Release', id: 'Standard Business' }, - { text: 'Not For Public Release', id: 'Standard Business' }, - { text: 'For Comment', id: 'Standard Business'}, - { text: 'Void', id: 'Standard Business' }, - { text: 'Preliminary Results' , id: 'Standard Business' }, - { text: 'Information Only', id: 'Standard Business' } - ], - }, - ], - }, -]; - - function currentPageNumberTemplate() { - return (
); - } - - function onChangeCurrentPageNumber(e: any) { - if(e.key === 'Enter') { - viewer.navigation.goToPage(parseInt(e.target.value)); - } - } - - function TotalPageNumbertemplate() { - return (
of 0
); - } - - function zoomFactorTemplate() { - return( -
- -
) - } - - function onZoomChanged(e: any) { - let zoomFactor : any = e.target.value; - if(zoomFactor === 'Fit Page') - viewer.magnification.fitToPage(); - else if(zoomFactor === 'Fit Width') - viewer.magnification.fitToWidth(); - else - viewer.magnification.zoomTo(parseFloat(zoomFactor)); - - } - - function fileNameTemplate() { - return (
); - } - - function stampTemplate() { - return () - } - - function onItemSelect(args: any) { - var stampId = args.element.id; - var stampText = args.element.innerText; - if(stampId === 'Dynamic' && stampText != null) { - if(stampText === 'Revised') - { - viewer.annotation.setAnnotationMode('Stamp',DynamicStampItem.Revised); - } - else if(stampText == "Reviewed") - { - viewer.annotation.setAnnotationMode('Stamp', DynamicStampItem.Reviewed); - } - else if(stampText == "Received") - { - viewer.annotation.setAnnotationMode('Stamp', DynamicStampItem.Received); - } - else if(stampText == "Confidential") - { - viewer.annotation.setAnnotationMode('Stamp', DynamicStampItem.Confidential); - } - else if(stampText == "Approved") - { - viewer.annotation.setAnnotationMode('Stamp', DynamicStampItem.Approved); - } - else if(stampText == "NotApproved") - { - viewer.annotation.setAnnotationMode('Stamp', DynamicStampItem.NotApproved); - } - } - if(stampId === 'Sign Here' && stampText != null) { - if(stampText === 'Witness') - { - viewer.annotation.setAnnotationMode('Stamp', undefined , SignStampItem.Witness); - } - else if(stampText == "Initial Here") - { - viewer.annotation.setAnnotationMode('Stamp', undefined, SignStampItem.InitialHere); - } - else if(stampText == "Sign Here") - { - viewer.annotation.setAnnotationMode('Stamp', undefined, SignStampItem.SignHere); - } - else if(stampText == "Accepted") - { - viewer.annotation.setAnnotationMode('Stamp', undefined, SignStampItem.Accepted); - } - else if(stampText == "Rejected") - { - viewer.annotation.setAnnotationMode('Stamp', undefined, SignStampItem.Rejected); - } - } - if(stampId === 'Standard Business' && stampText != null) { - if(stampText === 'Approved') - { - viewer.annotation.setAnnotationMode('Stamp', undefined, undefined, StandardBusinessStampItem.Approved); - } - else if(stampText == "Not Approved") - { - viewer.annotation.setAnnotationMode('Stamp', undefined,undefined, StandardBusinessStampItem.NotApproved); - } - else if(stampText == "Draft") - { - viewer.annotation.setAnnotationMode('Stamp', undefined,undefined, StandardBusinessStampItem.Draft); - } - else if(stampText == "Final") - { - viewer.annotation.setAnnotationMode('Stamp', undefined,undefined, StandardBusinessStampItem.Final); - } - else if(stampText == "Completed") - { - viewer.annotation.setAnnotationMode('Stamp', undefined,undefined, StandardBusinessStampItem.Completed); - } - else if(stampText == "Confidential") - { - viewer.annotation.setAnnotationMode('Stamp', undefined,undefined, StandardBusinessStampItem.Confidential); - } - else if(stampText == "For Public Release") - { - viewer.annotation.setAnnotationMode('Stamp', undefined,undefined, StandardBusinessStampItem.ForPublicRelease); - } - else if(stampText == "Not For Public Release") - { - viewer.annotation.setAnnotationMode('Stamp', undefined,undefined, StandardBusinessStampItem.NotForPublicRelease); - } - else if(stampText == "For Comment") - { - viewer.annotation.setAnnotationMode('Stamp', undefined,undefined, StandardBusinessStampItem.ForComment); - } - else if(stampText == "Void") - { - viewer.annotation.setAnnotationMode('Stamp', undefined,undefined, StandardBusinessStampItem.Void); - } - else if(stampText == "Preliminary Results") - { - viewer.annotation.setAnnotationMode('Stamp', undefined,undefined, StandardBusinessStampItem.PreliminaryResults); - } - else if(stampText == "Information Only") - { - viewer.annotation.setAnnotationMode('Stamp', undefined,undefined, StandardBusinessStampItem.InformationOnly); - } - } - } - - return ( -
-
- - - - - - - -
-
- - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - -
-
-
-
    -
  • - -
    • -
  • -
  • - -
    • -
-
-
-
- -
- { viewer = scope; }} serviceUrl='https://localhost:44347/pdfviewer' - documentPath="PDF_Succinctly.pdf" style={{height:'640px'}} - enableToolbar={false} documentLoad={onDocumentLoaded} pageChange={onPageChanged}> - - -
- ); - - function onsignatureCilck(event : any) { - let signatureText = event.target.innerText; - let editAnnotationToolbar : HTMLElement = document.getElementById('editAnnotationToolbar') as HTMLElement; - if(editAnnotationToolbar.style.display === 'block') { - if(signatureText === 'ADD SIGNATURE') { - viewer.annotation.setAnnotationMode('HandWrittenSignature'); - } - else if(signatureText === 'ADD INITIAL') { - viewer.annotation.setAnnotationMode('Initial'); - } - } - - let formFieldToolbar : HTMLElement = document.getElementById('formFieldToolbar') as HTMLElement; - if(formFieldToolbar.style.display === 'block') { - if(signatureText === 'ADD SIGNATURE') { - viewer.formDesignerModule.setFormFieldMode('SignatureField'); - } - else if(signatureText === 'ADD INITIAL') { - viewer.formDesignerModule.setFormFieldMode('InitialField'); - } - } - } - - function onCheckBoxChanged(event : any) { - matchCase = event.target.checked; - } - - function nextTextSearch() { - viewer.textSearchModule.searchNext(); - } - - function previousTextSearch() { - viewer.textSearchModule.searchPrevious(); - } - - function initiateTextSearch() { - let inputElement: HTMLInputElement = document.getElementById('search_input') as HTMLInputElement; - viewer.textSearchModule.searchText(inputElement.value, matchCase); - } - - function onPageChanged() { - let currentPageNumber = viewer.currentPageNumber; - let inputElement: HTMLInputElement = document.getElementById('currentPage') as HTMLInputElement; - inputElement.value = currentPageNumber.toString(); - } - - function onDocumentLoaded() { - let pageCount : number = viewer.pageCount; - let totalPageElement: HTMLInputElement = document.getElementById('totalPage') as HTMLInputElement; - totalPageElement.textContent = 'of ' + pageCount; - - let inputElement: HTMLInputElement = document.getElementById('currentPage') as HTMLInputElement; - inputElement.value = "1"; - - let fileName : string= viewer.fileName; - let fileNameElement: HTMLInputElement = document.getElementById('documentFileName') as HTMLInputElement; - fileNameElement.textContent = fileName; - } - - function clickHandler(args: ClickEventArgs) { - switch (args.item.id){ - case 'file_Open': - { - let fileUpload = document.getElementById('fileUpload') as HTMLInputElement; - fileUpload.click(); - let editAnnotationToolbarElement : HTMLElement = document.getElementById('editAnnotationToolbar') as HTMLElement; - if(editAnnotationToolbarElement.style.display === "block") - editAnnotationToolbarElement.style.display="none"; - - let textSearchToolbarElement : HTMLElement = document.getElementById('textSearchToolbar') as HTMLElement; - if(textSearchToolbarElement.style.display === "block") - textSearchToolbarElement.style.display="none"; - - let signatureToolbarElement : HTMLElement = document.getElementById('SignatureToolbar') as HTMLElement; - if(signatureToolbarElement.style.display === "block") - signatureToolbarElement.style.display="none"; - - let formFieldToolbarElement : HTMLElement= document.getElementById('formFieldToolbar') as HTMLElement; - if(formFieldToolbarElement.style.display === "block") - { - formFieldToolbarElement.style.display="none"; - viewer.designerMode=false; - } - } - break; - case 'zoom_in': - { - viewer.magnification.zoomIn(); - - let editAnnotationToolbarElement : HTMLElement = document.getElementById('editAnnotationToolbar') as HTMLElement; - if(editAnnotationToolbarElement.style.display === "block") - editAnnotationToolbarElement.style.display="none"; - - let textSearchToolbarElement : HTMLElement = document.getElementById('textSearchToolbar') as HTMLElement; - if(textSearchToolbarElement.style.display === "block") - textSearchToolbarElement.style.display="none"; - - let signatureToolbarElement : HTMLElement = document.getElementById('SignatureToolbar') as HTMLElement; - if(signatureToolbarElement.style.display === "block") - signatureToolbarElement.style.display="none"; - - let formFieldToolbarElement : HTMLElement= document.getElementById('formFieldToolbar') as HTMLElement; - if(formFieldToolbarElement.style.display === "block") - { - formFieldToolbarElement.style.display="none"; - viewer.designerMode=false; - } - } - break; - case 'zoom_out': - { - viewer.magnification.zoomOut(); - let editAnnotationToolbarElement : HTMLElement = document.getElementById('editAnnotationToolbar') as HTMLElement; - if(editAnnotationToolbarElement.style.display === "block") - editAnnotationToolbarElement.style.display="none"; - - let textSearchToolbarElement : HTMLElement = document.getElementById('textSearchToolbar') as HTMLElement; - if(textSearchToolbarElement.style.display === "block") - textSearchToolbarElement.style.display="none"; - - let signatureToolbarElement : HTMLElement = document.getElementById('SignatureToolbar') as HTMLElement; - if(signatureToolbarElement.style.display === "block") - signatureToolbarElement.style.display="none"; - - let formFieldToolbarElement : HTMLElement= document.getElementById('formFieldToolbar') as HTMLElement; - if(formFieldToolbarElement.style.display === "block") - { - formFieldToolbarElement.style.display="none"; - viewer.designerMode=false; - } - } - break; - case 'text_selection_tool': - { - viewer.interactionMode = 'TextSelection'; - let editAnnotationToolbarElement : HTMLElement = document.getElementById('editAnnotationToolbar') as HTMLElement; - if(editAnnotationToolbarElement.style.display === "block") - editAnnotationToolbarElement.style.display="none"; - - let textSearchToolbarElement : HTMLElement = document.getElementById('textSearchToolbar') as HTMLElement; - if(textSearchToolbarElement.style.display === "block") - textSearchToolbarElement.style.display="none"; - - let signatureToolbarElement : HTMLElement = document.getElementById('SignatureToolbar') as HTMLElement; - if(signatureToolbarElement.style.display === "block") - signatureToolbarElement.style.display="none"; - - let formFieldToolbarElement : HTMLElement= document.getElementById('formFieldToolbar') as HTMLElement; - if(formFieldToolbarElement.style.display === "block") - { - formFieldToolbarElement.style.display="none"; - viewer.designerMode=false; - } - } - break; - case 'pan_tool': - { - viewer.interactionMode = 'Pan'; - let editAnnotationToolbarElement : HTMLElement = document.getElementById('editAnnotationToolbar') as HTMLElement; - if(editAnnotationToolbarElement.style.display === "block") - editAnnotationToolbarElement.style.display="none"; - - let textSearchToolbarElement : HTMLElement = document.getElementById('textSearchToolbar') as HTMLElement; - if(textSearchToolbarElement.style.display === "block") - textSearchToolbarElement.style.display="none"; - - let signatureToolbarElement : HTMLElement = document.getElementById('SignatureToolbar') as HTMLElement; - if(signatureToolbarElement.style.display === "block") - signatureToolbarElement.style.display="none"; - - let formFieldToolbarElement : HTMLElement= document.getElementById('formFieldToolbar') as HTMLElement; - if(formFieldToolbarElement.style.display === "block") - { - formFieldToolbarElement.style.display="none"; - viewer.designerMode=false; - } - } - break; - case 'find_text': - { - let editAnnotationToolbarElement : HTMLElement = document.getElementById('editAnnotationToolbar') as HTMLElement; - if(editAnnotationToolbarElement.style.display === "block") - editAnnotationToolbarElement.style.display="none"; - - let signatureToolbarElement : HTMLElement = document.getElementById('SignatureToolbar') as HTMLElement; - if(signatureToolbarElement.style.display === "block") - { - signatureToolbarElement.style.display="none"; - } - - let textSearchToolbarElement : HTMLElement= document.getElementById('textSearchToolbar') as HTMLElement; - if(textSearchToolbarElement.style.display === "block") - textSearchToolbarElement.style.display="none"; - else - textSearchToolbarElement.style.display="block"; - - let formFieldToolbarElement : HTMLElement = document.getElementById('formFieldToolbar') as HTMLElement; - if(formFieldToolbarElement.style.display === "block") - { - formFieldToolbarElement.style.display="none"; - viewer.designerMode=false; - } - break; - } - case 'print': - { - viewer.print.print(); - let editAnnotationToolbarElement : HTMLElement = document.getElementById('editAnnotationToolbar') as HTMLElement; - if(editAnnotationToolbarElement.style.display == "block") - editAnnotationToolbarElement.style.display="none"; - - let textSearchToolbarElement : HTMLElement = document.getElementById('textSearchToolbar') as HTMLElement; - if(textSearchToolbarElement.style.display == "block") - textSearchToolbarElement.style.display="none"; - - let signatureToolbarElement : HTMLElement = document.getElementById('SignatureToolbar') as HTMLElement; - if(signatureToolbarElement.style.display == "block") - signatureToolbarElement.style.display="none"; - - let formFieldToolbarElement : HTMLElement= document.getElementById('formFieldToolbar') as HTMLElement; - if(formFieldToolbarElement.style.display == "block") - { - formFieldToolbarElement.style.display="none"; - viewer.designerMode=false; - } - } - break; - case 'download': - { - let editAnnotationToolbarElement : HTMLElement = document.getElementById('editAnnotationToolbar') as HTMLElement; - if(editAnnotationToolbarElement.style.display == "block") - editAnnotationToolbarElement.style.display="none"; - - let textSearchToolbarElement : HTMLElement = document.getElementById('textSearchToolbar') as HTMLElement; - if(textSearchToolbarElement.style.display == "block") - textSearchToolbarElement.style.display="none"; - - let signatureToolbarElement : HTMLElement = document.getElementById('SignatureToolbar') as HTMLElement; - if(signatureToolbarElement.style.display == "block") - signatureToolbarElement.style.display="none"; - - let formFieldToolbarElement : HTMLElement= document.getElementById('formFieldToolbar') as HTMLElement; - if(formFieldToolbarElement.style.display == "block") - { - formFieldToolbarElement.style.display="none"; - viewer.designerMode=false; - } - viewer.download(); - } - break; - case 'highlight': - viewer.annotationModule.setAnnotationMode('Highlight'); - break; - case 'underline': - viewer.annotationModule.setAnnotationMode('Underline'); - break; - case 'strikethrough': - viewer.annotationModule.setAnnotationMode('Strikethrough'); - break; - case 'edit_annotation': - let formFieldToolbarElement : HTMLInputElement = document.getElementById('formFieldToolbar') as HTMLInputElement; - if(formFieldToolbarElement.style.display === "block") - { - formFieldToolbarElement.style.display="none"; - viewer.designerMode=false; - } - - let textSearchToolbarElement : HTMLElement = document.getElementById('textSearchToolbar') as HTMLElement; - if(textSearchToolbarElement.style.display === "block") - textSearchToolbarElement.style.display="none"; - - let signatureToolbarElement : HTMLElement = document.getElementById('SignatureToolbar') as HTMLElement; - if(signatureToolbarElement.style.display === "block") - { - signatureToolbarElement.style.display="none"; - } - - let editAnnotationToolbar = document.getElementById('editAnnotationToolbar') as HTMLInputElement; - if(formFieldToolbarElement.style.display === "block") - { - editAnnotationToolbar.style.display = 'none'; - } - else - { - editAnnotationToolbar.style.display = 'block'; - } - break; - case 'line': - viewer.annotationModule.setAnnotationMode('Line'); - break; - case 'arrow': - viewer.annotationModule.setAnnotationMode('Arrow'); - break; - case 'rectangle': - viewer.annotationModule.setAnnotationMode('Rectangle'); - break; - case 'circle': - viewer.annotationModule.setAnnotationMode('Circle'); - break; - case 'polygon': - viewer.annotationModule.setAnnotationMode('Polygon'); - break; - case 'calibrate_distance': - viewer.annotationModule.setAnnotationMode('Distance'); - break; - case 'calibrate_perimeter': - viewer.annotation.setAnnotationMode("Perimeter"); - break; - case 'calibrate_area': - viewer.annotation.setAnnotationMode("Area"); - break; - case 'calibrate_radius': - viewer.annotation.setAnnotationMode("Radius"); - break; - case 'calibrate_volume': - viewer.annotation.setAnnotationMode("Volume"); - break; - case 'freeText': - viewer.annotationModule.setAnnotationMode('FreeText'); - break; - case 'signature': - case 'formField_signature': - { - - const element : any = document.querySelector('.e-dropdown-popup'); - - if(args.item.id === "formField_signature") - { - element.style.left ="625px"; - element.style.top ="128px"; - } - else - { - element.style.left ="790px"; - element.style.top ="137px"; - } - - let textSearchToolbarElement : HTMLElement = document.getElementById('textSearchToolbar') as HTMLElement; - if(textSearchToolbarElement.style.display === "block") - { - textSearchToolbarElement.style.display="none"; - } - - let signatureToolbarElement : HTMLElement = document.getElementById('SignatureToolbar') as HTMLElement; - if(signatureToolbarElement.style.display === "block") - { - signatureToolbarElement.style.display="none"; - } - else - { - signatureToolbarElement.style.display="block"; - } - - } - break; - case 'ink': - viewer.annotationModule.setAnnotationMode('Ink'); - break; - case 'textbox': - viewer.formDesignerModule.setFormFieldMode('Textbox'); - break; - case 'password': - viewer.formDesignerModule.setFormFieldMode("Password"); - break; - case 'checkbok': - viewer.formDesignerModule.setFormFieldMode("CheckBox"); - break; - case 'radio_button': - viewer.formDesignerModule.setFormFieldMode("RadioButton"); - break; - case 'drop_down': - viewer.formDesignerModule.setFormFieldMode("DropDown"); - break; - case 'list_box': - viewer.formDesignerModule.setFormFieldMode("ListBox"); - break; - case 'add_form_field': - { - let editAnnotationToolbar = document.getElementById('editAnnotationToolbar') as HTMLInputElement; - if(editAnnotationToolbar.style.display === "block") - { - editAnnotationToolbar.style.display = 'none'; - } - - let signatureToolbarElement : HTMLElement = document.getElementById('SignatureToolbar') as HTMLElement; - if(signatureToolbarElement.style.display === "block") - { - signatureToolbarElement.style.display="none"; - } - - let textSearchToolbarElement : HTMLElement = document.getElementById('textSearchToolbar') as HTMLElement; - if(textSearchToolbarElement.style.display === "block") - { - textSearchToolbarElement.style.display="none"; - } - - let formFieldToolbarElement : HTMLInputElement = document.getElementById('formFieldToolbar') as HTMLInputElement; - if(formFieldToolbarElement.style.display === "block") - { - formFieldToolbarElement.style.display="none"; - viewer.designerMode=false; - } - else - { - formFieldToolbarElement.style.display="block"; - viewer.designerMode=true; - } - } - break; - } - } - - function readFile(e: any) { - let uploadedFile = e.target.files[0]; - let reader = new FileReader(); - reader.readAsDataURL(uploadedFile); - reader.onload = function(evt) - { - let uploadedFileUrl : string = (evt.currentTarget as any).result; - viewer.load(uploadedFileUrl,''); - viewer.downloadFileName = viewer.fileName = uploadedFile.name; - let totalPageElement: HTMLInputElement = document.getElementById('totalPage') as HTMLInputElement; - totalPageElement.textContent = 'of ' + viewer.pageCount; - } - } -} - -export default App; diff --git a/Custom Toolbar/src/index.css b/Custom Toolbar/src/index.css index ec2585e..09c995a 100644 --- a/Custom Toolbar/src/index.css +++ b/Custom Toolbar/src/index.css @@ -1,13 +1,101 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} +/* custom code start*/ +#magnificationToolbarItems { + position: absolute; + bottom: 66px; + display: block; + width: auto; + transform: rotate(90deg); + right: 7.5px; + z-index: 1001; + } + + #magnificationToolbar { + background: transparent; + } + + .e-pv-zoom-out-sample { + 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: 0.5px solid #c8c8c8; + } + + #topToolbar { + top: 0px; + z-index: 1001; + } + + .e-pv-current-page-number { + width: 46px; + height: 28px; + text-align: center; + } + + .material .e-pv-current-page-number { + border-width: 1px; + } + + .e-pv-icons { + font-family: "e-pv-icons"; + font-style: normal; + font-variant: normal; + font-weight: normal; + line-height: 1; + text-transform: none; + } + + .e-pdf-toolbar .e-icons::before { + font-family: 'e-pv-icons'; + } + + .e-pv-icon-search::before { + font-family: 'e-pv-icons'; + font-size: 12px; + } + + .e-pv-download-document-icon::before { + content: '\ed05'; + } + + .e-pv-print-document-icon::before { + content: '\ed08'; + } + + .e-pv-previous-page-navigation-icon::before { + content: '\ed01'; + } + + .e-pv-next-page-navigation-icon::before { + content: '\ed02'; + } + + .e-pv-zoom-out-sample::before { + content: '\ed03'; + } + + .e-pv-zoom-in-icon::before { + content: '\ed04'; + } + + .e-pv-fit-page::before { + content: '\ed12'; + } + .e-pv-open-document-icon::before { + content: '\ed13'; + } + + @font-face { + font-family: "e-pv-icons"; + font-style: normal; + font-weight: normal; + src: url(data:application/x-font-ttf;charset=utf-8;base64,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Y3VzdG9tLXRvb2xiYXJjdXN0b20tdG9vbGJhclZlcnNpb24gMS4wY3VzdG9tLXRvb2xiYXJGb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBSAGUAZwB1AGwAYQByAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBjAHUAcwB0AG8AbQAtAHQAbwBvAGwAYgBhAHIAVgBlAHIAcwBpAG8AbgAgADEALgAwAGMAdQBzAHQAbwBtAC0AdABvAG8AbABiAGEAcgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwAIVG9wLWljb24LZG93bi1hcnJvdzIKUFZfWm9vbW91dAlQVl9ab29taW4LUFZfRG93bmxvYWQLUFZfQm9va21hcmsJUFZfU2VhcmNoCFBWX1ByaW50C1BWX1ByZXZpb3VzB1BWX05leHQIUFZfQ2xvc2UMUFZfRml0VG9QYWdlB1BWX09wZW4AAA==) format('truetype'); + } \ No newline at end of file diff --git a/Custom Toolbar/src/index.js b/Custom Toolbar/src/index.js new file mode 100644 index 0000000..a67e8fc --- /dev/null +++ b/Custom Toolbar/src/index.js @@ -0,0 +1,156 @@ +import { createRoot } from 'react-dom/client'; +import './index.css'; +import * as React from 'react'; +import { PdfViewerComponent, Magnification, Navigation, LinkAnnotation, BookmarkView, + ThumbnailView, Print, TextSelection, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer'; +import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations'; + + +function CustomToolbar() { + let viewer; + let toolbar; + let currentPageNumber = '1'; + let fileName = ''; + function template() { + return (
of 0
); + } + function inputTemplate() { + return (
); + } + return (
+
+
+
+ { toolbar = scope; }} clicked={clickHandler.bind(this)}> + + + + + + + + + + +
+ {/* Render the PDF Viewer */} + { viewer = scope; }} enableToolbar={false} enableNavigationToolbar={false} documentLoad={documentLoaded} pageChange={onPageChange} resourceUrl="https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib" documentPath="https://cdn.syncfusion.com/content/pdf/hive-succinctly.pdf" style={{ 'display': 'block', 'height': '640px' }}> + + + +
+ + + + + + + +
+ +
+
+
); + function onPageChange() { + currentPageNumber = viewer.currentPageNumber.toString(); + let inputElement = document.getElementById('currentPage'); + inputElement.value = currentPageNumber; + updatePageNavigation(); + } + function clickHandler(args) { + switch (args.item.id) { + case 'file_Open': + document.getElementById('fileUpload').click(); + break; + case 'previous_page': + viewer.navigation.goToPreviousPage(); + break; + case 'next_page': + viewer.navigation.goToNextPage(); + break; + case 'print': + viewer.print.print(); + break; + case 'download': + viewer.download(); + break; + case 'fit_to_page': + viewer.magnification.fitToPage(); + break; + case 'zoom_in': + viewer.magnification.zoomIn(); + break; + case 'zoom_out': + viewer.magnification.zoomOut(); + break; + default: + break; + } + } + function documentLoaded() { + var pageCount = document.getElementById('totalPage'); + pageCount.textContent = 'of ' + viewer.pageCount; + updatePageNavigation(); + let inputElement = document.getElementById('currentPage'); + inputElement.addEventListener('click', currentPageClicked.bind(this)); + inputElement.addEventListener('keypress', onCurrentPageBoxKeypress.bind(this)); + inputElement.value = "1"; + } + function updatePageNavigation() { + if (viewer.currentPageNumber === 1) { + toolbar.enableItems(document.getElementById('previous_page').parentElement, false); + toolbar.enableItems(document.getElementById('next_page').parentElement, true); + } + else if (viewer.currentPageNumber === viewer.pageCount) { + toolbar.enableItems(document.getElementById('previous_page').parentElement, true); + toolbar.enableItems(document.getElementById('next_page').parentElement, false); + } + else { + toolbar.enableItems(document.getElementById('previous_page').parentElement, true); + toolbar.enableItems(document.getElementById('next_page').parentElement, true); + } + } + function onCurrentPageBoxKeypress(event) { + let currentPageBox = document.getElementById('currentPage'); + if ((event.which < 48 || event.which > 57) && event.which !== 8 && event.which !== 13) { + event.preventDefault(); + return false; + } + else { + var currentPageNumber = parseInt(currentPageBox.value); + if (event.which === 13) { + if (currentPageNumber > 0 && currentPageNumber <= viewer.pageCount) { + viewer.navigation.goToPage(currentPageNumber); + } + else { + currentPageBox.value = viewer.currentPageNumber.toString(); + } + } + return true; + } + } + function currentPageClicked() { + let currentPage = document.getElementById('currentPage'); + currentPage.select(); + } + function readFile(evt) { + let uploadedFiles = evt.target.files; + let uploadedFile = uploadedFiles[0]; + fileName = uploadedFile.name; + let reader = new FileReader(); + reader.readAsDataURL(uploadedFile); + let uploadedFileName = fileName; + reader.onload = function (e) { + let uploadedFileUrl = e.currentTarget.result; + viewer.load(uploadedFileUrl, null); + viewer.downloadFileName = viewer.fileName = uploadedFileName; + var pageCount = document.getElementById('totalPage'); + pageCount.textContent = 'of ' + viewer.pageCount; + }; + } +} +export default CustomToolbar; + +const root = createRoot(document.getElementById('sample')); +root.render(); \ No newline at end of file diff --git a/Custom Toolbar/src/index.tsx b/Custom Toolbar/src/index.tsx deleted file mode 100644 index 1fee28e..0000000 --- a/Custom Toolbar/src/index.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; -import {registerLicense} from '@syncfusion/ej2-base'; -registerLicense("Mgo+DSMBMAY9C3t2V1hhQlJAfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hSn5Vd0BiXX9ccXRQRGBa") - -const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement -); -root.render( - - - -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/Custom Toolbar/src/react-app-env.d.ts b/Custom Toolbar/src/react-app-env.d.ts deleted file mode 100644 index 6431bc5..0000000 --- a/Custom Toolbar/src/react-app-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// diff --git a/Custom Toolbar/src/reportWebVitals.ts b/Custom Toolbar/src/reportWebVitals.js similarity index 75% rename from Custom Toolbar/src/reportWebVitals.ts rename to Custom Toolbar/src/reportWebVitals.js index 49a2a16..77957db 100644 --- a/Custom Toolbar/src/reportWebVitals.ts +++ b/Custom Toolbar/src/reportWebVitals.js @@ -1,15 +1,13 @@ -import { ReportHandler } from 'web-vitals'; - -const reportWebVitals = (onPerfEntry?: ReportHandler) => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; +const reportWebVitals = onPerfEntry => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/Custom Toolbar/src/setupTests.ts b/Custom Toolbar/src/setupTests.js similarity index 97% rename from Custom Toolbar/src/setupTests.ts rename to Custom Toolbar/src/setupTests.js index 8f2609b..141e479 100644 --- a/Custom Toolbar/src/setupTests.ts +++ b/Custom Toolbar/src/setupTests.js @@ -1,5 +1,5 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; diff --git a/Getting Started - Server-back/.gitignore b/Getting Started - Server-back/.gitignore new file mode 100644 index 0000000..c067634 --- /dev/null +++ b/Getting Started - Server-back/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/Getting Started - Server-back/README.md b/Getting Started - Server-back/README.md new file mode 100644 index 0000000..f616c3e --- /dev/null +++ b/Getting Started - Server-back/README.md @@ -0,0 +1,70 @@ +# Getting Started with Create React App + +This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `npm start` + +Runs the app in the development mode.\ +Open [http://localhost:3000](http://localhost:3000) to view it in your browser. + +The page will reload when you make changes.\ +You may also see any lint errors in the console. + +### `npm test` + +Launches the test runner in the interactive watch mode.\ +See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. + +### `npm run build` + +Builds the app for production to the `build` folder.\ +It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.\ +Your app is ready to be deployed! + +See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. + +### `npm run eject` + +**Note: this is a one-way operation. Once you `eject`, you can't go back!** + +If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. + +You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. + +## Learn More + +You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). + +To learn React, check out the [React documentation](https://reactjs.org/). + +### Code Splitting + +This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) + +### Analyzing the Bundle Size + +This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) + +### Making a Progressive Web App + +This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) + +### Advanced Configuration + +This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) + +### Deployment + +This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) + +### `npm run build` fails to minify + +This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify) diff --git a/Getting Started - Server-back/package.json b/Getting Started - Server-back/package.json new file mode 100644 index 0000000..632d0f0 --- /dev/null +++ b/Getting Started - Server-back/package.json @@ -0,0 +1,39 @@ +{ + "name": "quickstart", + "version": "0.1.0", + "private": true, + "dependencies": { + "@syncfusion/ej2-react-pdfviewer": "*", + "@testing-library/jest-dom": "^5.16.5", + "@testing-library/react": "^13.4.0", + "@testing-library/user-event": "^13.5.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "5.0.1", + "web-vitals": "^2.1.4" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "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/Getting Started/public/favicon.ico b/Getting Started - Server-back/public/favicon.ico similarity index 100% rename from Getting Started/public/favicon.ico rename to Getting Started - Server-back/public/favicon.ico diff --git a/Getting Started - Server-back/public/index.html b/Getting Started - Server-back/public/index.html new file mode 100644 index 0000000..0dd938c --- /dev/null +++ b/Getting Started - Server-back/public/index.html @@ -0,0 +1,15 @@ + + + +Syncfusion React PDF Viewer + + + + + + +
+
Loading....
+
+ + \ No newline at end of file diff --git a/Getting Started/public/logo192.png b/Getting Started - Server-back/public/logo192.png similarity index 100% rename from Getting Started/public/logo192.png rename to Getting Started - Server-back/public/logo192.png diff --git a/Getting Started/public/logo512.png b/Getting Started - Server-back/public/logo512.png similarity index 100% rename from Getting Started/public/logo512.png rename to Getting Started - Server-back/public/logo512.png diff --git a/Getting Started - Server-back/public/manifest.json b/Getting Started - Server-back/public/manifest.json new file mode 100644 index 0000000..2f2be64 --- /dev/null +++ b/Getting Started - Server-back/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/Getting Started - Server-back/public/robots.txt b/Getting Started - Server-back/public/robots.txt new file mode 100644 index 0000000..9dd52a5 --- /dev/null +++ b/Getting Started - Server-back/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/Getting Started - Server-back/src/index.css b/Getting Started - Server-back/src/index.css new file mode 100644 index 0000000..9e44230 --- /dev/null +++ b/Getting Started - Server-back/src/index.css @@ -0,0 +1,8 @@ +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import "../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css"; diff --git a/Getting Started - Server-back/src/index.js b/Getting Started - Server-back/src/index.js new file mode 100644 index 0000000..a497e82 --- /dev/null +++ b/Getting Started - Server-back/src/index.js @@ -0,0 +1,20 @@ +import * as ReactDOM from 'react-dom'; +import * as React from 'react'; +import './index.css'; +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; +export function App() { +return (
+
+ + + + +
+
); +} +const root = ReactDOM.createRoot(document.getElementById('sample')); +root.render(); \ No newline at end of file diff --git a/Getting Started/src/logo.svg b/Getting Started - Server-back/src/logo.svg similarity index 100% rename from Getting Started/src/logo.svg rename to Getting Started - Server-back/src/logo.svg diff --git a/Getting Started - Server-back/src/reportWebVitals.js b/Getting Started - Server-back/src/reportWebVitals.js new file mode 100644 index 0000000..77957db --- /dev/null +++ b/Getting Started - Server-back/src/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = onPerfEntry => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/Getting Started - Server-back/src/setupTests.js b/Getting Started - Server-back/src/setupTests.js new file mode 100644 index 0000000..141e479 --- /dev/null +++ b/Getting Started - Server-back/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; diff --git a/Getting Started/.gitignore b/Getting Started - standalone/.gitignore similarity index 100% rename from Getting Started/.gitignore rename to Getting Started - standalone/.gitignore diff --git a/Getting Started/README.md b/Getting Started - standalone/README.md similarity index 100% rename from Getting Started/README.md rename to Getting Started - standalone/README.md diff --git a/Getting Started/package.json b/Getting Started - standalone/package.json similarity index 94% rename from Getting Started/package.json rename to Getting Started - standalone/package.json index d49a5c2..37c2995 100644 --- a/Getting Started/package.json +++ b/Getting Started - standalone/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@syncfusion/ej2-react-pdfviewer": "^20.3.60", + "@syncfusion/ej2-react-pdfviewer": "*", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/Getting Started - standalone/public/favicon.ico b/Getting Started - standalone/public/favicon.ico new file mode 100644 index 0000000..a11777c Binary files /dev/null and b/Getting Started - standalone/public/favicon.ico differ diff --git a/Getting Started/public/index.html b/Getting Started - standalone/public/index.html similarity index 100% rename from Getting Started/public/index.html rename to Getting Started - standalone/public/index.html diff --git a/Getting Started/public/manifest.json b/Getting Started - standalone/public/manifest.json similarity index 100% rename from Getting Started/public/manifest.json rename to Getting Started - standalone/public/manifest.json diff --git a/Getting Started/public/robots.txt b/Getting Started - standalone/public/robots.txt similarity index 100% rename from Getting Started/public/robots.txt rename to Getting Started - standalone/public/robots.txt diff --git a/Getting Started/src/index.css b/Getting Started - standalone/src/index.css similarity index 100% rename from Getting Started/src/index.css rename to Getting Started - standalone/src/index.css diff --git a/Getting Started/src/index.js b/Getting Started - standalone/src/index.js similarity index 72% rename from Getting Started/src/index.js rename to Getting Started - standalone/src/index.js index 517c1fc..e034451 100644 --- a/Getting Started/src/index.js +++ b/Getting Started - standalone/src/index.js @@ -5,7 +5,12 @@ import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, export function App() { return (
- + +
diff --git a/Getting Started - standalone/src/logo.svg b/Getting Started - standalone/src/logo.svg new file mode 100644 index 0000000..9dfc1c0 --- /dev/null +++ b/Getting Started - standalone/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Getting Started/src/reportWebVitals.js b/Getting Started - standalone/src/reportWebVitals.js similarity index 100% rename from Getting Started/src/reportWebVitals.js rename to Getting Started - standalone/src/reportWebVitals.js diff --git a/Getting Started/src/setupTests.js b/Getting Started - standalone/src/setupTests.js similarity index 100% rename from Getting Started/src/setupTests.js rename to Getting Started - standalone/src/setupTests.js diff --git a/How to/Get hash id from storage/package.json b/How to/Get hash id from storage/package.json index 1239cdb..b06a693 100644 --- a/How to/Get hash id from storage/package.json +++ b/How to/Get hash id from storage/package.json @@ -3,7 +3,17 @@ "version": "0.1.0", "private": true, "dependencies": { - "@syncfusion/ej2-react-pdfviewer": "^20.2.50", + "@syncfusion/ej2-base": "*", + "@syncfusion/ej2-pdfviewer": "*", + "@syncfusion/ej2-react-base": "*", + "@syncfusion/ej2-react-pdfviewer": "*", + "@syncfusion/ej2-navigations": "*", + "@syncfusion/ej2-react-navigations": "*", + "@syncfusion/ej2-buttons": "*", + "@syncfusion/ej2-react-buttons": "*", + "@syncfusion/ej2-lists": "*", + "@syncfusion/ej2-documenteditor": "*", + "@syncfusion/ej2-splitbuttons": "*", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/How to/Get hash id from storage/public/index.html b/How to/Get hash id from storage/public/index.html index c6d6922..600abd8 100644 --- a/How to/Get hash id from storage/public/index.html +++ b/How to/Get hash id from storage/public/index.html @@ -13,18 +13,6 @@ -
- diff --git a/How to/Get hash id from storage/src/index.js b/How to/Get hash id from storage/src/index.js index b470fcc..f2a01f1 100644 --- a/How to/Get hash id from storage/src/index.js +++ b/How to/Get hash id from storage/src/index.js @@ -1,54 +1,32 @@ +import * as ReactDOM from 'react-dom'; import * as React from 'react'; -import { createRoot } from 'react-dom/client'; -import { - PdfViewerComponent, - Toolbar, - Magnification, - Navigation, - LinkAnnotation, - BookmarkView, - ThumbnailView, - Print, - TextSelection, - Annotation, - TextSearch, - FormFields, - FormDesigner, - Inject } from '@syncfusion/ej2-react-pdfviewer'; -export class App extends React.Component{ - render() { - return ( -
-
- {/* Render the PDF Viewer */} - - {/* Inject the required services */} - - -
-
- ); - } +import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, + ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer'; + +function App() { + function uniqueId() { + var viewer = document.getElementById('container').ej2_instances[0]; + var uniqueId = viewer.viewerBase.documentId + var hashId = window.sessionStorage.getItem(uniqueId+'_hashId'); + //Prints the id in the console window. + console.log(hashId); + } + return (
+
+ {/* Render the PDF Viewer */} + + + + +
+
+ ); } -const root = createRoot(document.getElementById('sample')); +const root = ReactDOM.createRoot(document.getElementById('sample')); root.render(); + diff --git a/Save and Load/Load PDF file from URL/ReactClient/package.json b/Save and Load/Load PDF file from URL/ReactClient/package.json index 4e3a854..632d0f0 100644 --- a/Save and Load/Load PDF file from URL/ReactClient/package.json +++ b/Save and Load/Load PDF file from URL/ReactClient/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@syncfusion/ej2-react-pdfviewer": "^21.2.3", + "@syncfusion/ej2-react-pdfviewer": "*", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/Save and Load/Load PDF file from URL/ReactClient/src/index.js b/Save and Load/Load PDF file from URL/ReactClient/src/index.js index f8f4f4a..eb26ebc 100644 --- a/Save and Load/Load PDF file from URL/ReactClient/src/index.js +++ b/Save and Load/Load PDF file from URL/ReactClient/src/index.js @@ -9,7 +9,7 @@ return (
diff --git a/Save and Load/Load PDF file from base64 string/ReactClient/package.json b/Save and Load/Load PDF file from base64 string/ReactClient/package.json index 4e3a854..632d0f0 100644 --- a/Save and Load/Load PDF file from base64 string/ReactClient/package.json +++ b/Save and Load/Load PDF file from base64 string/ReactClient/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@syncfusion/ej2-react-pdfviewer": "^21.2.3", + "@syncfusion/ej2-react-pdfviewer": "*", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/Save and Load/Save PDF file to server/ReactClient/package.json b/Save and Load/Save PDF file to server/ReactClient/package.json index 4e3a854..632d0f0 100644 --- a/Save and Load/Save PDF file to server/ReactClient/package.json +++ b/Save and Load/Save PDF file to server/ReactClient/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@syncfusion/ej2-react-pdfviewer": "^21.2.3", + "@syncfusion/ej2-react-pdfviewer": "*", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/Save and Load/Save PDF file to server/ReactClient/src/index.js b/Save and Load/Save PDF file to server/ReactClient/src/index.js index 1f52e72..3c3f867 100644 --- a/Save and Load/Save PDF file to server/ReactClient/src/index.js +++ b/Save and Load/Save PDF file to server/ReactClient/src/index.js @@ -8,8 +8,8 @@ return (
diff --git a/Toolbar/How to hide toolbar/package.json b/Toolbar/How to hide toolbar/package.json index d835ce7..37c2995 100644 --- a/Toolbar/How to hide toolbar/package.json +++ b/Toolbar/How to hide toolbar/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@syncfusion/ej2-react-pdfviewer": "^20.2.50", + "@syncfusion/ej2-react-pdfviewer": "*", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/Toolbar/How to hide toolbar/src/index.js b/Toolbar/How to hide toolbar/src/index.js index e46fb6d..3a24ff0 100644 --- a/Toolbar/How to hide toolbar/src/index.js +++ b/Toolbar/How to hide toolbar/src/index.js @@ -1,15 +1,8 @@ import * as React from 'react'; import { createRoot } from 'react-dom/client'; import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer'; -let thumbnail = []; + export class App extends React.Component { - //Event triggers on successful AJAX request - fireAjaxRequestSuccess(event) { - if (event.action === 'Load') { - thumbnail.push(event.data); - console.log(thumbnail); - } - } render() { return (
@@ -17,10 +10,11 @@ export class App extends React.Component { {/* Render the PDF Viewer */}