Skip to content

Commit c1f71c2

Browse files
skrustevmpavlinov
skrustev
authored and
mpavlinov
committed
Drag and Drop improvements - drop strategies, animation, API (#5630)
* feat(IgxDrag/IgxDrop): Implement drop strategies and transition functionality. #5319 * feat(IgxDrag/IgxDrop): Update API to latest spec. #5319 * feat(IgxDrag/IgxDrop): Fix ghost dragging issue over base. Add reorder list demo with animations. #5319 * feat(IgxDrag/IgxDrop): Update IDragCustomAnimationArgs interface name. #5319 * test(igxChip): Fix failing tests in chips-area.spec #5319 * test(igxDragDrop): Fix failing tests in drag and drop directive #5319 * test(igxChip): Fix tests in group by - use click instead pointerdown/up #5319 * fix(rowDrag): Make sure there is ghost when adding event listener #5319 * fix(rowDrag): End dragging if the ghost is removed #5319 * feat(drag-drop): update migrations #5319 * test(igxDragDrop): Add tests for drop strategies #5319 * chore(igxDragDrop): Remove fdescribe from tests * feat(IgxDrag/IgxDrop): Update API and interfaces related to inputs. Add changelog. * test(igxDragDrop): Automate drag drop directive #5319 * fix(IgxDrag): Fix dragging using a handle by hovering over a text area or child of the handle. #5319 * chore(igxDragDrop): Renaming IgxDropEventArgs to IDropBaseEventArgs in spec * test(igxDragDrop): Automate setRelativeOffset method of drag drop #5319 * chore(igxDragDrop): Remove setRelativeOffset() as setLocation() can be used * feat(IgxDrag/IgxDrop): Tweak margin applied when setting location. Add automation for transitionToOrigin() and transitionTo(). * test(igxDragDrop): Add some more scenarios #5318 * feat(IgxDrag/IgxDrop): Disable selection of dragged element and handle by default. Add drag styles. #5319 * chore(*): Remove skipped tests. * test(IgxDrag): Add more test for transition methods. Fix small issues in IgxDrag. * tests(IgxDrag): Add automation tests regarding location getters and updateDragRelativePos. * tests(IgxDrag): Fix tests regarding transition to origin and alter related to transitions.
1 parent 91cb7a8 commit c1f71c2

32 files changed

+2711
-766
lines changed

‎CHANGELOG.md

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Ignite UI for Angular Change Log
1+
# Ignite UI for Angular Change Log
22

33
All notable changes for each version of this project will be documented in this file.
44

@@ -10,6 +10,17 @@ All notable changes for each version of this project will be documented in this
1010
- `igxExcelStyleLoading` directive is added, which can be used to provide a custom loading template for the Excel Style Filtering. If this property is not provided, a default loading template will be used instead.
1111
- `IgxHierarchicalGrid`
1212
- Row Islands now emit child grid events with an additional argument - `owner`, which holds reference to the related child grid component instance.
13+
- `IgxDrag`
14+
- Dragging without ghost. Now it is possible to drag the base element `igxDrag` is instanced on by setting the new input `ghost` to false.
15+
- Ghost template. A custom ghost template reference can be provided on the new `ghostTemplate` input.
16+
- Dragging using a single or multiple handles. New `igxDragHandle` directive is exposed to specify a handle by which and element can be interacted with instead of the whole element `igxDrag` is instanced on.
17+
- Linking of drag and drop elements. This can be achieved by using the new provided `dragChannel` input, specifying each element to which channel it corresponds.
18+
- Drag animation improvements. Three new methods have been exposed in place of the old `animateToOrigin` input in order to provide more flexibility when wanting to have transition animation to specific position when dropping. `setLocation`, `transitionToOrigin` and `transitionTo` are all methods that provide a various way to animate a transition to a specific location for the dragged element.
19+
- New getters - `location` and `originLocation` to aid in applying transition animations.
20+
- New outputs - `dragMove`, `ghostCreate` and `ghostDestroy`
21+
- `IgxDrop`
22+
- Linking of drag and drop elements. This can be achieved by using the new provided `dropChannel` input, specifying each drop area to which channel it corresponds.
23+
- Drop strategies. Three new drop strategies have been provided - Append, Prepend and Insert. Also an input `dropStrategy` to the `igxDrop` which specify which strategy should be used when dropping an element inside the drop area. Custom one can be specified as well.
1324

1425
### General
1526
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
@@ -41,6 +52,26 @@ All notable changes for each version of this project will be documented in this
4152
## 8.1.4
4253
- `IgxDialog` new @Input `positionSettings` is now available. It provides the ability to get/set both position and animation settings of the Dialog component.
4354

55+
- `IgxDrag`
56+
- Deprecated inputs - `hideBaseOnDrag`, `animateOnRelease`, `visible`.
57+
- Deprecated methods - `dropFinished`.
58+
- **Breaking Change** `ghostImageClass` input is renamed to `ghostClass`.
59+
- **Breaking Change** `dragGhostHost` input is renamed to `ghostHost`.
60+
- **Breaking Change** `returnMoveEnd` input is renamed to `transitioned`.
61+
- **Breaking Change** `onDragStart` output is renamed to `dragStart`.
62+
- **Breaking Change** `onDragEnd` output is renamed to `dragEnd`.
63+
64+
- `IgxDrop`
65+
- **Breaking Change** Default drop strategy is now changed to not perform any actions.
66+
- **Breaking Change** `onEnter` output is renamed to `enter`.
67+
- **Breaking Change** `onOver` output is renamed to `over`.
68+
- **Breaking Change** `onLeave` output is renamed to `leave`.
69+
- **Breaking Change** `onDrop` output is renamed to `dropped`.
70+
- **Breaking Change** Interfaces `IgxDropEnterEventArgs`, `IgxDropLeaveEventArgs` are both now called `IDragBaseEventArgs`.
71+
- **Breaking Change** Interfaces `IgxDropEventArgs` is renamed to `IDropDroppedEventArgs`.
72+
- **Breaking Change** Outputs `enter`, `over`, `leave`(former `onEnter`, `onOver`, `onLeave`) now have arguments of type `IDropBaseEventArgs`
73+
- **Breaking Change** Output `dropped` (former `onDrop`) now have arguments of type `IDropDroppedEventArgs`
74+
4475
## 8.1.3
4576
- `IgxCombo`
4677
- Combo `onSelectionChange` events now emits the item(s) that were added to or removed from the collection:

‎projects/igniteui-angular/migrations/update-8_2_0/changes/inputs.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"$schema": "../../common/schema/binding.schema.json",
3+
"changes": [
4+
{
5+
"name": "renderGhost",
6+
"replaceWith": "ghost",
7+
"owner": {
8+
"selector": "igxDrag",
9+
"type": "directive"
10+
}
11+
},
12+
{
13+
"name": "ghostImageClass",
14+
"replaceWith": "ghostClass",
15+
"owner": {
16+
"selector": "igxDrag",
17+
"type": "directive"
18+
}
19+
},
20+
{
21+
"name": "dragGhostHost",
22+
"replaceWith": "ghostHost",
23+
"owner": {
24+
"selector": "igxDrag",
25+
"type": "directive"
26+
}
27+
}
28+
]
29+
}

