c572ad56-6796-461c-8809-6e2d7ed05a21

Committed 16 Apr 2025 06:23AM UTC coverage: 90.271% (+0.001%) from 90.27%

Build # c572ad56-6796-461c-8809-6e2d7ed05a21

Build Type

Pull #3341

circleci

Committed by

minlovehua

Commit Message

refactor(all): resolve 30 circular denpendencies TINFR-1830

Pull Request Pull Request #3341: refactor(all): resolve 30 circular denpendencies TINFR-1830

Run Details

5614 of 6878 branches covered (81.62%)

Branch coverage included in aggregate %.

89 of 94 new or added lines in 38 files covered. (94.68%)

64 existing lines in 12 files now uncovered.

13370 of 14152 relevant lines covered (94.47%)

922.06 hits per line

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

84.38

/src/drag-drop/drag-ref.ts

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 { ThyDragDropService } from './drag-drop.service';
import { ThyDragStartEvent, ThyDragEndEvent, ThyDragOverEvent, ThyDragDropEvent, ThyDropPosition } from './drag-drop.class';
import { IThyDragDirective, IThyDragHandleDirective, IThyDropContainerDirective } from './drag-drop.token';
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: IThyDragHandleDirective[];

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

atinc / ngx-tethys / c572ad56-6796-461c-8809-6e2d7ed05a21

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