Merge pull request #4346 from syncfusion-content/EJ2-965510-PageZoomHF

965510: Updated Page Organize Zoom UG documentation for Hot-fix branch

Author: rparthi-pdf

ej2-asp-core-mvc/pdfviewer/EJ2_ASP.MVC/organize-pdf.md

@@ -27,15 +27,13 @@ You can adjust the orientation of PDF pages to ensure proper alignment. The rota
 * `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise.
 * `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise.
 
-![Alt text](./images/rotate.gif)
-
 ### Rearranging PDF pages
 
 You can easily change the sequence of pages within your document using the drag and drop method:
 
 * `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order.
 
-![Alt text](./images/rearrange.gif)
+![Alt text](./images/rotate-rearrange.gif)
 
 ### Inserting new pages
 
@@ -44,24 +42,20 @@ Effortlessly add new pages to your document with the following options:
 * `Insert blank page left`: Insert a blank page to the left of the selected page using the respective icon.
 * `Insert blank page right`: Insert a blank page to the right of the selected page using the corresponding icon.
 
-![Alt text](./images/insert.gif)
-
 ### Deleting PDF pages
 
 Removing unwanted pages from your document is straight forward:
 
 * `Select pages to delete`: Click on the page thumbnails you wish to remove. You can select multiple pages at once.
 * `Delete selected pages`: Use the delete option in the organize pages pane to remove the selected pages from the document.
 
-![Alt text](./images/delete.gif)
-
 ### Copying PDF pages
 
 Duplicate the pages within your PDF document effortlessly:
 
 * `Select pages to copy`: Click on the page thumbnails you wish to duplicate. Use the copy option to create duplicates. When a page is copied, the duplicate is automatically added to the right of the selected page. Multiple copies can be made using the toolbar action.
 
-![Alt text](./images/copy.gif)
+![Alt text](./images/insert-delete-copy.gif)
 
 ### Importing a PDF Document
 
@@ -75,7 +69,19 @@ Seamlessly import a PDF document into your existing document:
 
 Make comprehensive adjustments by selecting all pages simultaneously. This facilitates efficient editing and formatting across the entire document.
 
-![Alt text](./images/selectall.gif)
+![Alt text](./images/selectall.png)
+
+### Zooming Page Thumbnails
+
+Adjust the size of page thumbnails within the organizer panel for better visibility and precision when editing. The zoom functionality allows you to:
+
+* Increase or decrease the size of page thumbnails using the zoom slider
+* See more details on pages when zoomed in
+* View more pages simultaneously when zoomed out
+
+This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization.
+
+![Alt text](./images/zoomOrganize.png)
 
 ### Real-time updates 
 
@@ -125,20 +131,20 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d
 {% endhighlight %}
 {% endtabs %}
 
-**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, copying, importing and rearranging pages. By default, all these actions are enabled.
+**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, copying, importing and rearranging pages, as well as configuring thumbnail zoom settings. By default, all these actions are enabled and standard zoom settings are applied.
 
 {% tabs %}
 {% highlight html tabtitle="Standalone" %}
 
 <div style="width:100%;height:600px">
-    @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new Syncfusion.EJ2.PdfViewer.PageOrganizerSettings { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true }).Render()
+    @Html.EJS().PdfViewer("pdfviewer").DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new Syncfusion.EJ2.PdfViewer.PageOrganizerSettings { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 }).Render()
 </div>
 
 {% endhighlight %}
 {% highlight html tabtitle="Server-Backed" %}
 
 <div style="width:100%;height:600px">
-    @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new Syncfusion.EJ2.PdfViewer.PageOrganizerSettings { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true }).Render()
+    @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/PdfViewer/")).DocumentPath("https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf").PageOrganizerSettings(new Syncfusion.EJ2.PdfViewer.PageOrganizerSettings { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 }).Render()
 </div>
 
 {% endhighlight %}
@@ -175,7 +181,7 @@ import { LinkAnnotationService, BookmarkViewService,
 export class AppComponent implements OnInit {
     public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
     public resource: string = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
-    public pageOrganizerSettings = { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true };
+    public pageOrganizerSettings = { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 };
     ngOnInit(): void {
     }
 }
@@ -211,7 +217,7 @@ import { LinkAnnotationService, BookmarkViewService,
 export class AppComponent implements OnInit {
     public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
     public service: string = 'https://services.syncfusion.com/angular/production/api/pdfviewer';
-    public pageOrganizerSettings = { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true };
+    public pageOrganizerSettings = { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 };
     ngOnInit(): void {
     }
 }
@@ -298,8 +304,9 @@ The following keyboard shortcuts are available at the organize pages dialog.
 
 * **Ctrl+Z** : Undo the last action performed.
 * **Ctrl+Y** : Redo the action that was undone
+* **Ctrl+Scroll** : Zoom in and zoom out page thumbnails for better visibility.
 
-![Alt text](./images/undo-redo.gif)
+![Alt text](./images/undo-redo.png)
 
 #### Conclusion
 

ej2-asp-core-mvc/pdfviewer/EJ2_ASP.NETCORE/organize-pdf.md

@@ -27,15 +27,13 @@ You can adjust the orientation of PDF pages to ensure proper alignment. The rota
 * `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise.
 * `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise.
 
-![Alt text](./images/rotate.gif)
-
 ### Rearranging PDF pages
 
 You can easily change the sequence of pages within your document using the drag and drop method:
 
 * `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order.
 