‎projects/igniteui-angular/migrations/update-8_2_0/changes/outputs.json

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"$schema": "../../common/schema/binding.schema.json",
3+
"changes": [
4+
{
5+
"name": "onGhostCreate",
6+
"replaceWith": "ghostCreate",
7+
"owner": {
8+
"selector": "igxDrag",
9+
"type": "directive"
10+
}
11+
},
12+
{
13+
"name": "onGhostDestroy",
14+
"replaceWith": "ghostDestroy",
15+
"owner": {
16+
"selector": "igxDrag",
17+
"type": "directive"
18+
}
19+
},
20+
{
21+
"name": "returnMoveEnd",
22+
"replaceWith": "transitioned",
23+
"owner": {
24+
"selector": "igxDrag",
25+
"type": "directive"
26+
}
27+
},
28+
{
29+
"name": "dragClicked",
30+
"replaceWith": "click",
31+
"owner": {
32+
"selector": "igxDrag",
33+
"type": "directive"
34+
}
35+
},
36+
{
37+
"name": "onEnter",
38+
"replaceWith": "enter",
39+
"owner": {
40+
"selector": "igxDrop",
41+
"type": "directive"
42+
}
43+
},
44+
{
45+
"name": "onLeave",
46+
"replaceWith": "leave",
47+
"owner": {
48+
"selector": "igxDrop",
49+
"type": "directive"
50+
}
51+
},
52+
{
53+
"name": "onDrop",
54+
"replaceWith": "dropped",
55+
"owner": {
56+
"selector": "igxDrop",
57+
"type": "directive"
58+
}
59+
}
60+
]
61+
}

