feat(cdk/drag-drop): add mixed orientation support #29216
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixes some test cases that don't behave like a user would do, like hovering over an item that is out of the screen. They worked because currently the drag&drop is almost purely coordinate-based, but that won't be the case with the `mixed` orientation. Also fixes some concatenated test names that were difficult to search for.
Reduces the amount of information that needs to be passed in for the shared drag&drop tests.
Simplifies the interface for sort strategies to avoid the unnecessary generics that were put in place to avoid circular imports.
crisbeto
added
target: minor
crisbeto
requested review from
amysorto and
wagnermaciel
and removed request for
a team
crisbeto
commented
Jun 8, 2024
| import {createComponent, dragElementViaMouse} from './test-utils.spec'; | ||
|
|
||
| describe('mixed drop list', () => { | ||
| defineCommonDropListTests({ |
There was a problem hiding this comment.
Note that we don't have that many tests here, because we reuse the ~190 tests from the existing drop list. We add some more below to ensure that sorting works properly on mixed lists as well.
Currently the drop list sorts items by moving them using a `transform` which keeps the DOM stable and allows for the sorting to be animated, but has the drawback of only allowing sorting in one direction. These changes implement a new `DropListSortStrategy` that allows sorting of lists that can wrap by moving the DOM nodes around directly, rather than via a `transform`. It has the caveat that it can't animate the sorting action. The new strategy can be enabled by setting `cdkDropListOrientation="mixed"`. Fixes angular#13372.
crisbeto
force-pushed
the
mixed-orientation-test
branch
from
19ebd54 to
c0b5c3f
Compare
crisbeto
added
the
dev-app preview
|
Deployed dev-app for c0b5c3f to: https://ng-dev-previews-comp--pr-angular-components-29216-dev-tnw1ojix.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
amysorto
approved these changes
Jun 12, 2024
12 tasks
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Currently the drop list sorts items by moving them using a
transformwhich keeps the DOM stable and allows for the sorting to be animated, but has the drawback of only allowing sorting in one direction.These changes implement a new
DropListSortStrategythat allows sorting of lists that can wrap by moving the DOM nodes around directly, rather than via atransform. It has the caveat that it can't animate the sorting action.The new strategy can be enabled by setting
cdkDropListOrientation="mixed".Fixes #13372.