Replace bin-packing with word-wrapping

[warpech]

I discussed this with @Starcounter-Jack on the phone today.

It seems that a lot of times we are fighting with bin-packing algorithm, which fills the gaps with contents with lower priority, if elements with higher priority are already placed.

For example, consider such layout:

<span juicy-style="width  50px; priority 1.00"></span>
<div  juicy-style="width 400px; priority 0.75"></div>
<span juicy-style="width  50px; priority 0.50"></span>
<div  juicy-style="width 400px; priority 0.25"></div>

When the container is 400px wide, bin-packing renders it like below (disregarding the arbitrary priority):

SPAN SPAN
DIV
DIV

Whereas word-wrapping would render it like this:

SPAN
DIV
SPAN
DIV

I would like to discuss creating word-wrapping mode in packery and turn it ON by default.

Bin-packing is a nice feature in general (when you are building Pinterest), but not so efficient when you are building a business form.

Also, with word-wrapping, line break feature (#47) makes much more sense.

[warpech]

@tomalec, @miyconst WDYT?

[tomalec]

bin-packing renders it like below (disregarding the arbitrary priority)

bin-packing does not disregard priority, it uses it very strictly. The thing, is right now priority stands for "packing order" for efficient packer. What you would like to see is "rendering order". We could achieve that by simply changing the packing algorithm so it will be less efficient in terms of gaps/whitespace, but give you the output in the same order as input.

In general, I do agree that bin-packing may not serve us best.

• Algorithm was created to pack elements efficiently (with acceptable computing cost). What we do need is rather clarity, consistency and beauty, instead of set of efficiently com pressed widgets.
• "bin-packing" is term known to mathematicians, "word-wrapping" or "tetris" (see below) should sound familiar to every computer user (ok, maybe at least 20yrs old ;) )

Regarding, the word-wrapping itself, I'm not sure what do you exactly mean by it.

New row starts where the tallest tile ends

Container is 400px wide, priority goes as in HTML

<div juicy-style="width  200px; height: 200px;">A</div>
<div juicy-style="width  200px; height: 100px;">B</div>
<div juicy-style="width  200px; height: 100px;">C</div>
<div juicy-style="width  200px; height: 200px;">D</div>

Will be rendered

AABB
AA
CCDD
  DD

Then:

• Layout like
  AABB AACC
  Will be hard to achieve without groups => we will require designer to create lots of them. This may be good (explicit, easy to explain), and bad (group/div-soup)
• Are we going to support grid like behavior, should A and C grow horizontally together?
  • If so, we will end up with more tracks with mixed fixed and flex dimensions.
  • If no, it could get ungly in my opinion, but we could easily use flexbox layout.

New row starts where the shortest tile ends

<div juicy-style="width  200px; height: 200px;">A</div>
<div juicy-style="width  200px; height: 100px;">B</div>
<div juicy-style="width  200px; height: 100px;">C</div>
<div juicy-style="width  200px; height: 200px;">D</div>

Will be rendered

AABB
AACC
DD
DD

Tetris-like packing - we still support tiles spanning across grid.

Then:

• to support, layout like in previous one:

AABB
AA
CCDD
  DD

we would need a group, or "line-break" feature

• we will support spanning elements, without group-soup
• we could use existing engine by slightly changing priority meaning, from "efficient packing order", "rendering order"/"lazy/single dimensional packing order"

---

I have already proposed long time ago to separate different functionalities of our juicy-tile-list at #1, #28, plus recent https://github.com/Starcounter/RebelsLounge/issues/14
I think we can go that path, and separate bin-packing/lazy-packing/tetris-packing/word-wrapping from <juicy-tile-*>, from rendering tiles in absolute/grid/table/flexbox layout according to given setup.

That ways packing engine, will be just an external function, that does math to prepare setup. Later we could do it on server-size, or only at first load, and evolve it to more AI robot-phase. and <juciy-tile-*> will only take JSON/CSS setup, to render things in run-time.

[warpech]

Regarding, the word-wrapping itself, I'm not sure what do you exactly mean by it.

I mean a similar algorithm that Word is using for word wrapping. Basically it is bin-packing that only considers the current row or the next row:

Now, which variant do we prefer:

1. New row starts where the tallest tile ends
2. New row starts where the shortest tile ends

I think that variant 2 is preferable, considering how Products + Barcodes + Images layout looks like:

If you want to force a new line, you can always use the line break feature (#47).

I totally agree that the algorithm (which is math only) should be separate from juicy-tile-list. But still it can be in the same repo, because of repolepsy. This decision is up to you, because you are maintaining the code after all.

[tomalec]

I mean a similar algorithm that Word is using for word wrapping

In Word, words have the same baseline, and behaves the same. While our tiles comes in variety of different sizes and run-time behaviors.

Would you also like to change concept of grid to lines? Are we going to keep current behavior and relation between tile, and grid tracks (columns and rows)?

[warpech]

I mean no other changes than this: change bin-packing to only consider the current row or the next row when deciding where to place the item.

Meaning, if I am trying to place item 5 in row 3 and there is no place in row 3, put it in row 4. Do not consider rows 1 and 2.