@nasser-sw/fabric 7.0.0-beta1

package/src/util/misc/projectStroke/StrokeLineCapProjections.ts

@@ -0,0 +1,148 @@
+import type { XY } from '../../../Point';
+import { Point } from '../../../Point';
+import { getOrthonormalVector, getUnitVector } from '../vectors';
+import { StrokeLineJoinProjections } from './StrokeLineJoinProjections';
+import { StrokeProjectionsBase } from './StrokeProjectionsBase';
+import type { TProjection, TProjectStrokeOnPointsOptions } from './types';
+
+/**
+ * class in charge of finding projections for each type of line cap for start/end of an open path
+ * @see {@link [Open path projections at #8344](https://github.com/fabricjs/fabric.js/pull/8344#1-open-path)}
+ *
+ * Reference:
+ * - MDN:
+ *   - https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineCap
+ *   - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap
+ * - Spec: https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-linecap-dev
+ * - Playground to understand how the line joins works: https://hypertolosana.github.io/efficient-webgl-stroking/index.html
+ * - View the calculated projections for each of the control points: https://codesandbox.io/s/project-stroke-points-with-context-to-trace-b8jc4j?file=/src/index.js
+ */
+export class StrokeLineCapProjections extends StrokeProjectionsBase {
+  /**
+   * edge point
+   */
+  declare A: Point;
+  /**
+   * point next to edge point
+   */
+  declare T: Point;
+
+  constructor(A: XY, T: XY, options: TProjectStrokeOnPointsOptions) {
+    super(options);
+    this.A = new Point(A);
+    this.T = new Point(T);
+  }
+
+  calcOrthogonalProjection(
+    from: Point,
+    to: Point,
+    magnitude: number = this.strokeProjectionMagnitude,
+  ) {
+    const vector = this.createSideVector(from, to);
+    return this.scaleUnitVector(getOrthonormalVector(vector), magnitude);
+  }
+
+  /**
+   * OPEN PATH START/END - Line cap: Butt
+   * Calculation: to find the projections, just find the points orthogonal to the stroke
+   *
+   * @see https://github.com/fabricjs/fabric.js/pull/8344#1-1-butt
+   */
+  projectButt() {
+    return [
+      this.projectOrthogonally(this.A, this.T, this.strokeProjectionMagnitude),
+      this.projectOrthogonally(this.A, this.T, -this.strokeProjectionMagnitude),
+    ];
+  }
+
+  /**
+   * OPEN PATH START/END - Line cap: Round
+   * Calculation: same as stroke line join `round`
+   *
+   * @see https://github.com/fabricjs/fabric.js/pull/8344#1-2-round
+   */
+  projectRound() {
+    const projections: Point[] = [];
+
+    if (!this.isSkewed() && this.A.eq(this.T)) {
+      /* 1 point case without `skew`
+        When `strokeUniform` is true, scaling has no effect.
+        So we divide by scale, to remove its effect.
+      */
+      const projection = new Point(1, 1)
+        .scalarMultiply(this.strokeProjectionMagnitude)
+        .multiply(this.strokeUniformScalar);
+      projections.push(
+        this.applySkew(this.A.add(projection)),
+        this.applySkew(this.A.subtract(projection)),
+      );
+    } else {
+      projections.push(
+        ...new StrokeLineJoinProjections(
+          this.A,
+          this.T,
+          this.T,
+          this.options,
+        ).projectRound(),
+      );
+    }
+
+    return projections;
+  }
+
+  /**
+   * OPEN PATH START/END - Line cap: Square
+   * Calculation: project a rectangle of points on the stroke in the opposite direction of the vector `AT`
+   *
+   * @see https://github.com/fabricjs/fabric.js/pull/8344#1-3-square
+   */
+  projectSquare() {
+    const projections: Point[] = [];
+
+    if (this.A.eq(this.T)) {
+      /* 1 point case without `skew`
+        When `strokeUniform` is true, scaling has no effect.
+        So we divide by scale, to remove its effect.
+      */
+      const projection = new Point(1, 1)
+        .scalarMultiply(this.strokeProjectionMagnitude)
+        .multiply(this.strokeUniformScalar);
+      projections.push(this.A.add(projection), this.A.subtract(projection));
+    } else {
+      const orthogonalProjection = this.calcOrthogonalProjection(
+        this.A,
+        this.T,
+        this.strokeProjectionMagnitude,
+      );
+      const strokePointingOut = this.scaleUnitVector(
+        getUnitVector(this.createSideVector(this.A, this.T)),
+        -this.strokeProjectionMagnitude,
+      );
+      const projectedA = this.A.add(strokePointingOut);
+      projections.push(
+        projectedA.add(orthogonalProjection),
+        projectedA.subtract(orthogonalProjection),
+      );
+    }
+
+    return projections.map((p) => this.applySkew(p));
+  }
+
+  protected projectPoints() {
+    switch (this.options.strokeLineCap) {
+      case 'round':
+        return this.projectRound();
+      case 'square':
+        return this.projectSquare();
+      default:
+        return this.projectButt();
+    }
+  }
+
+  public project(): TProjection[] {
+    return this.projectPoints().map((point) => ({
+      originPoint: this.A,
+      projectedPoint: point,
+    }));
+  }
+}

