update(Group): The fromObject method supports custom groups

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(): Custom group inherited from the group, and the bug of the custom layout type. [10198](https://github.com/fabricjs/fabric.js/issues/10198)
 - feat(IText): expose getCursorRenderingData() function. [#10204](https://github.com/fabricjs/fabric.js/pull/10204)
 - fix(Canvas): allowTouchScrolling interactions [#10078](https://github.com/fabricjs/fabric.js/pull/10078)
 - update(IText): Add method enterEditingImpl/exitEditingImpl that executes the logic of enterEditing/exitEditing without events [#10187](https://github.com/fabricjs/fabric.js/issues/10187)

src/shapes/Group.spec.ts

@@ -3,6 +3,7 @@ import {
   LayoutManager,
   ClipPathLayout,
   FitContentLayout,
+  LayoutStrategy,
 } from '../LayoutManager';
 import { Canvas } from '../canvas/Canvas';
 import { Group } from './Group';
@@ -11,6 +12,7 @@ import { Rect } from './Rect';
 import { FabricObject } from './Object/FabricObject';
 import { FabricImage } from './Image';
 import { SignalAbortedError } from '../util/internals/console';
+import { classRegistry } from '../ClassRegistry';
 
 const makeGenericGroup = (options?: Partial<GroupProps>) => {
   const objs = [new FabricObject(), new FabricObject()];
@@ -336,4 +338,34 @@ describe('Group', () => {
 
     expect(eventsSpy).toBeCalledTimes(3);
   });
+
+  it("fromObject of the custom group", async () => {
+    const group = new Group();
+    const customGroup = new CustomGroup();
+    const groupData = group.toObject();
+    const customGroupData = customGroup.toObject();
+    const gLayoutManager = (await Group.fromObject(groupData)).layoutManager;
+    const cLayoutManager = (await CustomGroup.fromObject(customGroupData)).layoutManager;
+
+    const fakeGroupData = { type: Group.type };
+    const fakeCustomGroupData = { type: CustomGroup.type };
+    const fakeGLayoutManager = (await Group.fromObject(fakeGroupData)).layoutManager;
+    const fakeCLayoutManager = (await CustomGroup.fromObject(fakeCustomGroupData)).layoutManager;
+
+    expect(gLayoutManager).toEqual(fakeGLayoutManager);
+    expect(cLayoutManager).toEqual(fakeCLayoutManager);
+  })
 });
+
+class CustomGroup extends Group {
+  static type = "CustomGroup";
+  constructor(objects = [], opts: any = {}) {
+    if (!opts.layoutManager) opts.layoutManager = new LayoutManager(new CustomLayout());
+    super(objects, opts);
+  }
+}
+class CustomLayout extends LayoutStrategy {
+  static type = "custom-layout";
+}
+classRegistry.setClass(CustomGroup);
+classRegistry.setClass(CustomLayout);

src/shapes/Group.ts

@@ -691,28 +691,35 @@ export class Group
       enlivenObjects<FabricObject>(objects, abortable),
       enlivenObjectEnlivables(options, abortable),
     ]).then(([objects, hydratedOptions]) => {
-      const group = new this(objects, {
-        ...options,
-        ...hydratedOptions,
-        layoutManager: new NoopLayoutManager(),
-      });
+      const isCustomGroup = type && type != Group.type;
+      let layout;
       if (layoutManager) {
         const layoutClass = classRegistry.getClass<typeof LayoutManager>(
           layoutManager.type,
         );
         const strategyClass = classRegistry.getClass<typeof FitContentLayout>(
           layoutManager.strategy,
         );
-        group.layoutManager = new layoutClass(new strategyClass());
-      } else {
-        group.layoutManager = new LayoutManager();
+        layout = new layoutClass(new strategyClass());
       }
-      group.layoutManager.subscribeTargets({
-        type: LAYOUT_TYPE_INITIALIZATION,
-        target: group,
-        targets: group.getObjects(),
+      const manage = isCustomGroup ? layout : new NoopLayoutManager();
+
+      const group = new this(objects, {
+        ...options,
+        ...hydratedOptions,
+        layoutManager: manage,
       });
-      group.setCoords();
+      if (!isCustomGroup) {
+        group.layoutManager = layout ?? new LayoutManager();
+
+        group.layoutManager.subscribeTargets({
+          type: LAYOUT_TYPE_INITIALIZATION,
+          target: group,
+          targets: group.getObjects(),
+        });
+        group.setCoords();
+      }
+
       return group;
     });
   }