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

Observe resizes of droppable containers while dragging #561

Merged
merged 4 commits into from
Jan 7, 2022

Conversation

clauderic
Copy link
Owner

This PR allow partial recomputation of droppable rects, and adds a resize observer to droppable elements to observe changes in the size of droppable elements while dragging

@changeset-bot
Copy link

changeset-bot bot commented Jan 6, 2022

🦋 Changeset detected

Latest commit: b6a9cb8

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@dnd-kit/core Major
@dnd-kit/sortable Major
@dnd-kit/utilities Patch
@dnd-kit/modifiers Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Jan 6, 2022

Size Change: +1.32 kB (+2%)

Total Size: 68.9 kB

Filename Size Change
packages/core/dist/core.cjs.development.js 18.4 kB +480 B (+3%)
packages/core/dist/core.cjs.production.min.js 11.3 kB +207 B (+2%)
packages/core/dist/core.esm.js 18.3 kB +470 B (+3%)
packages/sortable/dist/sortable.cjs.development.js 4.27 kB +46 B (+1%)
packages/sortable/dist/sortable.cjs.production.min.js 2.81 kB +65 B (+2%)
packages/sortable/dist/sortable.esm.js 4.15 kB +45 B (+1%)
packages/utilities/dist/utilities.cjs.development.js 2.04 kB +3 B (0%)
packages/utilities/dist/utilities.cjs.production.min.js 1.23 kB +1 B (0%)
packages/utilities/dist/utilities.esm.js 1.92 kB +3 B (0%)
ℹ️ View Unchanged
Filename Size
packages/accessibility/dist/accessibility.cjs.development.js 640 B
packages/accessibility/dist/accessibility.cjs.production.min.js 486 B
packages/accessibility/dist/accessibility.esm.js 503 B
packages/accessibility/dist/index.js 148 B
packages/core/dist/index.js 141 B
packages/modifiers/dist/index.js 144 B
packages/modifiers/dist/modifiers.cjs.development.js 824 B
packages/modifiers/dist/modifiers.cjs.production.min.js 599 B
packages/modifiers/dist/modifiers.esm.js 739 B
packages/sortable/dist/index.js 144 B
packages/utilities/dist/index.js 144 B

compressed-size-action

Also renamed `recomputeLayouts` to `recomputeRects` and `willRecomputeLayouts` to `willRecomputeRects`
While sorting, it's possible for the size of droppable elements to change. We add a resize observer to keep track of size changes and schedule recomputation of the bounding rectangles of the droppable elements when resize events occur.

The `resizeObserverConfig` param can be used to disable or configure the resize observer.
@clauderic clauderic marked this pull request as ready for review January 7, 2022 03:25
@clauderic clauderic force-pushed the droppable-resize-observer branch 4 times, most recently from f9d9a2f to 9ae168c Compare January 7, 2022 03:37
@clauderic clauderic merged commit 02edd26 into master Jan 7, 2022
@clauderic clauderic deleted the droppable-resize-observer branch January 7, 2022 03:56
@github-actions github-actions bot mentioned this pull request Jan 7, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Question: Can sortable items render different sizes on drag start?
1 participant