[Bug]: add existing object to group get wrong control position

[byeval]

CheckList

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

Version

6.0.2

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

None

Link To Reproduction

https://codesandbox.io/p/sandbox/group-clippath-fabric-js-6-0-0-beta-14-forked-8zzx2r?file=%2Fsrc%2Findex.js%3A36%2C21

Steps To Reproduce

1. create a group and a blue rect
2. add blue rect to existing group
3. reselect the blue rect, you can see it has a wrong control position

Expected Behavior

control is fit with object

Actual Behavior

control has wrong position

Error Message & Stack Trace

No response

[asturur]

The bug happens only if you do it inside object:modified. not if you just exec the code one step after another. Need to look into it

[byeval]

@asturur Thank you for your reply! You are right, but I want switch object's artboard when user is dragging object in modify callback, Do you know how to solve this problem.

[zhe-he]

@asturur Thank you for your reply! You are right, but I want switch object's artboard when user is dragging object in modify callback, Do you know how to solve this problem.

@byeval Can you check if this method meets your requirements? When you drag multiple items to the target group(XXX), you need to first remove them from ac. When you drag a single item, you need to reset the cache.

canvas.on("mouse:move", e => {
    const target = e.target;
    if (!canvas.selection) return;
    if (e.transform?.action != "drag") return;
    if (!target) return;
    const isA = target instanceof ActiveSelection;

    const fn = (o: FabricObject) => {
       (o.group ?? canvas).remove(o);
       // XXX -> The "XXX" in your example  === group
       XXX.add(o);
    }
    if (isA) {
        const list = target.getObjects();
        for (const item of list) {
            target.remove(item);
            fn(item);
            target.add(item);
        }
    } else {
        canvas._activeObject = undefined;
        canvas._hoveredTarget = undefined;
        fn(target);
        canvas._activeObject = target;
        canvas._hoveredTarget = target;
        canvas._setupCurrentTransform(e.e, target, true);
    }

});

[byeval]

@zhe-he It works! Thank you so much ❤️