haltu / muuri

Infinite responsive, sortable, filterable and draggable layouts
https://muuri.dev
MIT License
10.77k stars 643 forks source link

Incompatible with transform:scale #534

Open RevolvingDCON opened 1 year ago

RevolvingDCON commented 1 year ago

Scaling the grid transform completely breaks the calculations performed by the mouse move event. Suggested fix to this would be to add a zoom / scale option to account for cases where grids need to function in scaled environments.

niklasramo commented 1 year ago

@RevolvingDCON So it seems indeed 🤔 This is actually the first time I've noticed anyone raising this issue and after testing some other libraries (https://gridstackjs.com/ and https://github.com/atlassian/react-beautiful-dnd) it seems to be a common issue.

Can't really say how big of a job this would be to fix, but I'm open to getting this fixed. Would be awesome if someone had time to make a PR for the fix or at least do some initial investigation of what might need refactoring. I believe this can be fixed without the library user needing to provide any scaling levels.

OliverRomhagen commented 1 year ago

Any Update on this? I had to skip using the transform:scale in my project.

RevolvingDCON commented 1 year ago

My working solution was to scale the individual elements rather than the entire container, it was incredibly rough though. I might pick this back up again and do some proper investigation.