fabric 6.2.0 → 6.3.0

package/src/canvas/StaticCanvas.ts

@@ -84,7 +84,8 @@ export type TSVGExportOptions = {
  */
 // TODO: fix `EventSpec` inheritance https://github.com/microsoft/TypeScript/issues/26154#issuecomment-1366616260
 export class StaticCanvas<
-    EventSpec extends StaticCanvasEvents = StaticCanvasEvents
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    EventSpec extends StaticCanvasEvents = StaticCanvasEvents,
   >
   extends createCollectionMixin(CommonMethods<CanvasEvents>)
   implements StaticCanvasOptions
@@ -184,12 +185,12 @@ export class StaticCanvas<
 
   constructor(
     el?: string | HTMLCanvasElement,
-    options: TOptions<StaticCanvasOptions> = {}
+    options: TOptions<StaticCanvasOptions> = {},
   ) {
     super();
     Object.assign(
       this,
-      (this.constructor as typeof StaticCanvas).getDefaults()
+      (this.constructor as typeof StaticCanvas).getDefaults(),
     );
     this.set(options);
     this.initElements(el);
@@ -229,7 +230,7 @@ export class StaticCanvas<
       log(
         'warn',
         'Canvas is trying to add an object that belongs to a different canvas.\n' +
-          'Resulting to default behavior: removing object from previous canvas and adding to new canvas'
+          'Resulting to default behavior: removing object from previous canvas and adding to new canvas',
       );
       obj.canvas.remove(obj);
     }
@@ -292,11 +293,11 @@ export class StaticCanvas<
    */
   setWidth(
     value: TSize['width'],
-    options?: { backstoreOnly?: true; cssOnly?: false }
+    options?: { backstoreOnly?: true; cssOnly?: false },
   ): void;
   setWidth(
     value: CSSDimensions['width'],
-    options?: { cssOnly?: true; backstoreOnly?: false }
+    options?: { cssOnly?: true; backstoreOnly?: false },
   ): void;
   setWidth(value: number, options?: never) {
     return this.setDimensions({ width: value }, options);
@@ -312,11 +313,11 @@ export class StaticCanvas<
    */
   setHeight(
     value: TSize['height'],
-    options?: { backstoreOnly?: true; cssOnly?: false }
+    options?: { backstoreOnly?: true; cssOnly?: false },
   ): void;
   setHeight(
     value: CSSDimensions['height'],
-    options?: { cssOnly?: true; backstoreOnly?: false }
+    options?: { cssOnly?: true; backstoreOnly?: false },
   ): void;
   setHeight(value: CSSDimensions['height'], options?: never) {
     return this.setDimensions({ height: value }, options);
@@ -328,7 +329,7 @@ export class StaticCanvas<
    */
   protected _setDimensionsImpl(
     dimensions: Partial<TSize | CSSDimensions>,
-    { cssOnly = false, backstoreOnly = false }: TCanvasSizeOptions = {}
+    { cssOnly = false, backstoreOnly = false }: TCanvasSizeOptions = {},
   ) {
     if (!cssOnly) {
       const size = {
@@ -359,16 +360,16 @@ export class StaticCanvas<
    */
   setDimensions(
     dimensions: Partial<CSSDimensions>,
-    options?: { cssOnly?: true; backstoreOnly?: false }
+    options?: { cssOnly?: true; backstoreOnly?: false },
   ): void;
   setDimensions(
     dimensions: Partial<TSize>,
-    options?: { backstoreOnly?: true; cssOnly?: false }
+    options?: { backstoreOnly?: true; cssOnly?: false },
   ): void;
   setDimensions(dimensions: Partial<TSize>, options?: never): void;
   setDimensions(
     dimensions: Partial<TSize | CSSDimensions>,
-    options?: TCanvasSizeOptions
+    options?: TCanvasSizeOptions,
   ) {
     this._setDimensionsImpl(dimensions, options);
     if (!options || !options.cssOnly) {
@@ -442,8 +443,8 @@ export class StaticCanvas<
     return this.absolutePan(
       new Point(
         -point.x - this.viewportTransform[4],
-        -point.y - this.viewportTransform[5]
-      )
+        -point.y - this.viewportTransform[5],
+      ),
     );
   }
 
@@ -549,7 +550,7 @@ export class StaticCanvas<
     }
   }
 
-  drawControls(ctx: CanvasRenderingContext2D) {
+  drawControls(_ctx: CanvasRenderingContext2D) {
     // Static canvas has no controls
   }
 
@@ -607,7 +608,7 @@ export class StaticCanvas<
    */
   drawClipPathOnCanvas(
     ctx: CanvasRenderingContext2D,
-    clipPath: TCachedFabricObject
+    clipPath: TCachedFabricObject,
   ) {
     const v = this.viewportTransform;
     ctx.save();
@@ -620,7 +621,7 @@ export class StaticCanvas<
     ctx.drawImage(
       clipPath._cacheCanvas,
       -clipPath.cacheTranslationX,
-      -clipPath.cacheTranslationY
+      -clipPath.cacheTranslationY,
     );
     ctx.restore();
   }
@@ -643,7 +644,7 @@ export class StaticCanvas<
    */
   _renderBackgroundOrOverlay(
     ctx: CanvasRenderingContext2D,
-    property: 'background' | 'overlay'
+    property: 'background' | 'overlay',
   ) {
     const fill = this[`${property}Color`],
       object = this[`${property}Image`],
@@ -732,7 +733,7 @@ export class StaticCanvas<
   centerObjectH(object: FabricObject) {
     return this._centerObject(
       object,
-      new Point(this.getCenterPoint().x, object.getCenterPoint().y)
+      new Point(this.getCenterPoint().x, object.getCenterPoint().y),
     );
   }
 
@@ -743,7 +744,7 @@ export class StaticCanvas<
   centerObjectV(object: FabricObject) {
     return this._centerObject(
       object,
-      new Point(object.getCenterPoint().x, this.getCenterPoint().y)
+      new Point(object.getCenterPoint().x, this.getCenterPoint().y),
     );
   }
 
@@ -770,7 +771,7 @@ export class StaticCanvas<
   viewportCenterObjectH(object: FabricObject) {
     return this._centerObject(
       object,
-      new Point(this.getVpCenter().x, object.getCenterPoint().y)
+      new Point(this.getVpCenter().x, object.getCenterPoint().y),
     );
   }
 
@@ -781,7 +782,7 @@ export class StaticCanvas<
   viewportCenterObjectV(object: FabricObject) {
     return this._centerObject(
       object,
-      new Point(object.getCenterPoint().x, this.getVpCenter().y)
+      new Point(object.getCenterPoint().x, this.getVpCenter().y),
     );
   }
 
@@ -792,7 +793,7 @@ export class StaticCanvas<
   getVpCenter(): Point {
     return transformPoint(
       this.getCenterPoint(),
-      invertTransform(this.viewportTransform)
+      invertTransform(this.viewportTransform),
     );
   }
 
@@ -858,7 +859,7 @@ export class StaticCanvas<
    */
   _toObjectMethod(
     methodName: TValidToObjectMethod,
-    propertiesToInclude?: string[]
+    propertiesToInclude?: string[],
   ) {
     const clipPath = this.clipPath;
     const clipPathData =
@@ -871,7 +872,7 @@ export class StaticCanvas<
       objects: this._objects
         .filter((object) => !object.excludeFromExport)
         .map((instance) =>
-          this._toObject(instance, methodName, propertiesToInclude)
+          this._toObject(instance, methodName, propertiesToInclude),
         ),
       ...this.__serializeBgOverlay(methodName, propertiesToInclude),
       ...(clipPathData ? { clipPath: clipPathData } : null),
@@ -884,7 +885,7 @@ export class StaticCanvas<
   protected _toObject(
     instance: FabricObject,
     methodName: TValidToObjectMethod,
-    propertiesToInclude?: string[]
+    propertiesToInclude?: string[],
   ) {
     let originalValue;
 
@@ -905,7 +906,7 @@ export class StaticCanvas<
    */
   __serializeBgOverlay(
     methodName: TValidToObjectMethod,
-    propertiesToInclude?: string[]
+    propertiesToInclude?: string[],
   ) {
     const data: any = {},
       bgImage = this.backgroundImage,
@@ -933,14 +934,14 @@ export class StaticCanvas<
       data.backgroundImage = this._toObject(
         bgImage,
         methodName,
-        propertiesToInclude
+        propertiesToInclude,
       );
     }
     if (overlayImage && !overlayImage.excludeFromExport) {
       data.overlayImage = this._toObject(
         overlayImage,
         methodName,
-        propertiesToInclude
+        propertiesToInclude,
       );
     }
 
@@ -1023,7 +1024,7 @@ export class StaticCanvas<
       options.encoding || 'UTF-8',
       '" standalone="no" ?>\n',
       '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ',
-      '"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n'
+      '"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n',
     );
   }
 
@@ -1042,10 +1043,10 @@ export class StaticCanvas<
       const vpt = this.viewportTransform;
       viewBox = `viewBox="${toFixed(
         -vpt[4] / vpt[0],
-        NUM_FRACTION_DIGITS
+        NUM_FRACTION_DIGITS,
       )} ${toFixed(-vpt[5] / vpt[3], NUM_FRACTION_DIGITS)} ${toFixed(
         this.width / vpt[0],
-        NUM_FRACTION_DIGITS
+        NUM_FRACTION_DIGITS,
       )} ${toFixed(this.height / vpt[3], NUM_FRACTION_DIGITS)}" `;
     } else {
       viewBox = `viewBox="0 0 ${this.width} ${this.height}" `;
@@ -1071,7 +1072,7 @@ export class StaticCanvas<
       this.createSVGFontFacesMarkup(),
       this.createSVGRefElementsMarkup(),
       this.createSVGClipPathMarkup(options),
-      '</defs>\n'
+      '</defs>\n',
     );
   }
 
@@ -1080,7 +1081,7 @@ export class StaticCanvas<
     if (clipPath) {
       clipPath.clipPathId = `CLIPPATH_${uid()}`;
       return `<clipPath id="${clipPath.clipPathId}" >\n${clipPath.toClipPathSVG(
-        options.reviver
+        options.reviver,
       )}</clipPath>\n`;
     }
     return '';
@@ -1154,7 +1155,7 @@ export class StaticCanvas<
     const fontListMarkup = Object.keys(fontList)
       .map(
         (fontFamily) =>
-          `\t\t@font-face {\n\t\t\tfont-family: '${fontFamily}';\n\t\t\tsrc: url('${fontPaths[fontFamily]}');\n\t\t}\n`
+          `\t\t@font-face {\n\t\t\tfont-family: '${fontFamily}';\n\t\t\tsrc: url('${fontPaths[fontFamily]}');\n\t\t}\n`,
       )
       .join('');
 
@@ -1183,7 +1184,7 @@ export class StaticCanvas<
   _setSVGObject(
     markup: string[],
     instance: FabricObject,
-    reviver?: TSVGReviver
+    reviver?: TSVGReviver,
   ) {
     markup.push(instance.toSVG(reviver));
   }
@@ -1194,7 +1195,7 @@ export class StaticCanvas<
   _setSVGBgOverlayImage(
     markup: string[],
     property: 'overlayImage' | 'backgroundImage',
-    reviver?: TSVGReviver
+    reviver?: TSVGReviver,
   ) {
     const bgOrOverlay = this[property];
     if (bgOrOverlay && !bgOrOverlay.excludeFromExport && bgOrOverlay.toSVG) {
@@ -1232,7 +1233,7 @@ export class StaticCanvas<
           (repeat === 'repeat-x' || repeat === 'no-repeat') && isPattern(filler)
             ? (filler.source as HTMLImageElement).height
             : finalHeight
-        }" fill="url(#SVGID_${filler.id})"></rect>\n`
+        }" fill="url(#SVGID_${filler.id})"></rect>\n`,
       );
     } else {
       markup.push(
@@ -1240,7 +1241,7 @@ export class StaticCanvas<
         'fill="',
         filler,
         '"',
-        '></rect>\n'
+        '></rect>\n',
       );
     }
   }
@@ -1274,7 +1275,7 @@ export class StaticCanvas<
   loadFromJSON(
     json: string | Record<string, any>,
     reviver?: EnlivenObjectOptions['reviver'],
-    { signal }: Abortable = {}
+    { signal }: Abortable = {},
   ): Promise<this> {
     if (!json) {
       return Promise.reject(new FabricError('`json` is undefined'));
@@ -1306,7 +1307,7 @@ export class StaticCanvas<
           overlayColor: overlay,
           clipPath,
         },
-        { signal }
+        { signal },
       ),
     ]).then(([enlived, enlivedMap]) => {
       this.clear();
@@ -1390,7 +1391,7 @@ export class StaticCanvas<
     return toDataURL(
       this.toCanvasElement(finalMultiplier, options),
       format,
-      quality
+      quality,
     );
   }
 
@@ -1410,7 +1411,7 @@ export class StaticCanvas<
    */
   toCanvasElement(
     multiplier = 1,
-    { width, height, left, top, filter } = {} as TToCanvasElementOptions
+    { width, height, left, top, filter } = {} as TToCanvasElementOptions,
   ): HTMLCanvasElement {
     const scaledWidth = (width || this.width) * multiplier,
       scaledHeight = (height || this.height) * multiplier,

package/src/canvas/StaticCanvasOptions.ts

@@ -1,7 +1,6 @@
 import { iMatrix } from '../constants';
 import type { FabricObject } from '../shapes/Object/FabricObject';
 import type { TFiller, TMat2D, TOptions } from '../typedefs';
-import type { StaticCanvas } from './StaticCanvas';
 
 interface CanvasDrawableOptions {
   /**

package/src/canvas/TextEditingManager.ts

@@ -1,6 +1,6 @@
 import type { TPointerEvent } from '../EventTypeDefs';
 import type { ITextBehavior } from '../shapes/IText/ITextBehavior';
-import { removeFromArray } from '../util/internals';
+import { removeFromArray } from '../util/internals/removeFromArray';
 import type { Canvas } from './Canvas';
 
 /**

package/src/canvas/__tests__/eventData.test.ts

@@ -58,7 +58,7 @@ describe('Canvas event data', () => {
         .getSelectionElement()
         .dispatchEvent(new MouseEvent(type, { clientX: 50, clientY: 50 }));
       expect(spy.mock.calls).toMatchSnapshot(snapshotOptions);
-    }
+    },
   );
 
   // must call mousedown for mouseup to be listened to
@@ -69,7 +69,7 @@ describe('Canvas event data', () => {
       .dispatchEvent(new MouseEvent('mousedown', { clientX: 50, clientY: 50 }));
     spy.mockReset();
     document.dispatchEvent(
-      new MouseEvent('mouseup', { clientX: 50, clientY: 50 })
+      new MouseEvent('mouseup', { clientX: 50, clientY: 50 }),
     );
     expect(spy.mock.calls).toMatchSnapshot(snapshotOptions);
   });
@@ -100,16 +100,16 @@ describe('Canvas event data', () => {
         new MouseEvent('dragstart', {
           clientX: 50,
           clientY: 50,
-        })
+        }),
       );
       canvas.getSelectionElement().dispatchEvent(
         new MouseEvent(type, {
           clientX: 50,
           clientY: 50,
-        })
+        }),
       );
       expect(spy.mock.calls).toMatchSnapshot(snapshotOptions);
-    }
+    },
   );
 
   test('getScenePoint', () => {
@@ -156,7 +156,7 @@ describe('Event targets', () => {
       new MouseEvent('mousedown', {
         clientX: 50,
         clientY: 50,
-      })
+      }),
     );
     expect(targetSpy).toHaveBeenCalledTimes(1);
   });
@@ -284,7 +284,7 @@ describe('Event targets', () => {
 
     const findTarget = (canvas: Canvas, ev?: MouseEventInit) => {
       const target = canvas.findTarget(
-        mockEvent({ canvas, clientX: 0, clientY: 0, ...ev })
+        mockEvent({ canvas, clientX: 0, clientY: 0, ...ev }),
       );
       const targets = canvas.targets;
       canvas.targets = [];
@@ -325,9 +325,9 @@ describe('Event targets', () => {
         expect(found).toEqual(
           searchAll
             ? [subTarget2, target2, subTarget1, target1, parent]
-            : [subTarget2, target2, parent]
+            : [subTarget2, target2, parent],
         );
-      }
+      },
     );
 
     test.failing('searchPossibleTargets', () => {
@@ -367,7 +367,7 @@ describe('Event targets', () => {
       jest.spyOn(canvas, '_checkTarget').mockReturnValue(true);
       const found = canvas.searchPossibleTargets(
         [activeSelection],
-        new Point()
+        new Point(),
       );
       expect(found).toBe(activeSelection);
       expect(canvas.targets).toEqual([]);
@@ -430,24 +430,24 @@ describe('Event targets', () => {
       const e2 = { clientX: 4, clientY: 4 };
 
       expect(findTarget(canvas, e)).toEqual(
-        { target: rectOver, targets: [] }
+        { target: rectOver, targets: [] },
         // 'Should return the rectOver, rect is not considered'
       );
 
       canvas.setActiveObject(rect);
       expect(findTarget(canvas, e)).toEqual(
-        { target: rectOver, targets: [] }
+        { target: rectOver, targets: [] },
         // 'Should still return rectOver because is above active object'
       );
 
       expect(findTarget(canvas, e2)).toEqual(
-        { target: rect, targets: [] }
+        { target: rect, targets: [] },
         // 'Should rect because a corner of the activeObject has been hit'
       );
 
       canvas.altSelectionKey = 'shiftKey';
       expect(findTarget(canvas, e)).toEqual(
-        { target: rect, targets: [] }
+        { target: rect, targets: [] },
         // 'Should rect because active and altSelectionKey is pressed'
       );
     });
@@ -602,7 +602,7 @@ describe('Event targets', () => {
           target: group,
           targets: [rect],
         });
-      }
+      },
     );
 
     test('findTarget with perPixelTargetFind', () => {
@@ -825,7 +825,7 @@ describe('Event targets', () => {
         {
           target: activeSelection,
           targets: [],
-        }
+        },
         // 'Should not return the rect behind active selection'
       );
 
@@ -834,7 +834,7 @@ describe('Event targets', () => {
         {
           target: rect3,
           targets: [],
-        }
+        },
         // 'Should return the rect after clearing selection'
       );
     });

package/src/color/Color.ts

@@ -52,6 +52,7 @@ export class Color {
           Color.sourceFromHsl(color) ||
           // color is not recognized
           // we default to black as canvas does
+          // eslint-disable-next-line no-constant-binary-expression
           ((this.isUnrecognised = true) && ([0, 0, 0, 1] as TRGBAColorSource));
   }
 
@@ -177,7 +178,7 @@ export class Color {
       otherAlpha = 0.5,
       otherSource = otherColor.getSource(),
       [R, G, B] = source.map((value, index) =>
-        Math.round(value * (1 - otherAlpha) + otherSource[index] * otherAlpha)
+        Math.round(value * (1 - otherAlpha) + otherSource[index] * otherAlpha),
       );
 
     this.setSource([R, G, B, source[3]]);
@@ -315,7 +316,7 @@ export class Color {
         expandedValue = value.match(/.{2}/g)!;
       }
       const [r, g, b, a = 255] = expandedValue.map((hexCouple) =>
-        parseInt(hexCouple, 16)
+        parseInt(hexCouple, 16),
       );
       return [r, g, b, a / 255];
     }

package/src/color/color.test.ts

@@ -39,14 +39,14 @@ describe('Color regex and conversion tests', () => {
   it('Creates a color from rgba with decimals', () => {
     const color1 = new Color('rgba(120.1, 60.2, 30.3, 0.5)');
     expect(color1.getSource().toString()).toBe(
-      [120.1, 60.2, 30.3, 0.5].toString()
+      [120.1, 60.2, 30.3, 0.5].toString(),
     );
   });
 
   it('Creates a color from rgb with decimals', () => {
     const color1 = new Color('rgb(120.1, 60.2, 30.3)');
     expect(color1.getSource().toString()).toBe(
-      [120.1, 60.2, 30.3, 1].toString()
+      [120.1, 60.2, 30.3, 1].toString(),
     );
   });
 

package/src/color/typedefs.ts

@@ -12,7 +12,7 @@ export type TRGBAColorSource = [
   red: number,
   green: number,
   blue: number,
-  alpha: number
+  alpha: number,
 ];
 
 export type TColorArg = string | TRGBColorSource | TRGBAColorSource | Color;

package/src/color/util.ts

@@ -37,7 +37,7 @@ export const rgb2Hsl = (
   r: number,
   g: number,
   b: number,
-  a: number
+  a: number,
 ): TRGBAColorSource => {
   r /= 255;
   g /= 255;

package/src/config.ts

@@ -128,7 +128,7 @@ export class Configuration extends BaseConfiguration {
    * Map<fontFamily, pathToFile> of font files
    */
   addFonts(
-    paths: Record</** fontFamily */ string, /** pathToFile */ string> = {}
+    paths: Record</** fontFamily */ string, /** pathToFile */ string> = {},
   ) {
     this.fontPaths = {
       ...this.fontPaths,

package/src/controls/Control.spec.ts

@@ -23,13 +23,13 @@ describe('Controls', () => {
 
     target.setCoords();
 
-    jest
-      .spyOn(target, 'findControl')
-      .mockImplementation(function (this: FabricObject) {
-        this.__corner = 'test';
+    jest.spyOn(target, 'findControl').mockImplementation(function (
+      this: FabricObject,
+    ) {
+      this.__corner = 'test';
 
-        return { key: 'test', control };
-      });
+      return { key: 'test', control };
+    });
 
     const canvas = new Canvas();
     canvas.setActiveObject(target);
@@ -58,11 +58,11 @@ describe('Controls', () => {
       10,
       10,
       false,
-      new FabricObject()
+      new FabricObject(),
     );
 
     expect(
-      Intersection.isPointInPolygon(new Point(15, 10), Object.values(coords))
+      Intersection.isPointInPolygon(new Point(15, 10), Object.values(coords)),
     ).toBe(true);
   });
 });