package/src/util/misc/projectStroke/StrokeLineJoinProjections.ts

@@ -0,0 +1,314 @@
+import type { XY } from '../../../Point';
+import { Point } from '../../../Point';
+import { halfPI, twoMathPi } from '../../../constants';
+import type { TRadian } from '../../../typedefs';
+import { degreesToRadians } from '../radiansDegreesConversion';
+import {
+  calcAngleBetweenVectors,
+  calcVectorRotation,
+  crossProduct,
+  getOrthonormalVector,
+  getUnitVector,
+  isBetweenVectors,
+  magnitude,
+  rotateVector,
+} from '../vectors';
+import { StrokeProjectionsBase } from './StrokeProjectionsBase';
+import type { TProjection, TProjectStrokeOnPointsOptions } from './types';
+
+const zeroVector = new Point();
+
+/**
+ * class in charge of finding projections for each type of line join
+ * @see {@link [Closed path projections at #8344](https://github.com/fabricjs/fabric.js/pull/8344#2-closed-path)}
+ *
+ * - MDN:
+ *   - https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
+ *   - https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin
+ * - Spec: https://svgwg.org/svg2-draft/painting.html#StrokeLinejoinProperty
+ * - Playground to understand how the line joins works: https://hypertolosana.github.io/efficient-webgl-stroking/index.html
+ * - View the calculated projections for each of the control points: https://codesandbox.io/s/project-stroke-points-with-context-to-trace-b8jc4j?file=/src/index.js
+ *
+ */
+export class StrokeLineJoinProjections extends StrokeProjectionsBase {
+  /**
+   * The point being projected (the angle ∠BAC)
+   */
+  declare A: Point;
+  /**
+   * The point before A
+   */
+  declare B: Point;
+  /**
+   * The point after A
+   */
+  declare C: Point;
+  /**
+   * The AB vector
+   */
+  AB: Point;
+  /**
+   * The AC vector
+   */
+  AC: Point;
+  /**
+   * The angle of A (∠BAC)
+   */
+  alpha: TRadian;
+  /**
+   * The bisector of A (∠BAC)
+   */
+  bisector: Point;
+
+  static getOrthogonalRotationFactor(vector1: Point, vector2?: Point) {
+    const angle = vector2
+      ? calcAngleBetweenVectors(vector1, vector2)
+      : calcVectorRotation(vector1);
+    return Math.abs(angle) < halfPI ? -1 : 1;
+  }
+
+  constructor(A: XY, B: XY, C: XY, options: TProjectStrokeOnPointsOptions) {
+    super(options);
+    this.A = new Point(A);
+    this.B = new Point(B);
+    this.C = new Point(C);
+    this.AB = this.createSideVector(this.A, this.B);
+    this.AC = this.createSideVector(this.A, this.C);
+    this.alpha = calcAngleBetweenVectors(this.AB, this.AC);
+    this.bisector = getUnitVector(
+      // if AC is also the zero vector nothing will be projected
+      // in that case the next point will handle the projection
+      rotateVector(this.AB.eq(zeroVector) ? this.AC : this.AB, this.alpha / 2),
+    );
+  }
+
+  calcOrthogonalProjection(
+    from: Point,
+    to: Point,
+    magnitude: number = this.strokeProjectionMagnitude,
+  ) {
+    const vector = this.createSideVector(from, to);
+    const orthogonalProjection = getOrthonormalVector(vector);
+    const correctSide = StrokeLineJoinProjections.getOrthogonalRotationFactor(
+      orthogonalProjection,
+      this.bisector,
+    );
+    return this.scaleUnitVector(orthogonalProjection, magnitude * correctSide);
+  }
+
+  /**
+   * BEVEL
+   * Calculation: the projection points are formed by the vector orthogonal to the vertex.
+   *
+   * @see https://github.com/fabricjs/fabric.js/pull/8344#2-2-bevel
+   */
+  projectBevel() {
+    const projections: Point[] = [];
+    // if `alpha` equals 0 or 2*PI, the projections are the same for `B` and `C`
+    (this.alpha % twoMathPi === 0 ? [this.B] : [this.B, this.C]).forEach(
+      (to) => {
+        projections.push(this.projectOrthogonally(this.A, to));
+        projections.push(
+          this.projectOrthogonally(this.A, to, -this.strokeProjectionMagnitude),
+        );
+      },
+    );
+    return projections;
+  }
+
+  /**
+   * MITER
+   * Calculation: the corner is formed by extending the outer edges of the stroke
+   * at the tangents of the path segments until they intersect.
+   *
+   * @see https://github.com/fabricjs/fabric.js/pull/8344#2-1-miter
+   */
+  projectMiter() {
+    const projections: Point[] = [],
+      alpha = Math.abs(this.alpha),
+      hypotUnitScalar = 1 / Math.sin(alpha / 2),
+      miterVector = this.scaleUnitVector(
+        this.bisector,
+        -this.strokeProjectionMagnitude * hypotUnitScalar,
+      );
+
+    // When two line segments meet at a sharp angle, it is possible for the join to extend,
+    // far beyond the thickness of the line stroking the path. The stroke-miterlimit imposes
+    // a limit on the extent of the line join.
+    // MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit
+    // When the stroke is uniform, scaling changes the arrangement of points, this changes the miter-limit
+    const strokeMiterLimit = this.options.strokeUniform
+      ? magnitude(
+          this.scaleUnitVector(this.bisector, this.options.strokeMiterLimit),
+        )
+      : this.options.strokeMiterLimit;
+
+    if (
+      magnitude(miterVector) / this.strokeProjectionMagnitude <=
+      strokeMiterLimit
+    ) {
+      projections.push(this.applySkew(this.A.add(miterVector)));
+    }
+    /* when the miter-limit is reached, the stroke line join becomes of type bevel.
+      We always need two orthogonal projections which are basically bevel-type projections,
+      so regardless of whether the miter-limit was reached or not, we include these projections.
+    */
+    projections.push(...this.projectBevel());
+
+    return projections;
+  }
+
+  /**
+   * ROUND (without skew)
+   * Calculation: the projections are the two vectors parallel to X and Y axes
+   *
+   * @see https://github.com/fabricjs/fabric.js/pull/8344#2-3-1-round-without-skew
+   */
+  private projectRoundNoSkew(startCircle: Point, endCircle: Point) {
+    const projections: Point[] = [],
+      // correctSide is used to only consider projecting for the outer side
+      correctSide = new Point(
+        StrokeLineJoinProjections.getOrthogonalRotationFactor(this.bisector),
+        StrokeLineJoinProjections.getOrthogonalRotationFactor(
+          new Point(this.bisector.y, this.bisector.x),
+        ),
+      ),
+      radiusOnAxisX = new Point(1, 0)
+        .scalarMultiply(this.strokeProjectionMagnitude)
+        .multiply(this.strokeUniformScalar)
+        .multiply(correctSide),
+      radiusOnAxisY = new Point(0, 1)
+        .scalarMultiply(this.strokeProjectionMagnitude)
+        .multiply(this.strokeUniformScalar)
+        .multiply(correctSide);
+
+    [radiusOnAxisX, radiusOnAxisY].forEach((vector) => {
+      if (isBetweenVectors(vector, startCircle, endCircle)) {
+        projections.push(this.A.add(vector));
+      }
+    });
+    return projections;
+  }
+
+  /**
+   * ROUND (with skew)
+   * Calculation: the projections are the points furthest from the vertex in
+   * the direction of the X and Y axes after distortion.
+   *
+   * @see https://github.com/fabricjs/fabric.js/pull/8344#2-3-2-round-skew
+   */
+  private projectRoundWithSkew(startCircle: Point, endCircle: Point) {
+    const projections: Point[] = [];
+
+    const { skewX, skewY, scaleX, scaleY, strokeUniform } = this.options,
+      shearing = new Point(
+        Math.tan(degreesToRadians(skewX)),
+        Math.tan(degreesToRadians(skewY)),
+      );
+    // The points furthest from the vertex in the direction of the X and Y axes after distortion
+    const circleRadius = this.strokeProjectionMagnitude,
+      newY = strokeUniform
+        ? circleRadius /
+          scaleY /
+          Math.sqrt(1 / scaleY ** 2 + (1 / scaleX ** 2) * shearing.y ** 2)
+        : circleRadius / Math.sqrt(1 + shearing.y ** 2),
+      furthestY = new Point(
+        // Safe guard due to floating point precision. In some situations the square root
+        // was returning NaN because of a negative number close to zero.
+        Math.sqrt(Math.max(circleRadius ** 2 - newY ** 2, 0)),
+        newY,
+      ),
+      newX = strokeUniform
+        ? circleRadius /
+          Math.sqrt(
+            1 +
+              (shearing.x ** 2 * (1 / scaleY) ** 2) /
+                (1 / scaleX + (1 / scaleX) * shearing.x * shearing.y) ** 2,
+          )
+        : circleRadius /
+          Math.sqrt(1 + shearing.x ** 2 / (1 + shearing.x * shearing.y) ** 2),
+      furthestX = new Point(
+        newX,
+        Math.sqrt(Math.max(circleRadius ** 2 - newX ** 2, 0)),
+      );
+
+    [
+      furthestX,
+      furthestX.scalarMultiply(-1),
+      furthestY,
+      furthestY.scalarMultiply(-1),
+    ]
+      // We need to skew the vector here as this information is used to check if
+      // it is between the start and end of the circle segment
+      .map((vector) =>
+        this.applySkew(
+          strokeUniform ? vector.multiply(this.strokeUniformScalar) : vector,
+        ),
+      )
+      .forEach((vector) => {
+        if (isBetweenVectors(vector, startCircle, endCircle)) {
+          projections.push(this.applySkew(this.A).add(vector));
+        }
+      });
+
+    return projections;
+  }
+
+  projectRound() {
+    const projections: Point[] = [];
+    /* Include the start and end points of the circle segment, so that only
+      the projections contained within it are included */
+    // add the orthogonal projections (start and end points of circle segment)
+    projections.push(...this.projectBevel());
+    // let's determines which one of the orthogonal projection is the beginning and end of the circle segment.
+    // when `alpha` equals 0 or 2*PI, we have a straight line, so the way to find the start/end is different.
+    const isStraightLine = this.alpha % twoMathPi === 0,
+      // change the origin of the projections to point A
+      // so that the cross product calculation is correct
+      newOrigin = this.applySkew(this.A),
+      proj0 = projections[isStraightLine ? 0 : 2].subtract(newOrigin),
+      proj1 = projections[isStraightLine ? 1 : 0].subtract(newOrigin),
+      // when `isStraightLine` === true, we compare with the vector opposite AB, otherwise we compare with the bisector.
+      comparisonVector = isStraightLine
+        ? this.applySkew(this.AB.scalarMultiply(-1))
+        : this.applySkew(
+            this.bisector.multiply(this.strokeUniformScalar).scalarMultiply(-1),
+          ),
+      // the beginning of the circle segment is always to the right of the comparison vector (cross product > 0)
+      isProj0Start = crossProduct(proj0, comparisonVector) > 0,
+      startCircle = isProj0Start ? proj0 : proj1,
+      endCircle = isProj0Start ? proj1 : proj0;
+    if (!this.isSkewed()) {
+      projections.push(...this.projectRoundNoSkew(startCircle, endCircle));
+    } else {
+      projections.push(...this.projectRoundWithSkew(startCircle, endCircle));
+    }
+    return projections;
+  }
+
+  /**
+   * Project stroke width on points returning projections for each point as follows:
+   * - `miter`: 1 point corresponding to the outer boundary. If the miter limit is exceeded, it will be 2 points (becomes bevel)
+   * - `bevel`: 2 points corresponding to the bevel possible boundaries, orthogonal to the stroke.
+   * - `round`: same as `bevel` when it has no skew, with skew are 4 points.
+   */
+  protected projectPoints() {
+    switch (this.options.strokeLineJoin) {
+      case 'miter':
+        return this.projectMiter();
+      case 'round':
+        return this.projectRound();
+      default:
+        return this.projectBevel();
+    }
+  }
+
+  public project(): TProjection[] {
+    return this.projectPoints().map((point) => ({
+      originPoint: this.A,
+      projectedPoint: point,
+      angle: this.alpha,
+      bisector: this.bisector,
+    }));
+  }
+}