-![Alt text](./images/rearrange.gif)
+![Alt text](./images/rotate-rearrange.gif)
 
 ### Inserting new pages
 
@@ -44,24 +42,20 @@ Effortlessly add new pages to your document with the following options:
 * `Insert blank page left`: Insert a blank page to the left of the selected page using the respective icon.
 * `Insert blank page right`: Insert a blank page to the right of the selected page using the corresponding icon.
 
-![Alt text](./images/insert.gif)
-
 ### Deleting PDF pages
 
 Removing unwanted pages from your document is straight forward:
 
 * `Select pages to delete`: Click on the page thumbnails you wish to remove. You can select multiple pages at once.
 * `Delete selected pages`: Use the delete option in the organize pages pane to remove the selected pages from the document.
 
-![Alt text](./images/delete.gif)
-
 ### Copying PDF pages
 
 Duplicate the pages within your PDF document effortlessly:
 
 * `Select pages to copy`: Click on the page thumbnails you wish to duplicate. Use the copy option to create duplicates. When a page is copied, the duplicate is automatically added to the right of the selected page. Multiple copies can be made using the toolbar action.
 
-![Alt text](./images/copy.gif)
+![Alt text](./images/insert-delete-copy.gif)
 
 ### Importing a PDF Document
 
@@ -75,7 +69,19 @@ Seamlessly import a PDF document into your existing document:
 
 Make comprehensive adjustments by selecting all pages simultaneously. This facilitates efficient editing and formatting across the entire document.
 
-![Alt text](./images/selectall.gif)
+![Alt text](./images/selectall.png)
+
+### Zooming Page Thumbnails
+
+Adjust the size of page thumbnails within the organizer panel for better visibility and precision when editing. The zoom functionality allows you to:
+
+* Increase or decrease the size of page thumbnails using the zoom slider
+* See more details on pages when zoomed in
+* View more pages simultaneously when zoomed out
+
+This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization.
+
+![Alt text](./images/zoomOrganize.png)
 
 ### Real-time updates 
 
@@ -135,7 +141,7 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d
 {% endhighlight %}
 {% endtabs %}
 
-**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, copying, importing and rearranging pages. By default, all these actions are enabled.
+**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, copying, importing and rearranging pages, as well as configuring thumbnail zoom settings. By default, all these actions are enabled and standard zoom settings are applied.
 
 {% tabs %}
 {% highlight cshtml tabtitle="Standalone" %}
@@ -144,7 +150,7 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d
                    style="height:600px"
                    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                    pageOrganizerSettings= pageOrganizerSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerPageOrganizerSettings
-                   {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true })">
+                   {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 })">
     </ejs-pdfviewer>
 </div>
 {% endhighlight %}
@@ -155,7 +161,7 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d
                    serviceUrl="/api/PdfViewer"
                    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                    pageOrganizerSettings= pageOrganizerSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerPageOrganizerSettings
-                   {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true })">
+                   {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 })">
     </ejs-pdfviewer>
 </div>
 {% endhighlight %}
@@ -294,8 +300,9 @@ The following keyboard shortcuts are available at the organize pages dialog.
 
 * **Ctrl+Z** : Undo the last action performed.
 * **Ctrl+Y** : Redo the action that was undone
+* **Ctrl+Scroll** : Zoom in and zoom out page thumbnails for better visibility.
 
-![Alt text](./images/undo-redo.gif)
+![Alt text](./images/undo-redo.png)
 
 #### Conclusion