chore(TS): Path util typings and refactoring

src/brushes/PatternBrush.ts

@@ -1,8 +1,8 @@
 import { Pattern } from '../Pattern';
-import { PathData } from '../typedefs';
 import { createCanvasElement } from '../util/misc/dom';
 import type { Canvas } from '../canvas/Canvas';
 import { PencilBrush } from './PencilBrush';
+import { TSimplePathData } from '../util/path/typedefs';
 
 export class PatternBrush extends PencilBrush {
   declare source?: CanvasImageSource;
@@ -56,7 +56,7 @@ export class PatternBrush extends PencilBrush {
   /**
    * Creates path
    */
-  createPath(pathData: PathData) {
+  createPath(pathData: TSimplePathData) {
     const path = super.createPath(pathData),
       topLeft = path._getLeftTopCoords().scalarAdd(path.strokeWidth / 2);
 

src/brushes/PencilBrush.ts

@@ -2,17 +2,17 @@ import { ModifierKey, TEvent } from '../EventTypeDefs';
 import { Point } from '../Point';
 import { Shadow } from '../Shadow';
 import { Path } from '../shapes/Path';
-import { PathData } from '../typedefs';
 import { getSmoothPathFromPoints, joinPath } from '../util/path';
 import type { Canvas } from '../canvas/Canvas';
 import { BaseBrush } from './BaseBrush';
+import { TSimplePathData } from '../util/path/typedefs';
 
 /**
  * @private
- * @param {PathData} pathData SVG path commands
+ * @param {TSimplePathData} pathData SVG path commands
  * @returns {boolean}
  */
-function isEmptySVGPath(pathData: PathData): boolean {
+function isEmptySVGPath(pathData: TSimplePathData): boolean {
   return joinPath(pathData) === 'M 0 0 Q 0 0 0 0 L 0 0';
 }
 
@@ -206,20 +206,20 @@ export class PencilBrush extends BaseBrush {
 
   /**
    * Converts points to SVG path
-   * @param {Array} points Array of points
-   * @return {PathData} SVG path commands
+   * @param {Point[]} points Array of points
+   * @return {TSimplePathData} SVG path commands
    */
-  convertPointsToSVGPath(points: Point[]): PathData {
+  convertPointsToSVGPath(points: Point[]): TSimplePathData {
     const correction = this.width / 1000;
     return getSmoothPathFromPoints(points, correction);
   }
 
   /**
    * Creates a Path object to add on canvas
-   * @param {PathData} pathData Path data
+   * @param {TSimplePathData} pathData Path data
    * @return {Path} Path to add on canvas
    */
-  createPath(pathData: PathData) {
+  createPath(pathData: TSimplePathData): Path {
     const path = new Path(pathData, {
       fill: null,
       stroke: this.color,

src/cache.ts

@@ -1,4 +1,5 @@
 import { config } from './config';
+import { TBounds } from './typedefs';
 
 export class Cache {
   /**
@@ -83,7 +84,7 @@ export class Cache {
    * can eventually clear it.
    * It was an internal variable, is accessible since version 2.3.4
    */
-  boundsOfCurveCache = {};
+  boundsOfCurveCache: Record<string, TBounds> = {};
 }
 
 export const cache = new Cache();

src/canvas/Canvas.ts

@@ -1103,7 +1103,6 @@ export class Canvas extends SelectableCanvas {
       this.selection &&
       (!target ||
         (!target.selectable &&
-          // @ts-ignore
           !target.isEditing &&
           target !== this._activeObject))
     ) {
@@ -1369,7 +1368,6 @@ export class Canvas extends SelectableCanvas {
         : pointer;
     // seems used only here.
     // @TODO: investigate;
-    // @ts-ignore
     transform.reset = false;
     transform.shiftKey = e.shiftKey;
     transform.altKey = !!this.centeredKey && e[this.centeredKey];

src/parser/constants.ts

@@ -15,10 +15,7 @@ export const reNum = '(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:[eE][-+]?\\d+)?)';
 
 export const svgNS = 'http://www.w3.org/2000/svg';
 
-export const commaWsp = '(?:\\s+,?\\s*|,\\s*)';
-
-export const rePathCommand =
-  /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:[eE][-+]?\d+)?)/gi;
+export const commaWsp = String.raw`(?:\s+,?\s*|,\s*|$)`;
 
 export const reFontDeclaration = new RegExp(
   '(normal|italic)?\\s*(normal|small-caps)?\\s*' +

src/shapes/Path.ts

@@ -3,7 +3,6 @@ import { config } from '../config';
 import { SHARED_ATTRIBUTES } from '../parser/attributes';
 import { parseAttributes } from '../parser/parseAttributes';
 import { Point } from '../Point';
-import { PathData } from '../typedefs';
 import { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints';
 import { toFixed } from '../util/misc/toFixed';
 import {
@@ -15,14 +14,15 @@ import {
 } from '../util/path';
 import { classRegistry } from '../ClassRegistry';
 import { FabricObject, cacheProperties } from './Object/FabricObject';
+import { TSimplePathData } from '../util/path/typedefs';
 
 export class Path extends FabricObject {
   /**
    * Array of path points
    * @type Array
    * @default
    */
-  declare path: PathData;
+  declare path: TSimplePathData;
 
   declare pathOffset: Point;
 
@@ -36,12 +36,12 @@ export class Path extends FabricObject {
 
   /**
    * Constructor
-   * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens)
+   * @param {TSimplePathData} path Path data (sequence of coordinates and corresponding "command" tokens)
    * @param {Object} [options] Options object
    * @return {Path} thisArg
    */
   constructor(
-    path: PathData | string,
+    path: TSimplePathData | string,
     { path: _, left, top, ...options }: any = {}
   ) {
     super(options);
@@ -58,11 +58,11 @@ export class Path extends FabricObject {
 
   /**
    * @private
-   * @param {PathData | string} path Path data (sequence of coordinates and corresponding "command" tokens)
+   * @param {TSimplePathData | string} path Path data (sequence of coordinates and corresponding "command" tokens)
    * @param {boolean} [adjustPosition] pass true to reposition the object according to the bounding box
    * @returns {Point} top left position of the bounding box, useful for complementary positioning
    */
-  _setPath(path: PathData | string, adjustPosition?: boolean) {
+  _setPath(path: TSimplePathData | string, adjustPosition?: boolean) {
     this.path = makePathSimpler(Array.isArray(path) ? path : parsePath(path));
     return this.setDimensions();
   }
@@ -153,7 +153,7 @@ export class Path extends FabricObject {
 
   /**
    * Returns string representation of an instance
-   * @return {String} string representation of an instance
+   * @return {string} string representation of an instance
    */
   toString() {
     return `#<Path (${this.complexity()}): { "top": ${this.top}, "left": ${
@@ -213,7 +213,7 @@ export class Path extends FabricObject {
   /**
    * Returns svg clipPath representation of an instance
    * @param {Function} [reviver] Method for further parsing of svg representation.
-   * @return {String} svg representation of an instance
+   * @return {string} svg representation of an instance
    */
   toClipPathSVG(reviver) {
     const additionalTransform = this._getOffsetTransform();
@@ -229,7 +229,7 @@ export class Path extends FabricObject {
   /**
    * Returns svg representation of an instance
    * @param {Function} [reviver] Method for further parsing of svg representation.
-   * @return {String} svg representation of an instance
+   * @return {string} svg representation of an instance
    */
   toSVG(reviver) {
     const additionalTransform = this._getOffsetTransform();
@@ -241,7 +241,7 @@ export class Path extends FabricObject {
 
   /**
    * Returns number representation of an instance complexity
-   * @return {Number} complexity of this instance
+   * @return {number} complexity of this instance
    */
   complexity() {
     return this.path.length;

src/typedefs.ts

@@ -2,16 +2,16 @@
 import { BaseFabricObject } from './EventTypeDefs';
 import type { Gradient } from './gradient/Gradient';
 import type { Pattern } from './Pattern';
-import type { Point } from './Point';
+import type { IPoint, Point } from './Point';
 
 interface NominalTag<T> {
   nominalTag?: T;
 }
 
 type Nominal<Type, Tag> = NominalTag<Tag> & Type;
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 type TNonFunctionPropertyNames<T> = {
+  // eslint-disable-next-line @typescript-eslint/ban-types
   [K in keyof T]: T[K] extends Function ? never : K;
 }[keyof T];
 export type TClassProperties<T> = Pick<T, TNonFunctionPropertyNames<T>>;
@@ -66,11 +66,6 @@ export const enum SupportedSVGUnit {
 
 export type TMat2D = [number, number, number, number, number, number];
 
-/**
- * SVG path commands
- */
-export type PathData = (string | number)[][];
-
 /**
  * An invalid keyword and an empty string will be handled as the `anonymous` keyword.
  * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes
@@ -100,6 +95,8 @@ export type TCacheCanvasDimensions = {
   y: number;
 };
 
+export type TBounds = IPoint[];
+
 export type TToCanvasElementOptions = {
   left?: number;
   top?: number;