package/src/util/misc/projectStroke/StrokeProjectionsBase.ts

@@ -0,0 +1,66 @@
+import type { XY } from '../../../Point';
+import { Point } from '../../../Point';
+import { degreesToRadians } from '../radiansDegreesConversion';
+import { createVector } from '../vectors';
+import type { TProjectStrokeOnPointsOptions, TProjection } from './types';
+
+/**
+ * @see https://github.com/fabricjs/fabric.js/pull/8344
+ * @todo consider removing skewing from points before calculating stroke projection,
+ * see https://github.com/fabricjs/fabric.js/commit/494a10ee2f8c2278ae9a55b20bf50cf6ee25b064#commitcomment-94751537
+ */
+export abstract class StrokeProjectionsBase {
+  declare options: TProjectStrokeOnPointsOptions;
+  declare scale: Point;
+  declare strokeUniformScalar: Point;
+  declare strokeProjectionMagnitude: number;
+
+  constructor(options: TProjectStrokeOnPointsOptions) {
+    this.options = options;
+    this.strokeProjectionMagnitude = this.options.strokeWidth / 2;
+    this.scale = new Point(this.options.scaleX, this.options.scaleY);
+    this.strokeUniformScalar = this.options.strokeUniform
+      ? new Point(1 / this.options.scaleX, 1 / this.options.scaleY)
+      : new Point(1, 1);
+  }
+
+  /**
+   * When the stroke is uniform, scaling affects the arrangement of points. So we must take it into account.
+   */
+  protected createSideVector(from: XY, to: XY) {
+    const v = createVector(from, to);
+    return this.options.strokeUniform ? v.multiply(this.scale) : v;
+  }
+
+  protected abstract calcOrthogonalProjection(
+    from: Point,
+    to: Point,
+    magnitude?: number,
+  ): Point;
+
+  protected projectOrthogonally(from: Point, to: Point, magnitude?: number) {
+    return this.applySkew(
+      from.add(this.calcOrthogonalProjection(from, to, magnitude)),
+    );
+  }
+
+  protected isSkewed() {
+    return this.options.skewX !== 0 || this.options.skewY !== 0;
+  }
+
+  protected applySkew(point: Point) {
+    const p = new Point(point);
+    // skewY must be applied before skewX as this distortion affects skewX calculation
+    p.y += p.x * Math.tan(degreesToRadians(this.options.skewY));
+    p.x += p.y * Math.tan(degreesToRadians(this.options.skewX));
+    return p;
+  }
+
+  protected scaleUnitVector(unitVector: Point, scalar: number) {
+    return unitVector.multiply(this.strokeUniformScalar).scalarMultiply(scalar);
+  }
+
+  protected abstract projectPoints(): Point[];
+
+  public abstract project(): TProjection[];
+}

