Skip to content

Commit 9fca12a

Browse files
author
Matt Lewis
committed
feat: use lettable rxjs operators
BREAKING CHANGE: rxjs operators will now no longer be added to the observable prototype. Also rxjs >= 5.5.x or higher is required
1 parent 91e89a5 commit 9fca12a

File tree

2 files changed

+136
-119
lines changed

2 files changed

+136
-119
lines changed

‎src/draggable.directive.ts

+105-92
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,15 @@ import {
1313
} from '@angular/core';
1414
import { Subject } from 'rxjs/Subject';
1515
import { Observable } from 'rxjs/Observable';
16-
import 'rxjs/add/observable/merge';
17-
import 'rxjs/add/operator/map';
18-
import 'rxjs/add/operator/mergeMap';
19-
import 'rxjs/add/operator/takeUntil';
20-
import 'rxjs/add/operator/take';
21-
import 'rxjs/add/operator/takeLast';
22-
import 'rxjs/add/operator/pairwise';
23-
import 'rxjs/add/operator/share';
16+
import { merge } from 'rxjs/observable/merge';
17+
import { map } from 'rxjs/operators/map';
18+
import { mergeMap } from 'rxjs/operators/mergeMap';
19+
import { takeUntil } from 'rxjs/operators/takeUntil';
20+
import { take } from 'rxjs/operators/take';
21+
import { takeLast } from 'rxjs/operators/takeLast';
22+
import { pairwise } from 'rxjs/operators/pairwise';
23+
import { share } from 'rxjs/operators/share';
24+
import { filter } from 'rxjs/operators/filter';
2425
import { DraggableHelper } from './draggable-helper.provider';
2526

