1 | /**
|
---|
2 | * @license
|
---|
3 | * Copyright Google LLC All Rights Reserved.
|
---|
4 | *
|
---|
5 | * Use of this source code is governed by an MIT-style license that can be
|
---|
6 | * found in the LICENSE file at https://angular.io/license
|
---|
7 | */
|
---|
8 | import { ElementRef, NgZone } from '@angular/core';
|
---|
9 | import { Direction } from '@angular/cdk/bidi';
|
---|
10 | import { ViewportRuler } from '@angular/cdk/scrolling';
|
---|
11 | import { Subject } from 'rxjs';
|
---|
12 | import { DragDropRegistry } from './drag-drop-registry';
|
---|
13 | import { DragRefInternal as DragRef, Point } from './drag-ref';
|
---|
14 | /**
|
---|
15 | * Internal compile-time-only representation of a `DropListRef`.
|
---|
16 | * Used to avoid circular import issues between the `DropListRef` and the `DragRef`.
|
---|
17 | * @docs-private
|
---|
18 | */
|
---|
19 | export interface DropListRefInternal extends DropListRef {
|
---|
20 | }
|
---|
21 | /**
|
---|
22 | * Reference to a drop list. Used to manipulate or dispose of the container.
|
---|
23 | */
|
---|
24 | export declare class DropListRef<T = any> {
|
---|
25 | private _dragDropRegistry;
|
---|
26 | private _ngZone;
|
---|
27 | private _viewportRuler;
|
---|
28 | /** Element that the drop list is attached to. */
|
---|
29 | element: HTMLElement | ElementRef<HTMLElement>;
|
---|
30 | /** Whether starting a dragging sequence from this container is disabled. */
|
---|
31 | disabled: boolean;
|
---|
32 | /** Whether sorting items within the list is disabled. */
|
---|
33 | sortingDisabled: boolean;
|
---|
34 | /** Locks the position of the draggable elements inside the container along the specified axis. */
|
---|
35 | lockAxis: 'x' | 'y';
|
---|
36 | /**
|
---|
37 | * Whether auto-scrolling the view when the user
|
---|
38 | * moves their pointer close to the edges is disabled.
|
---|
39 | */
|
---|
40 | autoScrollDisabled: boolean;
|
---|
41 | /** Number of pixels to scroll for each frame when auto-scrolling an element. */
|
---|
42 | autoScrollStep: number;
|
---|
43 | /**
|
---|
44 | * Function that is used to determine whether an item
|
---|
45 | * is allowed to be moved into a drop container.
|
---|
46 | */
|
---|
47 | enterPredicate: (drag: DragRef, drop: DropListRef) => boolean;
|
---|
48 | /** Functions that is used to determine whether an item can be sorted into a particular index. */
|
---|
49 | sortPredicate: (index: number, drag: DragRef, drop: DropListRef) => boolean;
|
---|
50 | /** Emits right before dragging has started. */
|
---|
51 | readonly beforeStarted: Subject<void>;
|
---|
52 | /**
|
---|
53 | * Emits when the user has moved a new drag item into this container.
|
---|
54 | */
|
---|
55 | readonly entered: Subject<{
|
---|
56 | item: DragRef;
|
---|
57 | container: DropListRef;
|
---|
58 | currentIndex: number;
|
---|
59 | }>;
|
---|
60 | /**
|
---|
61 | * Emits when the user removes an item from the container
|
---|
62 | * by dragging it into another container.
|
---|
63 | */
|
---|
64 | readonly exited: Subject<{
|
---|
65 | item: DragRef;
|
---|
66 | container: DropListRef;
|
---|
67 | }>;
|
---|
68 | /** Emits when the user drops an item inside the container. */
|
---|
69 | readonly dropped: Subject<{
|
---|
70 | item: DragRef;
|
---|
71 | currentIndex: number;
|
---|
72 | previousIndex: number;
|
---|
73 | container: DropListRef;
|
---|
74 | previousContainer: DropListRef;
|
---|
75 | isPointerOverContainer: boolean;
|
---|
76 | distance: Point;
|
---|
77 | dropPoint: Point;
|
---|
78 | }>;
|
---|
79 | /** Emits as the user is swapping items while actively dragging. */
|
---|
80 | readonly sorted: Subject<{
|
---|
81 | previousIndex: number;
|
---|
82 | currentIndex: number;
|
---|
83 | container: DropListRef;
|
---|
84 | item: DragRef;
|
---|
85 | }>;
|
---|
86 | /** Arbitrary data that can be attached to the drop list. */
|
---|
87 | data: T;
|
---|
88 | /** Whether an item in the list is being dragged. */
|
---|
89 | private _isDragging;
|
---|
90 | /** Cache of the dimensions of all the items inside the container. */
|
---|
91 | private _itemPositions;
|
---|
92 | /** Keeps track of the positions of any parent scrollable elements. */
|
---|
93 | private _parentPositions;
|
---|
94 | /** Cached `ClientRect` of the drop list. */
|
---|
95 | private _clientRect;
|
---|
96 | /**
|
---|
97 | * Draggable items that are currently active inside the container. Includes the items
|
---|
98 | * from `_draggables`, as well as any items that have been dragged in, but haven't
|
---|
99 | * been dropped yet.
|
---|
100 | */
|
---|
101 | private _activeDraggables;
|
---|
102 | /**
|
---|
103 | * Keeps track of the item that was last swapped with the dragged item, as well as what direction
|
---|
104 | * the pointer was moving in when the swap occured and whether the user's pointer continued to
|
---|
105 | * overlap with the swapped item after the swapping occurred.
|
---|
106 | */
|
---|
107 | private _previousSwap;
|
---|
108 | /** Draggable items in the container. */
|
---|
109 | private _draggables;
|
---|
110 | /** Drop lists that are connected to the current one. */
|
---|
111 | private _siblings;
|
---|
112 | /** Direction in which the list is oriented. */
|
---|
113 | private _orientation;
|
---|
114 | /** Connected siblings that currently have a dragged item. */
|
---|
115 | private _activeSiblings;
|
---|
116 | /** Layout direction of the drop list. */
|
---|
117 | private _direction;
|
---|
118 | /** Subscription to the window being scrolled. */
|
---|
119 | private _viewportScrollSubscription;
|
---|
120 | /** Vertical direction in which the list is currently scrolling. */
|
---|
121 | private _verticalScrollDirection;
|
---|
122 | /** Horizontal direction in which the list is currently scrolling. */
|
---|
123 | private _horizontalScrollDirection;
|
---|
124 | /** Node that is being auto-scrolled. */
|
---|
125 | private _scrollNode;
|
---|
126 | /** Used to signal to the current auto-scroll sequence when to stop. */
|
---|
127 | private readonly _stopScrollTimers;
|
---|
128 | /** Shadow root of the current element. Necessary for `elementFromPoint` to resolve correctly. */
|
---|
129 | private _cachedShadowRoot;
|
---|
130 | /** Reference to the document. */
|
---|
131 | private _document;
|
---|
132 | /** Elements that can be scrolled while the user is dragging. */
|
---|
133 | private _scrollableElements;
|
---|
134 | /** Initial value for the element's `scroll-snap-type` style. */
|
---|
135 | private _initialScrollSnap;
|
---|
136 | constructor(element: ElementRef<HTMLElement> | HTMLElement, _dragDropRegistry: DragDropRegistry<DragRef, DropListRef>, _document: any, _ngZone: NgZone, _viewportRuler: ViewportRuler);
|
---|
137 | /** Removes the drop list functionality from the DOM element. */
|
---|
138 | dispose(): void;
|
---|
139 | /** Whether an item from this list is currently being dragged. */
|
---|
140 | isDragging(): boolean;
|
---|
141 | /** Starts dragging an item. */
|
---|
142 | start(): void;
|
---|
143 | /**
|
---|
144 | * Emits an event to indicate that the user moved an item into the container.
|
---|
145 | * @param item Item that was moved into the container.
|
---|
146 | * @param pointerX Position of the item along the X axis.
|
---|
147 | * @param pointerY Position of the item along the Y axis.
|
---|
148 | * @param index Index at which the item entered. If omitted, the container will try to figure it
|
---|
149 | * out automatically.
|
---|
150 | */
|
---|
151 | enter(item: DragRef, pointerX: number, pointerY: number, index?: number): void;
|
---|
152 | /**
|
---|
153 | * Removes an item from the container after it was dragged into another container by the user.
|
---|
154 | * @param item Item that was dragged out.
|
---|
155 | */
|
---|
156 | exit(item: DragRef): void;
|
---|
157 | /**
|
---|
158 | * Drops an item into this container.
|
---|
159 | * @param item Item being dropped into the container.
|
---|
160 | * @param currentIndex Index at which the item should be inserted.
|
---|
161 | * @param previousIndex Index of the item when dragging started.
|
---|
162 | * @param previousContainer Container from which the item got dragged in.
|
---|
163 | * @param isPointerOverContainer Whether the user's pointer was over the
|
---|
164 | * container when the item was dropped.
|
---|
165 | * @param distance Distance the user has dragged since the start of the dragging sequence.
|
---|
166 | */
|
---|
167 | drop(item: DragRef, currentIndex: number, previousIndex: number, previousContainer: DropListRef, isPointerOverContainer: boolean, distance: Point, dropPoint: Point): void;
|
---|
168 | /**
|
---|
169 | * Sets the draggable items that are a part of this list.
|
---|
170 | * @param items Items that are a part of this list.
|
---|
171 | */
|
---|
172 | withItems(items: DragRef[]): this;
|
---|
173 | /** Sets the layout direction of the drop list. */
|
---|
174 | withDirection(direction: Direction): this;
|
---|
175 | /**
|
---|
176 | * Sets the containers that are connected to this one. When two or more containers are
|
---|
177 | * connected, the user will be allowed to transfer items between them.
|
---|
178 | * @param connectedTo Other containers that the current containers should be connected to.
|
---|
179 | */
|
---|
180 | connectedTo(connectedTo: DropListRef[]): this;
|
---|
181 | /**
|
---|
182 | * Sets the orientation of the container.
|
---|
183 | * @param orientation New orientation for the container.
|
---|
184 | */
|
---|
185 | withOrientation(orientation: 'vertical' | 'horizontal'): this;
|
---|
186 | /**
|
---|
187 | * Sets which parent elements are can be scrolled while the user is dragging.
|
---|
188 | * @param elements Elements that can be scrolled.
|
---|
189 | */
|
---|
190 | withScrollableParents(elements: HTMLElement[]): this;
|
---|
191 | /** Gets the scrollable parents that are registered with this drop container. */
|
---|
192 | getScrollableParents(): readonly HTMLElement[];
|
---|
193 | /**
|
---|
194 | * Figures out the index of an item in the container.
|
---|
195 | * @param item Item whose index should be determined.
|
---|
196 | */
|
---|
197 | getItemIndex(item: DragRef): number;
|
---|
198 | /**
|
---|
199 | * Whether the list is able to receive the item that
|
---|
200 | * is currently being dragged inside a connected drop list.
|
---|
201 | */
|
---|
202 | isReceiving(): boolean;
|
---|
203 | /**
|
---|
204 | * Sorts an item inside the container based on its position.
|
---|
205 | * @param item Item to be sorted.
|
---|
206 | * @param pointerX Position of the item along the X axis.
|
---|
207 | * @param pointerY Position of the item along the Y axis.
|
---|
208 | * @param pointerDelta Direction in which the pointer is moving along each axis.
|
---|
209 | */
|
---|
210 | _sortItem(item: DragRef, pointerX: number, pointerY: number, pointerDelta: {
|
---|
211 | x: number;
|
---|
212 | y: number;
|
---|
213 | }): void;
|
---|
214 | /**
|
---|
215 | * Checks whether the user's pointer is close to the edges of either the
|
---|
216 | * viewport or the drop list and starts the auto-scroll sequence.
|
---|
217 | * @param pointerX User's pointer position along the x axis.
|
---|
218 | * @param pointerY User's pointer position along the y axis.
|
---|
219 | */
|
---|
220 | _startScrollingIfNecessary(pointerX: number, pointerY: number): void;
|
---|
221 | /** Stops any currently-running auto-scroll sequences. */
|
---|
222 | _stopScrolling(): void;
|
---|
223 | /** Starts the dragging sequence within the list. */
|
---|
224 | private _draggingStarted;
|
---|
225 | /** Caches the positions of the configured scrollable parents. */
|
---|
226 | private _cacheParentPositions;
|
---|
227 | /** Refreshes the position cache of the items and sibling containers. */
|
---|
228 | private _cacheItemPositions;
|
---|
229 | /** Resets the container to its initial state. */
|
---|
230 | private _reset;
|
---|
231 | /**
|
---|
232 | * Gets the offset in pixels by which the items that aren't being dragged should be moved.
|
---|
233 | * @param currentIndex Index of the item currently being dragged.
|
---|
234 | * @param siblings All of the items in the list.
|
---|
235 | * @param delta Direction in which the user is moving.
|
---|
236 | */
|
---|
237 | private _getSiblingOffsetPx;
|
---|
238 | /**
|
---|
239 | * Gets the offset in pixels by which the item that is being dragged should be moved.
|
---|
240 | * @param currentPosition Current position of the item.
|
---|
241 | * @param newPosition Position of the item where the current item should be moved.
|
---|
242 | * @param delta Direction in which the user is moving.
|
---|
243 | */
|
---|
244 | private _getItemOffsetPx;
|
---|
245 | /**
|
---|
246 | * Checks if pointer is entering in the first position
|
---|
247 | * @param pointerX Position of the user's pointer along the X axis.
|
---|
248 | * @param pointerY Position of the user's pointer along the Y axis.
|
---|
249 | */
|
---|
250 | private _shouldEnterAsFirstChild;
|
---|
251 | /**
|
---|
252 | * Gets the index of an item in the drop container, based on the position of the user's pointer.
|
---|
253 | * @param item Item that is being sorted.
|
---|
254 | * @param pointerX Position of the user's pointer along the X axis.
|
---|
255 | * @param pointerY Position of the user's pointer along the Y axis.
|
---|
256 | * @param delta Direction in which the user is moving their pointer.
|
---|
257 | */
|
---|
258 | private _getItemIndexFromPointerPosition;
|
---|
259 | /** Caches the current items in the list and their positions. */
|
---|
260 | private _cacheItems;
|
---|
261 | /** Starts the interval that'll auto-scroll the element. */
|
---|
262 | private _startScrollInterval;
|
---|
263 | /**
|
---|
264 | * Checks whether the user's pointer is positioned over the container.
|
---|
265 | * @param x Pointer position along the X axis.
|
---|
266 | * @param y Pointer position along the Y axis.
|
---|
267 | */
|
---|
268 | _isOverContainer(x: number, y: number): boolean;
|
---|
269 | /**
|
---|
270 | * Figures out whether an item should be moved into a sibling
|
---|
271 | * drop container, based on its current position.
|
---|
272 | * @param item Drag item that is being moved.
|
---|
273 | * @param x Position of the item along the X axis.
|
---|
274 | * @param y Position of the item along the Y axis.
|
---|
275 | */
|
---|
276 | _getSiblingContainerFromPosition(item: DragRef, x: number, y: number): DropListRef | undefined;
|
---|
277 | /**
|
---|
278 | * Checks whether the drop list can receive the passed-in item.
|
---|
279 | * @param item Item that is being dragged into the list.
|
---|
280 | * @param x Position of the item along the X axis.
|
---|
281 | * @param y Position of the item along the Y axis.
|
---|
282 | */
|
---|
283 | _canReceive(item: DragRef, x: number, y: number): boolean;
|
---|
284 | /**
|
---|
285 | * Called by one of the connected drop lists when a dragging sequence has started.
|
---|
286 | * @param sibling Sibling in which dragging has started.
|
---|
287 | */
|
---|
288 | _startReceiving(sibling: DropListRef, items: DragRef[]): void;
|
---|
289 | /**
|
---|
290 | * Called by a connected drop list when dragging has stopped.
|
---|
291 | * @param sibling Sibling whose dragging has stopped.
|
---|
292 | */
|
---|
293 | _stopReceiving(sibling: DropListRef): void;
|
---|
294 | /**
|
---|
295 | * Starts listening to scroll events on the viewport.
|
---|
296 | * Used for updating the internal state of the list.
|
---|
297 | */
|
---|
298 | private _listenToScrollEvents;
|
---|
299 | /**
|
---|
300 | * Lazily resolves and returns the shadow root of the element. We do this in a function, rather
|
---|
301 | * than saving it in property directly on init, because we want to resolve it as late as possible
|
---|
302 | * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the
|
---|
303 | * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`.
|
---|
304 | */
|
---|
305 | private _getShadowRoot;
|
---|
306 | /** Notifies any siblings that may potentially receive the item. */
|
---|
307 | private _notifyReceivingSiblings;
|
---|
308 | }
|
---|