v2: Ease grouping elements

[jdittrich]

Story: Often, elements in a container are in a certain order, e.g. left-to-right (tabs, icons in toolbar) or top-to-bottom (menu, dropdown, sidebar…). It should be easy to create such groups of elements and keep them in a tidy state while not preventing quick changes and experimentation. Modes: Left-center-right and top-center-bottom alignments are common, use-whole-space by resize and use-whole-space by spacing are also possible, in addition.

Possible solutions/Notes

• The equivalent in CSS would be flexbox; UI-widget frameworks also have layouting containers.
• Figma’s auto layout does this for a UI design tool
• draw2D has some layout modes, e.g. vertical
• Common drag-drop-list libraries show how interaction with such layout containers can look like – e.g. dragula
• What might need some clever rule-of-thumbs is turning a bunch that looks like e.g. a list into something that is layouted as list: higher then wide becomes a vertical layout or so… Ideally, you could un-layout elements and then layout them again, and it would just be in the same layout mode as before (without explicitly storing it somewhere)

[AlaaSarhan]

As for the prototype, I think we should just make our Container element capable of changing mode between:

• free mode which is the same as it is atm (uses our ContainerComposite composite figure)
• vertical mode which will just swap the element's figure with draw2d's VerticalLayout composite
• horitzontal mode which will just swap the element's figure with draw2d's HorizontalLayout composite (2nd and 3rd modes should as well preserve the behaviors we implemented in our ContainerComposite like glowing and automatic assignment on drop, which means we'll need to refactor these features and probably move them into policies)

As for the rest, like flexbox mode, shadow element to visually show where things will move while dragging them, etc .. I'd probably leave out from prototype from now, and see if they come up as-is or slightly modified once we test the prototype with users.. makes sense?

[AlaaSarhan]

On a second thought, I'm leaning again towards just implementing those elements that we think such modes would allow to create instead. Like if we are thinking of vertical mode as enabler for list/menu/etc creation, then it is probably cheaper to implement those elements (hard-coded sort-of) than to implement more generic features/elements to later find out that they are only used for 1 or 2 use-cases/elements by users. does that make sense as well to you @jdittrich ?

[jdittrich]

Good question – it is one of the things that might be just OK or really awesome and one can only know by trying. So if it is costly to build, let’s wait for now (on the other hand, having a way for "adding more menu entries" etc. might also turn our to be some work). So… undecided.

[AlaaSarhan]

okay let me then give it a try with list and menu elements (both vertical and horizontal) .. I'm thinking in combination with introducing element toolbar (#55), we can have a button for adding new entries to lists/menus that will be aligned automatically based on the element direction (internally)