absolutePositioned with objects nested in groups

[ShaMan123]

Version

latest

Test Case

http://jsfiddle.net/2185reh6/19/

Information about environment

browser chrome

Steps to reproduce

Add an absolutePositioned clip path to an object inside a group

Expected Behavior

Clip path should be positioned relative to canvas, http://fabricjs.com/docs/fabric.Object.html#absolutePositioned

Actual Behavior

Because group manages it's own plane the clip path is relative to the group

[ShaMan123]

This is a part of the major problem that group creates on it's objects.

Related #7130 #6776

[ShaMan123]

I think the problem is that calcTransformMatrix is called from within the clipPath. This call is unaware of the context it is running in, meaning it doesn't know it is a clip path transformed to a relative plane, therefore, it can't account for the transform matrix of the containing object.

[i-prikot]

Hi. I think it works as intended.
http://jsfiddle.net/i_prikot/fgkyns8z/

[ShaMan123]

http://fabricjs.com/docs/fabric.Object.html#absolutePositioned

[asturur]

this is a though one.
Both use cases are fine, and discerning between the 2 with more options is not that much convenient.
The absolute positioned idea was to be able to have a clipPath on the canvas that would influence only an object.

It is working as intented from what i can see in the fiddle, but the point is that it does not invalidate the group cache on movement.

Not sure if this in an edge case that deserve fixing or not.
https://jsfiddle.net/qzo7r3y9/
you can also just set objectCaching: false on the group when you create it.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ShaMan123]

I found a work around

            const __drawClipPath = fabric.Object.prototype._drawClipPath;
            fabric.util.object.extend(fabric.Object.prototype, {
                _drawClipPath: function (ctx: CanvasRenderingContext2D) {
                    __drawClipPath.call(this, ctx);
                    //  render stuff here
                }
                // consider overriding the following method as well:
               //  isCacheDirty: () => true
            })

Now I am able to render many clip paths with varying absolutePositioned value, nested in groups and what not.

[ShaMan123]

fixed by the rewrite
https://codesandbox.io/s/0d1pbh
Once caching is resolved this is gone for good

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.