package/src/util/misc/projectStroke/index.ts

@@ -0,0 +1,81 @@
+import { Point, type XY } from '../../../Point';
+import { findIndexRight } from '../../internals/findRight';
+import { StrokeLineCapProjections } from './StrokeLineCapProjections';
+import { StrokeLineJoinProjections } from './StrokeLineJoinProjections';
+import type { TProjection, TProjectStrokeOnPointsOptions } from './types';
+
+export type * from './types';
+
+/**
+ *
+ * Used to calculate object's bounding box
+ *
+ * @see https://github.com/fabricjs/fabric.js/pull/8344
+ *
+ */
+export const projectStrokeOnPoints = (
+  points: XY[],
+  options: TProjectStrokeOnPointsOptions,
+  openPath = false,
+): TProjection[] => {
+  const projections: TProjection[] = [];
+
+  if (points.length === 0) {
+    return projections;
+  }
+
+  // first we remove duplicate neighboring points
+  const reduced = points.reduce(
+    (reduced, point) => {
+      if (!reduced[reduced.length - 1].eq(point)) {
+        reduced.push(new Point(point));
+      }
+      return reduced;
+    },
+    [new Point(points[0])],
+  );
+
+  if (reduced.length === 1) {
+    openPath = true;
+  } else if (!openPath) {
+    // remove points from end in case they equal the first point
+    // in order to correctly project the first point
+    const start = reduced[0];
+    const index = findIndexRight(reduced, (point) => !point.eq(start));
+    reduced.splice(index + 1);
+  }
+
+  reduced.forEach((A, index, points) => {
+    let B: XY, C: XY;
+    if (index === 0) {
+      C = points[1];
+      B = openPath ? A : points[points.length - 1];
+    } else if (index === points.length - 1) {
+      B = points[index - 1];
+      C = openPath ? A : points[0];
+    } else {
+      B = points[index - 1];
+      C = points[index + 1];
+    }
+
+    if (openPath && points.length === 1) {
+      projections.push(
+        ...new StrokeLineCapProjections(A, A, options).project(),
+      );
+    } else if (openPath && (index === 0 || index === points.length - 1)) {
+      projections.push(
+        ...new StrokeLineCapProjections(
+          A,
+          index === 0 ? C : B,
+          options,
+        ).project(),
+      );
+    } else {
+      projections.push(
+        ...new StrokeLineJoinProjections(A, B, C, options).project(),
+      );
+    }
+  });
+
+  return projections;
+};

