d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { NgZone, ElementRef, Renderer2 } from '@angular/core';
import { coerceElement } from '@angular/cdk/coercion';
import { Subject, fromEvent } from 'rxjs';
import { auditTime, takeUntil } from 'rxjs/operators';
import { ThyDragHandleDirective } from './drag-handle.directive';
import { ThyDragDropService } from './drag-drop.service';
import { ThyDragStartEvent, ThyDragEndEvent, ThyDragOverEvent, ThyDragDropEvent, ThyDropPosition } from './drag-drop.class';
import { ThyDragDirective } from './drag.directive';
import { IThyDropContainerDirective } from './drop-container.class';
import { coerceArray, isEmpty, isString } from 'ngx-tethys/util';

const dropPositionClass = {
    [ThyDropPosition.in]: 'thy-drop-position-in',
    [ThyDropPosition.before]: 'thy-drop-position-before',
    [ThyDropPosition.after]: 'thy-drop-position-after'
};

export class DragRef<T = any> {
    private rootElement: HTMLElement;

    private contentElement: HTMLElement;

    private target: HTMLElement;

    private handles: ThyDragHandleDirective[];

    private ngUnsubscribe$ = new Subject();

    started = new Subject<ThyDragStartEvent>();

    ended = new Subject<ThyDragEndEvent>();

    overed = new Subject<ThyDragOverEvent>();

    dropped = new Subject<ThyDragDropEvent>();

    entered = new Subject<DragEvent>();

    leaved = new Subject<DragEvent>();

    private _disabled = false;

    get disabled(): boolean {
        return (this.container && this.container.disabled) || this._disabled;
    }
    set disabled(value: boolean) {
        this._disabled = value;
    }

    private addPositionClass$ = new Subject<{ element: HTMLElement; class: string }>();

    constructor(
        element: ElementRef<HTMLElement> | HTMLElement,
        private drag: ThyDragDirective,
        private container: IThyDropContainerDirective<T>,
        private dragDropService: ThyDragDropService<T>,
        private document: any,
        private ngZone: NgZone,
        private renderer: Renderer2
    ) {
        this.withRootElement(element);
        this.subAddPositionClass();
    }

    subAddPositionClass() {
        this.addPositionClass$.pipe(auditTime(30), takeUntil(this.ngUnsubscribe$)).subscribe(data => {
            this.removeExistClassByMap(this.dragDropService.classMap);
            this.dragDropService.classMap.set(data.element, data.class);
            this.renderer.addClass(data.element, data.class);
        });
    }

    withRootElement(rootElement: ElementRef<HTMLElement> | HTMLElement): this {
        const element = coerceElement(rootElement);
        this.rootElement = element;
        this.registerDragDropEvents();
        return this;
    }

    withContentElement(contentElement: ElementRef<HTMLElement> | HTMLElement): this {
        this.contentElement = coerceElement(contentElement);
        return this;
    }

    withHandles(handleOrHandles: ThyDragHandleDirective | ThyDragHandleDirective[]): this {
        this.handles = coerceArray(handleOrHandles);
        return this;
    }

    private registerDragDropEvents() {
        const events = {
            dragstart: this.dragStart,
            dragover: this.dragOver,
            dragend: this.dragEnd,
            drop: this.dragDrop,
            dragleave: this.dragLeave,
            dragenter: (event: DragEvent) => {
                this.entered.next(event);
            },
            mouseover: (event: MouseEvent) => {
                this.target = event.target as HTMLElement;
            }
        };
        this.ngZone.runOutsideAngular(() => {
            for (const name in events) {
                if (events.hasOwnProperty(name)) {
                    fromEvent(this.rootElement, name).pipe(takeUntil(this.ngUnsubscribe$)).subscribe(events[name].bind(this));
                }
            }
        });
    }

    private dragStart(event: DragEvent) {
        event.stopPropagation();
        const dragStartEvent: ThyDragStartEvent = {
            event: event,
            item: this.drag.data,
            containerItems: this.container.data,
            currentIndex: this.container.data.indexOf(this.drag.data)
        };
        if (this.disabled || !this.isTriggerHandle() || (this.container.beforeStart && !this.container.beforeStart(dragStartEvent))) {
            event.preventDefault();
            return false;
        }
        this.dragDropService.previousDrag = this.drag;
        this.ngZone.run(() => {
            this.started.next(dragStartEvent);
        });
    }

    private isTriggerHandle() {
        if (this.handles && this.handles.length > 0) {
            const targetHandle = this.handles.find(handle => {
                return (
                    !handle.disabled && (handle.element.nativeElement === this.target || handle.element.nativeElement.contains(this.target))
                );
            });
            return !!targetHandle;
        } else {
            return true;
        }
    }

