[BUG] Grouped objects are not seen within the bounding box

[sambautista]

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.0-beta9

In What environments are you experiencing the problem?

No response

Node Version (if applicable)

None

Link To Reproduction

https://codesandbox.io/p/github/sambautista/icon-editor/main?file=%2F.codesandbox%2Ftasks.json%3A20%2C15&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clq3c78490006356hgq8osku6%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clq3c78490002356h8tg0207h%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clq3c78490004356huguhmxaq%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clq3c78490005356hx3gtbzso%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B60%252C40%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clq3c78490002356h8tg0207h%2522%253A%257B%2522id%2522%253A%2522clq3c78490002356h8tg0207h%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clq3c78490005356hx3gtbzso%2522%253A%257B%2522id%2522%253A%2522clq3c78490005356hx3gtbzso%2522%252C%2522activeTabId%2522%253A%2522clq4nscft00hj356hinpk114d%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clq4nscft00hj356hinpk114d%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clq3c78490004356huguhmxaq%2522%253A%257B%2522id%2522%253A%2522clq3c78490004356huguhmxaq%2522%252C%2522activeTabId%2522%253A%2522clq3c78zd008e356hldydwpgu%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clq3c78490003356hlmh9gq6w%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clq3c7a41000gegfj9l49g10r%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522id%2522%253A%2522clq3c78zd008e356hldydwpgu%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522CSB_RUN_OUTSIDE_CONTAINER%253D1%2520devcontainer%2520templates%2520apply%2520--template-id%2520%255C%2522ghcr.io%252Fdevcontainers%252Ftemplates%252Fjavascript-node%255C%2522%2520--template-args%2520%27%257B%257D%27%2520--features%2520%27%255B%255D%27%2522%252C%2522id%2522%253A%2522clq3c8ei8005g356hddib2eeu%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps To Reproduce

1. Grouped objects (fabric.path)
2. Destroy group within canvas through group.destroy()
3. Regroup items within canvas

Expected Behavior

I have created a group of objects of fabric.path (window/door icons), and I want to edit each object of the group within the canvas. I have a toggle button for destroying the group called through the function ungroup, and a button to regroup called through a function doneEdit.

Code:

let group = activeSelection[0];
  let groupItems = group._objects; 
  

  const fabricDblClick = function(obj, handler) {
    return function() {
      if (obj.clicked) handler(obj);
      else {
        obj.clicked = true;
        setTimeout(function() {
          obj.clicked = false;
        }, 500);
      }
    };
  };

  let ungroup = function (){
    console.log(groupItems);
    
    console.log(group);
    //group.destroy();
    canvas.remove(group);
    for (var i=0; i <groupItems.length; i++){
      canvas.add(groupItems[i]);
    }
    canvas.renderAll();
    setItems(groupItems);
  }
  console.log(items);

  let doneEdit = function(){
    let left = items[0].group.left;
    let top = items[0].group.top;
    const newGroup = new fabric.Group(items.reverse(), {
      categoryId: 4,
      typeId: activeSelection[0].typeId,
      top: top,
      left: left,
      canvas: canvas,
      strokeWidth: 2,
      borderColor: 'red',
      cornerColor: 'green',
      cornerSize: 6,
      dirty: true,
      originX: 'center',
      originY: 'center',
     });
         
     items.forEach(item=>{
      canvas.remove(item);
     });
     
     canvas.add(newGroup);
     
     canvas.renderAll();
    
     let addGroup = () => {
      const aGroup = new fabric.Group(items, {
        left: left,
        top: top,
        subTargetCheck: true,
        borderColor: 'red',
        cornerColor: 'green',
        cornerSize: 6,
        originX: 'center',
        originY: 'center',
      });
      aGroup.addWithUpdate();
      canvas.add(aGroup);
      canvas.remove(aGroup);
      
    };
    addGroup();

Actual Behavior

The grouping and ungrouping function works fine but when you try to resize a regrouped object, the objects goes missing from the bounding box, and when you try to edit it again, it shows up again but with a different size and location.

Error Message & Stack Trace

No response

[ShaMan123]

Your repro is not scoped and seems to me in v5
#7670

[ShaMan123]

If you migrate to v6 and still face the problem then create a scoped repro, post it here and I will reopen