[Bug]: Ungroupping objects using v6 broke due to Object._restoreObjectsState is not a function error

[celioFagundes]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

6.0.1

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

20.11.0

Link To Reproduction

#7670

Steps To Reproduce

1. Add two objects in canvas
2. Group them creating a Group Object
3. Ungroup them by removing the group object , interating through the objects and adding them again on canvas

After v6 groupping and ungroupping objects works fine using this code, but after ungroupping, if you create a active selection with the ungropped itens, they will be moved to the top of the Canvas, which i think is a behavior that the function object._restoreObjectsState() fixed before v6, but it seems this function was removed.
I tried to find examples of Ungroupping objects with the new version but didn't find any, also the older fabric docs only has examples when you have the actual group object after creating it, and none example when you get the object using getActiveObject()

  const groupObjects = (objects: FabricObject[]) => {
     const group = new Group(objects);
     canvas.add(group);
   };

  const ungroupObjects = (object: FabricObject) => {
    object._restoreObjectsState();
    const objectsOnGroup = object._objects;
    canvas.remove(object);
    objectsOnGroup.forEach((obj) => {
      canvas.add(obj);
    });
  };

  const toggleGroup = () => {
    const activeObject = canvas.getActiveObjects();
    if (!activeObject) return;
    const type = canvas.getActiveObject().get('type');
    if (type === 'group') {
      ungroupObjects(activeObject[0]);
    } else {
      groupObjects(activeObject);
    }
    canvas.requestRenderAll();
  };

Expected Behavior

Objects should remain at the same position after being ungroupped

Actual Behavior

Objects changes it's position to the top left of the canvas after creating an active selection with them
Group

Creating an active selection after ungroupping

Objects changed position after being selected by active selection

Error Message & Stack Trace

No response

[asturur]

Did you try to simply do:

canvas.add(...group.removeAll()) 

?

You shouldn't loop through internal objects and use private methods, or at least do that when strictly necessary

[celioFagundes]

Hi, i tried using that and it's works for ungroupping but it's still happening the position issue. The issue happens if you create an active selection with both objects from the group created before, if you select only one of them it doesn't happen.

[asturur]

make a working fiddle if you want more specific help.
I did exactly what the description was saying.
I added 3 object on the canvas, i grouped them, i ungrouped them and it works with canvas.add(...group.removeAll())

[celioFagundes]

I created this example. https://codesandbox.io/p/sandbox/fabricj-ungroup-ws8s76?file=%2Fsrc%2FApp.tsx

[asturur]

https://codesandbox.io/p/sandbox/fabricj-ungroup-ws8s76

You have to remove objects from the canvas when you add them to a group,

[celioFagundes]

Yes, adding deleteObject on group seems to work. Thanks!

const groupObjects = () => {
    if (!canvas) return;
    const objects = canvas.getActiveObjects();
    deleteObject();
    const group = new Group(objects);
    canvas.add(group);
    canvas.requestRenderAll();
  };