[6a3a178] | 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 | }
|
---|