Skip to content

Commit 9a3758d

Browse files
authored
Merge pull request #4346 from syncfusion-content/EJ2-965510-PageZoomHF
965510: Updated Page Organize Zoom UG documentation for Hot-fix branch
2 parents 604b000 + 0e231a8 commit 9a3758d

File tree

14 files changed

+42
-28
lines changed

14 files changed

+42
-28
lines changed

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

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,13 @@ You can adjust the orientation of PDF pages to ensure proper alignment. The rota
2727
* `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise.
2828
* `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise.
2929

30-
![Alt text](./images/rotate.gif)
31-
3230
### Rearranging PDF pages
3331

3432
You can easily change the sequence of pages within your document using the drag and drop method:
3533

3634
* `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order.
3735

38-
![Alt text](./images/rearrange.gif)
36+
![Alt text](./images/rotate-rearrange.gif)
3937

4038
### Inserting new pages
4139

@@ -44,24 +42,20 @@ Effortlessly add new pages to your document with the following options:
4442
* `Insert blank page left`: Insert a blank page to the left of the selected page using the respective icon.
4543
* `Insert blank page right`: Insert a blank page to the right of the selected page using the corresponding icon.
4644

47-
![Alt text](./images/insert.gif)
48-
4945
### Deleting PDF pages
5046

5147
Removing unwanted pages from your document is straight forward:
5248

5349
* `Select pages to delete`: Click on the page thumbnails you wish to remove. You can select multiple pages at once.
5450
* `Delete selected pages`: Use the delete option in the organize pages pane to remove the selected pages from the document.
5551

56-
![Alt text](./images/delete.gif)
57-
5852
### Copying PDF pages
5953

6054
Duplicate the pages within your PDF document effortlessly:
6155

6256
* `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.
6357

64-
![Alt text](./images/copy.gif)
58+
![Alt text](./images/insert-delete-copy.gif)
6559

6660
### Importing a PDF Document
6761

@@ -75,7 +69,19 @@ Seamlessly import a PDF document into your existing document:
7569

7670
Make comprehensive adjustments by selecting all pages simultaneously. This facilitates efficient editing and formatting across the entire document.
7771

78-
![Alt text](./images/selectall.gif)
72+
![Alt text](./images/selectall.png)
73+
74+
### Zooming Page Thumbnails
75+
76+
Adjust the size of page thumbnails within the organizer panel for better visibility and precision when editing. The zoom functionality allows you to:
77+
78+
* Increase or decrease the size of page thumbnails using the zoom slider
79+
* See more details on pages when zoomed in
80+
* View more pages simultaneously when zoomed out
81+
82+
This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization.
83+
84+
![Alt text](./images/zoomOrganize.png)
7985

8086
### Real-time updates
8187

@@ -125,20 +131,20 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d
125131
{% endhighlight %}
126132
{% endtabs %}
127133

128-
**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.
134+
**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.
129135

130136
{% tabs %}
131137
{% highlight html tabtitle="Standalone" %}
132138

133139
<div style="width:100%;height:600px">
134-
@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()
140+
@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()
135141
</div>
136142

137143
{% endhighlight %}
138144
{% highlight html tabtitle="Server-Backed" %}
139145

140146
<div style="width:100%;height:600px">
141-
@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()
147+
@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()
142148
</div>
143149

