UNPKG

5.28 kBTypeScriptView Raw
1import { OnInit, ElementRef, Renderer2, EventEmitter, OnDestroy, OnChanges, NgZone, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
2import { Subject, ReplaySubject } from 'rxjs';
3import { DraggableHelper } from './draggable-helper.provider';
4import { DraggableScrollContainerDirective } from './draggable-scroll-container.directive';
5export interface Coordinates {
6 x: number;
7 y: number;
8}
9export interface DragAxis {
10 x: boolean;
11 y: boolean;
12}
13export interface SnapGrid {
14 x?: number;
15 y?: number;
16}
17export interface DragPointerDownEvent extends Coordinates {
18}
19export interface DragStartEvent {
20 cancelDrag$: ReplaySubject<void>;
21}
22export interface DragMoveEvent extends Coordinates {
23}
24export interface DragEndEvent extends Coordinates {
25 dragCancelled: boolean;
26}
27export interface ValidateDragParams extends Coordinates {
28 transform: {
29 x: number;
30 y: number;
31 };
32}
33export declare type ValidateDrag = (params: ValidateDragParams) => boolean;
34export interface PointerEvent {
35 clientX: number;
36 clientY: number;
37 event: MouseEvent | TouchEvent;
38}
39export interface TimeLongPress {
40 timerBegin: number;
41 timerEnd: number;
42}
43export interface GhostElementCreatedEvent {
44 clientX: number;
45 clientY: number;
46 element: HTMLElement;
47}
48export declare class DraggableDirective implements OnInit, OnChanges, OnDestroy {
49 private element;
50 private renderer;
51 private draggableHelper;
52 private zone;
53 private vcr;
54 private scrollContainer;
55 private document;
56 /**
57 * an object of data you can pass to the drop event
58 */
59 dropData: any;
60 /**
61 * The axis along which the element is draggable
62 */
63 dragAxis: DragAxis;
64 /**
65 * Snap all drags to an x / y grid
66 */
67 dragSnapGrid: SnapGrid;
68 /**
69 * Show a ghost element that shows the drag when dragging
70 */
71 ghostDragEnabled: boolean;
72 /**
73 * Show the original element when ghostDragEnabled is true
74 */
75 showOriginalElementWhileDragging: boolean;
76 /**
77 * Allow custom behaviour to control when the element is dragged
78 */
79 validateDrag: ValidateDrag;
80 /**
81 * The cursor to use when hovering over a draggable element
82 */
83 dragCursor: string;
84 /**
85 * The css class to apply when the element is being dragged
86 */
87 dragActiveClass: string;
88 /**
89 * The element the ghost element will be appended to. Default is next to the dragged element
90 */
91 ghostElementAppendTo: HTMLElement;
92 /**
93 * An ng-template to be inserted into the parent element of the ghost element. It will overwrite any child nodes.
94 */
95 ghostElementTemplate: TemplateRef<any>;
96 /**
97 * Amount of milliseconds to wait on touch devices before starting to drag the element (so that you can scroll the page by touching a draggable element)
98 */
99 touchStartLongPress: {
100 delay: number;
101 delta: number;
102 };
103 autoScroll: {
104 margin: number | {
105 top?: number;
106 left?: number;
107 right?: number;
108 bottom?: number;
109 };
110 maxSpeed?: number | {
111 top?: number;
112 left?: number;
113 right?: number;
114 bottom?: number;
115 };
116 scrollWhenOutside?: boolean;
117 };
118 /**
119 * Called when the element can be dragged along one axis and has the mouse or pointer device pressed on it
120 */
121 dragPointerDown: EventEmitter<DragPointerDownEvent>;
122 /**
123 * Called when the element has started to be dragged.
124 * Only called after at least one mouse or touch move event.
125 * If you call $event.cancelDrag$.emit() it will cancel the current drag
126 */
127 dragStart: EventEmitter<DragStartEvent>;
128 /**
129 * Called after the ghost element has been created
130 */
131 ghostElementCreated: EventEmitter<GhostElementCreatedEvent>;
132 /**
133 * Called when the element is being dragged
134 */
135 dragging: EventEmitter<DragMoveEvent>;
136 /**
137 * Called after the element is dragged
138 */
139 dragEnd: EventEmitter<DragEndEvent>;
140 /**
141 * @hidden
142 */
143 pointerDown$: Subject<PointerEvent>;
144 /**
145 * @hidden
146 */
147 pointerMove$: Subject<PointerEvent>;
148 /**
149 * @hidden
150 */
151 pointerUp$: Subject<PointerEvent>;
152 private eventListenerSubscriptions;
153 private ghostElement;
154 private destroy$;
155 private timeLongPress;
156 private scroller;
157 /**
158 * @hidden
159 */
160 constructor(element: ElementRef<HTMLElement>, renderer: Renderer2, draggableHelper: DraggableHelper, zone: NgZone, vcr: ViewContainerRef, scrollContainer: DraggableScrollContainerDirective, document: any);
161 ngOnInit(): void;
162 ngOnChanges(changes: SimpleChanges): void;
163 ngOnDestroy(): void;
164 private checkEventListeners;
165 private onMouseDown;
166 private onMouseUp;
167 private onTouchStart;
168 private onTouchEnd;
169 private onMouseEnter;
170 private onMouseLeave;
171 private canDrag;
172 private setCursor;
173 private unsubscribeEventListeners;
174 private setElementStyles;
175 private getScrollElement;
176 private getScrollPosition;
177 private shouldBeginDrag;
178 private enableScroll;
179 private disableScroll;
180 private hasScrollbar;
181}