fabric 5.3.0-browser → 6.0.0-beta1

package/src/util/misc/planeChange.ts

@@ -0,0 +1,136 @@
+import { iMatrix } from '../../constants';
+import type { Point } from '../../Point';
+import type { FabricObject } from '../../shapes/Object/FabricObject';
+import type { TMat2D } from '../../typedefs';
+import type { StaticCanvas } from '../../canvas/StaticCanvas';
+import { invertTransform, multiplyTransformMatrices } from './matrix';
+import { applyTransformToObject } from './objectTransforms';
+
+export const enum ObjectRelation {
+  sibling = 'sibling',
+  child = 'child',
+}
+
+/**
+ * We are actually looking for the transformation from the destination plane to the source plane (change of basis matrix)\
+ * The object will exist on the destination plane and we want it to seem unchanged by it so we invert the destination matrix (`to`) and then apply the source matrix (`from`)
+ * @param [from]
+ * @param [to]
+ * @returns
+ */
+export const calcPlaneChangeMatrix = (
+  from: TMat2D = iMatrix,
+  to: TMat2D = iMatrix
+) => multiplyTransformMatrices(invertTransform(to), from);
+
+/**
+ * Sends a point from the source coordinate plane to the destination coordinate plane.\
+ * From the canvas/viewer's perspective the point remains unchanged.
+ *
+ * @example <caption>Send point from canvas plane to group plane</caption>
+ * var obj = new Rect({ left: 20, top: 20, width: 60, height: 60, strokeWidth: 0 });
+ * var group = new Group([obj], { strokeWidth: 0 });
+ * var sentPoint1 = sendPointToPlane(new Point(50, 50), undefined, group.calcTransformMatrix());
+ * var sentPoint2 = sendPointToPlane(new Point(50, 50), iMatrix, group.calcTransformMatrix());
+ * console.log(sentPoint1, sentPoint2) //  both points print (0,0) which is the center of group
+ *
+ * @see {transformPointRelativeToCanvas} for transforming relative to canvas
+ * @param {Point} point
+ * @param {TMat2D} [from] plane matrix containing object. Passing `undefined` is equivalent to passing the identity matrix, which means `point` exists in the canvas coordinate plane.
+ * @param {TMat2D} [to] destination plane matrix to contain object. Passing `undefined` means `point` should be sent to the canvas coordinate plane.
+ * @returns {Point} transformed point
+ */
+export const sendPointToPlane = (
+  point: Point,
+  from: TMat2D = iMatrix,
+  to: TMat2D = iMatrix
+): Point =>
+  //  we are actually looking for the transformation from the destination plane to the source plane (which is a linear mapping)
+  //  the object will exist on the destination plane and we want it to seem unchanged by it so we reverse the destination matrix (to) and then apply the source matrix (from)
+  point.transform(calcPlaneChangeMatrix(from, to));
+
+/**
+ * Transform point relative to canvas.
+ * From the viewport/viewer's perspective the point remains unchanged.
+ *
+ * `child` relation means `point` exists in the coordinate plane created by `canvas`.
+ * In other words point is measured according to canvas' top left corner
+ * meaning that if `point` is equal to (0,0) it is positioned at canvas' top left corner.
+ *
+ * `sibling` relation means `point` exists in the same coordinate plane as canvas.
+ * In other words they both relate to the same (0,0) and agree on every point, which is how an event relates to canvas.
+ *
+ * @param {Point} point
+ * @param {StaticCanvas} canvas
+ * @param {'sibling'|'child'} relationBefore current relation of point to canvas
+ * @param {'sibling'|'child'} relationAfter desired relation of point to canvas
+ * @returns {Point} transformed point
+ */
+export const transformPointRelativeToCanvas = (
+  point: Point,
+  canvas: StaticCanvas,
+  relationBefore: ObjectRelation,
+  relationAfter: ObjectRelation
+): Point => {
+  // is this still needed with TS?
+  if (
+    relationBefore !== ObjectRelation.child &&
+    relationBefore !== ObjectRelation.sibling
+  ) {
+    throw new Error(`fabric.js: received bad argument ${relationBefore}`);
+  }
+  if (
+    relationAfter !== ObjectRelation.child &&
+    relationAfter !== ObjectRelation.sibling
+  ) {
+    throw new Error(`fabric.js: received bad argument ${relationAfter}`);
+  }
+  if (relationBefore === relationAfter) {
+    return point;
+  }
+  const t = canvas.viewportTransform;
+  return point.transform(relationAfter === 'child' ? invertTransform(t) : t);
+};
+
+/**
+ *
+ * A util that abstracts applying transform to objects.\
+ * Sends `object` to the destination coordinate plane by applying the relevant transformations.\
+ * Changes the space/plane where `object` is drawn.\
+ * From the canvas/viewer's perspective `object` remains unchanged.
+ *
+ * @example <caption>Move clip path from one object to another while preserving it's appearance as viewed by canvas/viewer</caption>
+ * let obj, obj2;
+ * let clipPath = new Circle({ radius: 50 });
+ * obj.clipPath = clipPath;
+ * // render
+ * sendObjectToPlane(clipPath, obj.calcTransformMatrix(), obj2.calcTransformMatrix());
+ * obj.clipPath = undefined;
+ * obj2.clipPath = clipPath;
+ * // render, clipPath now clips obj2 but seems unchanged from the eyes of the viewer
+ *
+ * @example <caption>Clip an object's clip path with an existing object</caption>
+ * let obj, existingObj;
+ * let clipPath = new Circle({ radius: 50 });
+ * obj.clipPath = clipPath;
+ * let transformTo = multiplyTransformMatrices(obj.calcTransformMatrix(), clipPath.calcTransformMatrix());
+ * sendObjectToPlane(existingObj, existingObj.group?.calcTransformMatrix(), transformTo);
+ * clipPath.clipPath = existingObj;
+ *
+ * @param {FabricObject} object
+ * @param {Matrix} [from] plane matrix containing object. Passing `undefined` is equivalent to passing the identity matrix, which means `object` is a direct child of canvas.
+ * @param {Matrix} [to] destination plane matrix to contain object. Passing `undefined` means `object` should be sent to the canvas coordinate plane.
+ * @returns {Matrix} the transform matrix that was applied to `object`
+ */
+export const sendObjectToPlane = (
+  object: FabricObject,
+  from?: TMat2D,
+  to?: TMat2D
+): TMat2D => {
+  const t = calcPlaneChangeMatrix(from, to);
+  applyTransformToObject(
+    object,
+    multiplyTransformMatrices(t, object.calcOwnMatrix())
+  );
+  return t;
+};

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