144150
{% endhighlight %}
@@ -175,7 +181,7 @@ import { LinkAnnotationService, BookmarkViewService,
175181
export class AppComponent implements OnInit {
176182
public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
177183
public resource: string = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
178-
public pageOrganizerSettings = { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true };
184+
public pageOrganizerSettings = { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 };
179185
ngOnInit(): void {
180186
}
181187
}
@@ -211,7 +217,7 @@ import { LinkAnnotationService, BookmarkViewService,
211217
export class AppComponent implements OnInit {
212218
public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
213219
public service: string = 'https://services.syncfusion.com/angular/production/api/pdfviewer';
214-
public pageOrganizerSettings = { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true };
220+
public pageOrganizerSettings = { canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 };
215221
ngOnInit(): void {
216222
}
217223
}
@@ -298,8 +304,9 @@ The following keyboard shortcuts are available at the organize pages dialog.
298304

299305
* **Ctrl+Z** : Undo the last action performed.
300306
* **Ctrl+Y** : Redo the action that was undone
307+
* **Ctrl+Scroll** : Zoom in and zoom out page thumbnails for better visibility.
301308

302-
![Alt text](./images/undo-redo.gif)
309+
![Alt text](./images/undo-redo.png)
303310

304311
#### Conclusion
305312

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

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,13 @@ You can adjust the orientation of PDF pages to ensure proper alignment. The rota
2727
* `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise.
2828
* `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise.
2929

30-
![Alt text](./images/rotate.gif)
31-
3230
### Rearranging PDF pages
3331

3432
You can easily change the sequence of pages within your document using the drag and drop method:
3533

3634
* `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order.
3735

38-
![Alt text](./images/rearrange.gif)
36+
![Alt text](./images/rotate-rearrange.gif)
3937

4038
### Inserting new pages
4139

@@ -44,24 +42,20 @@ Effortlessly add new pages to your document with the following options:
4442
* `Insert blank page left`: Insert a blank page to the left of the selected page using the respective icon.
4543
* `Insert blank page right`: Insert a blank page to the right of the selected page using the corresponding icon.
4644

47-
![Alt text](./images/insert.gif)
48-
4945
### Deleting PDF pages
5046

5147
Removing unwanted pages from your document is straight forward:
5248

5349
* `Select pages to delete`: Click on the page thumbnails you wish to remove. You can select multiple pages at once.
5450
* `Delete selected pages`: Use the delete option in the organize pages pane to remove the selected pages from the document.
5551

56-
![Alt text](./images/delete.gif)
57-
5852
### Copying PDF pages
5953

6054
Duplicate the pages within your PDF document effortlessly:
6155

6256
* `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.
6357

64-
![Alt text](./images/copy.gif)
58+
![Alt text](./images/insert-delete-copy.gif)
6559

6660
### Importing a PDF Document
6761

@@ -75,7 +69,19 @@ Seamlessly import a PDF document into your existing document:
7569

7670
Make comprehensive adjustments by selecting all pages simultaneously. This facilitates efficient editing and formatting across the entire document.
7771

78-
![Alt text](./images/selectall.gif)
72+
![Alt text](./images/selectall.png)
73+
74+
### Zooming Page Thumbnails
75+
76+
Adjust the size of page thumbnails within the organizer panel for better visibility and precision when editing. The zoom functionality allows you to:
77+
78+
* Increase or decrease the size of page thumbnails using the zoom slider
79+
* See more details on pages when zoomed in
80+
* View more pages simultaneously when zoomed out
81+
82+
This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization.
83+
84+
![Alt text](./images/zoomOrganize.png)
7985

8086
### Real-time updates
8187

@@ -135,7 +141,7 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d
135141
{% endhighlight %}
136142
{% endtabs %}
137143

138-
**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.
144+
**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.
139145

140146
{% tabs %}
141147
{% highlight cshtml tabtitle="Standalone" %}
@@ -144,7 +150,7 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d
144150
style="height:600px"
145151
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
146152
pageOrganizerSettings= pageOrganizerSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerPageOrganizerSettings
147-
{canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true })">
153+
{canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 })">
148154
</ejs-pdfviewer>
149155
</div>
150156
{% endhighlight %}
@@ -155,7 +161,7 @@ Safeguard your edits by utilizing the **Save As** feature. This enables you to d
155161
serviceUrl="/api/PdfViewer"
156162
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
157163
pageOrganizerSettings= pageOrganizerSettings="@(new Syncfusion.EJ2.PdfViewer.PdfViewerPageOrganizerSettings
158-
{canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true })">
164+
{canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5 })">
159165
</ejs-pdfviewer>
160166
</div>
161167
{% endhighlight %}
@@ -294,8 +300,9 @@ The following keyboard shortcuts are available at the organize pages dialog.
294300

295301
* **Ctrl+Z** : Undo the last action performed.
296302
* **Ctrl+Y** : Redo the action that was undone
303+
* **Ctrl+Scroll** : Zoom in and zoom out page thumbnails for better visibility.
297304

298-
![Alt text](./images/undo-redo.gif)
305+
![Alt text](./images/undo-redo.png)
299306

300307
#### Conclusion
301308

-275 KB
Binary file not shown.
-458 KB
Binary file not shown.
Loading
-293 KB
Binary file not shown.
-234 KB
Binary file not shown.
Loading
-210 KB
Binary file not shown.
-372 KB
Binary file not shown.

0 commit comments

Comments
 (0)