Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rounding error when scaling the position up using autoPosition #2358

Closed
rbarrer0 opened this issue Jun 7, 2023 · 6 comments · Fixed by #2367 or #2368
Closed

Rounding error when scaling the position up using autoPosition #2358

rbarrer0 opened this issue Jun 7, 2023 · 6 comments · Fixed by #2367 or #2368

Comments

@rbarrer0
Copy link

rbarrer0 commented Jun 7, 2023

https://jsfiddle.net/8eur9joL/

Hello, so I am having trouble getting my grid to adjust the cells when my window resizes to where they belong without changing the size of the cells, just by changing the number of columns.

I have gridstack 8.1.1 on Chrome Version 114.0.5735.110

The fiddle now shows how it fails even when loading it the first time, but the error that focuses me is when you change the tab size.
I would expect it to move to the next row and first column available

(Video fiddle: https://jsfiddle.net/qs9cn1hw)

gridstack_clip.1.mp4
@CristianCG86
Copy link

CristianCG86 commented Jun 11, 2023

I have same issue plus relocation problem. When I load the page the grid have 4 columns, but when shrink the page and the number of columns is decreased, the items are relocated to the right vertically.

Before column number decreased:
no-resized

After column number decreased:
resized

I use this jsfiddle to test: https://jsfiddle.net/CristianCG/51kpLvx4/62/

@adumesny
Copy link
Member

adumesny commented Jun 11, 2023

@CristianCG86 not sure why you are calling column() in a loop - seems like a very bad idea. Anyway in your case you are asking for a compact() like method flag when calling column() - since you know your items are ordered and same size - which is a special (but common) case and different from above issue. That feature could be added.

adumesny added a commit to adumesny/gridstack.js that referenced this issue Jun 13, 2023
* fix gridstack#2358
when your grid is display a sorted list of items, we now support reflowing that content during column resize and compact() methods.
* compact() now takes options which today can be
CompactOptions = 'list' | 'compact';
* column(N) now has new options
ColumnOptions = 'list' | 'compact' | 'moveScale', etc...
* also optimized some code while stepping in debugger.

API is backward compatible and defaults  to the same behavior.

TODO: remember bigger width and restore back when going up in columns...
@adumesny
Copy link
Member

@CristianCG86 you're in luck as I added this feature - column(N, 'list') will now do what you want. in next release.

@rbarrer0 not sure if that would solve your problem as well... maybe you can play with the new flags and see.

don't forget to donate if you find this lib useful!

@adumesny
Copy link
Member

with list mode and more complicated than just 1x1 items (which is easier to do)
https://github.com/gridstack/gridstack.js/assets/3496166/fccaa6d7-f953-49e8-aca1-8e81a984f98a

same with 'compact' which fills available space, in this case changing the order to fill void left by item 10

20230612_210003.mp4

and random items with scale+move again for comparaison. depends on what you grid looks like (a list or random floating items)
https://github.com/gridstack/gridstack.js/assets/3496166/ff462db0-2dcc-495e-a947-fdf1b9b16488

@CristianCG86
Copy link

@CristianCG86 you're in luck as I added this feature - column(N, 'list') will now do what you want. in next release.

@rbarrer0 not sure if that would solve your problem as well... maybe you can play with the new flags and see.

don't forget to donate if you find this lib useful!

Nice!! I tried compact and work for me. But I wait for the next version to try 'list' feature. Thanks

PS: jsfiddle with compact test https://jsfiddle.net/CristianCG/51kpLvx4/77/

@adumesny
Copy link
Member

adumesny commented Jun 13, 2023

@CristianCG86 cool, but you will find the new metod works better as it sort tthrough items using the original grid count, then lay it out using new count with no constrain of 'none' which has to move items to fit and therefore mess the order.

essentially column(N, 'list' | 'compact') calls compact('list' | 'compact') but timing is key here.

adumesny added a commit to adumesny/gridstack.js that referenced this issue Jun 13, 2023
* more fix gridstack#2358
* going 12 -> 1 -> 12 in 'list' mode now correctly restore original item width before doing compact()
* updated demo
* updated API docs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants