Examples of Situations where clipping is needed
mdgriffith opened this issue · comments
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)
- 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
andclipY
are never used).
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:
- On containers with rounded borders so that the content is cut at the edges.
- 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. - 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.
- Page header background image is rendered with
behindContent
and centered, andclip
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 el
s.
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.