Implement vertical gridlist

[NiGhTTraX]

Vertical gridlist

In order to make the grid to support both vertical and horizontal directions we will modify its current implementation by adding new concepts #indexes and #lanes.

Insert the image

• Modify rows prop to itemsPerLane, we no longer need a rows option
  If specified, itemsPerLane, will represent the #lanes
• Pass a custom option direction to identify the direction of the grid.
  By default will be horizontal. direction can be horizontal (default) or vertical
• Fix failing unit tests
• Add the fixtures for vertical grid as presented below

Item per lane 2

Image

Fixture

itemsPerLane2: [
  {w: 1, h: 1, x: 0, y: 0},
  {w: 1, h: 1, x: 1, y: 0},
  {w: 1, h: 2, x: 0, y: 1},
  {w: 1, h: 1, x: 1, y: 1},
  {w: 1, h: 2, x: 1, y: 2},
  {w: 1, h: 1, x: 0, y: 3},
  {w: 0, h: 1, x: 0, y: 4},
  {w: 1, h: 1, x: 0, y: 5},
  {w: 1, h: 1, x: 1, y: 5},
  {w: 2, h: 2, x: 0, y: 6},
  {w: 2, h: 1, x: 0, y: 8},
]

Resize flow from 2 lanes => 3 lanes and from 3 lanes => 4 lanes

Item per lane 3

Image

Fixture

itemsPerLane3: [
  {w: 1, h: 1, x: 0, y: 0},
  {w: 1, h: 1, x: 1, y: 0},
  {w: 1, h: 1, x: 2, y: 0},
  {w: 2, h: 1, x: 0, y: 1},
  {w: 1, h: 1, x: 2, y: 1},
  {w: 0, h: 1, x: 0, y: 2},
  {w: 1, h: 2, x: 0, y: 3},
  {w: 1, h: 1, x: 1, y: 3},
  {w: 1, h: 1, x: 2, y: 3},
  {w: 1, h: 1, x: 1, y: 4},
  {w: 1, h: 1, x: 2, y: 4},
  {w: 2, h: 1, x: 0, y: 5},
  {w: 1, h: 2, x: 2, y: 5},
  {w: 1, h: 1, x: 0, y: 6},
  {w: 1, h: 1, x: 1, y: 6},
  {w: 2, h: 2, x: 0, y: 7},
  {w: 1, h: 2, x: 2, y: 7}
]

Resize flow from 3 lanes => 2 lanes and from 3 lanes => 4 lanes

Item per lane 4

Image

Fixture

itemsPerLane4: [
  {w: 2, h: 1, x: 0, y: 0},
  {w: 1, h: 1, x: 2, y: 0},
  {w: 1, h: 2, x: 3, y: 0},
  {w: 2, h: 2, x: 0, y: 1},
  {w: 1, h: 2, x: 2, y: 1},
  {w: 1, h: 1, x: 3, y: 2},
  {w: 0, h: 1, x: 0, y: 3},
  {w: 2, h: 1, x: 0, y: 4},
  {w: 1, h: 1, x: 2, y: 4},
  {w: 1, h: 1, x: 3, y: 4},
  {w: 1, h: 2, x: 0, y: 5},
  {w: 1, h: 1, x: 1, y: 5},
  {w: 2, h: 1, x: 2, y: 5},
  {w: 2, h: 1, x: 1, y: 6},
  {w: 1, h: 1, x: 3, y: 6}
]

Resize flow from 4 lanes => 5 lanes and from 4 lanes => 3 lanes

---

• Test that items are correctly positioned withing the grid when direction = vertical
• Write the code which will position the items for vertical direction, ensure that unit test passed.
• Further Todos
  • tests
    • Write tests for collisions
    • Write tests for item resize
    • Write tests for grid changes
    • Write tests for horizontal "timelines"
  • implementation
    • adapt _tryToResolveCollisionsLocally and _pullItemsToLeft for vertical grid
    • refactor _adjustHeightOfItems to both directions

---

#lanes are rows or columns based on the direction. Lanes represent the fixed dimension of the grid.

#indexes = represent the variable dimension of the grid.

grid[index][lane]

[andrei-picus-hs]

@skidding care to take a look?

[ovidiu-chereches-hs]

I think it's still worth noting that GridList (now) supports both vertical and horizontal, while Gridster just vertical. Unless it now supports both axis.

[ovidiu-chereches-hs]

LGTM

[catalinmiron]

• You can add auto for both x and y

[catalinmiron]

@NiGhTTraX I found a collision bug or is this the desired behaviour ?

L.E: I'm using fixtures.verticalGridDemo

[ovidiuch]

👍

[andrei-picus-hs]

@catalinmiron fixed.

[catalinmiron]

@andrei-picus-hs 🌟 LGTM