angular / angular/components

feat(CdkDropList): Allow to connect to lists sharing the same ID

Offen
#27,493 2 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/drag-drop feature P4
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Feature Description

Currently there seem to be no simple way to connect various drop lists in various components, unless they have a `cdkDropListGroup` on top of them, or a defined list of ids, which is not achievable in many cases.

Hence we could imagine that the `connectedTo` input could be used to connect several lists, depending on a single `id` parameter (or maybe some `groupName` ?), like :

```
// In some place in the code


...
// In a completely different place

...
// In another completely different place

```

Also the Input `connectedTo` already supports an ID as `string` but gets only a single element, as it can be seen in the code :
```
const siblings = coerceArray(this.connectedTo).map(drop => {
if (typeof drop === 'string') {
const correspondingDropList = CdkDropList._dropLists.find(list => list.id === drop); <-- Here

if (!correspondingDropList && (typeof ngDevMode === 'undefined' || ngDevMode)) {
console.warn(`CdkDropList could not find connected drop list with id "${drop}"`);
}

return correspondingDropList!;
}

return drop;
});
```

Hence replacing `.find(list => list.id === drop)` by a `.filter(list => list.id === drop)` pipe will allow to register as siblings all the lists that have this ID, so it may not be a big deal technically (in first approximation).

### Use Case

I've got a dataviz interface where datasets could be drag n' dropped in various containers (columns, graphs, segments, etc), but not knowing the number of them and not being able to get them under a single group.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Start at the CdkDropList connectedTo handling shown in the issue, especially the lookup of lists by id. Trace how connected drop lists are registered and identify existing coverage for connectedTo IDs. Done means the intended behavior for multiple lists sharing an ID is agreed, implemented without breaking single-ID connections, and covered by tests.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.