2627
export interface Coordinates {
@@ -114,96 +115,108 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
114115
this.checkEventListeners();
115116

116117
const pointerDrag: Observable<any> = this.pointerDown
117-
.filter(() => this.canDrag())
118-
.flatMap((pointerDownEvent: PointerEvent) => {
119-
const currentDrag: Subject<any> = new Subject();
120-
121-
const pointerMove: Observable<Coordinates> = this.pointerMove
122-
.map((pointerMoveEvent: PointerEvent) => {
123-
pointerMoveEvent.event.preventDefault();
124-
125-
return {
126-
currentDrag,
127-
x: pointerMoveEvent.clientX - pointerDownEvent.clientX,
128-
y: pointerMoveEvent.clientY - pointerDownEvent.clientY,
129-
clientX: pointerMoveEvent.clientX,
130-
clientY: pointerMoveEvent.clientY
131-
};
132-
})
133-
.map((moveData: Coordinates) => {
134-
if (this.dragSnapGrid.x) {
135-
moveData.x =
136-
Math.floor(moveData.x / this.dragSnapGrid.x) *
137-
this.dragSnapGrid.x;
138-
}
139-
140-
if (this.dragSnapGrid.y) {
141-
moveData.y =
142-
Math.floor(moveData.y / this.dragSnapGrid.y) *
143-
this.dragSnapGrid.y;
144-
}
145-
146-
return moveData;
147-
})
148-
.map((moveData: Coordinates) => {
149-
if (!this.dragAxis.x) {
150-
moveData.x = 0;
151-
}
152-
153-
if (!this.dragAxis.y) {
154-
moveData.y = 0;
155-
}
156-
157-
return moveData;
158-
})
159-
.filter(
160-
({ x, y }) => !this.validateDrag || this.validateDrag({ x, y })
161-
)
162-
.takeUntil(Observable.merge(this.pointerUp, this.pointerDown))
163-
.share();
164-
165-
pointerMove.take(1).subscribe(() => {
166-
pointerDownEvent.event.preventDefault();
167-
168-
this.zone.run(() => {
169-
this.dragStart.next({ x: 0, y: 0 });
118+
.pipe(filter(() => this.canDrag()))
119+
.pipe(
120+
mergeMap((pointerDownEvent: PointerEvent) => {
121+
const currentDrag: Subject<any> = new Subject();
122+
123+
const pointerMove: Observable<Coordinates> = this.pointerMove
124+
.pipe(
125+
map((pointerMoveEvent: PointerEvent) => {
126+
pointerMoveEvent.event.preventDefault();
127+
128+
return {
129+
currentDrag,
130+
x: pointerMoveEvent.clientX - pointerDownEvent.clientX,
131+
y: pointerMoveEvent.clientY - pointerDownEvent.clientY,
132+
clientX: pointerMoveEvent.clientX,
133+
clientY: pointerMoveEvent.clientY
134+
};
135+
})
136+
)
137+
.pipe(
138+
map((moveData: Coordinates) => {
139+
if (this.dragSnapGrid.x) {
140+
moveData.x =
141+
Math.floor(moveData.x / this.dragSnapGrid.x) *
142+
this.dragSnapGrid.x;
143+
}
144+
145+
if (this.dragSnapGrid.y) {
146+
moveData.y =
147+
Math.floor(moveData.y / this.dragSnapGrid.y) *
148+
this.dragSnapGrid.y;
149+
}
150+
151+
return moveData;
152+
})
153+
)
154+
.pipe(
155+
map((moveData: Coordinates) => {
156+
if (!this.dragAxis.x) {
157+
moveData.x = 0;
158+
}
159+
160+
if (!this.dragAxis.y) {
161+
moveData.y = 0;
162+
}
163+
164+
return moveData;
165+
})
166+
)
167+
.pipe(
168+
filter(
169+
({ x, y }) => !this.validateDrag || this.validateDrag({ x, y })
170+
)
171+
)
172+
.pipe(takeUntil(merge(this.pointerUp, this.pointerDown)))
173+
.pipe(share());
174+
175+
pointerMove.pipe(take(1)).subscribe(() => {
176+
pointerDownEvent.event.preventDefault();
177+
178+
this.zone.run(() => {
179+
this.dragStart.next({ x: 0, y: 0 });
180+
});
181+
182+
this.setCursor(this.dragCursor);
183+
184+
this.draggableHelper.currentDrag.next(currentDrag);
170185
});
171186

172-
this.setCursor(this.dragCursor);
173-
174-
this.draggableHelper.currentDrag.next(currentDrag);
175-
});
176-
177-
pointerMove.takeLast(1).subscribe(({ x, y }) => {
178-
this.zone.run(() => {
179-
this.dragEnd.next({ x, y });
187+
pointerMove.pipe(takeLast(1)).subscribe(({ x, y }) => {
188+
this.zone.run(() => {
189+
this.dragEnd.next({ x, y });
190+
});
191+
currentDrag.complete();
192+
this.setCssTransform(null);
193+
if (this.ghostDragEnabled) {
194+
this.renderer.setStyle(
195+
this.element.nativeElement,
196+
'pointerEvents',
197+
null
198+
);
199+
}
180200
});
181-
currentDrag.complete();
182-
this.setCssTransform(null);
183-
if (this.ghostDragEnabled) {
184-
this.renderer.setStyle(
185-
this.element.nativeElement,
186-
'pointerEvents',
187-
null
188-
);
189-
}
190-
});
191201

192-
return pointerMove;
193-
})
194-
.share();
202+
return pointerMove;
203+
})
204+
)
205+
.pipe(share());
195206

196-
Observable.merge(
197-
pointerDrag.take(1).map(value => [, value]),
198-
pointerDrag.pairwise()
207+
merge(
208+
pointerDrag.pipe(take(1)).pipe(map(value => [, value])),
209+
pointerDrag.pipe(pairwise())
199210
)
200-
.filter(([previous, next]) => {
201-
if (!previous) {
202-
return true;
203-
}
204-
return previous.x !== next.x || previous.y !== next.y;
205-
})
206-
.map(([previous, next]) => next)
211+
.pipe(
212+
filter(([previous, next]) => {
213+
if (!previous) {
214+
return true;
215+
}
216+
return previous.x !== next.x || previous.y !== next.y;
217+
})
218+
)
219+
.pipe(map(([previous, next]) => next))
207220
.subscribe(({ x, y, currentDrag, clientX, clientY }) => {
208221
this.zone.run(() => {
209222
this.dragging.next({ x, y });

‎src/droppable.directive.ts

+31-27
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@ import {
1010
import { Subject } from 'rxjs/Subject';
1111
import { Subscription } from 'rxjs/Subscription';
1212
import { Observable } from 'rxjs/Observable';
13-
import 'rxjs/add/operator/distinctUntilChanged';
14-
import 'rxjs/add/operator/pairwise';
15-
import 'rxjs/add/operator/filter';
13+
import { distinctUntilChanged } from 'rxjs/operators/distinctUntilChanged';
14+
import { pairwise } from 'rxjs/operators/pairwise';
15+
import { filter } from 'rxjs/operators/filter';
16+
import { map } from 'rxjs/operators/map';
17+
import { mergeMap } from 'rxjs/operators/mergeMap';
1618
import { DraggableHelper } from './draggable-helper.provider';
1719

1820
function isCoordinateWithinRectangle(
@@ -64,33 +66,33 @@ export class DroppableDirective implements OnInit, OnDestroy {
6466
const droppableRectangle: ClientRect = this.element.nativeElement.getBoundingClientRect();
6567

6668
let currentDragDropData: any;
67-
const overlaps: Observable<
68-
boolean
69-
> = drag.map(({ clientX, clientY, dropData }) => {
70-
currentDragDropData = dropData;
71-
return isCoordinateWithinRectangle(
72-
clientX,
73-
clientY,
74-
droppableRectangle
75-
);
76-
});
77-
78-
const overlapsChanged: Observable<
79-
boolean
80-
> = overlaps.distinctUntilChanged();
69+
const overlaps = drag.pipe(
70+
map(({ clientX, clientY, dropData }) => {
71+
currentDragDropData = dropData;
72+
return isCoordinateWithinRectangle(
73+
clientX,
74+
clientY,
75+
droppableRectangle
76+
);
77+
})
78+
);
79+
80+
const overlapsChanged = overlaps.pipe(distinctUntilChanged());
8181

8282
let dragOverActive: boolean; // TODO - see if there's a way of doing this via rxjs
8383

84-
overlapsChanged.filter(overlapsNow => overlapsNow).subscribe(() => {
85-
dragOverActive = true;
86-
this.zone.run(() => {
87-
this.dragEnter.next({
88-
dropData: currentDragDropData
84+
overlapsChanged
85+
.pipe(filter(overlapsNow => overlapsNow))
86+
.subscribe(() => {
87+
dragOverActive = true;
88+
this.zone.run(() => {
89+
this.dragEnter.next({
90+
dropData: currentDragDropData
91+
});
8992
});
9093
});
91-
});
9294

93-
overlaps.filter(overlapsNow => overlapsNow).subscribe(() => {
95+
overlaps.pipe(filter(overlapsNow => overlapsNow)).subscribe(() => {
9496
this.zone.run(() => {
9597
this.dragOver.next({
9698
dropData: currentDragDropData
@@ -99,8 +101,10 @@ export class DroppableDirective implements OnInit, OnDestroy {
99101
});
100102

101103
overlapsChanged
102-
.pairwise()
103-
.filter(([didOverlap, overlapsNow]) => didOverlap && !overlapsNow)
104+
.pipe(pairwise())
105+
.pipe(
106+
filter(([didOverlap, overlapsNow]) => didOverlap && !overlapsNow)
107+
)
104108
.subscribe(() => {
105109
dragOverActive = false;
106110
this.zone.run(() => {
@@ -110,7 +114,7 @@ export class DroppableDirective implements OnInit, OnDestroy {
110114
});
111115
});
112116

113-
drag.flatMap(() => overlaps).subscribe({
117+
drag.pipe(mergeMap(() => overlaps)).subscribe({
114118
complete: () => {
115119
if (dragOverActive) {
116120
this.zone.run(() => {

0 commit comments

Comments
 (0)