d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { OnInit, Directive, Output, EventEmitter, ContentChildren, QueryList, AfterContentInit, NgZone, Input } from '@angular/core';
import { ThyDragDirective } from './drag.directive';
import { merge, Observable, defer } from 'rxjs';
import { mixinUnsubscribe, MixinBase, Constructor, ThyUnsubscribe, InputBoolean } from 'ngx-tethys/core';
import { takeUntil, startWith, take, switchMap } from 'rxjs/operators';
import { ThyDragDropEvent, ThyDragStartEvent, ThyDragEndEvent, ThyDragOverEvent } from './drag-drop.class';
import { THY_DROP_CONTAINER_DIRECTIVE, IThyDropContainerDirective } from './drop-container.class';

const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);

/**
 * @name thy-drop-container,[thyDropContainer]
 * @order 30
 */
@Directive({
    selector: 'thy-drop-container,[thyDropContainer]',
    providers: [
        {
            provide: THY_DROP_CONTAINER_DIRECTIVE,
            useExisting: ThyDropContainerDirective
        }
    ],
    standalone: true
})
export class ThyDropContainerDirective<T = any> extends _MixinBase implements OnInit, AfterContentInit, IThyDropContainerDirective {
    /**
     * 元数据
     * @type any[]
     */
    @Input('thyDropContainer')
    set dragContainer(data: T[]) {
        this.data = data;
    }

    /**
     * 元数据
     * @type any[]
     */
    @Input('thyDropContainerData') data: T[];

    /**
     * 是否禁用拖拽
     * @default false
     */
    @Input('thyDropContainerDisabled') @InputBoolean() disabled: boolean;

    /**
     * 拖拽之前的回调，函数返回 false 则阻止拖拽
     */
    @Input('thyBeforeDragStart') beforeStart: (e: ThyDragStartEvent<T>) => boolean;

    /**
     * 拖拽时回调，函数返回 false 则阻止移入
     */
    @Input('thyBeforeDragOver') beforeOver: (e: ThyDragOverEvent<T>) => boolean;

    /**
     * 拖放到元素时回调，函数返回 false 则阻止放置
     */
    @Input('thyBeforeDragDrop') beforeDrop: (e: ThyDragDropEvent<T>) => boolean;

    /**
     * 开始拖拽时调用
     */
    @Output('thyDragStarted') started = new EventEmitter<ThyDragStartEvent<ThyDragDirective>>();

    /**
     * dragend 触发时调用
     */
    @Output('thyDragEnded') ended = new EventEmitter<ThyDragEndEvent<ThyDragDirective>>();

    /**
     * dragover 触发时调用
     */
    @Output('thyDragOvered') overed = new EventEmitter<ThyDragOverEvent<ThyDragDirective>>();

    /**
     * drop 触发时调用
     */
    @Output('thyDragDropped') dropped = new EventEmitter<ThyDragDropEvent<ThyDragDirective>>();

    /**
     * @internal
     */
    @ContentChildren(ThyDragDirective, {
        descendants: false
    })
    draggables: QueryList<ThyDragDirective>;

    constructor(private ngZone: NgZone) {
        super();
    }

    ngOnInit() {}

    ngAfterContentInit() {
        this.draggables.changes.pipe(startWith(null), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
            this.draggableChanges();
        });
    }

    private draggableChanges() {
        this.resetDraggableChanges(item => item.dragRef.started).subscribe(event => {
            this.started.emit(event);
        });
        this.resetDraggableChanges(item => item.dragRef.ended).subscribe(event => {
            this.ended.emit(event);
        });
        this.resetDraggableChanges(item => item.dragRef.overed).subscribe(event => {
            this.overed.emit(event);
        });
        this.resetDraggableChanges(item => item.dragRef.dropped).subscribe(event => {
            this.dropped.emit(event);
        });
    }

    private resetDraggableChanges(fn: (item: ThyDragDirective) => Observable<any>) {
        return defer(() => {
            if (this.draggables) {
                return merge(...this.draggables.map(fn));
            }
            return this.ngZone.onStable.asObservable().pipe(
                take(1),
                switchMap(() => this.resetDraggableChanges.bind(this, fn))
            );
        }).pipe(takeUntil(merge(this.ngUnsubscribe$, this.draggables.changes))) as Observable<any>;
    }
}

