834573: Library Bounds to Viewer Bounds Sample

How to/Library Bounds to Viewer Bounds/.gitignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

How to/Library Bounds to Viewer Bounds/README.md

@@ -0,0 +1,75 @@
+# Essential JS 2 QuickStart
+
+This project is a skeleton application used to create [Essential JS 2](https://www.syncfusion.com/products/essential-js2) web application.
+
+>This application uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher.
+
+## Getting Started
+
+To get started you need to clone the `ej2-quickstart` repository and navigate to `ej2-quickstart` location.
+
+```
+git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
+cd quickstart
+```
+
+## Installing
+
+We can get all the Essential JS 2 components in a single npm package [`ej2`](https://www.npmjs.com/package/@syncfusion/ej2).
+
+We already configure the required packages in the `package.json` file.
+
+You can run the below command to install all dependent packages related to this seed project.
+
+```
+npm install
+```
+
+## Testing
+
+This application is preconfigured with End-to-End testing and the test case is written in Jasmine.
+
+We run the test scripts with [Protractor](http://www.protractortest.org/#/) end-to-end test runner. The test case file can be found in the `e2e` folder.
+
+Protractor can interact with our web application and verify the test scripts.
+
+We have to install WebDriver and also need to ensure it is updated. Open a separate terminal and run the below npm script.
+
+```
+npm run update-webdriver
+```
+
+Open another terminal and run the below npm script. It will start web server to serve our application.
+
+```
+npm run serve
+```
+
+Once the web server is up and running, we can run the end-to-end tests using the below npm script
+
+```
+npm run test
+```
+
+> **Note:** Since Protractor is using the Selenium Standalone Server, the Java Development Kit (JDK) need to be installed in your local machine.
+
+If JDK is not installed in your local machine, you can download it from [here](http://www.oracle.com/technetwork/java/javase/downloads/index.html).
+
+## Running
+
+The application is configured with [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver), so it will serve the web application in your default browser.
+
+We have used [Webpack](https://github.com/webpack/webpack) for module loading.
+
+You can use the below npm script to run the web application.
+
+```
+npm run start
+```
+
+## Resources
+
+You can also refer the below resources to know more details about Essential JS 2 components.
+
+* [Pure JS Demos](http://ej2.syncfusion.com/demos/)
+* [Pure JS Documentation](http://ej2.syncfusion.com/documentation/)

How to/Library Bounds to Viewer Bounds/e2e/protractor.conf.js

@@ -0,0 +1,21 @@
+exports.config = {
+
+    allScriptsTimeout: 11000,
+
+    capabilities: {
+        'browserName': 'chrome'
+    },
+
+    framework: 'jasmine',
+
+    jasmineNodeOpts: {
+        defaultTimeoutInterval: 10000
+    },
+    directConnect: true,
+
+    onPrepare: function() {
+        browser.waitForAngularEnabled(false);
+    },
+
+    specs: ['./*.spec.js']
+};

How to/Library Bounds to Viewer Bounds/gulpfile.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var gulp = require('gulp');
+
+/** 
+ * Compile TypeScript to JS
+ */
+gulp.task('compile', function (done) {
+    var webpack = require('webpack');
+    var webpackStream = require('webpack-stream');
+    gulp.src(['./src/app/app.ts']).pipe(webpackStream({
+        config: require('./webpack.config.js')
+    }, webpack))
+        .pipe(gulp.dest('./dist'))
+        .on('end', function () {
+            done();
+        });
+});
+
+/**
+ * Testing spec files
+ */
+var protractor = require('gulp-protractor').protractor;
+var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
+var webdriver_update = require('gulp-protractor').webdriver_update_specific;
+
+gulp.task('e2e-serve', webdriver_standalone);
+
+gulp.task('e2e-webdriver-update', webdriver_update({
+    webdriverManagerArgs: ['--ie', '--edge']
+}));
+
+gulp.task('e2e-test', gulp.series('compile', function (done) {
+    var browserSync = require('browser-sync');
+    var bs = browserSync.create('Essential JS 2');
+    var options = {
+        server: {
+            baseDir: [
+                './dist/',
+            ],
+            directory: true
+        },
+        ui: false,
+        open: false,
+        notify: false
+    };
+    bs.init(options, function () {
+        gulp.src(['./spec/**/*.spec.js'])
+            .pipe(protractor({
+                configFile: 'e2e/protractor.conf.js'
+            }))
+            .on('error', function (e) {
+                console.error('Error: ' + e.message);
+                done();
+                process.exit(1);
+            })
+            .on('end', function () {
+                done();
+                process.exit(0);
+            });
+    });
+}));

How to/Library Bounds to Viewer Bounds/license

@@ -0,0 +1,10 @@
+Essential JS 2 library is available under the Syncfusion Essential Studio program,  and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
+
+To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions. 
+
+Customers who do not qualify for the community license can contact [email protected] for commercial licensing options.
+
+Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions. 
+
+The Syncfusion license that contains the terms and conditions can be found at 
+https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

How to/Library Bounds to Viewer Bounds/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "ej2-quickstart",
+  "version": "0.0.1",
+  "description": "Essential JS 2 typescript quick start application",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-quickstart.git"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode production",
+    "serve": "gulp e2e-serve",
+    "test": "gulp e2e-test",
+    "update-webdriver": "gulp e2e-webdriver-update"
+  },
+  "devDependencies": {
+    "ajv": "^8.11.2",
+    "browser-sync": "^2.18.12",
+    "gulp": "*",
+    "typescript": "*",
+    "gulp-protractor": "*",
+    "gulp-typescript": "*",
+    "jasmine": "^2.6.0",
+    "css-loader": "^6.7.2",
+    "ts-loader": "^9.4.1",
+    "mini-css-extract-plugin": "^2.7.0",
+    "html-webpack-plugin": "^5.5.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-stream": "^7.0.0"
+  },
+  "dependencies": {
+    "@syncfusion/ej2": "*"
+  }
+}

How to/Library Bounds to Viewer Bounds/src/app/app.ts

@@ -0,0 +1,102 @@
+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',
+    serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
+});
+
+// Append the PdfViewer to the DOM
+pdfviewer.appendTo('#PdfViewer');
+
+const pageSizes: Array<{ Height: number }> = [];
+
+// Event for AJAX request success
+pdfviewer.ajaxRequestSuccess = (args: { action: string; data: { pageSizes: Array<{ Height: number }> } }) => {
+    if (args.action === 'Load') {
+        const objLength = Object.keys(args.data.pageSizes).length;
+        for (let x = 0; x < objLength; x++) {
+            const pageSize = args.data.pageSizes[x];
+            pageSizes.push(pageSize);
+        }
+    }
+};
+
+// Event for export success
+pdfviewer.exportSuccess = (args: { exportData: string }) => {
+    console.log(args.exportData);
+    const blobURL = args.exportData;
+
+    // Converting the exported blob into object
+    convertBlobURLToObject(blobURL)
+        .then((objectData) => {
+            console.log(objectData);
+            const datas = objectData;
+            const shapeAnnotationData = datas['pdfAnnotation'][0]['shapeAnnotation'];
+
+            shapeAnnotationData.forEach((data: any) => {
+                let rect: { x: number; y: number; width: number; height: number } | null = null;
+
+                if (data && data.rect && parseInt(data.rect.width)) {
+                    const pageHeight = pageSizes[parseInt(data.page)].Height;
+
+                    // Converting PDF Library values into PDF Viewer values. 
+                    rect = {
+                        x: (parseInt(data.rect.x) * 96) / 72,
+                        y: (pageHeight * 72 / 96 - parseInt(data.rect.height)) * 96 / 72,
+                        width: (parseInt(data.rect.width) - parseInt(data.rect.x)) * 96 / 72,
+                        height: (parseInt(data.rect.height) - parseInt(data.rect.y)) * 96 / 72,
+                    };
+                }
+
+                if ((data.type === 'Line' || data.type === 'Arrow') && data.start && data.end) {
+                    const [startX, startY] = data.start.split(',').map(Number);
+                    const [endX, endY] = data.end.split(',').map(Number);
+
+                    const pageHeight = pageSizes[parseInt(data.page)].Height;
+                    const pdfStartX = (startX * 96) / 72;
+                    const pdfStartY = (pageHeight * 72 / 96 - startY) * 96 / 72;
+                    const pdfEndX = (endX * 96) / 72;
+                    const pdfEndY = (pageHeight * 72 / 96 - endY) * 96 / 72;
+
+                    rect = {
+                        x: Math.min(pdfStartX, pdfEndX),
+                        y: Math.min(pdfStartY, pdfEndY),
+                        width: Math.abs(pdfEndX - pdfStartX),
+                        height: Math.abs(pdfEndY - pdfStartY),
+                    };
+                }
+
+                if (rect != null && data.type !== 'Text') {
+                    console.log(data.name);
+                    console.log(rect);
+                    console.log("-------------------------");
+                }
+            });
+        })
+        .catch((error) => {
+            console.error('Error converting Blob URL to object:', error);
+        });
+};
+
+// Function to convert Blob URL to object
+function convertBlobURLToObject(blobURL: string): Promise<any> {
+    return fetch(blobURL)
+        .then((response) => response.blob())
+        .then((blobData) => {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    try {
+                        resolve(JSON.parse(reader.result as string));
+                    } catch (err) {
+                        reject(err);
+                    }
+                };
+                reader.onerror = reject;
+                reader.readAsText(blobData);
+            });
+        });
+}

How to/Library Bounds to Viewer Bounds/src/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Essential JS 2</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
+    <meta name="description" content="Essential JS 2" />
+    <meta name="author" content="Syncfusion" />
+    <link rel="shortcut icon" href="resources/favicon.ico" />
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
+</head>
+
+<body>
+    <!--Element which will render as PDF Viewer -->
+    <div id="PdfViewer"></div>
+</body>
+
+</html>

How to/Library Bounds to Viewer Bounds/src/styles/styles.css

@@ -0,0 +1,9 @@
+@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";
+@import "../../node_modules/@syncfusion/ej2-notifications/styles/material.css";

How to/Library Bounds to Viewer Bounds/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es2016",           
+    "module": "ES6",                                
+    "sourceMap": true,                                
+    "esModuleInterop": true,                             
+    "forceConsistentCasingInFileNames": true,            
+    "strict": true,                                      
+    "skipLibCheck": true,                               
+    "moduleResolution": "node"
+  }
+}