How to Disable Area Selection Outside of an Object's ClipPath in Fabric.js?

[turnbrain]

Hello Fabric.js team,

I'm currently working on a project where I need to restrict the area selection to within a specific object that has a clipPath applied. I want to prevent users from being able to select any objects outside of the clipped area.

I have a fabric.Canvas with multiple objects, and I have applied a clipPath to one of the objects. The problem is that when I try to select objects within the canvas, the selection area extends beyond the clipPath boundaries. I want to disable or restrict the selection to only the area that is visible through the clipPath.

If I set perPixelTargetFind to true, it will successfully disables selection when I click directly on the object. However, it does not prevent selection when I start an area selection that begins outside the object but ends over it.

https://codepen.io/turnbrain/pen/JjQVoPy

[asturur]

As of today and for the near future the only solution you have is to wrap the object in a group with the clip layout manager and assign the clipPath to the group.

The selection itself it wouln't be an hard fix but all the interaction like scaling could be a pain to make work properly out of the box