fabric 6.2.0 → 6.3.0

package/src/util/animation/animations.spec.ts

@@ -56,7 +56,7 @@ describe('animate', () => {
       startValue: 'red',
       endValue: 'blue',
       duration,
-      onChange: function (val, changePerc) {
+      onChange: function (_val, changePerc) {
         changePercSnap.push(changePerc);
       },
       onComplete: function (val, changePerc, timePerc) {
@@ -77,7 +77,7 @@ describe('animate', () => {
       startValue: 'rgba(255, 0, 0, 0.9)',
       endValue: 'rgba(0, 0, 255, 0.7)',
       duration: 16,
-      onComplete: function (val, changePerc, timePerc) {
+      onComplete: function (val, _changePerc, _timePerc) {
         // 'color is animated on all 4 values'
         expect(val).toEqual('rgba(0,0,255,0.7)');
       },
@@ -114,7 +114,7 @@ describe('animate', () => {
         expect(changePerc).toBe((0.9 - alpha) / (0.9 - 0.7));
         called = true;
       },
-      onComplete: function (val, changePerc, timePerc) {
+      onComplete: function (val, _changePerc, _timePerc) {
         // 'color is animated on all 4 values';
         expect(val).toBe('rgba(255,0,0,0.7)');
       },
@@ -353,7 +353,7 @@ describe('animate', () => {
         onComplete: function () {
           completeInvocations++;
         },
-      }
+      },
     );
     jest.advanceTimersByTime(32);
     expect(Math.round(object.get('left'))).toBe(1);
@@ -368,7 +368,7 @@ describe('animate', () => {
       startValue: [1, 2, 3],
       endValue: [2, 4, 6],
       duration,
-      onChange: (currentValue, valueProgress) => {
+      onChange: (currentValue, _valueProgress) => {
         expect(runningAnimations.length).toBe(1);
         expect(Array.isArray(currentValue)).toBe(true);
         expect(Object.isFrozen(runningAnimations[0].value)).toBe(true);
@@ -405,7 +405,7 @@ describe('animate', () => {
           context = this;
           return true;
         },
-      }
+      },
     );
     jest.advanceTimersByTime(100);
     expect(Math.round(object.get('left'))).toBe(123);
@@ -477,7 +477,7 @@ describe('easing', () => {
             });
           },
           easing: easingFunction,
-        }
+        },
       );
       jest.advanceTimersByTime(duration + 16);
       expect(snapshot).toMatchSnapshot();

package/src/util/animation/easing.ts

@@ -26,7 +26,7 @@ const elastic = (
   s: number,
   p: number,
   t: number,
-  d: number
+  d: number,
 ): number =>
   a * Math.pow(2, 10 * (t -= 1)) * Math.sin(((t * d - s) * twoMathPi) / p);
 

package/src/util/animation/types.ts

@@ -1,5 +1,4 @@
 import type { TColorArg } from '../../color/typedefs';
-import type { AnimationBase } from './AnimationBase';
 
 export type AnimationState = 'pending' | 'running' | 'completed' | 'aborted';
 
@@ -13,7 +12,7 @@ export type AnimationState = 'pending' | 'running' | 'completed' | 'aborted';
 export type TOnAnimationChangeCallback<T, R = void> = (
   value: T,
   valueProgress: number,
-  durationProgress: number
+  durationProgress: number,
 ) => R;
 
 /**
@@ -38,13 +37,13 @@ export type TEasingFunction<T = unknown> = T extends number[]
       startValue: number,
       byValue: number,
       duration: number,
-      index: number
+      index: number,
     ) => number
   : (
       timeElapsed: number,
       startValue: number,
       byValue: number,
-      duration: number
+      duration: number,
     ) => number;
 
 export type TAnimationBaseOptions<T> = {
@@ -133,5 +132,5 @@ export type AnimationOptions<T extends number | number[] | TColorArg> =
   T extends TColorArg
     ? ColorAnimationOptions
     : T extends number[]
-    ? ArrayAnimationOptions
-    : ValueAnimationOptions;
+      ? ArrayAnimationOptions
+      : ValueAnimationOptions;

package/src/util/applyMixins.ts

@@ -5,7 +5,7 @@ import type { Constructor } from '../typedefs';
  */
 export function applyMixins<T extends Constructor, S extends Constructor>(
   derivedCtor: T,
-  constructors: S[]
+  constructors: S[],
 ) {
   constructors.forEach((baseCtor) => {
     Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
@@ -14,7 +14,7 @@ export function applyMixins<T extends Constructor, S extends Constructor>(
           derivedCtor.prototype,
           name,
           Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
-            Object.create(null)
+            Object.create(null),
         );
     });
   });

package/src/util/dom_style.ts

@@ -7,7 +7,7 @@
  */
 export function setStyle(
   element: HTMLElement,
-  styles: string | Record<string, string>
+  styles: string | Record<string, string>,
 ) {
   const elementStyle = element.style;
   if (!elementStyle) {
@@ -16,7 +16,7 @@ export function setStyle(
     element.style.cssText += ';' + styles;
   } else {
     Object.entries(styles).forEach(([property, value]) =>
-      elementStyle.setProperty(property, value)
+      elementStyle.setProperty(property, value),
     );
   }
 }

package/src/util/internals/cloneDeep.ts

@@ -1,2 +1,8 @@
+/**
+ * @deprecated Using a generic JSON parse/stringify on random object may bring to slow perf issues,
+ * if needed to clone complicated data structures use a dedicated clone logic
+ * @param object
+ * @returns
+ */
 export const cloneDeep = <T extends object>(object: T): T =>
   JSON.parse(JSON.stringify(object));

package/src/util/internals/cloneStyles.spec.ts

@@ -0,0 +1,46 @@
+import { cloneStyles } from './cloneStyles';
+import type {
+  TextStyle,
+  CompleteTextStyleDeclaration,
+} from '../../shapes/Text/StyledText';
+
+describe('cloneStyles', () => {
+  it('clones a styles object deeply', () => {
+    const style: CompleteTextStyleDeclaration = {
+      fill: 'blue',
+      stroke: 'red',
+      strokeWidth: 8,
+      fontSize: 44,
+      fontFamily: 'Roboto',
+      fontWeight: 'bold',
+      fontStyle: 'italic',
+      textBackgroundColor: 'green',
+      deltaY: -5,
+      overline: true,
+      underline: false,
+      linethrough: true,
+    };
+
+    const testObject: TextStyle = {
+      0: {
+        0: style,
+        6: style,
+      },
+      1: {
+        0: style,
+        3: style,
+      },
+      2: {
+        0: style,
+        3: style,
+      },
+    };
+    const cloned = cloneStyles(testObject);
+    expect(cloned).toEqual(testObject);
+    expect(cloned).not.toBe(testObject);
+    expect(cloned[0]).toEqual(testObject[0]);
+    expect(cloned[0]).not.toBe(testObject[0]);
+    expect(cloned[2][3]).toEqual(testObject[2][3]);
+    expect(cloned[2][3]).not.toBe(testObject[2][3]);
+  });
+});

package/src/util/internals/cloneStyles.ts

@@ -0,0 +1,12 @@
+import type { TextStyle } from '../../shapes/Text/StyledText';
+
+export const cloneStyles = (style: TextStyle): TextStyle => {
+  const newObj: TextStyle = {};
+  Object.keys(style).forEach((key) => {
+    newObj[key] = {};
+    Object.keys(style[key]).forEach((keyInner) => {
+      newObj[key][keyInner] = { ...style[key][keyInner] };
+    });
+  });
+  return newObj;
+};

package/src/util/internals/findRight.ts

@@ -1,6 +1,6 @@
 export const findIndexRight = <T>(
   array: T[],
-  predicate: (value: T, index: number, array: T[]) => boolean
+  predicate: (value: T, index: number, array: T[]) => boolean,
 ) => {
   for (let index = array.length - 1; index >= 0; index--) {
     if (predicate(array[index], index, array)) {

package/src/util/internals/getRandomInt.test.ts

@@ -25,7 +25,7 @@ describe('getRandomInt', () => {
     expect(semiRandom).toBe(9);
   });
   it('thanks to js sillyness could also go out of bounds', () => {
-    // eslint-disable-next-line @typescript-eslint/no-loss-of-precision
+    // eslint-disable-next-line no-loss-of-precision
     (global.Math.random as jest.Mock).mockReturnValue(0.9999999999999999999);
     const semiRandom = getRandomInt(4, 9);
     expect(semiRandom).toBe(10);

package/src/util/misc/boundingBoxFromPoints.ts

@@ -24,7 +24,7 @@ export const makeBoundingBoxFromPoints = (points: XY[]): TBBox => {
         max: max.max(curr),
       };
     },
-    { min: new Point(points[0]), max: new Point(points[0]) }
+    { min: new Point(points[0]), max: new Point(points[0]) },
   );
 
   const size = max.subtract(min);

package/src/util/misc/dom.ts

@@ -26,7 +26,7 @@ export const createImage = (): HTMLImageElement =>
  * @return {CanvasElement} initialized canvas element
  */
 export const copyCanvasElement = (
-  canvas: HTMLCanvasElement
+  canvas: HTMLCanvasElement,
 ): HTMLCanvasElement => {
   const newCanvas = createCanvasElement();
   newCanvas.width = canvas.width;
@@ -46,11 +46,11 @@ export const copyCanvasElement = (
 export const toDataURL = (
   canvasEl: HTMLCanvasElement,
   format: ImageFormat,
-  quality: number
+  quality: number,
 ) => canvasEl.toDataURL(`image/${format}`, quality);
 
 export const isHTMLCanvas = (
-  canvas?: HTMLCanvasElement | string
+  canvas?: HTMLCanvasElement | string,
 ): canvas is HTMLCanvasElement => {
   return !!canvas && (canvas as HTMLCanvasElement).getContext !== undefined;
 };

package/src/util/misc/findScaleTo.ts

@@ -11,7 +11,7 @@ import type { TSize } from '../../typedefs';
 export const findScaleToFit = (source: TSize, destination: TSize) =>
   Math.min(
     destination.width / source.width,
-    destination.height / source.height
+    destination.height / source.height,
   );
 
 /**
@@ -25,5 +25,5 @@ export const findScaleToFit = (source: TSize, destination: TSize) =>
 export const findScaleToCover = (source: TSize, destination: TSize) =>
   Math.max(
     destination.width / source.width,
-    destination.height / source.height
+    destination.height / source.height,
   );

package/src/util/misc/groupSVGElements.ts

@@ -11,7 +11,7 @@ import type { FabricObject } from '../../shapes/Object/FabricObject';
  */
 export const groupSVGElements = (
   elements: FabricObject[],
-  options?: Partial<GroupProps>
+  options?: Partial<GroupProps>,
 ) => {
   if (elements && elements.length === 1) {
     return elements[0];

package/src/util/misc/isTransparent.ts

@@ -11,7 +11,7 @@ export const isTransparent = (
   ctx: CanvasRenderingContext2D,
   x: number,
   y: number,
-  tolerance: number
+  tolerance: number,
 ): boolean => {
   tolerance = Math.round(tolerance);
   const size = tolerance * 2 + 1;

package/src/util/misc/matrix.ts

@@ -46,7 +46,7 @@ export const isIdentityMatrix = (mat: TMat2D) =>
 export const transformPoint = (
   p: XY,
   t: TMat2D,
-  ignoreOffset?: boolean
+  ignoreOffset?: boolean,
 ): Point => new Point(p).transform(t, ignoreOffset);
 
 /**
@@ -73,7 +73,7 @@ export const invertTransform = (t: TMat2D): TMat2D => {
 export const multiplyTransformMatrices = (
   a: TMat2D,
   b: TMat2D,
-  is2x2?: boolean
+  is2x2?: boolean,
 ): TMat2D =>
   [
     a[0] * b[0] + a[2] * b[1],
@@ -95,14 +95,14 @@ export const multiplyTransformMatrices = (
  */
 export const multiplyTransformMatrixArray = (
   matrices: (TMat2D | undefined | null | false)[],
-  is2x2?: boolean
+  is2x2?: boolean,
 ) =>
   matrices.reduceRight(
     (product: TMat2D, curr) =>
       curr && product
         ? multiplyTransformMatrices(curr, product, is2x2)
         : curr || product,
-    undefined as unknown as TMat2D
+    undefined as unknown as TMat2D,
   ) || iMatrix.concat();
 
 export const calcPlaneRotation = ([a, b]: TMat2D) =>
@@ -168,7 +168,7 @@ export const createTranslateMatrix = (x: number, y = 0): TMat2D => [
  */
 export function createRotateMatrix(
   { angle = 0 }: TRotateMatrixArgs = {},
-  { x = 0, y = 0 }: Partial<XY> = {}
+  { x = 0, y = 0 }: Partial<XY> = {},
 ): TMat2D {
   const angleRadiant = degreesToRadians(angle),
     cosValue = cos(angleRadiant),
@@ -281,7 +281,7 @@ export const calcDimensionsMatrix = ({
 }: TScaleMatrixArgs) => {
   let matrix = createScaleMatrix(
     flipX ? -scaleX : scaleX,
-    flipY ? -scaleY : scaleY
+    flipY ? -scaleY : scaleY,
   );
   if (skewX) {
     matrix = multiplyTransformMatrices(matrix, createSkewXMatrix(skewX), true);

package/src/util/misc/objectEnlive.ts

@@ -28,7 +28,7 @@ export type LoadImageOptions = Abortable & {
  */
 export const loadImage = (
   url: string,
-  { signal, crossOrigin = null }: LoadImageOptions = {}
+  { signal, crossOrigin = null }: LoadImageOptions = {},
 ) =>
   new Promise<HTMLImageElement>(function (resolve, reject) {
     if (signal && signal.aborted) {
@@ -72,10 +72,10 @@ export type EnlivenObjectOptions = Abortable & {
       | FabricObject
       | BaseFilter<string>
       | Shadow
-      | TFiller
+      | TFiller,
   >(
     serializedObj: Record<string, any>,
-    instance: T
+    instance: T,
   ) => void;
 };
 
@@ -95,10 +95,10 @@ export const enlivenObjects = <
     | FabricObject
     | BaseFilter<string>
     | Shadow
-    | TFiller
+    | TFiller,
 >(
   objects: any[],
-  { signal, reviver = noop }: EnlivenObjectOptions = {}
+  { signal, reviver = noop }: EnlivenObjectOptions = {},
 ) =>
   new Promise<T[]>((resolve, reject) => {
     const instances: T[] = [];
@@ -116,8 +116,8 @@ export const enlivenObjects = <
             reviver(obj, fabricInstance);
             instances.push(fabricInstance);
             return fabricInstance;
-          })
-      )
+          }),
+      ),
     )
       .then(resolve)
       .catch((error) => {
@@ -141,10 +141,10 @@ export const enlivenObjects = <
  * @returns {Promise<Record<string, FabricObject | TFiller | null>>} the input object with enlived values
  */
 export const enlivenObjectEnlivables = <
-  R = Record<string, FabricObject | TFiller | null>
+  R = Record<string, FabricObject | TFiller | null>,
 >(
   serializedObject: any,
-  { signal }: Abortable = {}
+  { signal }: Abortable = {},
 ) =>
   new Promise<R>((resolve, reject) => {
     const instances: (FabricObject | TFiller | Shadow)[] = [];

package/src/util/misc/objectTransforms.ts

@@ -22,12 +22,12 @@ import {
  */
 export const removeTransformFromObject = (
   object: FabricObject,
-  transform: TMat2D
+  transform: TMat2D,
 ) => {
   const inverted = invertTransform(transform),
     finalTransform = multiplyTransformMatrices(
       inverted,
-      object.calcOwnMatrix()
+      object.calcOwnMatrix(),
     );
   applyTransformToObject(object, finalTransform);
 };
@@ -43,7 +43,7 @@ export const removeTransformFromObject = (
 export const addTransformToObject = (object: FabricObject, transform: TMat2D) =>
   applyTransformToObject(
     object,
-    multiplyTransformMatrices(transform, object.calcOwnMatrix())
+    multiplyTransformMatrices(transform, object.calcOwnMatrix()),
   );
 
 /**
@@ -53,7 +53,7 @@ export const addTransformToObject = (object: FabricObject, transform: TMat2D) =>
  */
 export const applyTransformToObject = (
   object: FabricObject,
-  transform: TMat2D
+  transform: TMat2D,
 ) => {
   const { translateX, translateY, scaleX, scaleY, ...otherOptions } =
       qrDecompose(transform),
@@ -107,7 +107,7 @@ export const saveObjectTransform = (target: FabricObject) => ({
 export const sizeAfterTransform = (
   width: number,
   height: number,
-  t: TMat2D
+  t: TMat2D,
 ) => {
   const dimX = width / 2,
     dimY = height / 2,

package/src/util/misc/pick.ts

@@ -6,7 +6,7 @@
  */
 export const pick = <T extends Record<string, any>>(
   source: T,
-  keys: (keyof T)[] = []
+  keys: (keyof T)[] = [],
 ) => {
   return keys.reduce((o, key) => {
     if (key in source) {
@@ -18,7 +18,7 @@ export const pick = <T extends Record<string, any>>(
 
 export const pickBy = <T extends Record<string, any>>(
   source: T,
-  predicate: <K extends keyof T>(value: T[K], key: K, collection: T) => boolean
+  predicate: <K extends keyof T>(value: T[K], key: K, collection: T) => boolean,
 ) => {
   return (Object.keys(source) as (keyof T)[]).reduce((o, key) => {
     if (predicate(source[key], key, source)) {

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

@@ -27,7 +27,7 @@ describe('Plane Change', () => {
     expect(calcPlaneChangeMatrix(m1, iMatrix)).toEqual(m1);
     expect(calcPlaneChangeMatrix(m1, m1)).toEqual(iMatrix);
     expect(calcPlaneChangeMatrix(m1, s)).toEqual(
-      multiplyTransformMatrices(invertTransform(s), m1)
+      multiplyTransformMatrices(invertTransform(s), m1),
     );
   });
 
@@ -37,7 +37,7 @@ describe('Plane Change', () => {
     expect(sendPointToPlane(point, s)).toEqual({ x: 52, y: 50.5 });
     expect(sendPointToPlane(point, undefined, s)).toEqual({ x: -24.5, y: -98 });
     expect(
-      sendPointToPlane(point, createRotateMatrix({ angle: 90 }), s)
+      sendPointToPlane(point, createRotateMatrix({ angle: 90 }), s),
     ).toEqual({ x: -25.5, y: -98 });
     expect(sendPointToPlane(point, s, s)).toEqual(point);
     expect(sendPointToPlane(point)).toEqual(point);
@@ -49,7 +49,7 @@ describe('Plane Change', () => {
     expect(sendVectorToPlane(point, s)).toEqual({ x: 2, y: 0.5 });
     expect(sendVectorToPlane(point, undefined, s)).toEqual({ x: 0.5, y: 2 });
     expect(
-      sendVectorToPlane(point, createRotateMatrix({ angle: 90 }), s)
+      sendVectorToPlane(point, createRotateMatrix({ angle: 90 }), s),
     ).toEqual({ x: -0.5, y: 2 });
     expect(sendVectorToPlane(point, s, s)).toEqual(point);
     expect(sendVectorToPlane(point)).toEqual(point);
@@ -73,24 +73,24 @@ describe('Plane Change', () => {
     const actual = sendObjectToPlane(
       obj,
       group.calcTransformMatrix(),
-      group2.calcTransformMatrix()
+      group2.calcTransformMatrix(),
     );
     expect(actual).toEqualRoundedMatrix(
       multiplyTransformMatrices(
         invertTransform(group2.calcTransformMatrix()),
-        group.calcTransformMatrix()
-      )
+        group.calcTransformMatrix(),
+      ),
     );
     expect(obj.calcOwnMatrix()).toEqualRoundedMatrix(
-      multiplyTransformMatrices(actual, m)
+      multiplyTransformMatrices(actual, m),
     );
 
     obj.group = group2;
     expect(obj.calcTransformMatrix()).toEqualRoundedMatrix(
       multiplyTransformMatrices(
         multiplyTransformMatrices(group2.calcTransformMatrix(), actual),
-        m
-      )
+        m,
+      ),
     );
 
     //   sending to nowhere, no transform was applied

package/src/util/misc/planeChange.ts

@@ -14,7 +14,7 @@ import { applyTransformToObject } from './objectTransforms';
  */
 export const calcPlaneChangeMatrix = (
   from: TMat2D = iMatrix,
-  to: TMat2D = iMatrix
+  to: TMat2D = iMatrix,
 ) => multiplyTransformMatrices(invertTransform(to), from);
 
 /**
@@ -36,7 +36,7 @@ export const calcPlaneChangeMatrix = (
 export const sendPointToPlane = (
   point: Point,
   from: TMat2D = iMatrix,
-  to: TMat2D = iMatrix
+  to: TMat2D = iMatrix,
 ): Point => point.transform(calcPlaneChangeMatrix(from, to));
 
 /**
@@ -45,7 +45,7 @@ export const sendPointToPlane = (
 export const sendVectorToPlane = (
   point: Point,
   from: TMat2D = iMatrix,
-  to: TMat2D = iMatrix
+  to: TMat2D = iMatrix,
 ): Point => point.transform(calcPlaneChangeMatrix(from, to), true);
 
 /**
@@ -81,12 +81,12 @@ export const sendVectorToPlane = (
 export const sendObjectToPlane = (
   object: FabricObject,
   from?: TMat2D,
-  to?: TMat2D
+  to?: TMat2D,
 ): TMat2D => {
   const t = calcPlaneChangeMatrix(from, to);
   applyTransformToObject(
     object,
-    multiplyTransformMatrices(t, object.calcOwnMatrix())
+    multiplyTransformMatrices(t, object.calcOwnMatrix()),
   );
   return t;
 };

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

@@ -36,7 +36,7 @@ export class StrokeLineCapProjections extends StrokeProjectionsBase {
   calcOrthogonalProjection(
     from: Point,
     to: Point,
-    magnitude: number = this.strokeProjectionMagnitude
+    magnitude: number = this.strokeProjectionMagnitude,
   ) {
     const vector = this.createSideVector(from, to);
     return this.scaleUnitVector(getOrthonormalVector(vector), magnitude);
@@ -74,7 +74,7 @@ export class StrokeLineCapProjections extends StrokeProjectionsBase {
         .multiply(this.strokeUniformScalar);
       projections.push(
         this.applySkew(this.A.add(projection)),
-        this.applySkew(this.A.subtract(projection))
+        this.applySkew(this.A.subtract(projection)),
       );
     } else {
       projections.push(
@@ -82,8 +82,8 @@ export class StrokeLineCapProjections extends StrokeProjectionsBase {
           this.A,
           this.T,
           this.T,
-          this.options
-        ).projectRound()
+          this.options,
+        ).projectRound(),
       );
     }
 
@@ -112,16 +112,16 @@ export class StrokeLineCapProjections extends StrokeProjectionsBase {
       const orthogonalProjection = this.calcOrthogonalProjection(
         this.A,
         this.T,
-        this.strokeProjectionMagnitude
+        this.strokeProjectionMagnitude,
       );
       const strokePointingOut = this.scaleUnitVector(
         getUnitVector(this.createSideVector(this.A, this.T)),
-        -this.strokeProjectionMagnitude
+        -this.strokeProjectionMagnitude,
       );
       const projectedA = this.A.add(strokePointingOut);
       projections.push(
         projectedA.add(orthogonalProjection),
-        projectedA.subtract(orthogonalProjection)
+        projectedA.subtract(orthogonalProjection),
       );
     }