@@ -0,0 +1,112 @@
+import { IPoint, Point } from '../../../Point';
+import { createVector, getOrthonormalVector, getUnitVector } from '../vectors';
+import { StrokeLineJoinProjections } from './StrokeLineJoinProjections';
+import { StrokeProjectionsBase } from './StrokeProjectionsBase';
+import { 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: IPoint, T: IPoint, 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() {
+    return new StrokeLineJoinProjections(
+      this.A,
+      this.T,
+      this.T,
+      this.options
+    ).projectRound();
+  }
+
+  /**
+   * 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 orthogonalProjection = this.calcOrthogonalProjection(
+      this.A,
+      this.T,
+      this.strokeProjectionMagnitude
+    );
+    const strokePointingOut = this.scaleUnitVector(
+      getUnitVector(createVector(this.A, this.T)),
+      -this.strokeProjectionMagnitude
+    );
+    const projectedA = this.A.add(strokePointingOut);
+    return [
+      projectedA.add(orthogonalProjection),
+      projectedA.subtract(orthogonalProjection),
+    ].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,231 @@
+import { IPoint, Point } from '../../../Point';
+import { degreesToRadians } from '../radiansDegreesConversion';
+import { getBisector, getOrthonormalVector, magnitude } from '../vectors';
+import { StrokeProjectionsBase } from './StrokeProjectionsBase';
+import { TProjection, TProjectStrokeOnPointsOptions } from './types';
+
+/**
+ * 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 bisector of A (∠BAC)
+   */
+  declare bisector: ReturnType<typeof getBisector>;
+
+  constructor(
+    A: IPoint,
+    B: IPoint,
+    C: IPoint,
+    options: TProjectStrokeOnPointsOptions
+  ) {
+    super(options);
+    this.A = new Point(A);
+    this.B = new Point(B);
+    this.C = new Point(C);
+    // First we calculate the bisector between the points. Used in `round` and `miter` cases
+    // When the stroke is uniform, scaling changes the arrangement of the points, so we have to take it into account
+    this.bisector = this.options.strokeUniform
+      ? getBisector(
+          this.A.multiply(this.scale),
+          this.B.multiply(this.scale),
+          this.C.multiply(this.scale)
+        )
+      : getBisector(this.A, this.B, this.C);
+  }
+
+  get bisectorVector() {
+    return this.bisector.vector;
+  }
+
+  get bisectorAngle() {
+    return this.bisector.angle;
+  }
+
+  calcOrthogonalProjection(
+    from: Point,
+    to: Point,
+    magnitude: number = this.strokeProjectionMagnitude
+  ) {
+    const vector = this.createSideVector(from, to);
+    const orthogonalProjection = getOrthonormalVector(vector);
+    const correctSide = StrokeProjectionsBase.getAcuteAngleFactor(
+      orthogonalProjection,
+      this.bisectorVector
+    );
+    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() {
+    return [this.B, this.C].map((to) => this.projectOrthogonally(this.A, to));
+  }
+
+  /**
+   * 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 alpha = Math.abs(this.bisectorAngle),
+      hypotUnitScalar = 1 / Math.sin(alpha / 2),
+      miterVector = this.scaleUnitVector(
+        this.bisectorVector,
+        -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
+      ? hypotUnitScalar
+      : this.options.strokeMiterLimit;
+
+    if (
+      magnitude(miterVector) / this.strokeProjectionMagnitude <=
+      strokeMiterLimit
+    ) {
+      return [this.applySkew(this.A.add(miterVector))];
+    } else {
+      // when the miter-limit is reached, the stroke line join becomes of type bevel
+      return this.projectBevel();
+    }
+  }
+
+  /**
+   * 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() {
+    // correctSide is used to only consider projecting for the outer side
+    const correctSide = new Point(
+        StrokeProjectionsBase.getAcuteAngleFactor(this.bisectorVector),
+        StrokeProjectionsBase.getAcuteAngleFactor(
+          new Point(this.bisectorVector.y, this.bisectorVector.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);
+
+    return [this.A.add(radiusOnAxisX), this.A.add(radiusOnAxisY)];
+  }
+
+  /**
+   * ROUND (with skew)
+   * Calculation: the projections are the points furthest from the vertex in
+   * the direction of the X and Y axes after distortion.
+   *
+   * @todo TODO:
+   *  - Consider only projections that are inside the beginning and end of the circle segment
+   *
+   * @see https://github.com/fabricjs/fabric.js/pull/8344#2-3-2-round-skew
+   */
+  private projectRoundWithSkew() {
+    const projections: Point[] = [];
+
+    // The start and end points of the circle segment
+    [this.B, this.C].forEach((to) =>
+      projections.push(this.projectOrthogonally(this.A, to))
+    );
+
+    const { skewX, skewY } = this.options;
+    // The points furthest from the vertex in the direction of the X and Y axes after distortion
+    const circleRadius = new Point()
+        .scalarAdd(this.strokeProjectionMagnitude)
+        .multiply(this.strokeUniformScalar),
+      newY =
+        circleRadius.y / Math.sqrt(1 + Math.tan(degreesToRadians(skewY)) ** 2),
+      furthestY = new Point(
+        Math.sqrt(
+          circleRadius.x ** 2 - ((newY * circleRadius.x) / circleRadius.y) ** 2
+        ),
+        newY
+      ),
+      newX =
+        circleRadius.x / Math.sqrt(1 + Math.tan(degreesToRadians(skewX)) ** 2),
+      furthestX = new Point(
+        newX,
+        Math.sqrt(newY ** 2 - ((newX * newY) / circleRadius.x) ** 2)
+      );
+
+    [furthestX, furthestY].forEach((vector) => {
+      projections.push(
+        this.applySkew(this.A.add(vector)),
+        this.applySkew(this.A.subtract(vector))
+      );
+    });
+
+    return projections;
+  }
+
+  projectRound() {
+    if (!this.isSkewed()) {
+      return this.projectRoundNoSkew();
+    } else {
+      return this.projectRoundWithSkew();
+    }
+  }
+
+  /**
+   * 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,
+      bisector: this.bisector,
+    }));
+  }
+}

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

@@ -0,0 +1,75 @@
+import { halfPI } from '../../../constants';
+import { IPoint, Point } from '../../../Point';
+import { degreesToRadians } from '../radiansDegreesConversion';
+import {
+  calcAngleBetweenVectors,
+  calcVectorRotation,
+  createVector,
+} from '../vectors';
+import { TProjectStrokeOnPointsOptions, TProjection } from './types';
+
+/**
+ * @see https://github.com/fabricjs/fabric.js/pull/8344
+ */
+export abstract class StrokeProjectionsBase {
+  declare options: TProjectStrokeOnPointsOptions;
+  declare scale: Point;
+  declare strokeUniformScalar: Point;
+  declare strokeProjectionMagnitude: number;
+
+  static getAcuteAngleFactor(vector1: Point, vector2?: Point) {
+    const angle = vector2
+      ? calcAngleBetweenVectors(vector1, vector2)
+      : calcVectorRotation(vector1);
+    return Math.abs(angle) < halfPI ? -1 : 1;
+  }
+
+  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: IPoint, to: IPoint) {
+    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,53 @@
+import { IPoint } from '../../../Point';
+import { StrokeLineCapProjections } from './StrokeLineCapProjections';
+import { StrokeLineJoinProjections } from './StrokeLineJoinProjections';
+import { TProjection, TProjectStrokeOnPointsOptions } from './types';
+
+/**
+ *
+ * Used to calculate object's bounding box
+ *
+ * @see https://github.com/fabricjs/fabric.js/pull/8344
+ *
+ */
+export const projectStrokeOnPoints = (
+  points: IPoint[],
+  options: TProjectStrokeOnPointsOptions,
+  openPath = false
+): TProjection[] => {
+  const projections: TProjection[] = [];
+
+  if (points.length <= 1) {
+    return projections;
+  }
+
+  points.forEach((A, index) => {
+    let B: IPoint, C: IPoint;
+    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 && (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 { Point } from '../../../Point';
+import { TDegree } from '../../../typedefs';
+import { getBisector } from '../vectors';
+
+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;
+  bisector?: ReturnType<typeof getBisector>;
+};

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;

package/src/util/misc/resolveOrigin.ts

@@ -0,0 +1,22 @@
+import { TOriginX, TOriginY } from '../../typedefs';
+
+const originOffset = {
+  left: -0.5,
+  top: -0.5,
+  center: 0,
+  bottom: 0.5,
+  right: 0.5,
+};
+/**
+ * Resolves origin value relative to center
+ * @private
+ * @param {TOriginX | TOriginY} originValue originX / originY
+ * @returns number
+ */
+
+export const resolveOrigin = (
+  originValue: TOriginX | TOriginY | number
+): number =>
+  typeof originValue === 'string'
+    ? originOffset[originValue]
+    : originValue - 0.5;

package/src/util/misc/rotatePoint.ts

@@ -0,0 +1,15 @@
+import type { Point } from '../../Point';
+import type { TRadian } from '../../typedefs';
+/**
+ * Rotates `point` around `origin` with `radians`
+ * @deprecated use the Point.rotate
+ * @param {Point} origin The origin of the rotation
+ * @param {Point} origin The origin of the rotation
+ * @param {TRadian} radians The radians of the angle for the rotation
+ * @return {Point} The new rotated point
+ */
+export const rotatePoint = (
+  point: Point,
+  origin: Point,
+  radians: TRadian
+): Point => point.rotate(radians, origin);