-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Implement dragging in "wrap" mode #1773
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
Conversation
Handles moving conflicting elements in a way appropriate for a sequence of elements arranged in a wrapped-paragraph style.
|
Any updates on this PR? |
|
Re a custom compacter function mentioned in #1188 (comment), I did partially introduce this idea in a fork: Maczuga@a3de04e. For my specific use case I allowed passing in what I called a compactor and collision resolver; both are just functions that allow customising these operations on the layout (ignoring my Hopefully this is useful in some way as a rough starting point if anyone wants to genericise this functionality. There would obviously be work involved in untangling the existing compaction logic, tweaking places like I didn't need to do that extra work because both the collision resolution and compacting were handled at the same time by some standalone logic (both in a custom |
|
Any updates on this PR? |
|
This is exactly what I am missing. |
|
Any chance this ends up in the next release? |
|
This would make the library go from great to perfect. Please work towards having this merged. |
+1 |
|
Any updates on this super cool PR? |
+1 |
|
@STRML Any updates on this super cool PR? Exactly this will resolve our most of the issues |
|
Is there any timeline for this feature? |
|
does anyone has found a workaround since this PR is not yet implemented ? |
|
What else needs to be done to make this happen? |
|
Hi, any updates on this PR? |
|
@STRML Hi, Any updates on this PR? |
|
@STRML Any upadte on this? I would love to help, but it looks pretty much done already. |
|
@STRML when is this getting released? |
|
Hi, any updates on this PR? This would solve many people's issues |
|
any updates here 🙏 |
This RFC proposes a comprehensive rewrite of react-grid-layout in TypeScript with a modernized, composable API while maintaining backwards compatibility. Key changes: - Pure TypeScript core with no React dependencies in layout algorithms - Composable interfaces: Compactor, PositionStrategy, DragConfig, ResizeConfig, DropConfig - Hooks-based API (useGridLayout, useResponsiveLayout, useContainerWidth) - Fast compaction algorithm (O(n log n) vs O(n²)) - PR #2152 - Drag threshold fix (onDragStart only fires after 3px movement) - PR #1411 - Wrap compact mode support via Compactor interface - PR #1773 - Legacy wrapper for 100% backwards compatibility - data-grid prop isolated to legacy wrapper only Breaking changes in v2: 1. onDragStart requires mouse movement (3px threshold) 2. Immutable callback parameters 3. data-grid prop only in legacy wrapper 4. Fast compaction algorithm by default (use legacy* for exact v1 behavior) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
Implements wrap mode compaction where items flow left-to-right and wrap to the next row, similar to words in a paragraph. When dragging: - Moving an item earlier shifts other items right/down - Moving an item later shifts other items left/up This is a v2 reimplementation of the algorithm from PR #1773 by @JohnThomson, adapted to the new composable Compactor interface. Usage: ```tsx import { wrapCompactor } from 'react-grid-layout/extras'; <GridLayout compactor={wrapCompactor} ... /> ```
* feat(extras): add wrap compactor for paragraph-style layouts Implements wrap mode compaction where items flow left-to-right and wrap to the next row, similar to words in a paragraph. When dragging: - Moving an item earlier shifts other items right/down - Moving an item later shifts other items left/up This is a v2 reimplementation of the algorithm from PR #1773 by @JohnThomson, adapted to the new composable Compactor interface. Usage: ```tsx import { wrapCompactor } from 'react-grid-layout/extras'; <GridLayout compactor={wrapCompactor} ... /> ``` * fix(readme): correct attribution for PR #2175 Change credit from @nicosayer to @dmj900501 who is the actual author of the GridBackground feature PR.
Continuation of #1188.
Original description: