ClipFunc on group, transforming Image

[dhalldmg]

Hello everyone,

I have a situation where I have a group that contains an image. A transformer adds the image as a node. When I add a clipFunc to the group to clip the image as a circle I set the X/Y as the middle of the image, then the radius is set to the smaller side of the image.

On transform of the image I need to recalculate the new circle XY. The lower right corner handle on the transformer in this bin is the desired action for all handles.
https://jsbin.com/paniduy/edit?html,js,output

If you try to grab/resize from any other handle results are odd and I don't understand why.

Changing the transformer's node to group in the bin the scaling of the clip acts as desired on all handles, but for my needs I can't do that. Understanding what is happening when the image is the transformer's node and how to resolve the odd positioning of the x/y for the center of the circle would be really appreciated.

[dhalldmg]

For anyone curious - I came across this and it helped my situation https://codepen.io/Ponomarev/pen/yLLXNLN

This inline cropping has math way above my head, but experimenting with this snippet let me fall into the solution
let layer = this.getLayer(),
transform = this.getAbsoluteTransform(),
transform2 = this._cropElement.getAbsoluteTransform(),
transform0 = layer.getAbsoluteTransform(),
options = qrDecompose(transform0.copy().invert().multiply(transform).multiply(transform2).getMatrix());

For me flipping transform0 & transform2 like this is giving me desired results
qrDecompose(transform2.copy().invert().multiply(transform).multiply(transform0).getMatrix());

I still would appreciate an explanation of what is actually going on with the above.