Comments (5)
from juicy-tile-list.
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.
from juicy-tile-list.
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:
- New row starts where the tallest tile ends
- 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.
from juicy-tile-list.
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)?
from juicy-tile-list.
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.
from juicy-tile-list.
Related Issues (20)
- Rename default groups
- Juicy-tile-list does not work with text nodes; what to do about it HOT 8
- Polymer 1.0? HOT 2
- Comments in html => Uncaught TypeError: undefined is not a function
- Relative dimension in group does not work
- Support right-to-left and other orientations HOT 7
- Animations and tests
- refreshOnResize is broken by first breakpoint
- Consider separation of smoke test and unit tests
- Example links lead to 404 HOT 1
- Migrate to vanilla WebComponent HOT 3
- Make Scripts and Styles in a tile-list work under IE HOT 1
- Clean up setup change flow, adjust it to Polymer flow, react on property change HOT 2
- Refresh listeners are being attached twice HOT 5
- Add line break feature HOT 6
- Make tests pass in Edge HOT 6
- Documentation on dynamically adding elements? HOT 1
- Remove console.info
- refreshOnResize not working HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from juicy-tile-list.