fabric 6.2.0 → 6.3.0

package/scripts/index.mjs

@@ -86,8 +86,8 @@ function startWebsite() {
   if (os.platform() === 'win32') {
     console.log(
       chalk.green(
-        'Consider using ubuntu on WSL to run jekyll with the following options:'
-      )
+        'Consider using ubuntu on WSL to run jekyll with the following options:',
+      ),
     );
     console.log(chalk.yellow('-- force_polling --livereload'));
     console.log(chalk.gray('https://github.com/microsoft/WSL/issues/216'));
@@ -113,8 +113,8 @@ function watch(path, callback, debounce = 500) {
         }
       },
       debounce,
-      { trailing: true }
-    )
+      { trailing: true },
+    ),
   );
 }
 
@@ -125,8 +125,8 @@ function copy(from, to) {
     console.log(
       `copied ${path.relative(containingFolder, from)} to ${path.relative(
         containingFolder,
-        to
-      )}`
+        to,
+      )}`,
     );
   } catch (error) {
     console.error(error);
@@ -155,13 +155,13 @@ function exportBuildToWebsite(options = {}) {
 function exportAssetsToWebsite(options) {
   copy(
     path.resolve(wd, './package.json'),
-    path.resolve(websiteDir, './lib/package.json')
+    path.resolve(websiteDir, './lib/package.json'),
   );
   BUILD_SOURCE.forEach((p) =>
-    copy(path.resolve(wd, p), path.resolve(websiteDir, './build/files', p))
+    copy(path.resolve(wd, p), path.resolve(websiteDir, './build/files', p)),
   );
   console.log(
-    chalk.bold(`[${moment().format('HH:mm')}] exported assets to fabricjs.com`)
+    chalk.bold(`[${moment().format('HH:mm')}] exported assets to fabricjs.com`),
   );
   options.watch &&
     BUILD_SOURCE.forEach((p) => {
@@ -169,8 +169,8 @@ function exportAssetsToWebsite(options) {
         copy(path.resolve(wd, p), path.resolve(websiteDir, './build/files', p));
         console.log(
           chalk.bold(
-            `[${moment().format('HH:mm')}] exported ${p} to fabricjs.com`
-          )
+            `[${moment().format('HH:mm')}] exported ${p} to fabricjs.com`,
+          ),
         );
       });
     });
@@ -185,10 +185,12 @@ function exportTestsToWebsite(options) {
       './test/lib',
     ];
     paths.forEach((location) =>
-      copy(path.resolve(wd, location), path.resolve(websiteDir, location))
+      copy(path.resolve(wd, location), path.resolve(websiteDir, location)),
     );
     console.log(
-      chalk.bold(`[${moment().format('HH:mm')}] exported tests to fabricjs.com`)
+      chalk.bold(
+        `[${moment().format('HH:mm')}] exported tests to fabricjs.com`,
+      ),
     );
   };
   exportTests();
@@ -234,8 +236,8 @@ async function runTestem({
       os.platform() === 'darwin'
         ? 'open'
         : os.platform() === 'win32'
-        ? 'start'
-        : 'xdg-open';
+          ? 'start'
+          : 'xdg-open';
     cp.exec([start, url].join(' '));
   }
 
@@ -257,7 +259,7 @@ async function runTestem({
     try {
       cp.execSync(
         ['testem', 'ci', ...processCmdOptions].join(' '),
-        processOptions
+        processOptions,
       );
     } catch (error) {
       return true;
@@ -365,10 +367,10 @@ function createChoiceData(type, file) {
 async function selectTestFile() {
   const selected = readCLIFile();
   const unitTests = listTestFiles('unit').map((file) =>
-    createChoiceData('unit', file)
+    createChoiceData('unit', file),
   );
   const visualTests = listTestFiles('visual').map((file) =>
-    createChoiceData('visual', file)
+    createChoiceData('visual', file),
   );
   const { tests: filteredTests } = await inquirer.prompt([
     {
@@ -383,19 +385,19 @@ async function selectTestFile() {
         return new Promise((resolve) => {
           const tests = _.concat(unitTests, visualTests);
           const value = _.map(this.getCurrentValue(), (value) =>
-            createChoiceData(value.type, value.file)
+            createChoiceData(value.type, value.file),
           );
           if (value.length > 0) {
             if (
               value.find(
-                (v) => v.value && v.value.type === 'unit' && !v.value.file
+                (v) => v.value && v.value.type === 'unit' && !v.value.file,
               )
             ) {
               _.pullAll(tests, unitTests);
             }
             if (
               value.find(
-                (v) => v.value && v.value.type === 'visual' && !v.value.file
+                (v) => v.value && v.value.type === 'visual' && !v.value.file,
               )
             ) {
               _.pullAll(tests, visualTests);
@@ -438,7 +440,7 @@ async function runInteractiveTestSuite(options) {
       }
       return acc;
     },
-    { unit: [], visual: [] }
+    { unit: [], visual: [] },
   );
   return Promise.all(
     _.map(tests, (files, suite) => {
@@ -447,7 +449,7 @@ async function runInteractiveTestSuite(options) {
       } else if (Array.isArray(files) && files.length > 0) {
         return test(suite, files, options);
       }
-    })
+    }),
   );
 }
 
@@ -484,8 +486,8 @@ program
   .description('run test suite')
   .addOption(
     new commander.Option('-s, --suite <suite...>', 'test suite to run').choices(
-      ['unit', 'visual']
-    )
+      ['unit', 'visual'],
+    ),
   )
   .option('-f, --file <file>', 'run a specific test file')
   .option('--filter <filter>', 'filter tests by name')
@@ -493,7 +495,7 @@ program
   .option(
     '-d, --debug',
     'debug visual tests by overriding refs (golden images) in case of visual changes',
-    false
+    false,
   )
   .option('-r, --recreate', 'recreate visual refs (golden images)', false)
   .option('-v, --verbose', 'log passing tests', true)
@@ -503,7 +505,7 @@ program
   .addOption(
     new commander.Option('-c, --context <context...>', 'context to test in')
       .choices(['node', 'chrome', 'firefox'])
-      .default(['node'])
+      .default(['node']),
   )
   .option('-p, --port')
   .option('-o, --out <out>', 'path to report test results to')
@@ -521,16 +523,16 @@ program
         ...(await Promise.all(
           _.map(options.suite, (suite) => {
             return test(suite, null, options);
-          })
-        ))
+          }),
+        )),
       );
     } else if (options.file) {
       results.push(
         await test(
           options.file.startsWith('visual') ? 'visual' : 'unit',
           [`test/${options.file}`],
-          options
-        )
+          options,
+        ),
       );
     } else {
       results.push(...(await runInteractiveTestSuite(options)));
@@ -556,7 +558,7 @@ website
   .addOption(
     new commander.Option('-i, --include <what...>')
       .choices(['build', 'tests'])
-      .default(['build', 'tests'], 'export all')
+      .default(['build', 'tests'], 'export all'),
   )
   .option('-w, --watch')
   .action(exportToWebsite);

package/scripts/sandbox.mjs

@@ -23,12 +23,12 @@ program
   .command('start')
   .description('start a sandbox app')
   .addArgument(
-    new commander.Argument('<template>', 'template to use').choices(templates)
+    new commander.Argument('<template>', 'template to use').choices(templates),
   )
   .option('-w, --watch', 'build and watch fabric', true)
   .option(
     '--no-watch',
-    'use this option if you have another process watching fabric'
+    'use this option if you have another process watching fabric',
   )
   .action(async (template, { watch }) => {
     const pathToSandbox = path.resolve(codesandboxTemplatesDir, template);
@@ -42,8 +42,8 @@ sandbox
   .addOption(
     new commander.Option(
       '-t, --template <template>',
-      'template to use instead of a "path"'
-    ).choices(templates)
+      'template to use instead of a "path"',
+    ).choices(templates),
   )
   .action(async (deploy, { template }, context) => {
     if (!deploy && !template) {
@@ -62,7 +62,7 @@ sandbox
           type: 'confirm',
           name: 'confirm',
           message: `Did you mean to run ${chalk.blue(
-            `npm run sandbox deploy -- -t ${template}\n`
+            `npm run sandbox deploy -- -t ${template}\n`,
           )}?`,
           default: true,
         },
@@ -73,7 +73,7 @@ sandbox
       }
     }
     const uri = await createCodeSandbox(
-      deploy || path.resolve(codesandboxTemplatesDir, template)
+      deploy || path.resolve(codesandboxTemplatesDir, template),
     );
     console.log(chalk.yellow(`> created codesandbox ${uri}`));
   });
@@ -82,13 +82,13 @@ sandbox
   .command('build')
   .description('build and start a sandbox')
   .addArgument(
-    new commander.Argument('<template>', 'template to use').choices(templates)
+    new commander.Argument('<template>', 'template to use').choices(templates),
   )
   .argument('<destination>', 'build destination')
   .option('-w, --watch', 'build and watch fabric', true)
   .option(
     '--no-watch',
-    'use this option if you have another process watching fabric'
+    'use this option if you have another process watching fabric',
   )
   .action((template, destination, { watch }) => {
     const templateDir = path.resolve(codesandboxTemplatesDir, template);
@@ -97,8 +97,8 @@ sandbox
     });
     console.log(
       `${chalk.blue(
-        `> building ${chalk.bold(template)} sandbox`
-      )} at ${chalk.cyanBright(destination)}`
+        `> building ${chalk.bold(template)} sandbox`,
+      )} at ${chalk.cyanBright(destination)}`,
     );
     startSandbox(destination, watch, true);
   });
