Optimizing item position when pushing big elements with smaller one

[blemoine]

My configuration can be summarized by "use push south only"; we have compact set to none, and no resize on push.

With this configuration, when you drag a smaller item on a bigger item, there is a lot of white spaces displayed. I would like to get rid of this.

The expected behaviour would be this:

I obtained this by changing the way the pushedItemsPath is computed in GridsterPush : instead of putting only the start position and end position, I also add all the intermediate values.

So, this issue is in fact a bunch of questions / remarks:

• today, GridsterPush ( and other "services" BTW) are manually newed. While it's simpler, it prevents us, the users, to easily override the default behaviour. What you do think of trying to make that more modular? There is multiple solutions to this problem, going from using angular dependency injection mechanism to simply add an option to configure which class constructor to use
• what do you think of the patch described above? Do you see any problem with it?
• And finally, are you open to PR for the 2 above taks?

The code I used (not typescript as I was modifying the compiled files, this can be improved):

GridsterPush.prototype.addToPushed =  function (gridsterItem) {
  if (this.pushedItems.indexOf(gridsterItem) < 0) {
           this.pushedItems.push(gridsterItem);

           const newPath = pathBetween(gridsterItem.item, gridsterItem.$item)

           this.pushedItemsPath.push(newPath)
       } else {
           /** @type {?} */
           var i = this.pushedItems.indexOf(gridsterItem);
           const currentPath = this.pushedItemsPath[i]
           const lastPath = currentPath[currentPath.length - 1]

           const newPath = pathBetween(lastPath, gridsterItem.$item)

           this.pushedItemsPath[i].push(...newPath)
       }


       function pathBetween(start, end) {
           const newPath = []

           if(start.x < end.x) {
               //increment
               for(let x = start.x; x < end.x; ++x) {
                   newPath.push({ x: x, y: start.y })
               }

           } else {
               for(let x = start.x; x > end.x; --x) {
                   newPath.push({ x: x, y: start.y })
               }
           }

           if(start.y < end.y) {
               //increment
               for(let y = start.y; y < end.y; ++y) {
                   newPath.push({ x: end.x, y: y })
               }

           } else {
               for(let y = start.y; y > end.y; --y) {
                   newPath.push({ x: end.x, y: y })
               }
           }


           newPath.push({ x: end.x, y: end.y })

           return newPath
       }
}

And BTW: thanks for the great work :)

[jvinai]

+1 i need this feature to convince my project manager to use Gridster2 (he is very sensitive about sexyness and smoothness)

[tmtron]

+1 I asked this on Stackoverflow

[azakian]

Hello,

Is there a way to implement it so far ?