Merge pull request #33 from SyncfusionExamples/EJ2-834573-LibraryBounds

834573: Library Bounds to Viewer Bounds sample

Author: rparthi-1687

How to/Library Bounds to Viewer Bounds/PDFViewerSample/PDFViewerSample.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.10.34607.79
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "PDFViewerSample", "PDFViewerSample\PDFViewerSample.csproj", "{3936B843-A035-424E-BA4B-990436AC60BD}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{3936B843-A035-424E-BA4B-990436AC60BD}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{3936B843-A035-424E-BA4B-990436AC60BD}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{3936B843-A035-424E-BA4B-990436AC60BD}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{3936B843-A035-424E-BA4B-990436AC60BD}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {31245B35-82FC-4C3B-A888-4730D0AD8EE0}
+	EndGlobalSection
+EndGlobal

How to/Library Bounds to Viewer Bounds/PDFViewerSample/PDFViewerSample/PDFViewerSample.csproj

@@ -0,0 +1,14 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+       <PackageReference Include="Syncfusion.EJ2.AspNet.Core" Version="*" />
+       <PackageReference Include="Syncfusion.EJ2.PdfViewer.AspNet.Core" Version="*" />
+  </ItemGroup>
+
+</Project>

How to/Library Bounds to Viewer Bounds/PDFViewerSample/PDFViewerSample/PDFViewerSample.csproj.user

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <ActiveDebugProfile>IIS Express</ActiveDebugProfile>
+  </PropertyGroup>
+  <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
+    <DebuggerFlavor>ProjectDebugger</DebuggerFlavor>
+  </PropertyGroup>
+</Project>

How to/Library Bounds to Viewer Bounds/PDFViewerSample/PDFViewerSample/Pages/Error.cshtml

@@ -0,0 +1,26 @@
+@page
+@model ErrorModel
+@{
+    ViewData["Title"] = "Error";
+}
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+@if (Model.ShowRequestId)
+{
+    <p>
+        <strong>Request ID:</strong> <code>@Model.RequestId</code>
+    </p>
+}
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to the <strong>Development</strong> environment displays detailed information about the error that occurred.
+</p>
+<p>
+    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+    It can result in displaying sensitive information from exceptions to end users.
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    and restarting the app.
+</p>

How to/Library Bounds to Viewer Bounds/PDFViewerSample/PDFViewerSample/Pages/Error.cshtml.cs

@@ -0,0 +1,28 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using System.Diagnostics;
+
+namespace PDFViewerSample.Pages
+{
+    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
+    [IgnoreAntiforgeryToken]
+    public class ErrorModel : PageModel
+    {
+        public string? RequestId { get; set; }
+
+        public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+        private readonly ILogger<ErrorModel> _logger;
+
+        public ErrorModel(ILogger<ErrorModel> logger)
+        {
+            _logger = logger;
+        }
+
+        public void OnGet()
+        {
+            RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
+        }
+    }
+
+}

How to/Library Bounds to Viewer Bounds/PDFViewerSample/PDFViewerSample/Pages/Index.cshtml

@@ -0,0 +1,86 @@
+
+@page "{handler?}"
+@model IndexModel
+@{
+    ViewData["Title"] = "Home page";
+}
+
+<div class="text-center">
+    <ejs-pdfviewer id="pdfviewer" style="height:600px" serviceUrl="/Index" documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
+    </ejs-pdfviewer>
+</div>
+
+<script type="text/javascript">
+    var pageSizes = [];
+
+    // Event when the PDF is loaded
+    document.addEventListener('DOMContentLoaded', function () {
+        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
+
+
+        pdfViewer.exportSuccess = function (args) {
+            console.log(args.exportData);
+            const blobURL = args.exportData;
+
+            // Converting the exported blob into object
+            convertBlobURLToObject(blobURL)
+                .then((objectData) => {
+                    console.log(objectData);
+                    var datas = objectData;
+                    var shapeAnnotationData = datas['pdfAnnotation'][0]['shapeAnnotation'];
+                    shapeAnnotationData.forEach(data => {
+                        if (data && data.rect && parseInt(data.rect.width)) {
+                            let rect = null;
+                            const pageHeight = pdfViewer.getPageInfo(parseInt(data.page)).height;
+                            // Converting PDF Library values into PDF Viewer values.
+                            rect = {
+                                x: (parseInt(data.rect.x) * 96) / 72,
+                                y: (parseInt(pageHeight) - 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 = pdfViewer.getPageInfo(parseInt(data.page)).height;
+                                const pdfStartX = (startX * 96) / 72;
+                                const pdfStartY = (parseInt(pageHeight) - startY) * 96 / 72;
+                                const pdfEndX = (endX * 96) / 72;
+                                const pdfEndY = (parseInt(pageHeight) - endY) * 96 / 72;
+
+                                rect = {
+                                    x: Math.min(pdfStartX, pdfEndX),
+                                    y: Math.min(pdfStartY, pdfEndY),
+                                    width: Math.abs(pdfEndX - pdfStartX),
+                                    height: Math.abs(pdfEndY - pdfStartY),
+                                };
+
+                            }
+
+                            console.log(data.name, rect, "-------------------------");
+                        }
+                    });
+                })
+                .catch((error) => {
+                    console.error('Error converting Blob URL to object:', error);
+                });
+        };
+
+        function convertBlobURLToObject(blobURL) {
+            return fetch(blobURL)
+                .then((response) => response.blob())
+                .then((blobData) => {
+                    return new Promise((resolve, reject) => {
+                        const reader = new FileReader();
+                        reader.onloadend = () => {
+                            resolve(JSON.parse(reader.result));
+                        };
+                        reader.onerror = reject;
+                        reader.readAsText(blobData);
+                    });
+                });
+        }
+    });
+</script>