UNPKG

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