    private getPreviousEventData() {
        const previousItem = this.dragDropService.previousDrag?.data;
        const previousContainerItems = this.dragDropService.previousDrag?.container?.data;
        return {
            previousItem: previousItem,
            previousContainerItems,
            previousIndex: isEmpty(previousContainerItems) ? -1 : previousContainerItems.indexOf(previousItem)
        };
    }

    private isContinueDragOver(event: ThyDragOverEvent, container: IThyDropContainerDirective<T>) {
        if (event.item === event.previousItem && event.position === ThyDropPosition.in) {
            return false;
        }
        if (container && container.beforeOver) {
            return container.beforeOver(event);
        }
        return true;
    }

    private dragOver(event: DragEvent) {
        event.stopPropagation();
        event.preventDefault();

        const dropPosition = this.calcDropPosition(event);
        const previousEventData = this.getPreviousEventData();
        if (previousEventData.previousIndex < 0) {
            return;
        }
        const dragOverEvent: ThyDragOverEvent<T> = {
            event: event,
            item: this.drag.data,
            containerItems: this.drag.container.data,
            currentIndex: this.container.data.indexOf(this.drag.data),
            position: dropPosition,
            ...previousEventData
        };

        if (this.isContinueDragOver(dragOverEvent, this.container)) {
            this.dragOverHandler(dropPosition);
            this.overed.next(dragOverEvent);
        }
    }

    private dragOverHandler(position: ThyDropPosition) {
        const element = this.contentElement || this.rootElement;
        this.addPositionClass$.next({ element, class: dropPositionClass[position] });
        this.dragDropService.dropPosition = position;
    }

    private dragDrop(event: DragEvent) {
        event.stopPropagation();
        this.clearDragPositionClass();
        const previousEventData = this.getPreviousEventData();
        if (previousEventData.previousIndex < 0) {
            return;
        }
        const dragDropEvent: ThyDragDropEvent<T> = {
            event: event,
            item: this.drag.data,
            containerItems: this.drag.container.data,
            currentIndex: this.container.data.indexOf(this.drag.data),
            position: this.calcDropPosition(event),
            ...previousEventData
        };
        if (this.dragDropService.previousDrag === this.drag || (this.container.beforeDrop && !this.container.beforeDrop(dragDropEvent))) {
            event.preventDefault();
            return;
        }
        this.ngZone.run(() => {
            this.dropped.next(dragDropEvent);
        });
    }

    private dragEnd(event: DragEvent) {
        this.clearDragPositionClass();
        this.ngZone.run(() => {
            this.ended.next({
                event: event,
                item: this.drag.data,
                containerItems: this.container.data
            });
        });
        this.dragDropService.previousDrag = undefined;
    }

    private dragLeave(event: DragEvent) {
        event.stopPropagation();
        this.clearDragPositionClass();
        this.leaved.next(event);
    }

    private clearDragPositionClass() {
        setTimeout(() => {
            const classMap = this.dragDropService.classMap;
            this.removeExistClassByMap(classMap);
            classMap.clear();
        }, 30);
    }

    private removeExistClassByMap(classMap: Map<Element, string>) {
        classMap.forEach((value, key) => {
            if (isString(value) && key) {
                this.renderer.removeClass(key, value);
            }
        });
    }

    private calcDropPosition(event: DragEvent): ThyDropPosition {
        const sideRange = 0.25;
        const minGap = 2;
        const { clientY } = event;
        const { top, bottom, height } = event.srcElement
            ? (event.srcElement as Element).getBoundingClientRect()
            : (event.target as Element).getBoundingClientRect();
        const des = Math.max(height * sideRange, minGap);
        if (clientY <= top + des) {
            return ThyDropPosition.before;
        } else if (clientY >= bottom - des) {
            return ThyDropPosition.after;
        }
        return ThyDropPosition.in;
    }

    dispose() {
        this.ngUnsubscribe$.complete();
    }
}