package/src/util/misc/projectStroke/types.ts

@@ -0,0 +1,24 @@
+import type { Point } from '../../../Point';
+import type { TDegree, TRadian } from '../../../typedefs';
+
+export type TProjectStrokeOnPointsOptions = {
+  strokeWidth: number;
+  strokeLineCap: CanvasLineCap;
+  strokeLineJoin: CanvasLineJoin;
+  /**
+   * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-miterlimit
+   */
+  strokeMiterLimit: number;
+  strokeUniform: boolean;
+  scaleX: number;
+  scaleY: number;
+  skewX: TDegree;
+  skewY: TDegree;
+};
+
+export type TProjection = {
+  projectedPoint: Point;
+  originPoint: Point;
+  angle?: TRadian;
+  bisector?: Point;
+};

package/src/util/misc/radiansDegreesConversion.spec.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { degreesToRadians, radiansToDegrees } from './radiansDegreesConversion';
+
+describe('radiansDegreesConversion', () => {
+  describe('degreesToRadians', () => {
+    it('converts degrees to radians correctly', () => {
+      expect(degreesToRadians(0)).toBe(0);
+      expect(degreesToRadians(90)).toBe(Math.PI / 2);
+      expect(degreesToRadians(180)).toBe(Math.PI);
+
+      // @ts-expect-error -- no args
+      expect(degreesToRadians()).toBeNaN();
+    });
+  });
+
+  describe('radiansToDegrees', () => {
+    it('converts radians to degrees correctly', () => {
+      expect(radiansToDegrees).toBeTypeOf('function');
+      expect(radiansToDegrees(0)).toBe(0);
+      expect(radiansToDegrees(Math.PI / 2)).toBe(90);
+      expect(radiansToDegrees(Math.PI)).toBe(180);
+
+      // @ts-expect-error -- no args
+      expect(radiansToDegrees()).toBeNaN();
+    });
+  });
+});

package/src/util/misc/radiansDegreesConversion.ts

@@ -0,0 +1,18 @@
+import type { TRadian, TDegree } from '../../typedefs';
+import { PiBy180 } from '../../constants';
+
+/**
+ * Transforms degrees to radians.
+ * @param {TDegree} degrees value in degrees
+ * @return {TRadian} value in radians
+ */
+export const degreesToRadians = (degrees: TDegree): TRadian =>
+  (degrees * PiBy180) as TRadian;
+
+/**
+ * Transforms radians to degrees.
+ * @param {TRadian} radians value in radians
+ * @return {TDegree} value in degrees
+ */
+export const radiansToDegrees = (radians: TRadian): TDegree =>
+  (radians / PiBy180) as TDegree;