fix(Group) Ensure the abortable signal is passed down to objects

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(Group): Pass down the abort signal from group to objects [#9890](https://github.com/fabricjs/fabric.js/pull/9890)
 - fix(util): restore old composeMatrix code for performances improvement [#9851](https://github.com/fabricjs/fabric.js/pull/9851)
 - fix(Control): corner coords definition order [#9884](https://github.com/fabricjs/fabric.js/pull/9884)
 - fix(Polyline): safeguard points arg from options [#9855](https://github.com/fabricjs/fabric.js/pull/9855)

src/shapes/Group.spec.ts

@@ -9,6 +9,8 @@ import { Group } from './Group';
 import type { GroupProps } from './Group';
 import { Rect } from './Rect';
 import { FabricObject } from './Object/FabricObject';
+import { FabricImage } from './Image';
+import { SignalAbortedError } from '../util/internals/console';
 
 const makeGenericGroup = (options?: Partial<GroupProps>) => {
   const objs = [new FabricObject(), new FabricObject()];
@@ -58,6 +60,26 @@ describe('Group', () => {
     expect(group.height).toBe(100);
   });
 
+  it('fromObject with images', async () => {
+    const objs = [
+      new FabricObject(),
+      new FabricObject(),
+      new FabricImage(new Image()),
+    ];
+    const group = new Group(objs);
+    const jsonData = group.toObject();
+    const abortController = new AbortController();
+    abortController.abort();
+    return Group.fromObject(jsonData, {
+      signal: abortController.signal,
+    }).catch((e) => {
+      expect(e instanceof SignalAbortedError).toBe(true);
+      expect(e.message).toBe(
+        `fabric: loadImage 'options.signal' is in 'aborted' state`
+      );
+    });
+  });
+
   describe('With fit-content layout manager', () => {
     test('will serialize correctly without default values', async () => {
       const { group } = makeGenericGroup({

src/shapes/Group.ts

@@ -1,6 +1,11 @@
 import type { CollectionEvents, ObjectEvents } from '../EventTypeDefs';
 import { createCollectionMixin } from '../Collection';
-import type { TClassProperties, TSVGReviver, TOptions } from '../typedefs';
+import type {
+  TClassProperties,
+  TSVGReviver,
+  TOptions,
+  Abortable,
+} from '../typedefs';
 import {
   invertTransform,
   multiplyTransformMatrices,
@@ -658,15 +663,13 @@ export class Group
    * @param {Object} object Object to create a group from
    * @returns {Promise<Group>}
    */
-  static fromObject<T extends TOptions<SerializedGroupProps>>({
-    type,
-    objects = [],
-    layoutManager,
-    ...options
-  }: T) {
+  static fromObject<T extends TOptions<SerializedGroupProps>>(
+    { type, objects = [], layoutManager, ...options }: T,
+    abortable?: Abortable
+  ) {
     return Promise.all([
-      enlivenObjects<FabricObject>(objects),
-      enlivenObjectEnlivables(options),
+      enlivenObjects<FabricObject>(objects, abortable),
+      enlivenObjectEnlivables(options, abortable),
     ]).then(([objects, hydratedOptions]) => {
       const group = new this(objects, {
         ...options,

src/shapes/Image.ts

@@ -791,7 +791,7 @@ export class FabricImage<
    */
   static fromObject<T extends TOptions<SerializedImageProps>>(
     { filters: f, resizeFilter: rf, src, crossOrigin, type, ...object }: T,
-    options: Abortable = {}
+    options?: Abortable
   ) {
     return Promise.all([
       loadImage(src!, { ...options, crossOrigin }),