Disappearing/overlapping items when resizing columns too quickly combined with compact

[mattsta]

Subject of the issue

grid items slowly vanish (overlap?) if columns are adjusted too quickly then compact is requested. the grid items end up with negative gs-y coordinates. likely due to the column resize animation still being in progress when the math for the compact starts?

Your environment

gridstack-jq.js v4.2.5 on Firefox 89.0; float false; animations enabled.

Steps to reproduce

Fairly simple to reproduce in any project: https://jsfiddle.net/3ryc08as/

Stress test case:

            for (let j = 0; j < 5; j++) {
                for (let i = 1; i <= 12; i++) {
                    console.log("gridding at", i);
                    this.grid.column(i, "moveScale");
                    this.grid.compact();
                }
            } 

Bonus bug: there's an infinite loop if .column(0) is requested.

Expected behavior

no race conditions between automatic column re-calibration and compaction.

Actual behavior

random subsets of .grid-stack-item elements end up with negative gs-y coordinates. if many column resizing+compaction ops are performed back to back (animation delay problems?), all smaller items eventually get hidden behind the largest item.

[adumesny]

whoa, that is a interesting example! it's not the animation (that done in CSS with projected values) but likely the fact that column(n) tries to save previous layout caches and update them when user moves an item (tried to replicate in other layouts - which compact() simulates (but maybe should be ignored). just some bad overlapping math going on....

[radovanobal]

I have just stumbled upon this issue my self. The compact does not seem to cause this, it can happen by just changing the column number.
The speed of calling the column method also does not seem to be a factor in this. It happens as well if you call it slowly with a random number of columns

[adumesny]

@radovanobal I can't reproduce the issue without having compact() code above in @mattsta jsfiddle example. Please post a sample showing the issue.

[adumesny]

@mattsta are you still using this lib ? I worked on a fix over the weekend - pretty hard one to track and fix. don't forget to donate if you find this lib useful!