1	import { NgZone, ElementRef, Renderer2 } from '@angular/core';
2	import { coerceElement } from '@angular/cdk/coercion';
3	import { Subject, fromEvent } from 'rxjs';
4	import { auditTime, takeUntil } from 'rxjs/operators';
5	import { ThyDragHandleDirective } from './drag-handle.directive';
6	import { ThyDragDropService } from './drag-drop.service';	1✔
7	import { ThyDragStartEvent, ThyDragEndEvent, ThyDragOverEvent, ThyDragDropEvent, ThyDropPosition } from './drag-drop.class';
8	import { ThyDragDirective } from './drag.directive';
9	import { IThyDropContainerDirective } from './drop-container.class';
10	import { coerceArray, isEmpty, isString } from 'ngx-tethys/util';
11
12	const dropPositionClass = {
13	[ThyDropPosition.in]: 'thy-drop-position-in',	×
14	[ThyDropPosition.before]: 'thy-drop-position-before',
15	[ThyDropPosition.after]: 'thy-drop-position-after'
16	};	×
17
18	export class DragRef<T = any> {
19	private rootElement: HTMLElement;	×
20		×
21	private contentElement: HTMLElement;	×
22		×
23	private target: HTMLElement;	×
24		×
25	private handles: ThyDragHandleDirective[];	×
26		×
27	private ngUnsubscribe$ = new Subject();	×
28		×
29	started = new Subject<ThyDragStartEvent>();	×
30		×
31	ended = new Subject<ThyDragEndEvent>();	×
32		×
33	overed = new Subject<ThyDragOverEvent>();	×
34		×
35	dropped = new Subject<ThyDragDropEvent>();	×
36
37	entered = new Subject<DragEvent>();
38		×
39	leaved = new Subject<DragEvent>();	×
40		×
41	private _disabled = false;	×
42
43	get disabled(): boolean {
44	return (this.container && this.container.disabled) \|\| this._disabled;
45	}	×
46	set disabled(value: boolean) {	×
47	this._disabled = value;	×
48	}	×
49
50	private addPositionClass$ = new Subject<{ element: HTMLElement; class: string }>();
51		×
52	constructor(	×
53	element: ElementRef<HTMLElement> \| HTMLElement,
54	private drag: ThyDragDirective,
55	private container: IThyDropContainerDirective<T>,	×
56	private dragDropService: ThyDragDropService<T>,	×
57	private document: any,
58	private ngZone: NgZone,
59	private renderer: Renderer2	×
60	) {
61	this.withRootElement(element);
62	this.subAddPositionClass();
63	}
64
65	subAddPositionClass() {
66	this.addPositionClass$.pipe(auditTime(30), takeUntil(this.ngUnsubscribe$)).subscribe(data => {	×
67	this.removeExistClassByMap(this.dragDropService.classMap);
68	this.dragDropService.classMap.set(data.element, data.class);
69	this.renderer.addClass(data.element, data.class);	×
70	});
71	}
72		×
73	withRootElement(rootElement: ElementRef<HTMLElement> \| HTMLElement): this {	×
74	const element = coerceElement(rootElement);	×
75	this.rootElement = element;	×
76	this.registerDragDropEvents();
77	return this;
78	}
79
80	withContentElement(contentElement: ElementRef<HTMLElement> \| HTMLElement): this {
81	this.contentElement = coerceElement(contentElement);	×
82	return this;	×
83	}
84
85	withHandles(handleOrHandles: ThyDragHandleDirective \| ThyDragHandleDirective[]): this {
86	this.handles = coerceArray(handleOrHandles);
87	return this;
88	}	×
89		×
90	private registerDragDropEvents() {	×
91	const events = {
92	dragstart: this.dragStart,	×
93	dragover: this.dragOver,	×
94	dragend: this.dragEnd,	×
95	drop: this.dragDrop,
96	dragleave: this.dragLeave,
97	dragenter: (event: DragEvent) => {
98	this.entered.next(event);	×
99	},	×
100	mouseover: (event: MouseEvent) => {	×
101	this.target = event.target as HTMLElement;
102	}	×
103	};
104	this.ngZone.runOutsideAngular(() => {
105	for (const name in events) {	×
106	if (events.hasOwnProperty(name)) {
107	fromEvent(this.rootElement, name).pipe(takeUntil(this.ngUnsubscribe$)).subscribe(events[name].bind(this));
108	}
109	}	×
110	});	×
111	}	×
112
113	private dragStart(event: DragEvent) {
114	event.stopPropagation();	×
115	const dragStartEvent: ThyDragStartEvent = {
116	event: event,
117	item: this.drag.data,
118	containerItems: this.container.data,	×
119	currentIndex: this.container.data.indexOf(this.drag.data)	×
120	};
121	if (this.disabled \|\| !this.isTriggerHandle() \|\| (this.container.beforeStart && !this.container.beforeStart(dragStartEvent))) {	×
122	event.preventDefault();	×
123	return false;
124	}	×
125	this.dragDropService.previousDrag = this.drag;
126	this.ngZone.run(() => {
127	this.started.next(dragStartEvent);	×
128	});	×
129	}	×
130		×
131	private isTriggerHandle() {	×
132	if (this.handles && this.handles.length > 0) {	×
133	const targetHandle = this.handles.find(handle => {
134	return (	×
135	!handle.disabled && (handle.element.nativeElement === this.target \|\| handle.element.nativeElement.contains(this.target))
136	);
137	});
138	return !!targetHandle;
139	} else {
140	return true;
141	}
142	}	×
143		×
144	private getPreviousEventData() {	×
145	const previousItem = this.dragDropService.previousDrag?.data;
146	const previousContainerItems = this.dragDropService.previousDrag?.container?.data;
147	return {
148	previousItem: previousItem,	×
149	previousContainerItems,	×
150	previousIndex: isEmpty(previousContainerItems) ? -1 : previousContainerItems.indexOf(previousItem)	×
151	};
152	}
153		×
154	private isContinueDragOver(event: ThyDragOverEvent, container: IThyDropContainerDirective<T>) {	×
155	if (event.item === event.previousItem && event.position === ThyDropPosition.in) {	×
156	return false;	×
157	}	×
158	if (container && container.beforeOver) {
159	return container.beforeOver(event);	×
160	}
161	return true;
162	}
163
164	private dragOver(event: DragEvent) {
165	event.stopPropagation();
166	event.preventDefault();
167		×
168	const dropPosition = this.calcDropPosition(event);	×
169	const previousEventData = this.getPreviousEventData();	×
170	if (previousEventData.previousIndex < 0) {
171	return;	×
172	}	×
173	const dragOverEvent: ThyDragOverEvent<T> = {
174	event: event,
175	item: this.drag.data,
176	containerItems: this.drag.container.data,	×
177	currentIndex: this.container.data.indexOf(this.drag.data),	×
178	position: dropPosition,	×
179	...previousEventData
180	};
181
182	if (this.isContinueDragOver(dragOverEvent, this.container)) {
183	this.dragOverHandler(dropPosition);
184	this.overed.next(dragOverEvent);	×
185	}
186	}
187		×
188	private dragOverHandler(position: ThyDropPosition) {	×
189	const element = this.contentElement \|\| this.rootElement;	×
190	this.addPositionClass$.next({ element, class: dropPositionClass[position] });
191	this.dragDropService.dropPosition = position;
192	}	×
193		×
194	private dragDrop(event: DragEvent) {	×
195	event.stopPropagation();	×
196	this.clearDragPositionClass();
197	const previousEventData = this.getPreviousEventData();
198	if (previousEventData.previousIndex < 0) {
199	return;	×
200	}	×
201	const dragDropEvent: ThyDragDropEvent<T> = {	×
202	event: event,
203	item: this.drag.data,
204	containerItems: this.drag.container.data,
205	currentIndex: this.container.data.indexOf(this.drag.data),
206	position: this.calcDropPosition(event),	×
207	...previousEventData	×
208	};	×
209	if (this.dragDropService.previousDrag === this.drag \|\| (this.container.beforeDrop && !this.container.beforeDrop(dragDropEvent))) {	×
210	event.preventDefault();
211	return;
212	}	×
213	this.ngZone.run(() => {	×
214	this.dropped.next(dragDropEvent);	×
215	});
216	}	×
217		×
218	private dragEnd(event: DragEvent) {
219	this.clearDragPositionClass();	×
220	this.ngZone.run(() => {
221	this.ended.next({
222	event: event,	×
223	item: this.drag.data,
224	containerItems: this.container.data
225	});
226	});
227	this.dragDropService.previousDrag = undefined;
228	}
229
230	private dragLeave(event: DragEvent) {
231	event.stopPropagation();
232	this.clearDragPositionClass();
233	this.leaved.next(event);
234	}
235
236	private clearDragPositionClass() {
237	setTimeout(() => {
238	const classMap = this.dragDropService.classMap;
239	this.removeExistClassByMap(classMap);
240	classMap.clear();
241	}, 30);
242	}
243
244	private removeExistClassByMap(classMap: Map<Element, string>) {
245	classMap.forEach((value, key) => {
246	if (isString(value) && key) {
247	this.renderer.removeClass(key, value);
248	}
249	});
250	}
251
252	private calcDropPosition(event: DragEvent): ThyDropPosition {
253	const sideRange = 0.25;
254	const minGap = 2;
255	const { clientY } = event;
256	const { top, bottom, height } = event.srcElement
257	? (event.srcElement as Element).getBoundingClientRect()
258	: (event.target as Element).getBoundingClientRect();
259	const des = Math.max(height * sideRange, minGap);
260	if (clientY <= top + des) {
261	return ThyDropPosition.before;
262	} else if (clientY >= bottom - des) {
263	return ThyDropPosition.after;
264	}
265	return ThyDropPosition.in;
266	}
267
268	dispose() {
269	this.ngUnsubscribe$.complete();
270	}
271	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous