search

cuire / svelte-grid-extended

A draggable and resizable grid layout, for Svelte
https://svelte-grid-extended.vercel.app
MIT License
78 stars 9 forks source link

[Feature] New collision api #32

Closed cuire closed 1 year ago

cuire commented 1 year ago

Сurrent version of collisions is experemental and forces vertical compression of items. I want to add new compress: 'vertical' | 'horizontal | 'none' prop, that used to determine how grid should resolve these conflicts. The tricky part is how to rearrange the elements when they shouldn't be compressed.

fabiot21 commented 1 year ago

@cuire @hearthole I've been examining various grid layout libraries, such as gridstack, react-grid-layout, and vue-grid-layout. Interestingly, I noticed that most of them apply compression only in the vertical direction, possibly because it's the most intuitive way? Considering this, perhaps it's not necessary to include a compress option for 'vertical', 'horizontal', or 'none'. Instead, could be a simpler compress: true | false prop.

When set to false, items could freely move around the grid. If item A encounters a collision with item B during movement, item B would be relocated to the first available fitting space. Furthermore, if no space is available, the grid could dynamically increase along the y-axis to accommodate item B in a new position..