h2d.Flow overflow

[trethaller]

I suggest to modify the overflow property on h2d.Flow. It is only useful in combination with maxWidth or maxHeight.

• Expand: This is the current, default mode. Children larger than maxWidth/maxHeight will expand the flow size.
• Limit: Limits the bounds reported by the flow using maxWidth or maxHeight, if set. This is means children larger than max size will draw outside of their parent bounds.
• Hidden: Like limit, but using a h2d.Mask to prevent children from drawing outside
• Scroll: See below

Not sure yet how this would behave with constraints coming from parents rather than current flow.

Any thoughts @ncannasse @Fl0xer @D0pu ?

[ncannasse]

We already have an overflow:bool so both expand/limit are already available. We can change it to an enum to add hidden I don't see any problem with it.

Note: in order to enable scrollable content, we should have a way to make the difference between the "virtual" size (including hidden/limited parts) and the "display" one. ATM we only have calculatedWidth/Height used for things such as innerWidth/outerHeight

[trethaller]

Missed that we already had one 🤦‍♂️. Good news is that it already does what I asked! So we're just missing Hidden and Scroll. Edited the original to reflect the enum names, rather than the anticipated domkit CSS ones

[ncannasse]

Do we really need hidden/scroll to be handled as part of Flow ? (which is quite complex already) I think we should instead use some parent component. For instance Mask.

[Yanrishatum]

I actually agree that it's probably not the place for having overflow, as separate class would suit better. On top of that, if separate - it can be used for other than Flow. In fact! I already have some basic classes that do exactly that in Heeps: https://github.com/Yanrishatum/heeps/blob/master/h2d/ui/ScrollArea.hx https://github.com/Yanrishatum/heeps/blob/master/h2d/ui/ScrollText.hx

[ncannasse]

I think this should somewhat be merged with h2d.Mask, so the inner content can be scrolled.

[Yanrishatum]

I can port implementation of ScrollArea to Mask (it's a bit hacky precisely because I had to copy-paste some of Mask code in order to make it work), but there is a question of what features have to be ported.

• Should is support scrollBounds? E.g. custom limiter on how far it can be scrolled as to prevent overscroll.
• Should it have scrollBy and scrollStep methods? E.g. stepped scrolling in case of mouse wheel.
• Should it have ability to enable automatic scroll by using Interactive and listening to scroll and touch events? If yes, should it also allow drag-by-mouse? (It's not in ScrollArea, but in ScrollText)

This also calls for other things like scroll-bar UI element.

[ncannasse]

• Should is support scrollBounds? E.g. custom limiter on how far it can be scrolled as to prevent overscroll.

As optional yes, it's a commonly used utility as it's rare to have infinite scrolling.

• Should it have scrollBy

scrollBy as API shortcut for scrollX / scrollY offset, I would not have scrollStep as it can be handled by Interactive directly.

• Should it have ability to enable automatic scroll by using Interactive and listening to scroll and touch events? If yes, should it also allow drag-by-mouse? (It's not in ScrollArea, but in ScrollText)

No, that's outside of the scope, it should be a purely API-controllable element, which you have to combine with an Interactive or whatever else to make it scroll.

[ncannasse]

I'm not sure I understand ScrollText usage, but it seems quite (too?) high level for Heaps since it handles both display and interactivity.

[Yanrishatum]

With that PR Mask now capable of doing content scroll. It doesn't exactly resolves this issue, as I'm not sure how to properly integrate it into Flow, but Hidden / Scroll can be achieved with Mask -> Flow -> Content hierarchy atm. Only solution I can think of is to add maskWith(object:Object, scrollX:Float, scrollY:Float) and unmask() methods to Mask that would set and reset renderZone, allowing Flow to act as relay without having Mask as middleman in the object tree:

// In Flow.drawRec
if (overflow == Hidden || overflow == Scroll) {
  mask.maskWith(this, overflowScrollX, overflowScrollY);
  super.drawRec(ctx);
  mask.unmask();
} else {
  super.drawRec(ctx);
}

[ncannasse]

Seems ok, maybe using a static method instead of a dummy instance ?

h2d.Mask.maskWith(ctx,this,overflowScrollX,overflowScrollY)

So the code logic is kept in mask, but can still be re-used ?

[ncannasse]

Let's open another issue for discussing Scroll.