Gravity Parameter

[ISNIT0]

Would be really nice to have a 'gravity' option (top/bottom/left/right) for the direction packNodes moves the tiles.

Currently it's only possible to have no gravity (float:true), or the default which is up/top.

[ZoolWay]

If you take a look at the blog post, https://dylandreams.com/2017/04/26/gridstack-10-coming-soon/ , that's a 1.0 feature. It highly awaited ;)

[radiolips]

Thanks, @ZoolWay . I have lots of excuses for why version 1 wasn't released yet, but I'll save myself some face and just say: shoot. I missed a deadline badly. I'm working on a plan to increase transparency so that it's more obvious to see the status of all gridstack features. Look for a blog post soon - I'll get into a regular cadence with that as well.

[radiolips]

(but, yes, it's one of the features in the [uuuugh as-yet-unreleased] version 1.0.

[fictivecreations]

@radiolips Any update on this feature's eta? I want to be able to have my grid items get pushed across the row as new widgets are added rather than be pushed down the page.

[adumesny]

@sunlanterns new items are added in the first slot available (autoPosition or missing x,y) first, starting in the top/left corner (that part should be configurable to support rtl). that part wouldn't change.

but I guess you saying when manually moving a widget around, we push conflicting items down, while you want them pushed to the right (and therefore reflow below ?)

[fictivecreations]

@adumesny Sorry for the late response. I think that sounds right. In my use case we always add our newest widget at the 0,0 slot. This ends up pushing any pre-existing widget in that spot down, when I would rather it be pushed to the right.

[adumesny]

@sunlanterns do you have to have new items added at the beginning (0,0) ? because otherwise adding them without explicit x,y would add them in a row as you requested. But I could see supporting a left/right flow as you move things around, instead of pushing down.

Also @ISNIT0 I don't think 'bottom' gravity makes sense (browser scroll for content) as how far would you put them ? what scenario are you trying to solve ? Tetris game ? :)

[fictivecreations]

@adumesny Yes, we have to have them added at the beginning. Just to explain, we have users choosing to add widgets dynamically themselves - and users expect that new widget to show up close to the add widget button, and not possibly out of sight down the page in the next available slot.

[adumesny]

you might be able to do that yourself for now using similar code to what I recently did in compact() method - make gridstack believe it has no items, add the new one in, then loop over the old ones adding them to their old position (if no conflict, else use autoPosition to find next space).

would be nice to have contributions on this

[fictivecreations]

@adumesny At that point I feel like I'm having to re-implement the positioning logic completely, which is something I don't want to do or I wouldn't have grabbed a grid framework to begin with and written it myself.

[adumesny]

hummm, you can do what you want in probably 10 lines of code... vs >2000 for the lib. I included what the compact method does which would be very close

  public compact(): GridStackEngine {
    if (this.nodes.length === 0) return this;
    this.batchUpdate()
      .sortNodes();
    let copyNodes = this.nodes;
    this.nodes = []; // pretend we have no nodes to conflict layout to start with...
    copyNodes.forEach(node => {
      if (!node.locked) {
        node.autoPosition = true;
      }
      this.addNode(node, false); // 'false' for add event trigger
      node._dirty = true; // will force attr update
    });
    return this.batchUpdate(false);
  }