Unexpected behavior when rightToLeft tile-grid is expanded

[tomalec]

@miyconst reported at Juicy/juicy-tile-list#38 (comment)
strange behavior of grid in http://juicy.github.io/juicy-tile-editor/examples/juicy-tiles-grid/demo.html :

A bug found:

This is how page looks with "rightToLeft": false:

And this is how the same page and setup looks with "rightToLeft": true:

[miyconst]

/sub

[miyconst]

Another bug with rightToLeft property.

A group of buttons with rightToLeft: true:

The buttons ordering and alignment are correct, but there are some redundant gap. To remove the gap I mark the group as tightGroup: true.

The gap has gone, the direction is still correct, but alignment is broken.

The setup I used over /people/organizations/add page:

{"id":"root","direction":"horizontal","gutter":0,"items":[{"gutter":0,"items":[{"precalculateHeight":true,"width":"25%","widthFlexible":true,"priority":0.5,"id":"People/0","height":84,"hidden":false,"itemName":"Organization details"},{"gutter":10,"items":[{"precalculateHeight":true,"width":86,"widthFlexible":false,"priority":1,"id":"People/15","height":29,"hidden":false,"itemName":"Add person","precalculateWidth":true,"widthDynamic":true},{"precalculateHeight":true,"width":88,"widthFlexible":false,"priority":0.8398250855493163,"id":"People/14","height":29,"hidden":false,"itemName":"Find person","precalculateWidth":true,"widthDynamic":true},{"precalculateHeight":true,"width":130,"widthFlexible":false,"priority":0.7597376283239745,"id":"People/11","height":29,"hidden":false,"itemName":"Add phone number","precalculateWidth":true,"widthDynamic":true},{"precalculateHeight":true,"width":126,"widthFlexible":false,"priority":0.7196938997113036,"id":"People/8","height":29,"hidden":false,"itemName":"Add email address","precalculateWidth":true,"widthDynamic":true},{"precalculateHeight":true,"width":92,"widthFlexible":false,"priority":0.6796501710986328,"id":"People/5","height":29,"hidden":false,"itemName":"Add address","precalculateWidth":true,"widthDynamic":true}],"id":"root_0","priority":0.4875,"width":"75%","height":145,"hidden":false,"itemName":"Group 1","rightToLeft":true,"precalculateHeight":true,"widthFlexible":true,"tightGroup":true}],"id":"root_1","priority":0.4875,"width":"100%","height":84,"hidden":false,"itemName":"Group 1","widthFlexible":true},{"precalculateHeight":true,"width":100,"widthFlexible":false,"priority":0.475,"id":"People/1","height":32,"hidden":false,"itemName":"Name:"},{"precalculateHeight":true,"width":900,"widthFlexible":true,"priority":0.45125,"id":"People/2","height":37,"hidden":false,"itemName":"<div>"},{"precalculateHeight":true,"width":"100%","widthFlexible":true,"priority":0.42868749999999994,"id":"People/3","height":0,"hidden":false,"itemName":"Addresses:"},{"precalculateHeight":true,"width":"100%","widthFlexible":true,"priority":0.40725312499999994,"id":"People/4","height":25,"hidden":false,"itemName":"This organization ha …"},{"precalculateHeight":true,"width":"100%","widthFlexible":true,"priority":0.3675459453124999,"id":"People/6","height":0,"hidden":false,"itemName":"Emails:"},{"precalculateHeight":true,"width":"100%","widthFlexible":true,"priority":0.34916864804687486,"id":"People/7","height":25,"hidden":false,"itemName":"This organization ha …"},{"precalculateHeight":true,"width":"100%","widthFlexible":true,"priority":0.31512470486230454,"id":"People/9","height":0,"hidden":false,"itemName":"Phones:"},{"precalculateHeight":true,"width":"100%","widthFlexible":true,"priority":0.2993684696191893,"id":"People/10","height":25,"hidden":false,"itemName":"This organization ha …"},{"precalculateHeight":true,"width":"100%","widthFlexible":true,"priority":0.2701800438313183,"id":"People/12","height":0,"hidden":false,"itemName":"Persons:"},{"precalculateHeight":true,"width":"100%","widthFlexible":true,"priority":0.25667104163975235,"id":"People/13","height":25,"hidden":false,"itemName":"This organization ha …"},{"gutter":15,"items":[{"precalculateHeight":true,"width":60,"widthFlexible":false,"priority":0.22006333432588263,"id":"People/16","height":36,"hidden":false,"itemName":"Save","precalculateWidth":true},{"precalculateHeight":true,"width":75,"widthFlexible":false,"priority":0.20906016760958848,"id":"People/17","height":36,"hidden":false,"itemName":"Cancel","precalculateWidth":true}],"id":"root_2","priority":0.22006333432588263,"width":"100%","height":36,"hidden":false,"itemName":"Group 2","tightGroup":true},{"precalculateHeight":true,"width":"100%","widthFlexible":true,"priority":0.19860715922910904,"id":"People/18","height":0,"hidden":false,"itemName":"Delete Cancel"},{"precalculateHeight":true,"width":"100%","widthFlexible":true,"priority":0.18867680126765357,"id":"People/19","height":0,"hidden":false,"itemName":"<div>"}],"width":1000,"precalculateHeight":true,"itemName":"OrganizationPage.html"}

[tomalec]

That's because, currently, eventhough we pack items from the right to the left, regardless of direction items are aligned withing a top, left corner of the grid item, so if for already packed grid one column grows dynamically, fixed size elements, are packed into top left corner.

This could be customizable as well, as even for LTR alignment, you may want an item to positioned top middle, or right bottom, if grid grows.

The question is,

1. should we introduce this as completely new and separated feature? or
2. should we for now hard-code default values only for groups with different orientations?

@warpech, @miyconst WDYT?

[miyconst]

I still can't understand the reason why it acts like this.

Simple groups (tightGroup: false) and juicy-tile-grid with rightToLeft: true align items to top right corner, not from top left corner, but if I mark a group with tight flag, then the tiles float to the top left corner.

Either solution we go, I think the behaviour should be the same regardless tightGroup flag.

The align feature would also be very cool, but not that important right now. I would just hard code, that rightToLeft: true should always align tiles to the right side not to the left side.

Same for bottomUp: true, it should always align tiles to the bottom line.

[tomalec]

The difference is that

1. rightToLeft and bottomUp packs items to the container in given direction
2. The thing you need is to render (in run-time) item within grid cell in given place.

So the reason why it look like it looks in tight vs. loose group is:

• in tight group - entire group is positioned to the top left corner of the grid cell in parent container;
  one big block in a single (flexible - expanded) column
• in loose group - each individual tile is positioned to the top left corner of the grid cell in parent container;
  five blocks in five (flexible) columns.

[miyconst]

Now it is clear, thank you for the explanation.

How much of the effort would it take to introduce the new features like text-align and vertical-align in css? If that is a quick fix, then lets do it, or hard code alignment otherwise.

[tomalec]

I need to investigate, but I would say that implementation of both should take the same, the difference is in usability, amount of combinations to test, README that grows, and yet another UI widget to add to editor.

[miyconst]

I think all of those items should be easily to fix, if the actual functionality works. README could be split into several files, and in the UI we could introduce "Simple view" and "Advanced view".