@@ -109,13 +109,13 @@ sandbox
   .addOption(
     new commander.Option(
       '-t, --template <template>',
-      'template to use instead of a "path"'
-    ).choices(templates)
+      'template to use instead of a "path"',
+    ).choices(templates),
   )
   .option('-w, --watch', 'build and watch fabric', true)
   .option(
     '--no-watch',
-    'use this option if you have another process watching fabric'
+    'use this option if you have another process watching fabric',
   )
   .action(async (pathToSandbox, { template, watch }, context) => {
     if (!fs.existsSync(pathToSandbox) && templates.includes(pathToSandbox)) {
@@ -124,7 +124,7 @@ sandbox
           type: 'confirm',
           name: 'confirm',
           message: `Did you mean to run ${chalk.blue(
-            `npm run sandbox start -- -t ${pathToSandbox}\n`
+            `npm run sandbox start -- -t ${pathToSandbox}\n`,
           )}?`,
           default: true,
         },
@@ -142,7 +142,7 @@ sandbox
     }
     startSandbox(
       pathToSandbox || path.resolve(codesandboxTemplatesDir, template),
-      watch
+      watch,
     );
   });
 

package/src/ClassRegistry.spec.ts

@@ -7,7 +7,7 @@ describe('ClassRegistry', () => {
   });
   it('will error if a class is request that is not registered', () => {
     expect(() => classRegistry.getClass('any')).toThrow(
-      'No class registered for any'
+      'No class registered for any',
     );
   });
   it('will return a class previously registered', () => {

package/src/ClassRegistry.ts

@@ -54,7 +54,7 @@ export class ClassRegistry {
   setSVGClass(classConstructor: any, SVGTagName?: string) {
     this[SVG].set(
       SVGTagName ?? classConstructor.type.toLowerCase(),
-      classConstructor
+      classConstructor,
     );
   }
 }

package/src/Collection.ts

@@ -1,5 +1,5 @@
 import type { Constructor, TBBox } from './typedefs';
-import { removeFromArray } from './util/internals';
+import { removeFromArray } from './util/internals/removeFromArray';
 import { Point } from './Point';
 import type { ActiveSelection } from './shapes/ActiveSelection';
 import type { Group } from './shapes/Group';
@@ -7,7 +7,7 @@ import type { InteractiveFabricObject } from './shapes/Object/InteractiveObject'
 import type { FabricObject } from './shapes/Object/FabricObject';
 
 export const isCollection = (
-  fabricObject?: FabricObject
+  fabricObject?: FabricObject,
 ): fabricObject is Group | ActiveSelection => {
   return !!fabricObject && Array.isArray((fabricObject as Group)._objects);
 };
@@ -92,11 +92,11 @@ export function createCollectionMixin<TBase extends Constructor>(Base: TBase) {
       callback: (
         object: FabricObject,
         index: number,
-        array: FabricObject[]
-      ) => any
+        array: FabricObject[],
+      ) => any,
     ) {
       this.getObjects().forEach((object, index, objects) =>
-        callback(object, index, objects)
+        callback(object, index, objects),
       );
     }
 
@@ -152,7 +152,7 @@ export function createCollectionMixin<TBase extends Constructor>(Base: TBase) {
         return this._objects.some(
           (obj) =>
             obj instanceof Collection &&
-            (obj as unknown as Collection).contains(object, true)
+            (obj as unknown as Collection).contains(object, true),
         );
       }
       return false;
@@ -272,7 +272,7 @@ export function createCollectionMixin<TBase extends Constructor>(Base: TBase) {
     findNewLowerIndex(
       object: FabricObject,
       idx: number,
-      intersecting?: boolean
+      intersecting?: boolean,
     ) {
       let newIdx;
 
@@ -295,7 +295,7 @@ export function createCollectionMixin<TBase extends Constructor>(Base: TBase) {
     findNewUpperIndex(
       object: FabricObject,
       idx: number,
-      intersecting?: boolean
+      intersecting?: boolean,
     ) {
       let newIdx;
 
@@ -325,7 +325,7 @@ export function createCollectionMixin<TBase extends Constructor>(Base: TBase) {
      */
     collectObjects(
       { left, top, width, height }: TBBox,
-      { includeIntersecting = true }: { includeIntersecting?: boolean } = {}
+      { includeIntersecting = true }: { includeIntersecting?: boolean } = {},
     ) {
       const objects: InteractiveFabricObject[] = [],
         tl = new Point(left, top),

package/src/EventTypeDefs.ts

@@ -35,7 +35,7 @@ export type TransformAction<T extends Transform = Transform, R = void> = (
   eventData: TPointerEvent,
   transform: T,
   x: number,
-  y: number
+  y: number,
 ) => R;
 
 /**
@@ -54,7 +54,7 @@ export type ControlActionHandler = TransformAction<Transform, any>;
 export type ControlCallback<R = void> = (
   eventData: TPointerEvent,
   control: Control,
-  fabricObject: FabricObject
+  fabricObject: FabricObject,
 ) => R;
 
 export type ControlCursorCallback = ControlCallback<string>;

package/src/Intersection.spec.ts

@@ -56,7 +56,7 @@ describe('Intersection', () => {
         [new Point(9.5, 8.5), false],
       ])('%p is in polygon %p, case index %#', (point, result) => {
         expect(Intersection.isPointInPolygon(point, polygonPoints)).toBe(
-          result
+          result,
         );
       });
     });
@@ -66,7 +66,7 @@ describe('Intersection', () => {
         [new Point(6, 2), true],
       ])('%p is in polygon %p, case index %#', (point, result) => {
         expect(Intersection.isPointInPolygon(point, polygonPoints)).toBe(
-          result
+          result,
         );
       });
     });

package/src/Intersection.ts

@@ -34,7 +34,7 @@ export class Intersection {
     this.points = this.points.concat(
       points.filter((point) => {
         return !this.includes(point);
-      })
+      }),
     );
     return this;
   }
@@ -90,7 +90,7 @@ export class Intersection {
    */
   static isPointInPolygon(point: Point, points: Point[]) {
     const other = new Point(point).setX(
-      Math.min(point.x - 1, ...points.map((p) => p.x))
+      Math.min(point.x - 1, ...points.map((p) => p.x)),
     );
     let hits = 0;
     for (let index = 0; index < points.length; index++) {
@@ -100,7 +100,7 @@ export class Intersection {
         points[(index + 1) % points.length],
         // ray
         point,
-        other
+        other,
       );
       if (inter.includes(point)) {
         // point is on the polygon side
@@ -130,7 +130,7 @@ export class Intersection {
     b1: Point,
     b2: Point,
     aInfinite = true,
-    bInfinite = true
+    bInfinite = true,
   ): Intersection {
     const a2xa1x = a2.x - a1.x,
       a2ya1y = a2.y - a1.y,
@@ -149,7 +149,7 @@ export class Intersection {
         (bInfinite || (0 <= ub && ub <= 1))
       ) {
         return new Intersection('Intersection').append(
-          new Point(a1.x + ua * a2xa1x, a1.y + ua * a2ya1y)
+          new Point(a1.x + ua * a2xa1x, a1.y + ua * a2ya1y),
         );
       } else {
         return new Intersection();
@@ -184,7 +184,7 @@ export class Intersection {
     s1: Point,
     s2: Point,
     l1: Point,
-    l2: Point
+    l2: Point,
   ): Intersection {
     return Intersection.intersectLineLine(s1, s2, l1, l2, false, true);
   }
@@ -203,7 +203,7 @@ export class Intersection {
     a1: Point,
     a2: Point,
     b1: Point,
-    b2: Point
+    b2: Point,
   ): Intersection {
     return Intersection.intersectLineLine(a1, a2, b1, b2, false, false);
   }
@@ -225,7 +225,7 @@ export class Intersection {
     a1: Point,
     a2: Point,
     points: Point[],
-    infinite = true
+    infinite = true,
   ): Intersection {
     const result = new Intersection();
     const length = points.length;
@@ -259,7 +259,7 @@ export class Intersection {
   static intersectSegmentPolygon(
     a1: Point,
     a2: Point,
-    points: Point[]
+    points: Point[],
   ): Intersection {
     return Intersection.intersectLinePolygon(a1, a2, points, false);
   }
@@ -276,7 +276,7 @@ export class Intersection {
    */
   static intersectPolygonPolygon(
     points1: Point[],
-    points2: Point[]
+    points2: Point[],
   ): Intersection {
     const result = new Intersection(),
       length = points1.length;
@@ -315,7 +315,7 @@ export class Intersection {
   static intersectPolygonRectangle(
     points: Point[],
     r1: Point,
-    r2: Point
+    r2: Point,
   ): Intersection {
     const min = r1.min(r2),
       max = r1.max(r2),

package/src/LayoutManager/ActiveSelectionLayoutManager.spec.ts

@@ -22,7 +22,7 @@ describe('ActiveSelectionLayoutManager', () => {
       it('should subscribe activeSelection that contains object', () => {
         const manager = new ActiveSelectionLayoutManager();
         const object = new FabricObject();
-        const group = new Group([object], {
+        new Group([object], {
           interactive: true,
           subTargetCheck: true,
         });
@@ -57,11 +57,11 @@ describe('ActiveSelectionLayoutManager', () => {
         const asPerformLayout = jest.spyOn(as.layoutManager, 'performLayout');
         const groupPerformLayout = jest.spyOn(
           group.layoutManager,
-          'performLayout'
+          'performLayout',
         );
         const groupPerformLayout2 = jest.spyOn(
           group2.layoutManager,
-          'performLayout'
+          'performLayout',
         );
         groupPerformLayout.mockClear();
         groupPerformLayout2.mockClear();

package/src/LayoutManager/ActiveSelectionLayoutManager.ts

@@ -16,7 +16,7 @@ import type { Group } from '../shapes/Group';
  */
 export class ActiveSelectionLayoutManager extends LayoutManager {
   subscribeTargets(
-    context: RegistrationContext & Partial<StrictLayoutContext>
+    context: RegistrationContext & Partial<StrictLayoutContext>,
   ): void {
     const activeSelection = context.target;
     const parents = context.targets.reduce((parents, target) => {
@@ -35,7 +35,7 @@ export class ActiveSelectionLayoutManager extends LayoutManager {
    * unsubscribe from parent only if all its children were deselected
    */
   unsubscribeTargets(
-    context: RegistrationContext & Partial<StrictLayoutContext>
+    context: RegistrationContext & Partial<StrictLayoutContext>,
   ): void {
     const activeSelection = context.target;
     const selectedObjects = activeSelection.getObjects();

package/src/LayoutManager/LayoutManager.spec.ts

@@ -86,23 +86,23 @@ describe('Layout Manager', () => {
           mock: {
             calls: [[arg0]],
           },
-        }) => expect(arg0).toMatchObject(context)
+        }) => expect(arg0).toMatchObject(context),
       );
       if (result) {
         [commitLayout, onAfterLayout].forEach(
           ({
             mock: {
-              calls: [[arg0, arg1]],
+              calls: [[, arg1]],
             },
-          }) => expect(arg1).toEqual(layoutResult)
+          }) => expect(arg1).toEqual(layoutResult),
         );
       } else {
         [onAfterLayout].forEach(
           ({
             mock: {
-              calls: [[arg0, arg1]],
+              calls: [[, arg1]],
             },
-          }) => expect(arg1).toBeUndefined()
+          }) => expect(arg1).toBeUndefined(),
         );
       }
     });
@@ -230,7 +230,7 @@ describe('Layout Manager', () => {
         expect(manager['unsubscribe']).toHaveBeenCalledTimes(targets.length);
         expect(manager['unsubscribe']).toHaveBeenCalledWith(
           targets[0],
-          context
+          context,
         );
         expect(target.fire).toBeCalledWith('layout:before', {
           context,
@@ -337,7 +337,7 @@ describe('Layout Manager', () => {
     const prepareTest = (
       contextOptions: {
         type: typeof LAYOUT_TYPE_INITIALIZATION | typeof LAYOUT_TYPE_ADDED;
-      } & Partial<LayoutContext>
+      } & Partial<LayoutContext>,
     ) => {
       const lifecycle: jest.SpyInstance[] = [];
 
@@ -427,7 +427,7 @@ describe('Layout Manager', () => {
           left: pos.x ?? 0,
           top: pos.y ?? 0,
         });
-      }
+      },
     );
 
     it('non initialization trigger should set size, position and invalidate target', () => {
@@ -526,7 +526,7 @@ describe('Layout Manager', () => {
               path: [target],
             },
           ]);
-      }
+      },
     );
 
     test('bubbling', () => {
@@ -751,7 +751,7 @@ describe('Layout Manager', () => {
       jest.spyOn(child, 'toJSON').mockReturnValue('child');
       const group = new Group([child]);
       expect(
-        Array.from(group.layoutManager['_subscriptions'].keys())
+        Array.from(group.layoutManager['_subscriptions'].keys()),
       ).toMatchObject([child]);
     });
 
@@ -793,30 +793,30 @@ describe('Layout Manager', () => {
       describe('Fitcontent layout', () => {
         it('should subscribe objects', async () => {
           const group = await Group.fromObject(
-            createTestData(FitContentLayout.type)
+            createTestData(FitContentLayout.type),
           );
           expect(
-            Array.from(group.layoutManager['_subscriptions'].keys())
+            Array.from(group.layoutManager['_subscriptions'].keys()),
           ).toMatchObject(group.getObjects());
         });
       });
       describe('FixedLayout layout', () => {
         it('should subscribe objects', async () => {
           const group = await Group.fromObject(
-            createTestData(FixedLayout.type)
+            createTestData(FixedLayout.type),
           );
           expect(
-            Array.from(group.layoutManager['_subscriptions'].keys())
+            Array.from(group.layoutManager['_subscriptions'].keys()),
           ).toMatchObject(group.getObjects());
         });
       });
       describe('ClipPathLayout layout', () => {
         it('should subscribe objects', async () => {
           const group = await Group.fromObject(
-            createTestData(ClipPathLayout.type)
+            createTestData(ClipPathLayout.type),
           );
           expect(
-            Array.from(group.layoutManager['_subscriptions'].keys())
+            Array.from(group.layoutManager['_subscriptions'].keys()),
           ).toMatchObject(group.getObjects());
         });
       });
@@ -840,7 +840,7 @@ describe('Layout Manager', () => {
         expect(child.getRelativeCenterPoint()).toMatchObject({ x: 0, y: 0 });
         expect(group.getCenterPoint()).toMatchObject({ x: 100, y: 100 });
         expect(child.getCenterPoint()).toMatchObject(group.getCenterPoint());
-      }
+      },
     );
 
     it('fixed layout should respect size passed in options', () => {