Clipping documentation

IMO the clipping could use some more documentation about how it functions. I’m having a lot of trouble using it ://
Some discrepancies I think I found:
VisualElement#110 // Claims usage-hints doesn’t affect behavior
VisualElement#651 // usage-hints affects behavior
VisualElement#637 // Should be padding box?
VisualElement#worldClip // Could this be exposed?
VisualElement#worldClipMinusGroup // Could this be exposed?

Or instead make an interface:

public interface IClippable
{
    // Allowing users to edit this would also require access to the render chain...
    Rect worldClip; // {get; set;}
    Rect worldClipMinusGroup;
}

VisualElement#689 // Should be padding box? *

Hi!

In its simplest case, clipping works by passing the world-space clipping rectangle of an element down to the rendering system so that fragments outside the rect can be discarded. This rectangle will be adjusted to take styling into account. However, there are situations where this simple approach doesn’t work, for example:

  • The element has rounded borders, so a simple rectangle clipping test won’t work (we revert on stencil clipping in this case)
  • The element is under a group transform hint, so the world-space rect may be offset

Usage hints are really optimization opportunities. They shouldn’t affect the visual output in any way (if it does, this should be considered a bug). They will, however, allow the rendering system to process some changes faster. For example, the GroupTransform can be used to quickly transform an element and all of its children without having to update the children transforms, at the cost of an additional draw call. The behavior changes that you noticed seems to be for internal APIs, public APIs shouldn’t be affected.

The worldClip/worldClipMinusGroup properties are currently exclusively used by the renderer. We have no plan to expose these publicly. If you have a use-case for them we would like to have more details.

Hope this helps!

Thanks for the response! I was getting a little frustrated with the clipping based on the parent, I wasn’t sure how it was determined so I looked at the internal APIs. On a side note- is there any chance “clip-path” will be supported in the future?

I don’t see any technical limitations that would prevent us from supporting the “clip-path” property. I’ll add that to our feature request list. Thanks!

1 Like

As I see clip-path still isn’t supported in latest version (tested in 2023.2.0a14). Any ETA for it? BTW, is it UI Masking in the roadmap?

Yes, UI masking is on the roadmap. I cannot provide ETAs at the moment for any of these features though.