From b76c7fa7f9200cbebbfac57f2634da9755d844b4 Mon Sep 17 00:00:00 2001 From: MuralidharanGSF4527 Date: Mon, 8 Sep 2025 19:45:18 +0530 Subject: [PATCH 1/2] 979451: Updated Line Angle Constraints in PDF Viewer for Angular, Vue, React --- Document-Processing-toc.html | 3 + .../annotation/line-angle-constraints.md | 143 ++++++++++++++++++ .../annotation/line-angle-constraints.md | 114 ++++++++++++++ .../vue/annotation/line-angle-constraints.md | 141 +++++++++++++++++ 4 files changed, 401 insertions(+) create mode 100644 Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md create mode 100644 Document-Processing/PDF/PDF-Viewer/react/annotation/line-angle-constraints.md create mode 100644 Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index d963a3b20..15382cc94 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -388,6 +388,7 @@
  • Sticky Notes Annotation
  • Measurement Annotation
  • Free Text Annotation
    • +
  • Line angle Constraints
  • Ink Annotation
  • Import and Export Annotations
  • Comments
    • @@ -639,6 +640,7 @@
  • Measurement Annotation
  • Free Text Annotation
  • Ink Annotation
    • +
  • Line angle Constraints
  • Comments
  • Handwritten signature
    • @@ -765,6 +767,7 @@
  • Measurement Annotation
  • Free Text Annotation
  • Ink Annotation
    • +
  • Line angle Constraints
  • Comments
    • diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md new file mode 100644 index 000000000..6e94c3298 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md @@ -0,0 +1,143 @@ +--- +layout: post +title: Line Angle Constraints in Angular PDF Viewer | Syncfusion +description: Learn all about Line Angle Constraints Annotation in the Syncfusion Angular PDF Viewer component of Essential JS 2 and more. +platform: document-processing +control: Line Angle Constraints +documentation: ug +--- + +# Line Angle Constraints in Angular PDF Viewer + +The PDF Viewer control provides robust **line angle constraints** functionality. This allows users to draw line type annotations with controlled angle snapping, improving accuracy and consistency across technical drawings and measurements across your PDF documents. + +## Enabling Line Angle Constraints +To enable line angle constraints, configure the `enableLineAngleConstraints` property within the `annotationDrawingOptions` of the PDF Viewer. When enabled, line-type annotations are automatically restricted to fixed angles. + +The following code demonstrates how to enable line angle constraints: + +```html + +
    +
    + +
    +
    +``` + +```typescript +import { Component, ViewEncapsulation, OnInit,ViewChild} from '@angular/core'; +import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService, AnnotationService, FormFieldsService, FormDesignerService, PageOrganizerService,PdfViewerModule, TextSelectionStartEventArgs, AnnotationSelectEventArgs } from '@syncfusion/ej2-angular-pdfviewer'; +import { SwitchComponent, SwitchModule } from '@syncfusion/ej2-angular-buttons'; +import { ClickEventArgs } from '@syncfusion/ej2-buttons'; + + +/** +* Default PdfViewer Controller +*/ +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + encapsulation: ViewEncapsulation.None, + // tslint:disable-next-line:max-line-length + providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, + TextSearchService, TextSelectionService, PrintService, AnnotationService, FormFieldsService, FormDesignerService,PageOrganizerService], + styleUrls: ['app.component.css'], + standalone: true, + imports: [ + + SwitchModule, + PdfViewerModule, + + ], +}) + +export class AppComponent { + @ViewChild('pdfviewer') + public pdfviewerControl: PdfViewerComponent | undefined; + + public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resource:string = "https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib"; + public annotationDrawingOptions = { + enableLineAngleConstraints: true, + restrictLineAngleTo: 90 + }; + ngOnInit(): void { + // ngOnInit function + } +} +``` + +## Configuration Properties + +### enableLineAngleConstraints + +The `enableLineAngleConstraints` property activates angle snapping for line-based annotations. When set to `true`, the following annotation types will snap to fixed angles as defined by the `restrictLineAngleTo` property: + +- Lines +- Arrows +- Polygon +- Distance measurements +- Perimeter measurements +- Area measurements +- Volume measurements + +**Key Benefits:** + +- Automatic angle snapping during the drawing +- Enhanced precision for technical drawings and measurements +- Desktop support: Hold **Shift** while drawing to activate constraints +- Real-time visual feedback showing angle snapping behavior + +### restrictLineAngleTo + +The `restrictLineAngleTo` property defines the angle increment (in degrees) that constrains line-based annotations. The default value is **45 degrees**. + +**Angle Snapping Rules:** + +The initial drawing direction is treated as the 0° reference point +Snapped angles are calculated based on the increment +If the increment doesn’t divide 360 evenly, angles reset after 360° +**Examples:** + +restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360° +restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360° + +## Working with Constrained Annotations + +### Drawing Behavior + +When line angle constraints are enabled: + +**Initial Drawing:** Start drawing a line, arrow, polygon, distance, perimeter, area, or volume as usual. +**Angle Snapping:** The line snaps to the nearest allowed angle. +**Visual Feedback:** Snapped angle is shown in real time. +**Completion:** Release to complete the annotation. + +### Keyboard Shortcuts + +**Desktop Platforms:** + +**Shift + Drag:** Enables angle snapping even when `enableLineAngleConstraints` is false. + +### Selector-Based Modifications + +When modifying existing line annotations using selectors: + +- Constraints apply based on the original line direction. +- The reference angle (0°) is determined by the lines current orientation. +- Only lines and arrows support constraint snapping during modification. +- Adjustments snap to the configured angle increment relative to the original direction. + +N> You can refer to our [Angular PDF Viewer](https://www.syncfusion.com/angular-ui-components/angular-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [Angular PDF Viewer example](https://github.com/syncfusion/ej2-angular-samples/tree/master/src/app/pdfviewer) to know how to render and configure the PDF Viewer. diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/line-angle-constraints.md new file mode 100644 index 000000000..14bd31306 --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/line-angle-constraints.md @@ -0,0 +1,114 @@ +--- +layout: post +title: Line Angle Constraints in React PDF Viewer | Syncfusion +description: Learn all about Line Angle Constraints Annotation in the Syncfusion React PDF Viewer component of Essential JS 2 and more. +platform: document-processing +control: Line Angle Constraints +documentation: ug +--- + +# Line Angle Constraints in React PDF Viewer + +The PDF Viewer control provides robust **line angle constraints** functionality. This allows users to draw line type annotations with controlled angle snapping, improving accuracy and consistency across technical drawings and measurements across your PDF documents. + +## Enabling Line Angle Constraints +To enable line angle constraints, configure the `enableLineAngleConstraints` property within the `annotationDrawingOptions` of the PDF Viewer. When enabled, line-type annotations are automatically restricted to fixed angles. + +The following code demonstrates how to enable line angle constraints: + +{% tabs %} +{% highlight js tabtitle="Standalone" %} +{% raw %} + +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(); + +{% endraw %} +{% endhighlight %} + +## Configuration Properties + +### enableLineAngleConstraints + +The `enableLineAngleConstraints` property activates angle snapping for line-based annotations. When set to `true`, the following annotation types will snap to fixed angles as defined by the `restrictLineAngleTo` property: + +- Lines +- Arrows +- Polygon +- Distance measurements +- Perimeter measurements +- Area measurements +- Volume measurements + +**Key Benefits:** + +- Automatic angle snapping during the drawing +- Enhanced precision for technical drawings and measurements +- Desktop support: Hold **Shift** while drawing to activate constraints +- Real-time visual feedback showing angle snapping behavior + +### restrictLineAngleTo + +The `restrictLineAngleTo` property defines the angle increment (in degrees) that constrains line-based annotations. The default value is **45 degrees**. + +**Angle Snapping Rules:** + +The initial drawing direction is treated as the 0° reference point +Snapped angles are calculated based on the increment +If the increment doesn’t divide 360 evenly, angles reset after 360° +**Examples:** + +restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360° +restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360° + +## Working with Constrained Annotations + +### Drawing Behavior + +When line angle constraints are enabled: + +**Initial Drawing:** Start drawing a line, arrow, polygon, distance, perimeter, area, or volume as usual. +**Angle Snapping:** The line snaps to the nearest allowed angle. +**Visual Feedback:** Snapped angle is shown in real time. +**Completion:** Release to complete the annotation. + +### Keyboard Shortcuts + +**Desktop Platforms:** + +**Shift + Drag:** Enables angle snapping even when `enableLineAngleConstraints` is false. + +### Selector-Based Modifications + +When modifying existing line annotations using selectors: + +- Constraints apply based on the original line direction. +- The reference angle (0°) is determined by the lines current orientation. +- Only lines and arrows support constraint snapping during modification. +- Adjustments snap to the configured angle increment relative to the original direction. + +N> You can refer to our [React PDF Viewer](https://www.syncfusion.com/React-ui-components/React-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [React PDF Viewer example](https://github.com/syncfusion/ej2-React-samples/tree/master/src/app/pdfviewer) to know how to render and configure the PDF Viewer. diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md new file mode 100644 index 000000000..975d6e4ce --- /dev/null +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md @@ -0,0 +1,141 @@ +--- +layout: post +title: Line Angle Constraints in Vue PDF Viewer | Syncfusion +description: Learn all about Line Angle Constraints Annotation in the Syncfusion Vue PDF Viewer component of Essential JS 2 and more. +platform: document-processing +control: Line Angle Constraints +documentation: ug +--- + +# Line Angle Constraints in Vue PDF Viewer + +The PDF Viewer control provides robust **line angle constraints** functionality. This allows users to draw line type annotations with controlled angle snapping, improving accuracy and consistency across technical drawings and measurements across your PDF documents. + +## Enabling Line Angle Constraints +To enable line angle constraints, configure the `enableLineAngleConstraints` property within the `annotationDrawingOptions` of the PDF Viewer. When enabled, line-type annotations are automatically restricted to fixed angles. + +The following code demonstrates how to enable line angle constraints: + +{% tabs %} +{% highlight html tabtitle="Composition API (Standalone)" %} + + + + + +{% endhighlight %} +{% highlight html tabtitle="Options API (Standalone)" %} + +## Configuration Properties + +### enableLineAngleConstraints + +The `enableLineAngleConstraints` property activates angle snapping for line-based annotations. When set to `true`, the following annotation types will snap to fixed angles as defined by the `restrictLineAngleTo` property: + +- Lines +- Arrows +- Polygon +- Distance measurements +- Perimeter measurements +- Area measurements +- Volume measurements + +**Key Benefits:** + +- Automatic angle snapping during the drawing +- Enhanced precision for technical drawings and measurements +- Desktop support: Hold **Shift** while drawing to activate constraints +- Real-time visual feedback showing angle snapping behavior + +### restrictLineAngleTo + +The `restrictLineAngleTo` property defines the angle increment (in degrees) that constrains line-based annotations. The default value is **45 degrees**. + +**Angle Snapping Rules:** + +The initial drawing direction is treated as the 0° reference point +Snapped angles are calculated based on the increment +If the increment doesn’t divide 360 evenly, angles reset after 360° +**Examples:** + +restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360° +restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360° + +## Working with Constrained Annotations + +### Drawing Behavior + +When line angle constraints are enabled: + +**Initial Drawing:** Start drawing a line, arrow, polygon, distance, perimeter, area, or volume as usual. +**Angle Snapping:** The line snaps to the nearest allowed angle. +**Visual Feedback:** Snapped angle is shown in real time. +**Completion:** Release to complete the annotation. + +### Keyboard Shortcuts + +**Desktop Platforms:** + +**Shift + Drag:** Enables angle snapping even when `enableLineAngleConstraints` is false. + +### Selector-Based Modifications + +When modifying existing line annotations using selectors: + +- Constraints apply based on the original line direction. +- The reference angle (0°) is determined by the lines current orientation. +- Only lines and arrows support constraint snapping during modification. +- Adjustments snap to the configured angle increment relative to the original direction. + +N> You can refer to our [Vue PDF Viewer](https://www.syncfusion.com/vue-ui-components/vue-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [Vue PDF Viewer example](https://github.com/syncfusion/ej2-Vue-samples/tree/master/src/app/pdfviewer) to know how to render and configure the PDF Viewer. From 4a22349897538b63915c031b5af7bb0fcfcac327 Mon Sep 17 00:00:00 2001 From: MuralidharanGSF4527 Date: Mon, 8 Sep 2025 20:06:59 +0530 Subject: [PATCH 2/2] 979451: Address the review in all platforms --- .../angular/annotation/line-angle-constraints.md | 11 ++++++----- .../react/annotation/line-angle-constraints.md | 11 ++++++----- .../vue/annotation/line-angle-constraints.md | 11 ++++++----- 3 files changed, 18 insertions(+), 15 deletions(-) diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md index 6e94c3298..cf8d2f71b 100644 --- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md +++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md @@ -106,13 +106,14 @@ The `restrictLineAngleTo` property defines the angle increment (in degrees) that **Angle Snapping Rules:** -The initial drawing direction is treated as the 0° reference point -Snapped angles are calculated based on the increment -If the increment doesn’t divide 360 evenly, angles reset after 360° +- The initial drawing direction is treated as the 0° reference point +- Snapped angles are calculated based on the increment +- If the increment doesn’t divide 360 evenly, angles reset after 360° + **Examples:** -restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360° -restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360° +- restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360° +- restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360° ## Working with Constrained Annotations diff --git a/Document-Processing/PDF/PDF-Viewer/react/annotation/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/react/annotation/line-angle-constraints.md index 14bd31306..17904cc77 100644 --- a/Document-Processing/PDF/PDF-Viewer/react/annotation/line-angle-constraints.md +++ b/Document-Processing/PDF/PDF-Viewer/react/annotation/line-angle-constraints.md @@ -77,13 +77,14 @@ The `restrictLineAngleTo` property defines the angle increment (in degrees) that **Angle Snapping Rules:** -The initial drawing direction is treated as the 0° reference point -Snapped angles are calculated based on the increment -If the increment doesn’t divide 360 evenly, angles reset after 360° +- The initial drawing direction is treated as the 0° reference point +- Snapped angles are calculated based on the increment +- If the increment doesn’t divide 360 evenly, angles reset after 360° + **Examples:** -restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360° -restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360° +- restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360° +- restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360° ## Working with Constrained Annotations diff --git a/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md index 975d6e4ce..97f1c2b7f 100644 --- a/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md +++ b/Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md @@ -104,13 +104,14 @@ The `restrictLineAngleTo` property defines the angle increment (in degrees) that **Angle Snapping Rules:** -The initial drawing direction is treated as the 0° reference point -Snapped angles are calculated based on the increment -If the increment doesn’t divide 360 evenly, angles reset after 360° +- The initial drawing direction is treated as the 0° reference point +- Snapped angles are calculated based on the increment +- If the increment doesn’t divide 360 evenly, angles reset after 360° + **Examples:** -restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360° -restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360° +- restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360° +- restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360° ## Working with Constrained Annotations