@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
102 lines • 13.4 kB
JavaScript
import { Directive, EventEmitter, HostListener, inject, Input, Output } from '@angular/core';
import { Subject } from 'rxjs';
import { filter, takeUntil, tap } from 'rxjs/operators';
import { DragService } from './drag.service';
import * as i0 from "@angular/core";
export class DropDirective {
constructor() {
this._dragService = inject(DragService);
/** Define whether or not dropping is enabled */
this.dropDisabled = false;
/** Emit the model of the item dropped */
this.onDrop = new EventEmitter();
/** Determine whether or not the mouse is within the drop region */
this.isMouseOver = false;
/** Determine whether or not we are currently dragging an item */
this.isDragging = false;
/** Ensure we destroy all subscriptions */
this._onDestroy = new Subject();
// subscribe to drag events
this._dragService.onDragStart.pipe(tap(event => this._group = event.group), filter(event => this.isDropAllowed(event.group)), takeUntil(this._onDestroy))
.subscribe(this.onDragStart.bind(this));
this._dragService.onDragEnd.pipe(filter(event => this.isDropAllowed(event.group)), takeUntil(this._onDestroy))
.subscribe(this.onDragEnd.bind(this));
}
ngOnDestroy() {
this._onDestroy.next();
this._onDestroy.complete();
}
/** Update the mouse over state */
onMouseOver() {
if (this.isDropAllowed(this._group)) {
this.isMouseOver = true;
// emit that we are over a drop area
this._dragService.onDropEnter.next();
}
}
/** Update the mouse over state */
onMouseLeave() {
// always ensure this value is reset
this.isMouseOver = false;
// only emit the dropd leave event when appropriate
if (this.isDropAllowed(this._group)) {
this._dragService.onDropLeave.next();
}
}
/** Update the dragging state */
onDragStart() {
this.isDragging = true;
}
/** Update the dragging state */
onDragEnd(event) {
// update the dragging state
this.isDragging = false;
// clear the cached group
this._group = null;
// if the mouse is over and it is in an allowed group emit the dop event
if (this.isMouseOver && this.isDropAllowed(event.group)) {
this.onDrop.emit(event.data);
this._dragService.onDrop.next(event.data);
}
}
/** Determine whether or not the event is part of the specified groups */
isDropAllowed(group) {
// if dropping is disabled then it is never allowed
if (this.dropDisabled) {
return false;
}
// if no group specified allow all groups
if (!this.group) {
return true;
}
// if it is an array then ensure it is allowed
if (Array.isArray(this.group)) {
return !!this.group.find(_group => _group === group);
}
return this.group === group;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: DropDirective, selector: "[uxDrop]", inputs: { group: "group", dropDisabled: "dropDisabled" }, outputs: { onDrop: "onDrop" }, host: { listeners: { "mouseenter": "onMouseOver()", "mouseleave": "onMouseLeave()" }, properties: { "class.ux-drop-hover": "isMouseOver && isDragging && !dropDisabled" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DropDirective, decorators: [{
type: Directive,
args: [{
selector: '[uxDrop]',
host: {
'[class.ux-drop-hover]': 'isMouseOver && isDragging && !dropDisabled'
}
}]
}], ctorParameters: () => [], propDecorators: { group: [{
type: Input
}], dropDisabled: [{
type: Input
}], onDrop: [{
type: Output
}], onMouseOver: [{
type: HostListener,
args: ['mouseenter']
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvZGlyZWN0aXZlcy9kcmFnL2Ryb3AuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFlBQVksRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFhLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN4RyxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxXQUFXLEVBQWUsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFRMUQsTUFBTSxPQUFPLGFBQWE7SUF3QnRCO1FBdkJpQixpQkFBWSxHQUFHLE1BQU0sQ0FBaUIsV0FBVyxDQUFDLENBQUM7UUFLcEUsZ0RBQWdEO1FBQ3ZDLGlCQUFZLEdBQVksS0FBSyxDQUFDO1FBRXZDLHlDQUF5QztRQUMvQixXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQUssQ0FBQztRQUV6QyxtRUFBbUU7UUFDbkUsZ0JBQVcsR0FBWSxLQUFLLENBQUM7UUFFN0IsaUVBQWlFO1FBQ2pFLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFLNUIsMENBQTBDO1FBQ3pCLGVBQVUsR0FBRyxJQUFJLE9BQU8sRUFBUSxDQUFDO1FBRzlDLDJCQUEyQjtRQUMzQixJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLEVBQUUsTUFBTSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUMsRUFBRSxTQUFTLENBQUMsSUFB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b0JBQ3BCLElBQUksRUFBRTt3QkFDRix1QkFBdUIsRUFBRSw0Q0FBNEM7cUJBQ3hFO2lCQUNKO3dEQUtZLEtBQUs7c0JBQWIsS0FBSztnQkFHRyxZQUFZO3NCQUFwQixLQUFLO2dCQUdJLE1BQU07c0JBQWYsTUFBTTtnQkE4QlAsV0FBVztzQkFEVixZQUFZO3VCQUFDLFlBQVk7Z0JBWTFCLFlBQVk7c0JBRFgsWUFBWTt1QkFBQyxZQUFZIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFdmVudEVtaXR0ZXIsIEhvc3RMaXN0ZW5lciwgaW5qZWN0LCBJbnB1dCwgT25EZXN0cm95LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFN1YmplY3QgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IGZpbHRlciwgdGFrZVVudGlsLCB0YXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBEcmFnU2VydmljZSwgVXhEcmFnRXZlbnQgfSBmcm9tICcuL2RyYWcuc2VydmljZSc7XG5cbkBEaXJlY3RpdmUoe1xuICAgIHNlbGVjdG9yOiAnW3V4RHJvcF0nLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgJ1tjbGFzcy51eC1kcm9wLWhvdmVyXSc6ICdpc01vdXNlT3ZlciAmJiBpc0RyYWdnaW5nICYmICFkcm9wRGlzYWJsZWQnXG4gICAgfVxufSlcbmV4cG9ydCBjbGFzcyBEcm9wRGlyZWN0aXZlPFQgPSB1bmtub3duPiBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBfZHJhZ1NlcnZpY2UgPSBpbmplY3Q8RHJhZ1NlcnZpY2U8VD4+KERyYWdTZXJ2aWNlKTtcblxuICAgIC8qKiBEZWZpbmUgYSBzcGVjaWZpYyBncm91cCBvZiBkcmFnZ2VkIGl0ZW1zIHRvIGxpc3RlbiB0byAqL1xuICAgIEBJbnB1dCgpIGdyb3VwOiBzdHJpbmcgfCBzdHJpbmdbXTtcblxuICAgIC8qKiBEZWZpbmUgd2hldGhlciBvciBub3QgZHJvcHBpbmcgaXMgZW5hYmxlZCAqL1xuICAgIEBJbnB1dCgpIGRyb3BEaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gICAgLyoqIEVtaXQgdGhlIG1vZGVsIG9mIHRoZSBpdGVtIGRyb3BwZWQgKi9cbiAgICBAT3V0cHV0KCkgb25Ecm9wID0gbmV3IEV2ZW50RW1pdHRlcjxUPigpO1xuXG4gICAgLyoqIERldGVybWluZSB3aGV0aGVyIG9yIG5vdCB0aGUgbW91c2UgaXMgd2l0aGluIHRoZSBkcm9wIHJlZ2lvbiAqL1xuICAgIGlzTW91c2VPdmVyOiBib29sZWFuID0gZmFsc2U7XG5cbiAgICAvKiogRGV0ZXJtaW5lIHdoZXRoZXIgb3Igbm90IHdlIGFyZSBjdXJyZW50bHkgZHJhZ2dpbmcgYW4gaXRlbSAqL1xuICAgIGlzRHJhZ2dpbmc6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAgIC8qKiBTdG9yZSB0aGUgZ3JvdXAgb2YgdGhlIGRyYWdnZWQgaXRlbSAqL1xuICAgIHByaXZhdGUgX2dyb3VwOiBzdHJpbmc7XG5cbiAgICAvKiogRW5zdXJlIHdlIGRlc3Ryb3kgYWxsIHN1YnNjcmlwdGlvbnMgKi9cbiAgICBwcml2YXRlIHJlYWRvbmx5IF9vbkRlc3Ryb3kgPSBuZXcgU3ViamVjdDx2b2lkPigpO1xuXG4gICAgY29uc3RydWN0b3IoKSB7XG4gICAgICAgIC8vIHN1YnNjcmliZSB0byBkcmFnIGV2ZW50c1xuICAgICAgICB0aGlzLl9kcmFnU2VydmljZS5vbkRyYWdTdGFydC5waXBlKHRhcChldmVudCA9PiB0aGlzLl9ncm91cCA9IGV2ZW50Lmdyb3VwKSwgZmlsdGVyKGV2ZW50ID0+IHRoaXMuaXNEcm9wQWxsb3dlZChldmVudC5ncm91cCkpLCB0YWtlVW50aWwodGhpcy5fb25EZXN0cm95KSlcbiAgICAgICAgICAgIC5zdWJzY3JpYmUodGhpcy5vbkRyYWdTdGFydC5iaW5kKHRoaXMpKTtcblxuICAgICAgICB0aGlzLl9kcmFnU2VydmljZS5vbkRyYWdFbmQucGlwZShmaWx0ZXIoZXZlbnQgPT4gdGhpcy5pc0Ryb3BBbGxvd2VkKGV2ZW50Lmdyb3VwKSksIHRha2VVbnRpbCh0aGlzLl9vbkRlc3Ryb3kpKVxuICAgICAgICAgICAgLnN1YnNjcmliZSh0aGlzLm9uRHJhZ0VuZC5iaW5kKHRoaXMpKTtcbiAgICB9XG5cbiAgICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5fb25EZXN0cm95Lm5leHQoKTtcbiAgICAgICAgdGhpcy5fb25EZXN0cm95LmNvbXBsZXRlKCk7XG4gICAgfVxuXG4gICAgLyoqIFVwZGF0ZSB0aGUgbW91c2Ugb3ZlciBzdGF0ZSAqL1xuICAgIEBIb3N0TGlzdGVuZXIoJ21vdXNlZW50ZXInKVxuICAgIG9uTW91c2VPdmVyKCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5pc0Ryb3BBbGxvd2VkKHRoaXMuX2dyb3VwKSkge1xuICAgICAgICAgICAgdGhpcy5pc01vdXNlT3ZlciA9IHRydWU7XG5cbiAgICAgICAgICAgIC8vIGVtaXQgdGhhdCB3ZSBhcmUgb3ZlciBhIGRyb3AgYXJlYVxuICAgICAgICAgICAgdGhpcy5fZHJhZ1NlcnZpY2Uub25Ecm9wRW50ZXIubmV4dCgpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgLyoqIFVwZGF0ZSB0aGUgbW91c2Ugb3ZlciBzdGF0ZSAqL1xuICAgIEBIb3N0TGlzdGVuZXIoJ21vdXNlbGVhdmUnKVxuICAgIG9uTW91c2VMZWF2ZSgpOiB2b2lkIHtcblxuICAgICAgICAvLyBhbHdheXMgZW5zdXJlIHRoaXMgdmFsdWUgaXMgcmVzZXRcbiAgICAgICAgdGhpcy5pc01vdXNlT3ZlciA9IGZhbHNlO1xuXG4gICAgICAgIC8vIG9ubHkgZW1pdCB0aGUgZHJvcGQgbGVhdmUgZXZlbnQgd2hlbiBhcHByb3ByaWF0ZVxuICAgICAgICBpZiAodGhpcy5pc0Ryb3BBbGxvd2VkKHRoaXMuX2dyb3VwKSkge1xuICAgICAgICAgICAgdGhpcy5fZHJhZ1NlcnZpY2Uub25Ecm9wTGVhdmUubmV4dCgpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgLyoqIFVwZGF0ZSB0aGUgZHJhZ2dpbmcgc3RhdGUgKi9cbiAgICBvbkRyYWdTdGFydCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5pc0RyYWdnaW5nID0gdHJ1ZTtcbiAgICB9XG5cbiAgICAvKiogVXBkYXRlIHRoZSBkcmFnZ2luZyBzdGF0ZSAqL1xuICAgIG9uRHJhZ0VuZChldmVudDogVXhEcmFnRXZlbnQ8VD4pOiB2b2lkIHtcblxuICAgICAgICAvLyB1cGRhdGUgdGhlIGRyYWdnaW5nIHN0YXRlXG4gICAgICAgIHRoaXMuaXNEcmFnZ2luZyA9IGZhbHNlO1xuXG4gICAgICAgIC8vIGNsZWFyIHRoZSBjYWNoZWQgZ3JvdXBcbiAgICAgICAgdGhpcy5fZ3JvdXAgPSBudWxsO1xuXG4gICAgICAgIC8vIGlmIHRoZSBtb3VzZSBpcyBvdmVyIGFuZCBpdCBpcyBpbiBhbiBhbGxvd2VkIGdyb3VwIGVtaXQgdGhlIGRvcCBldmVudFxuICAgICAgICBpZiAodGhpcy5pc01vdXNlT3ZlciAmJiB0aGlzLmlzRHJvcEFsbG93ZWQoZXZlbnQuZ3JvdXApKSB7XG4gICAgICAgICAgICB0aGlzLm9uRHJvcC5lbWl0KGV2ZW50LmRhdGEpO1xuICAgICAgICAgICAgdGhpcy5fZHJhZ1NlcnZpY2Uub25Ecm9wLm5leHQoZXZlbnQuZGF0YSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICAvKiogRGV0ZXJtaW5lIHdoZXRoZXIgb3Igbm90IHRoZSBldmVudCBpcyBwYXJ0IG9mIHRoZSBzcGVjaWZpZWQgZ3JvdXBzICovXG4gICAgcHJpdmF0ZSBpc0Ryb3BBbGxvd2VkKGdyb3VwOiBzdHJpbmcpOiBib29sZWFuIHtcblxuICAgICAgICAvLyBpZiBkcm9wcGluZyBpcyBkaXNhYmxlZCB0aGVuIGl0IGlzIG5ldmVyIGFsbG93ZWRcbiAgICAgICAgaWYgKHRoaXMuZHJvcERpc2FibGVkKSB7XG4gICAgICAgICAgICByZXR1cm4gZmFsc2U7XG4gICAgICAgIH1cblxuICAgICAgICAvLyBpZiBubyBncm91cCBzcGVjaWZpZWQgYWxsb3cgYWxsIGdyb3Vwc1xuICAgICAgICBpZiAoIXRoaXMuZ3JvdXApIHtcbiAgICAgICAgICAgIHJldHVybiB0cnVlO1xuICAgICAgICB9XG5cbiAgICAgICAgLy8gaWYgaXQgaXMgYW4gYXJyYXkgdGhlbiBlbnN1cmUgaXQgaXMgYWxsb3dlZFxuICAgICAgICBpZiAoQXJyYXkuaXNBcnJheSh0aGlzLmdyb3VwKSkge1xuICAgICAgICAgICAgcmV0dXJuICEhdGhpcy5ncm91cC5maW5kKF9ncm91cCA9PiBfZ3JvdXAgPT09IGdyb3VwKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybiB0aGlzLmdyb3VwID09PSBncm91cDtcbiAgICB9XG59XG4iXX0=