chore(TS): Move more utils to TS (fabricjs#8164)

src/parser/applyViewboxTransform.ts

@@ -1,6 +1,6 @@
 //@ts-nocheck
 import { svgNS } from './constants';
-import { parsePreserveAspectRatioAttribute, parseUnit } from '../util';
+import { parsePreserveAspectRatioAttribute, parseUnit } from '../util/misc/svgParsing';
 import { svgViewBoxElementsRegEx, reViewBoxAttrValue } from './constants';
 
 /**

src/parser/normalizeValue.ts

@@ -1,5 +1,6 @@
 //@ts-nocheck
-import { multiplyTransformMatrices, parseUnit } from '../util';
+import { multiplyTransformMatrices } from '../util/misc/matrix';
+import { parseUnit } from '../util/misc/svgParsing';
 import { parseTransformAttribute } from "./parseTransformAttribute";
 
 

src/parser/parseAttributes.ts

@@ -1,6 +1,6 @@
 //@ts-nocheck
 import { DEFAULT_SVG_FONT_SIZE } from '../constants';
-import { parseUnit } from '../util';
+import { parseUnit } from '../util/misc/svgParsing';
 import { cPath, fSize, svgValidParentsRegEx } from './constants';
 import { getGlobalStylesForElement } from "./getGlobalStylesForElement";
 import { normalizeAttr } from './normalizeAttr';

src/parser/parseFontDeclaration.ts

@@ -1,5 +1,5 @@
 //@ts-nocheck
-import { parseUnit } from '../util';
+import { parseUnit } from '../util/misc/svgParsing';
 import { reFontDeclaration } from './constants';
 
 /**

src/parser/parseSVGDocument.ts

@@ -1,7 +1,6 @@
 //@ts-nocheck
 
 import { fabric } from '../../HEADER';
-import { toArray } from '../util';
 import { applyViewboxTransform } from "./applyViewboxTransform";
 import { clipPaths, cssRules, gradientDefs, svgInvalidAncestorsRegEx, svgValidTagNamesRegEx } from "./constants";
 import { getCSSRules } from './getCSSRules';
@@ -32,7 +31,7 @@ export function parseSVGDocument(doc, callback, reviver, parsingOptions) {
   }
   parseUseDirectives(doc);
 
-  let svgUid = fabric.Object.__uid++, i, len, options = applyViewboxTransform(doc), descendants = toArray(doc.getElementsByTagName('*'));
+  let svgUid = fabric.Object.__uid++, i, len, options = applyViewboxTransform(doc), descendants = fabric.util.toArray(doc.getElementsByTagName('*'));
   options.crossOrigin = parsingOptions && parsingOptions.crossOrigin;
   options.svgUid = svgUid;
   options.signal = parsingOptions && parsingOptions.signal;
@@ -62,7 +61,7 @@ export function parseSVGDocument(doc, callback, reviver, parsingOptions) {
     return el.nodeName.replace('svg:', '') === 'clipPath';
   }).forEach(function (el) {
     const id = el.getAttribute('id');
-    localClipPaths[id] = toArray(el.getElementsByTagName('*')).filter(function (el) {
+    localClipPaths[id] = fabric.util.toArray(el.getElementsByTagName('*')).filter(function (el) {
       return svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', ''));
     });
   });

src/parser/parseTransformAttribute.ts

@@ -1,7 +1,8 @@
 //@ts-nocheck
 import {  iMatrix } from '../constants';
 import { commaWsp,reNum } from './constants';
-import { degreesToRadians, multiplyTransformMatrices } from '../util';
+import { multiplyTransformMatrices } from '../util/misc/matrix';
+import { degreesToRadians } from '../util/misc/radiansDegreesConversion';
 import { rotateMatrix } from './rotateMatrix';
 import { scaleMatrix } from './scaleMatrix';
 import { skewMatrix } from './skewMatrix';

src/parser/rotateMatrix.ts

@@ -1,9 +1,10 @@
 //@ts-nocheck
-import { cos, sin } from '../util';
-
+import { cos } from '../util/misc/cos';
+import { sin } from '../util/misc/sin';
 
 export function rotateMatrix(matrix, args) {
-    let cosValue = cos(args[0]), sinValue = sin(args[0]), x = 0, y = 0;
+    const cosValue = cos(args[0]), sinValue = sin(args[0]);
+    let x = 0, y = 0;
     if (args.length === 3) {
         x = args[1];
         y = args[2];

src/parser/setStrokeFillOpacity.ts

@@ -1,7 +1,7 @@
 //@ts-nocheck
 import { fabric } from '../../HEADER';
 import { Color } from '../color';
-import { toFixed } from '../util';
+import { toFixed } from '../util/misc/toFixed';
 import { colorAttributes } from './constants';
 
 /**

src/parser/skewMatrix.ts

@@ -1,5 +1,5 @@
 //@ts-nocheck
-import { degreesToRadians } from '../util';
+import { degreesToRadians } from '../util/misc/radiansDegreesConversion';
 
 
 export function skewMatrix(matrix, args, pos) {

src/point.class.ts

@@ -362,6 +362,14 @@ export class Point {
     return fabric.util.rotateVector(this.subtract(origin), radians).add(origin);
   }
 
+  /**
+   * Apply transform t to point p
+   * @static
+   * @memberOf fabric.util
+   * @param  {TMat2D} t The transform
+   * @param  {Boolean} [ignoreOffset] Indicates that the offset should not be applied
+   * @return {Point} The transformed point
+   */
   transform(t: TMat2D, ignoreOffset: boolean): Point {
     return new Point(
       t[0] * this.x + t[2] * this.y + (ignoreOffset ? 0 : t[4]),

src/shapes/object.class.ts

@@ -1,5 +1,6 @@
 //@ts-nocheck
 import { Point } from '../point.class';
+import { capValue } from '../util/misc/capValue';
 
 (function(global) {
   var fabric = global.fabric || (global.fabric = { }),
@@ -692,7 +693,6 @@ import { Point } from '../point.class';
         return dims;
       }
       var ar = width / height, limitedDims = fabric.util.limitDimsByArea(ar, perfLimitSizeTotal),
-          capValue = fabric.util.capValue,
           x = capValue(min, limitedDims.x, max),
           y = capValue(min, limitedDims.y, max);
       if (width > x) {

src/typedefs.ts

@@ -17,4 +17,25 @@ export const enum StrokeLineJoin {
   round = 'round',
 }
 
+export const enum ImageFormat {
+  jpeg = 'jpeg',
+  jpg = 'jpeg',
+  png = 'png',
+}
+
+export const enum SVGElementName {
+  linearGradient = 'linearGradient',
+  radialGradient = 'radialGradient',
+  stop = 'stop',
+}
+
+export const enum SupportedSVGUnit {
+  mm = 'mm',
+  cm = 'cm',
+  in = 'in',
+  pt = 'pt',
+  pc = 'pc',
+  em = 'em',
+}
+
 export type TMat2D = [number, number, number, number, number, number];

src/util/misc/capValue.ts

@@ -0,0 +1 @@
+export const capValue = (min: number, value: number, max: number) => Math.max(min, Math.min(value, max));

src/util/misc/dom.ts

@@ -0,0 +1,44 @@
+import { fabric } from '../../../HEADER';
+import { ImageFormat } from '../../typedefs';
+/**
+ * Creates canvas element
+ * @static
+ * @memberOf fabric.util
+ * @return {CanvasElement} initialized canvas element
+ */
+export const createCanvasElement = (): HTMLCanvasElement => fabric.document.createElement('canvas');
+
+/**
+ * Creates image element (works on client and node)
+ * @static
+ * @memberOf fabric.util
+ * @return {HTMLImageElement} HTML image element
+ */
+export const createImage = () =>fabric.document.createElement('img');
+
+/**
+ * Creates a canvas element that is a copy of another and is also painted
+ * @param {CanvasElement} canvas to copy size and content of
+ * @static
+ * @memberOf fabric.util
+ * @return {CanvasElement} initialized canvas element
+ */
+export const copyCanvasElement = (canvas: HTMLCanvasElement): HTMLCanvasElement => {
+  const newCanvas = createCanvasElement();
+  newCanvas.width = canvas.width;
+  newCanvas.height = canvas.height;
+  newCanvas.getContext('2d')?.drawImage(canvas, 0, 0);
+  return newCanvas;
+};
+
+/**
+ * since 2.6.0 moved from canvas instance to utility.
+ * possibly useless
+ * @param {CanvasElement} canvasEl to copy size and content of
+ * @param {String} format 'jpeg' or 'png', in some browsers 'webp' is ok too
+ * @param {Number} quality <= 1 and > 0
+ * @static
+ * @memberOf fabric.util
+ * @return {String} data url
+ */
+export const toDataURL = (canvasEl: HTMLCanvasElement, format: ImageFormat, quality: number) => canvasEl.toDataURL(`image/${format}`, quality);

src/util/misc/findScaleTo.ts

@@ -0,0 +1,36 @@
+interface IWithDimensions {
+  width: number;
+  height: number;
+}
+
+/**
+ * Finds the scale for the object source to fit inside the object destination,
+ * keeping aspect ratio intact.
+ * respect the total allowed area for the cache.
+ * @memberOf fabric.util
+ * @param {Object | fabric.Object} source
+ * @param {Number} source.height natural unscaled height of the object
+ * @param {Number} source.width natural unscaled width of the object
+ * @param {Object | fabric.Object} destination
+ * @param {Number} destination.height natural unscaled height of the object
+ * @param {Number} destination.width natural unscaled width of the object
+ * @return {Number} scale factor to apply to source to fit into destination
+ */
+export const findScaleToFit = (source: IWithDimensions, destination: IWithDimensions) =>
+  Math.min(destination.width / source.width, destination.height / source.height);
+
+/**
+ * Finds the scale for the object source to cover entirely the object destination,
+ * keeping aspect ratio intact.
+ * respect the total allowed area for the cache.
+ * @memberOf fabric.util
+ * @param {Object | fabric.Object} source
+ * @param {Number} source.height natural unscaled height of the object
+ * @param {Number} source.width natural unscaled width of the object
+ * @param {Object | fabric.Object} destination
+ * @param {Number} destination.height natural unscaled height of the object
+ * @param {Number} destination.width natural unscaled width of the object
+ * @return {Number} scale factor to apply to source to cover destination
+ */
+export const findScaleToCover = (source: IWithDimensions, destination: IWithDimensions) =>
+  Math.max(destination.width / source.width, destination.height / source.height);