Examples of Situations where clipping is needed

[mdgriffith]

One of the first changes I made in 2.0 was a different approach to scrolling.

Now, there's a viewport element, which, when the content overflows, has scrollbars. (https://github.com/mdgriffith/elm-ui/blob/145a5ca071ddac227bd630beded7194ae6906b6b/src/Element.elm#L1478)

There's nothing super special about it (you could define a helper in your current elm-ui fns to do the same thing), but I'm hoping little more intuitive than the scrollbars and scrollX properties, which I've seen a number of people including myself trip up on.

And now, I'm taking a moment to think about clipping.

Here are my questions.

• When do you use clipX/clipY/clip in your existing codebase? (a small code snippet and a brief explanation of what you're accomplishing would be lovely!)
• How many instances are on a single element or paragraph that only contains text?
• How many instances are on larger container elements like a row or column?
• How often is it used compared to the size of your codebase? (e.g. I use it 4 times in my codebase of 60k lines of Elm)

[MartinSStewart]

• In my codebase clip is used to prevent scrollbars from appearing when I have elements slide in/out from outside of an element.
• None
• All
• My code base is 16k lines and clip is used 3 times (clipX and clipY are never used).

[edkv]

When do you use clipX/clipY/clip in your existing codebase? (a small code snippet and a brief explanation of what you're accomplishing would be lovely!)

clipX, clipY - never

clip is used for these purposes:

1. On containers with rounded borders so that the content is cut at the edges.
2. We have a map editor, and all the stuff like markers that is overlayed on top of the map should be invisible when it's outside of the viewport. clip is used to achieve this.
3. We also have an image cropper component where you can zoom and move the image. And the parts of the image that are outside of the viewport are clipped.
4. Page header background image is rendered with behindContent and centered, and clip is used to hide parts that are outside the screen on different screen sizes (to prevent scrollbars to appear).

How many instances are on a single element or paragraph that only contains text?

Looks like it's not used just on text.

How many instances are on larger container elements like a row or column?

Some of the instances are used on a row or column. Like a container with buttons that have rounded borders. Other instances are used on els.

How often is it used compared to the size of your codebase? (e.g. I use it 4 times in my codebase of 60k lines of Elm)

35k lines, around 20 times.