‎projects/igniteui-angular/migrations/update-8_2_0/index.spec.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,32 @@ describe('Update 8.2.0', () => {
5050

5151
done();
5252
});
53+
54+
it('should update igxDrag input bindings', done => {
55+
appTree.create(
56+
'/testSrc/appPrefix/component/custom.component.html',
57+
`<div igxDrag [renderGhost]="true" [ghostImageClass]="'casper'" [dragGhostHost]="host">Drag me</div>`);
58+
const tree = schematicRunner.runSchematic('migration-10', {}, appTree);
59+
60+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
61+
.toEqual(
62+
`<div igxDrag [ghost]="true" [ghostClass]="'casper'" [ghostHost]="host">Drag me</div>`);
63+
done();
64+
});
65+
66+
it('should update igxDrag and igxDrop outputs bindings', done => {
67+
appTree.create(
68+
'/testSrc/appPrefix/component/custom.component.html',
69+
`<div igxDrag (onGhostCreate)="ghostCreateHandler($event)" (onGhostDestroy)="ghostDestroyHandler($event)" (returnMoveEnd)="moveEndHandler($event)" (dragClicked)="clickHandler($event)">Drag me</div>
70+
<div igxDrop (onEnter)="enterHandler($event)" (onLeave)="leaveHandler($event)" (onDrop)="dropHandler($event)">drop area</div>
71+
`);
72+
const tree = schematicRunner.runSchematic('migration-10', {}, appTree);
73+
74+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
75+
.toEqual(
76+
`<div igxDrag (ghostCreate)="ghostCreateHandler($event)" (ghostDestroy)="ghostDestroyHandler($event)" (transitioned)="moveEndHandler($event)" (click)="clickHandler($event)">Drag me</div>
77+
<div igxDrop (enter)="enterHandler($event)" (leave)="leaveHandler($event)" (dropped)="dropHandler($event)">drop area</div>
78+
`);
79+
done();
80+
});
5381
});

‎projects/igniteui-angular/src/lib/chips/README.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,6 @@ The chips can be focused using the `Tab` key or by clicking on them. Chips can b
154154
| `displayDensity`| `DisplayDensity | string` | Sets the chip theme. Available options are `compact`, `cosy`, `comfortable`. |
155155
| `color` | `string` | Sets the chip background color. |
156156
| `hideBaseOnDrag` | `boolean` | Sets if the chip base should be hidden when the chip is dragged. |
157-
| `animateOnRelease` | `boolean` | Sets if the chip should animate to its position when released. |
158157

159158
### Outputs
160159
| Name | Argument Type | Description |

‎projects/igniteui-angular/src/lib/chips/chip.component.html

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@
33
(keydown)="onChipKeyDown($event)"
44
[igxDrag]="{chip: this}"
55
[hideBaseOnDrag]="hideBaseOnDrag"
6-
[animateOnRelease]="animateOnRelease"
7-
[ghostImageClass]="ghostClass"
6+
[ghostClass]="ghostClass"
87
(dragStart)="onChipDragStart($event)"
98
(dragEnd)="onChipDragEnd()"
10-
(returnMoveEnd)="onChipMoveEnd($event)"
11-
(dragClicked)="onChipDragClicked($event)"
9+
(transitioned)="onChipMoveEnd($event)"
10+
(click)="onChipDragClicked($event)"
1211
igxDrop
13-
(onEnter)="onChipDragEnterHandler($event)"
14-
(onDrop)="onChipDrop($event)">
12+
(enter)="onChipDragEnterHandler($event)"
13+
(dropped)="onChipDrop($event)">
1514

1615
<div [ngClass]="selectClass(selected)">
1716
<ng-container *ngTemplateOutlet="selectIconTemplate"></ng-container>

‎projects/igniteui-angular/src/lib/chips/chip.component.ts

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,14 @@ import {
1717
IgxDragDirective,
1818
IDragBaseEventArgs,
1919
IDragStartEventArgs,
20-
IgxDropEnterEventArgs,
21-
IgxDropEventArgs
20+
IDropBaseEventArgs,
21+
IDropDroppedEventArgs
2222
} from '../directives/drag-drop/drag-drop.directive';
2323
import { IBaseEventArgs } from '../core/utils';
2424

2525

2626
export interface IBaseChipEventArgs extends IBaseEventArgs {
27-
originalEvent: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent | IgxDropEnterEventArgs;
27+
originalEvent: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent | IDropBaseEventArgs;
2828
owner: IgxChipComponent;
2929
}
3030

