UNPKG

ngx-tree-dnd

Version:

Angular 7 support tree with drag-and-drop sortable data tree. It`s fast and smart.

122 lines 8.71 kB
/** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /* Copyright (C) 2018 Yaroslav Kikot This project is licensed under the terms of the MIT license. https://github.com/Zicrael/ngx-tree-dnd */ import { Directive, ElementRef, HostListener, Input, HostBinding } from '@angular/core'; import { NgxTreeService } from '../ngx-tree-dnd.service'; export class DragElementsDirective { /** * @param {?} el * @param {?} treeService */ constructor(el, treeService) { this.el = el; this.treeService = treeService; } /** * @return {?} */ get draggable() { return this.draggableValue; } /* Event: ondragstart; Set item as dragging and call startDragging() from tree service. Emit OnDragStart on tree service. */ /** * @param {?} event * @return {?} */ onDragStart(event) { /** @type {?} */ const eventObj = { event, target: this.item }; this.treeService.isDragging = this.item; this.treeService.lastExpandState = this.item.options.hideChildrens; this.item.options.hideChildrens = true; this.item.options.currentlyDragging = true; // call service func this.treeService.startDragging(eventObj); event.stopPropagation(); } /* Event: onDrag; trigger drag items and call onDragProcess() from tree service. Emit OnDrag on tree service. */ /** * @param {?} event * @return {?} */ onDrag(event) { /** @type {?} */ const eventObj = { event, target: this.item }; this.treeService.onDragProcess(eventObj); } /* Event: ondragend; Call dragEndAction() from tree service. Emit OnDragEnd on tree service. */ /** * @param {?} event * @return {?} */ onDragEnd(event) { /** @type {?} */ const eventObj = { event, target: this.item }; this.item.options.hideChildrens = this.treeService.lastExpandState; this.item.options.currentlyDragging = false; this.treeService.dragEndAction(eventObj); event.stopPropagation(); } } DragElementsDirective.decorators = [ { type: Directive, args: [{ selector: '[libDragElement]' },] }, ]; /** @nocollapse */ DragElementsDirective.ctorParameters = () => [ { type: ElementRef }, { type: NgxTreeService } ]; DragElementsDirective.propDecorators = { item: [{ type: Input }], draggableValue: [{ type: Input }], draggable: [{ type: HostBinding, args: ['draggable',] }], onDragStart: [{ type: HostListener, args: ['dragstart', ['$event'],] }], onDrag: [{ type: HostListener, args: ['drag', ['$event'],] }], onDragEnd: [{ type: HostListener, args: ['dragend', ['$event'],] }] }; if (false) { /** @type {?} */ DragElementsDirective.prototype.item; /** @type {?} */ DragElementsDirective.prototype.draggableValue; /** * @type {?} * @private */ DragElementsDirective.prototype.el; /** * @type {?} * @private */ DragElementsDirective.prototype.treeService; } //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXRyZWUtZG5kLWRyYWcuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LXRyZWUtZG5kLyIsInNvdXJjZXMiOlsibGliL2RpcmVjdGl2ZXMvbmd4LXRyZWUtZG5kLWRyYWcuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUtBLE9BQU8sRUFBRSxTQUFTLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXhGLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUt6RCxNQUFNLE9BQU8scUJBQXFCOzs7OztJQUM5QixZQUFvQixFQUFjLEVBQVcsV0FBMkI7UUFBcEQsT0FBRSxHQUFGLEVBQUUsQ0FBWTtRQUFXLGdCQUFXLEdBQVgsV0FBVyxDQUFnQjtJQUFHLENBQUM7Ozs7SUFJNUUsSUFDSSxTQUFTO1FBQ1QsT0FBTyxJQUFJLENBQUMsY0FBYyxDQUFDO0lBQzlCLENBQUM7Ozs7Ozs7Ozs7SUFRRixXQUFXLENBQUMsS0FBWTs7Y0FDaEIsUUFBUSxHQUFHO1lBQ2YsS0FBSztZQUNMLE1BQU0sRUFBRSxJQUFJLENBQUMsSUFBSTtTQUNsQjtRQUNELElBQUksQ0FBQyxXQUFXLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUM7UUFDeEMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxlQUFlLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDO1FBQ25FLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7UUFDdkMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsaUJBQWlCLEdBQUcsSUFBSSxDQUFDO1FBQzNDLG9CQUFvQjtRQUNwQixJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN6QyxLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDMUIsQ0FBQzs7Ozs7Ozs7OztJQVFELE1BQU0sQ0FBQyxLQUFZOztjQUNYLFFBQVEsR0FBRztZQUNmLEtBQUs7WUFDTCxNQUFNLEVBQUUsSUFBSSxDQUFDLElBQUk7U0FDbEI7UUFDRCxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUMzQyxDQUFDOzs7Ozs7Ozs7O0lBUUQsU0FBUyxDQUFDLEtBQVk7O2NBQ2QsUUFBUSxHQUFHO1lBQ2YsS0FBSztZQUNMLE1BQU0sRUFBRSxJQUFJLENBQUMsSUFBSTtTQUNsQjtRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLGVBQWUsQ0FBQztRQUNuRSxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxpQkFBaUIsR0FBRyxLQUFLLENBQUM7UUFDNUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLENBQUM7UUFDekMsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQzFCLENBQUM7OztZQTlESixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjthQUM3Qjs7OztZQU5tQixVQUFVO1lBRXJCLGNBQWM7OzttQkFPbEIsS0FBSzs2QkFDTCxLQUFLO3dCQUVMLFdBQVcsU0FBQyxXQUFXOzBCQVV2QixZQUFZLFNBQUMsV0FBVyxFQUFFLENBQUMsUUFBUSxDQUFDO3FCQW9CcEMsWUFBWSxTQUFDLE1BQU0sRUFBRSxDQUFDLFFBQVEsQ0FBQzt3QkFjL0IsWUFBWSxTQUFDLFNBQVMsRUFBRSxDQUFDLFFBQVEsQ0FBQzs7OztJQS9DbkMscUNBQXlCOztJQUN6QiwrQ0FBaUM7Ozs7O0lBRnJCLG1DQUFzQjs7Ozs7SUFBRSw0Q0FBb0MiLCJzb3VyY2VzQ29udGVudCI6WyIvKlxuIENvcHlyaWdodCAoQykgMjAxOCBZYXJvc2xhdiBLaWtvdFxuIFRoaXMgcHJvamVjdCBpcyBsaWNlbnNlZCB1bmRlciB0aGUgdGVybXMgb2YgdGhlIE1JVCBsaWNlbnNlLlxuIGh0dHBzOi8vZ2l0aHViLmNvbS9aaWNyYWVsL25neC10cmVlLWRuZFxuKi9cbmltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdExpc3RlbmVyLCBJbnB1dCwgSG9zdEJpbmRpbmcgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRyZWVNb2RlbCB9IGZyb20gJy4uL21vZGVscy90cmVlLXZpZXcubW9kZWwnO1xuaW1wb3J0IHsgTmd4VHJlZVNlcnZpY2UgfSBmcm9tICcuLi9uZ3gtdHJlZS1kbmQuc2VydmljZSc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1tsaWJEcmFnRWxlbWVudF0nXG59KVxuZXhwb3J0IGNsYXNzIERyYWdFbGVtZW50c0RpcmVjdGl2ZSB7XG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBlbDogRWxlbWVudFJlZiwgcHJpdmF0ZSAgdHJlZVNlcnZpY2U6IE5neFRyZWVTZXJ2aWNlKSB7fVxuICAgIEBJbnB1dCgpIGl0ZW06IFRyZWVNb2RlbDtcbiAgICBASW5wdXQoKSBkcmFnZ2FibGVWYWx1ZTogYm9vbGVhbjtcblxuICAgIEBIb3N0QmluZGluZygnZHJhZ2dhYmxlJylcbiAgICBnZXQgZHJhZ2dhYmxlKCkge1xuICAgICAgICByZXR1cm4gdGhpcy5kcmFnZ2FibGVWYWx1ZTtcbiAgICAgfVxuXG4gICAgLypcbiAgICAgICAgRXZlbnQ6IG9uZHJhZ3N0YXJ0O1xuICAgICAgICBTZXQgaXRlbSBhcyBkcmFnZ2luZyBhbmQgY2FsbCBzdGFydERyYWdnaW5nKCkgZnJvbSB0cmVlIHNlcnZpY2UuXG4gICAgICAgIEVtaXQgT25EcmFnU3RhcnQgb24gdHJlZSBzZXJ2aWNlLlxuICAgICovXG4gICAgQEhvc3RMaXN0ZW5lcignZHJhZ3N0YXJ0JywgWyckZXZlbnQnXSlcbiAgICBvbkRyYWdTdGFydChldmVudDogRXZlbnQpIHtcbiAgICAgIGNvbnN0IGV2ZW50T2JqID0ge1xuICAgICAgICBldmVudCxcbiAgICAgICAgdGFyZ2V0OiB0aGlzLml0ZW1cbiAgICAgIH07XG4gICAgICB0aGlzLnRyZWVTZXJ2aWNlLmlzRHJhZ2dpbmcgPSB0aGlzLml0ZW07XG4gICAgICB0aGlzLnRyZWVTZXJ2aWNlLmxhc3RFeHBhbmRTdGF0ZSA9IHRoaXMuaXRlbS5vcHRpb25zLmhpZGVDaGlsZHJlbnM7XG4gICAgICB0aGlzLml0ZW0ub3B0aW9ucy5oaWRlQ2hpbGRyZW5zID0gdHJ1ZTtcbiAgICAgIHRoaXMuaXRlbS5vcHRpb25zLmN1cnJlbnRseURyYWdnaW5nID0gdHJ1ZTtcbiAgICAgIC8vIGNhbGwgc2VydmljZSBmdW5jXG4gICAgICB0aGlzLnRyZWVTZXJ2aWNlLnN0YXJ0RHJhZ2dpbmcoZXZlbnRPYmopO1xuICAgICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgfVxuXG4gICAgLypcbiAgICAgICAgRXZlbnQ6IG9uRHJhZztcbiAgICAgICAgdHJpZ2dlciBkcmFnIGl0ZW1zIGFuZCBjYWxsIG9uRHJhZ1Byb2Nlc3MoKSBmcm9tIHRyZWUgc2VydmljZS5cbiAgICAgICAgRW1pdCBPbkRyYWcgb24gdHJlZSBzZXJ2aWNlLlxuICAgICovXG4gICAgQEhvc3RMaXN0ZW5lcignZHJhZycsIFsnJGV2ZW50J10pXG4gICAgb25EcmFnKGV2ZW50OiBFdmVudCkge1xuICAgICAgY29uc3QgZXZlbnRPYmogPSB7XG4gICAgICAgIGV2ZW50LFxuICAgICAgICB0YXJnZXQ6IHRoaXMuaXRlbVxuICAgICAgfTtcbiAgICAgIHRoaXMudHJlZVNlcnZpY2Uub25EcmFnUHJvY2VzcyhldmVudE9iaik7XG4gICAgfVxuXG4gICAgLypcbiAgICAgICAgRXZlbnQ6IG9uZHJhZ2VuZDtcbiAgICAgICAgQ2FsbCBkcmFnRW5kQWN0aW9uKCkgZnJvbSB0cmVlIHNlcnZpY2UuXG4gICAgICAgIEVtaXQgT25EcmFnRW5kIG9uIHRyZWUgc2VydmljZS5cbiAgICAqL1xuICAgIEBIb3N0TGlzdGVuZXIoJ2RyYWdlbmQnLCBbJyRldmVudCddKVxuICAgIG9uRHJhZ0VuZChldmVudDogRXZlbnQpIHtcbiAgICAgIGNvbnN0IGV2ZW50T2JqID0ge1xuICAgICAgICBldmVudCxcbiAgICAgICAgdGFyZ2V0OiB0aGlzLml0ZW1cbiAgICAgIH07XG4gICAgICB0aGlzLml0ZW0ub3B0aW9ucy5oaWRlQ2hpbGRyZW5zID0gdGhpcy50cmVlU2VydmljZS5sYXN0RXhwYW5kU3RhdGU7XG4gICAgICB0aGlzLml0ZW0ub3B0aW9ucy5jdXJyZW50bHlEcmFnZ2luZyA9IGZhbHNlO1xuICAgICAgdGhpcy50cmVlU2VydmljZS5kcmFnRW5kQWN0aW9uKGV2ZW50T2JqKTtcbiAgICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIH1cbn1cbiJdfQ==