Line angle constraints in TypeScript PDF Viewer

16 Feb 20262 minutes to read

The PDF Viewer provides line angle constraints functionality that allows drawing line-type annotations with controlled angle snapping. This improves precision for technical drawings and measurements in PDF documents.

Line angle constraint

Enable line angle constraints

Set the enableLineAngleConstraints property within annotationDrawingOptions to enable angle snapping for supported line-type annotations.

The following code demonstrates enabling line angle constraints:

    let viewer: PdfViewer = new PdfViewer();
    viewer.resourceUrl="https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib";
    viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
    viewer.annotationDrawingOptions.enableLineAngleConstraints = true; 
    viewer.annotationDrawingOptions.restrictLineAngleTo = 90;
    viewer.appendTo("#PdfViewer");

Work with constrained annotations

Drawing behavior

When line angle constraints are enabled:

  • Start drawing a supported annotation (Line, Arrow, Polyline, Distance, or Perimeter).
  • The segment snaps to the nearest allowed angle.
  • A visual indicator reflects snapping in real time.
  • Release to complete the annotation.

Keyboard shortcuts

  • Shift + drag: toggles snapping. If constraints are disabled, Shift temporarily enables them; if enabled, Shift enforces snapping.

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 line’s current orientation.
  • Constraint snapping during modification is supported for Line and Arrow.
  • Adjustments snap to the configured angle increment.

View a sample in GitHub

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 drawing
  • Enhanced precision for technical drawings and measurements
  • Desktop behavior: hold Shift while drawing to toggle constraints (when disabled, Shift temporarily enables; when enabled, Shift enforces snapping)
  • Real-time visual feedback showing angle snapping behavior

restrictLineAngleTo

Defines the angle increment (in degrees) used to constrain supported annotations. The default is 45.

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 does not 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°

NOTE

Refer to the TypeScript PDF Viewer feature tour for feature highlights, and to the TypeScript PDF Viewer examples for rendering and configuration examples.

See also