@@ -83,7 +83,7 @@ export class IgxChipComponent extends DisplayDensityBase {
8383
@Input()
8484
public draggable = false;
8585

86-
/**
86+
/**
8787
* An @Input property that enables/disables the draggable element animation when the element is released.
8888
* By default it's set to true.
8989
* ```html
@@ -517,7 +517,7 @@ export class IgxChipComponent extends DisplayDensityBase {
517517
* @hidden
518518
*/
519519
// -----------------------------
520-
// Start chip igxDrag behaviour
520+
// Start chip igxDrag behavior
521521
public onChipDragStart(event: IDragStartEventArgs) {
522522
this.onMoveStart.emit({
523523
originalEvent: event.originalEvent,
@@ -530,7 +530,9 @@ export class IgxChipComponent extends DisplayDensityBase {
530530
* @hidden
531531
*/
532532
public onChipDragEnd() {
533-
this.dragDirective.dropFinished();
533+
if (this.animateOnRelease) {
534+
this.dragDirective.transitionToOrigin();
535+
}
534536
}
535537

536538
/**
@@ -563,21 +565,21 @@ export class IgxChipComponent extends DisplayDensityBase {
563565
this.changeSelection(!this.selected, event.originalEvent);
564566
}
565567
}
566-
// End chip igxDrag behaviour
568+
// End chip igxDrag behavior
567569

568570
/**
569571
* @hidden
570572
*/
571573
// -----------------------------
572-
// Start chip igxDrop behaviour
573-
public onChipDragEnterHandler(event: IgxDropEnterEventArgs) {
574-
if (this.dragDirective === event.drag || !event.dragData || !event.dragData.chip) {
574+
// Start chip igxDrop behavior
575+
public onChipDragEnterHandler(event: IDropBaseEventArgs) {
576+
if (this.dragDirective === event.drag || !event.drag.data || !event.drag.data.chip) {
575577
return;
576578
}
577579

578580
const eventArgs: IChipEnterDragAreaEventArgs = {
579581
owner: this,
580-
dragChip: event.dragData.chip,
582+
dragChip: event.drag.data.chip,
581583
originalEvent: event
582584
};
583585
this.onDragEnter.emit(eventArgs);
@@ -586,9 +588,9 @@ export class IgxChipComponent extends DisplayDensityBase {
586588
/**
587589
* @hidden
588590
*/
589-
public onChipDrop(event: IgxDropEventArgs) {
591+
public onChipDrop(event: IDropDroppedEventArgs) {
590592
// Cancel the default drop logic
591593
event.cancel = true;
592594
}
593-
// End chip igxDrop behaviour
595+
// End chip igxDrop behavior
594596
}

‎projects/igniteui-angular/src/lib/chips/chip.spec.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ class TestChipsLabelAndSuffixComponent {
8383

8484
describe('IgxChip', () => {
8585
configureTestSuite();
86-
const CHIP_ITEM = 'igx-chip__item';
86+
const CHIP_ITEM = 'igx-chip__item igx-drag igx-drag--select-disabled';
8787
const CHIP_REMOVE_BUTTON = 'igx-chip__remove';
8888

8989
beforeEach(async(() => {
@@ -361,7 +361,7 @@ describe('IgxChip', () => {
361361
expect(chipComponentsIds).not.toContain('City');
362362
});
363363

364-
it('should affect the dragGhost density when chip has it set to compact', (done) => {
364+
it('should affect the ghostElement density when chip has it set to compact', (done) => {
365365
const fix = TestBed.createComponent(TestChipComponent);
366366
fix.detectChanges();
367367

@@ -387,12 +387,12 @@ describe('IgxChip', () => {
387387
}).then(() => {
388388
fix.detectChanges();
389389

390-
expect(thirdChip.dragDirective['dragGhost'].className).toEqual('igx-chip__item igx-chip__ghost--compact');
390+
expect(thirdChip.dragDirective.ghostElement.className).toEqual(CHIP_ITEM + ' igx-chip__ghost--compact');
391391

392392
return fix.whenStable();
393393
}).then(() => {
394394
fix.detectChanges();
395-
UIInteractions.simulatePointerEvent('pointerup', thirdChip.dragDirective['dragGhost'], startingX + 10, startingY + 10);
395+
UIInteractions.simulatePointerEvent('pointerup', thirdChip.dragDirective.ghostElement, startingX + 10, startingY + 10);
396396

397397
done();
398398
});

‎projects/igniteui-angular/src/lib/chips/chips-area.component.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,12 @@ import {
2121
IChipEnterDragAreaEventArgs,
2222
IBaseChipEventArgs
2323
} from './chip.component';
24-
import {
25-
IgxDropEnterEventArgs
26-
} from '../directives/drag-drop/drag-drop.directive';
24+
import { IDropBaseEventArgs } from '../directives/drag-drop/drag-drop.directive';
2725
import { takeUntil } from 'rxjs/operators';
2826
import { Subject } from 'rxjs/internal/Subject';
2927

3028
export interface IBaseChipsAreaEventArgs {
31-
originalEvent: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent | IgxDropEnterEventArgs;
29+
originalEvent: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent | IDropBaseEventArgs;
3230
owner: IgxChipsAreaComponent;
3331
}
3432

0 commit comments

Comments
 (0)