@odymaui/angular-tree-component
Version:
A simple yet powerful tree component for Angular16. WARNING: This is an unsupported fork for use in a dependent project to upgrade it to Angular 16. Unit tests pass and the example-app works as expected.
69 lines • 8.22 kB
JavaScript
import { Component, } from '@angular/core';
import { TreeVirtualScroll } from '../models/tree-virtual-scroll.model';
import { TREE_EVENTS } from '../constants/events';
import * as i0 from "@angular/core";
import * as i1 from "../models/tree-virtual-scroll.model";
import * as i2 from "../mobx-angular/tree-mobx-autorun.directive";
export class TreeViewportComponent {
elementRef;
virtualScroll;
setViewport = this.throttle(() => {
this.virtualScroll.setViewport(this.elementRef.nativeElement);
}, 17);
scrollEventHandler;
constructor(elementRef, virtualScroll) {
this.elementRef = elementRef;
this.virtualScroll = virtualScroll;
this.scrollEventHandler = this.setViewport.bind(this);
}
ngOnInit() {
this.virtualScroll.init();
}
ngAfterViewInit() {
setTimeout(() => {
this.setViewport();
this.virtualScroll.fireEvent({ eventName: TREE_EVENTS.initialized });
});
let el = this.elementRef.nativeElement;
el.addEventListener('scroll', this.scrollEventHandler);
}
ngOnDestroy() {
this.virtualScroll.clear();
let el = this.elementRef.nativeElement;
el.removeEventListener('scroll', this.scrollEventHandler);
}
getTotalHeight() {
return ((this.virtualScroll.isEnabled() &&
this.virtualScroll.totalHeight + 'px') ||
'auto');
}
throttle(func, timeFrame) {
let lastTime = 0;
return function () {
let now = Date.now();
if (now - lastTime >= timeFrame) {
func();
lastTime = now;
}
};
}
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TreeViewportComponent, deps: [{ token: i0.ElementRef }, { token: i1.TreeVirtualScroll }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: TreeViewportComponent, selector: "tree-viewport", providers: [TreeVirtualScroll], ngImport: i0, template: `
<ng-container *treeMobxAutorun="{ dontDetach: true }">
<div [style.height]="getTotalHeight()">
<ng-content></ng-content>
</div>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.TreeMobxAutorunDirective, selector: "[treeMobxAutorun]", inputs: ["treeMobxAutorun"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: TreeViewportComponent, decorators: [{
type: Component,
args: [{ selector: 'tree-viewport', providers: [TreeVirtualScroll], template: `
<ng-container *treeMobxAutorun="{ dontDetach: true }">
<div [style.height]="getTotalHeight()">
<ng-content></ng-content>
</div>
</ng-container>
` }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.TreeVirtualScroll }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZS12aWV3cG9ydC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLXRyZWUtY29tcG9uZW50L3NyYy9saWIvY29tcG9uZW50cy90cmVlLXZpZXdwb3J0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxHQUtWLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3hFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7OztBQWNsRCxNQUFNLE9BQU8scUJBQXFCO0lBUXRCO0lBQ0Q7SUFSVCxXQUFXLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxHQUFHLEVBQUU7UUFDL0IsSUFBSSxDQUFDLGFBQWEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUNoRSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFFVSxrQkFBa0IsQ0FBMEI7SUFFN0QsWUFDVSxVQUFzQixFQUN2QixhQUFnQztRQUQvQixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQ3ZCLGtCQUFhLEdBQWIsYUFBYSxDQUFtQjtRQUV2QyxJQUFJLENBQUMsa0JBQWtCLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDeEQsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFRCxlQUFlO1FBQ2IsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUNuQixJQUFJLENBQUMsYUFBYSxDQUFDLFNBQVMsQ0FBQyxFQUFFLFNBQVMsRUFBRSxXQUFXLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQztRQUN2RSxDQUFDLENBQUMsQ0FBQztRQUNILElBQUksRUFBRSxHQUFnQixJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQztRQUNwRCxFQUFFLENBQUMsZ0JBQWdCLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO0lBQ3pELENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUMzQixJQUFJLEVBQUUsR0FBZ0IsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUM7UUFDcEQsRUFBRSxDQUFDLG1CQUFtQixDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsa0JBQWtCLENBQUMsQ0FBQztJQUM1RCxDQUFDO0lBRUQsY0FBYztRQUNaLE9BQU8sQ0FDTCxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsU0FBUyxFQUFFO1lBQzdCLElBQUksQ0FBQyxhQUFhLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQztZQUN4QyxNQUFNLENBQ1AsQ0FBQztJQUNKLENBQUM7SUFFTyxRQUFRLENBQUMsSUFBSSxFQUFFLFNBQVM7UUFDOUIsSUFBSSxRQUFRLEdBQUcsQ0FBQyxDQUFDO1FBQ2pCLE9BQU87WUFDTCxJQUFJLEdBQUcsR0FBRyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUM7WUFDckIsSUFBSSxHQUFHLEdBQUcsUUFBUSxJQUFJLFNBQVMsRUFBRTtnQkFDL0IsSUFBSSxFQUFFLENBQUM7Z0JBQ1AsUUFBUSxHQUFHLEdBQUcsQ0FBQzthQUNoQjtRQUNILENBQUMsQ0FBQztJQUNKLENBQUM7MEhBbERVLHFCQUFxQjs4R0FBckIscUJBQXFCLHdDQVRyQixDQUFDLGlCQUFpQixDQUFDLDBCQUNwQjs7Ozs7O0dBTVQ7OzJGQUVVLHFCQUFxQjtrQkFaakMsU0FBUzsrQkFDRSxlQUFlLGFBRWQsQ0FBQyxpQkFBaUIsQ0FBQyxZQUNwQjs7Ozs7O0dBTVQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIENvbXBvbmVudCxcclxuICBFbGVtZW50UmVmLFxyXG4gIEFmdGVyVmlld0luaXQsXHJcbiAgT25Jbml0LFxyXG4gIE9uRGVzdHJveSxcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgVHJlZVZpcnR1YWxTY3JvbGwgfSBmcm9tICcuLi9tb2RlbHMvdHJlZS12aXJ0dWFsLXNjcm9sbC5tb2RlbCc7XHJcbmltcG9ydCB7IFRSRUVfRVZFTlRTIH0gZnJvbSAnLi4vY29uc3RhbnRzL2V2ZW50cyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3RyZWUtdmlld3BvcnQnLFxyXG4gIHN0eWxlczogW10sXHJcbiAgcHJvdmlkZXJzOiBbVHJlZVZpcnR1YWxTY3JvbGxdLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8bmctY29udGFpbmVyICp0cmVlTW9ieEF1dG9ydW49XCJ7IGRvbnREZXRhY2g6IHRydWUgfVwiPlxyXG4gICAgICA8ZGl2IFtzdHlsZS5oZWlnaHRdPVwiZ2V0VG90YWxIZWlnaHQoKVwiPlxyXG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuICBgXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBUcmVlVmlld3BvcnRDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkluaXQsIE9uRGVzdHJveSB7XHJcbiAgc2V0Vmlld3BvcnQgPSB0aGlzLnRocm90dGxlKCgpID0+IHtcclxuICAgIHRoaXMudmlydHVhbFNjcm9sbC5zZXRWaWV3cG9ydCh0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudCk7XHJcbiAgfSwgMTcpO1xyXG5cclxuICBwcml2YXRlIHJlYWRvbmx5IHNjcm9sbEV2ZW50SGFuZGxlcjogKCRldmVudDogRXZlbnQpID0+IHZvaWQ7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmLFxyXG4gICAgcHVibGljIHZpcnR1YWxTY3JvbGw6IFRyZWVWaXJ0dWFsU2Nyb2xsXHJcbiAgKSB7XHJcbiAgICB0aGlzLnNjcm9sbEV2ZW50SGFuZGxlciA9IHRoaXMuc2V0Vmlld3BvcnQuYmluZCh0aGlzKTtcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy52aXJ0dWFsU2Nyb2xsLmluaXQoKTtcclxuICB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcclxuICAgIHNldFRpbWVvdXQoKCkgPT4ge1xyXG4gICAgICB0aGlzLnNldFZpZXdwb3J0KCk7XHJcbiAgICAgIHRoaXMudmlydHVhbFNjcm9sbC5maXJlRXZlbnQoeyBldmVudE5hbWU6IFRSRUVfRVZFTlRTLmluaXRpYWxpemVkIH0pO1xyXG4gICAgfSk7XHJcbiAgICBsZXQgZWw6IEhUTUxFbGVtZW50ID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XHJcbiAgICBlbC5hZGRFdmVudExpc3RlbmVyKCdzY3JvbGwnLCB0aGlzLnNjcm9sbEV2ZW50SGFuZGxlcik7XHJcbiAgfVxyXG5cclxuICBuZ09uRGVzdHJveSgpIHtcclxuICAgIHRoaXMudmlydHVhbFNjcm9sbC5jbGVhcigpO1xyXG4gICAgbGV0IGVsOiBIVE1MRWxlbWVudCA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xyXG4gICAgZWwucmVtb3ZlRXZlbnRMaXN0ZW5lcignc2Nyb2xsJywgdGhpcy5zY3JvbGxFdmVudEhhbmRsZXIpO1xyXG4gIH1cclxuXHJcbiAgZ2V0VG90YWxIZWlnaHQoKSB7XHJcbiAgICByZXR1cm4gKFxyXG4gICAgICAodGhpcy52aXJ0dWFsU2Nyb2xsLmlzRW5hYmxlZCgpICYmXHJcbiAgICAgICAgdGhpcy52aXJ0dWFsU2Nyb2xsLnRvdGFsSGVpZ2h0ICsgJ3B4JykgfHxcclxuICAgICAgJ2F1dG8nXHJcbiAgICApO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSB0aHJvdHRsZShmdW5jLCB0aW1lRnJhbWUpIHtcclxuICAgIGxldCBsYXN0VGltZSA9IDA7XHJcbiAgICByZXR1cm4gZnVuY3Rpb24gKCkge1xyXG4gICAgICBsZXQgbm93ID0gRGF0ZS5ub3coKTtcclxuICAgICAgaWYgKG5vdyAtIGxhc3RUaW1lID49IHRpbWVGcmFtZSkge1xyXG4gICAgICAgIGZ1bmMoKTtcclxuICAgICAgICBsYXN0VGltZSA9IG5vdztcclxuICAgICAgfVxyXG4gICAgfTtcclxuICB9XHJcbn1cclxuIl19