1	import { OnInit, Directive, Output, EventEmitter, ContentChildren, QueryList, AfterContentInit, NgZone, Input } from '@angular/core';
2	import { ThyDragDirective } from './drag.directive';
3	import { merge, Observable, defer } from 'rxjs';
4	import { mixinUnsubscribe, MixinBase, Constructor, ThyUnsubscribe, InputBoolean } from 'ngx-tethys/core';
5	import { takeUntil, startWith, take, switchMap } from 'rxjs/operators';
6	import { ThyDragDropEvent, ThyDragStartEvent, ThyDragEndEvent, ThyDragOverEvent } from './drag-drop.class';
7	import { THY_DROP_CONTAINER_DIRECTIVE, IThyDropContainerDirective } from './drop-container.class';
8
9	const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);	1✔
10
11	/**
12	* @name thy-drop-container,[thyDropContainer]
13	* @order 30
14	*/	1✔
15	@Directive({
16	selector: 'thy-drop-container,[thyDropContainer]',	×
17	providers: [
18	{
19	provide: THY_DROP_CONTAINER_DIRECTIVE,	×
20	useExisting: ThyDropContainerDirective	×
21	}	×
22	],	×
23	standalone: true	×
24	})	×
25	export class ThyDropContainerDirective<T = any> extends _MixinBase implements OnInit, AfterContentInit, IThyDropContainerDirective {
26	/**
27	* 元数据
28	* @type any[]	×
29	*/	×
30	@Input('thyDropContainer')
31	set dragContainer(data: T[]) {
32	this.data = data;
33	}	×
34		×
35	/**
36	* 元数据	×
37	* @type any[]	×
38	*/
39	@Input('thyDropContainerData') data: T[];	×
40		×
41	/**
42	* 是否禁用拖拽	×
43	* @default false	×
44	*/
45	@Input('thyDropContainerDisabled') @InputBoolean() disabled: boolean;
46
47	/**	×
48	* 拖拽之前的回调，函数返回 false 则阻止拖拽	×
49	*/	×
50	@Input('thyBeforeDragStart') beforeStart: (e: ThyDragStartEvent<T>) => boolean;
51		×
52	/**
53	* 拖拽时回调，函数返回 false 则阻止移入
54	*/	1✔
55	@Input('thyBeforeDragOver') beforeOver: (e: ThyDragOverEvent<T>) => boolean;
56
57	/**	1✔
58	* 拖放到元素时回调，函数返回 false 则阻止放置
59	*/
60	@Input('thyBeforeDragDrop') beforeDrop: (e: ThyDragDropEvent<T>) => boolean;
61
62	/**
63	* 开始拖拽时调用
64	*/
65	@Output('thyDragStarted') started = new EventEmitter<ThyDragStartEvent<ThyDragDirective>>();
66
67	/**
68	* dragend 触发时调用
69	*/
70	@Output('thyDragEnded') ended = new EventEmitter<ThyDragEndEvent<ThyDragDirective>>();
71
72	/**
73	* dragover 触发时调用	1✔
74	*/
75	@Output('thyDragOvered') overed = new EventEmitter<ThyDragOverEvent<ThyDragDirective>>();
76
77	/**	1✔
78	* drop 触发时调用
79	*/
80	@Output('thyDragDropped') dropped = new EventEmitter<ThyDragDropEvent<ThyDragDirective>>();
81
82	/**
83	* @internal
84	*/
85	@ContentChildren(ThyDragDirective, {
86	descendants: false
87	})
88	draggables: QueryList<ThyDragDirective>;
89
90	constructor(private ngZone: NgZone) {
91	super();
92	}
93
94	ngOnInit() {}
95
96	ngAfterContentInit() {
97	this.draggables.changes.pipe(startWith(null), takeUntil(this.ngUnsubscribe$)).subscribe(() => {
98	this.draggableChanges();
99	});
100	}
101
102	private draggableChanges() {
103	this.resetDraggableChanges(item => item.dragRef.started).subscribe(event => {
104	this.started.emit(event);
105	});
106	this.resetDraggableChanges(item => item.dragRef.ended).subscribe(event => {
107	this.ended.emit(event);
108	});
109	this.resetDraggableChanges(item => item.dragRef.overed).subscribe(event => {
110	this.overed.emit(event);
111	});
112	this.resetDraggableChanges(item => item.dragRef.dropped).subscribe(event => {
113	this.dropped.emit(event);
114	});
115	}
116
117	private resetDraggableChanges(fn: (item: ThyDragDirective) => Observable<any>) {
118	return defer(() => {
119	if (this.draggables) {
120	return merge(...this.draggables.map(fn));
121	}
122	return this.ngZone.onStable.asObservable().pipe(
123	take(1),
124	switchMap(() => this.resetDraggableChanges.bind(this, fn))
125	);
126	}).pipe(takeUntil(merge(this.ngUnsubscribe$, this.draggables.changes))) as Observable<any>;
127	}
128	}

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