Objects transform differently when in a Group or in a Selection

[ameotoko]

I want to implement a group functionality in such a way, that when group is transformed (skew or rotate), objects inside the group are not transformed themselves, only moved. This video shows the desired effect:

Screen.Recording.2026-05-17.at.20.28.38.mov

I was able to achieve this by extending transform() method of the object (my circles are subclasses of Circle), and only using translateX/translateY component of the transformation matrix. Like this:

transform(ctx: CanvasRenderingContext2D) {
    const needFullTransform =
        (this.group && !this.group._transformDone) ||
        (this.group && this.canvas && ctx === (this.canvas as Canvas).contextTop);
    const m = this.calcTransformMatrix(!needFullTransform);

    // We never skew (b,c) or scale (a,d) seats themselves,
    // so we're only interested in their translated coordinates
    // when their parent group is transformed.
    ctx.transform(...util.createTranslateMatrix(m[4], m[5])); // <----- See here
}

That works well when objects are added to canvas directly, but it doesn't work if I first create a group, add objects to the group and add the group to the canvas:

Screen.Recording.2026-05-17.at.20.26.04.mov

This baffles me, because selection is also a Group instance, but I was not able to find a relevant difference in logic between the two cases. The only thing I found is the group is cached as image and by default that image is transformed as a single thing, but the problem doesn't go away when I turn off the cache.

Can someone help me understand, what makes all the circles transform themselves in the second case?