family-hierarchy
Version:
A small library for **Angular 9+** that implements [vis-network](https://github.com/visjs/vis-network) to generate a hierarchy chart of a family.
66 lines • 8.83 kB
JavaScript
import { __decorate } from "tslib";
import { Component, ViewChild, Input, ContentChild } from '@angular/core';
import { OPTION_DEFAULT } from '../config/default';
import { FamilyHierarchyService } from '../service/family-hierarchy.service';
import { Network } from 'vis-network/standalone';
import { Subscription } from 'rxjs';
let FamilyHierarchyComponent = class FamilyHierarchyComponent {
constructor(familyService) {
this.familyService = familyService;
this.class = '';
this.editMode = false;
this.subs = new Subscription();
}
ngOnInit() {
}
ngAfterViewInit() {
const init = this.familyService._init
.subscribe((e) => {
this.createNetwork();
});
this.subs.add(init);
this.subs.add(this.familyService._config.subscribe((config) => this.config = config));
this.subs.add(this.familyService.Edges.subscribe((edges) => this.dsEdge = edges));
this.subs.add(this.familyService.Nodes.subscribe((nodes) => this.dsNode = nodes));
}
createNetwork() {
this.visNetworkData = { nodes: this.dsNode, edges: this.dsEdge };
this.visNetwork = new Network(this.el.nativeElement, this.visNetworkData, OPTION_DEFAULT);
this.visNetwork.on('selectNode', (e) => {
this.familyService.sendClickEvent(e, 'node');
});
this.visNetwork.on('selectEdge', (e) => {
this.familyService.sendClickEvent(e);
});
}
ngOnDestroy() {
this.subs.unsubscribe();
}
};
FamilyHierarchyComponent.ctorParameters = () => [
{ type: FamilyHierarchyService }
];
__decorate([
ViewChild('box')
], FamilyHierarchyComponent.prototype, "el", void 0);
__decorate([
ContentChild('nodeTemplate')
], FamilyHierarchyComponent.prototype, "nodeTemplate", void 0);
__decorate([
ViewChild('contentNode')
], FamilyHierarchyComponent.prototype, "contentNode", void 0);
__decorate([
Input()
], FamilyHierarchyComponent.prototype, "class", void 0);
__decorate([
Input()
], FamilyHierarchyComponent.prototype, "editMode", void 0);
FamilyHierarchyComponent = __decorate([
Component({
selector: 'FamilyHierarchy',
template: "<!-- <div class=\"vis-container\"\r\n [visNetwork]=\"visNetwork\"\r\n [visNetworkData]=\"visNetworkData\"\r\n [visNetworkOptions]=\"visNetworkOptions\"\r\n (initialized)=\"networkInitialized()\">\r\n</div>\r\n -->\r\n<div #box [class.edit-mode]=\"editMode\" [ngClass]=\"['vis-container', class]\"></div>",
styles: [".vis-container{width:100%;height:100%;outline:0}.edit-mode{background-size:40px 40px;background-image:linear-gradient(to right,grey 1px,transparent 1px),linear-gradient(to bottom,grey 1px,transparent 1px)}"]
})
], FamilyHierarchyComponent);
export { FamilyHierarchyComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFtaWx5LWhpZXJhcmNoeS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9mYW1pbHktaGllcmFyY2h5LyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudC9mYW1pbHktaGllcmFyY2h5LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxTQUFTLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBaUQsTUFBTSxlQUFlLENBQUM7QUFDckksT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBRTdFLE9BQU8sRUFBdUIsT0FBTyxFQUFRLE1BQU0sd0JBQXdCLENBQUM7QUFDNUUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLE1BQU0sQ0FBQztBQVFwQyxJQUFhLHdCQUF3QixHQUFyQyxNQUFhLHdCQUF3QjtJQWtCbkMsWUFBb0IsYUFBcUM7UUFBckMsa0JBQWEsR0FBYixhQUFhLENBQXdCO1FBWmhELFVBQUssR0FBVyxFQUFFLENBQUM7UUFDbkIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQVMxQixTQUFJLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQUVtQyxDQUFDO0lBRTlELFFBQVE7SUFDUixDQUFDO0lBRUQsZUFBZTtRQUNiLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSzthQUNsQyxTQUFTLENBQ1IsQ0FBQyxDQUFDLEVBQUUsRUFBRTtZQUNKLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUN2QixDQUFDLENBQ0YsQ0FBQztRQUNKLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ3BCLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLE1BQWdCLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQztRQUNoRyxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsQ0FBQyxLQUFvQixFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUM7UUFDakcsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLENBQUMsS0FBb0IsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDO0lBQ25HLENBQUM7SUFFRCxhQUFhO1FBQ1gsSUFBSSxDQUFDLGNBQWMsR0FBRyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFHLEtBQUssRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFDLENBQUM7UUFDakUsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsY0FBYyxFQUFFLGNBQWMsQ0FBQyxDQUFDO1FBRTFGLElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDLFlBQVksRUFBRSxDQUFDLENBQUMsRUFBRSxFQUFFO1lBQ3JDLElBQUksQ0FBQyxhQUFhLENBQUMsY0FBYyxDQUFDLENBQUMsRUFBRSxNQUFNLENBQUMsQ0FBQztRQUMvQyxDQUFDLENBQUMsQ0FBQztRQUVILElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDLFlBQVksRUFBRSxDQUFDLENBQUMsRUFBRSxFQUFFO1lBQ3JDLElBQUksQ0FBQyxhQUFhLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3ZDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQzFCLENBQUM7Q0FDRixDQUFBOztZQWxDb0Msc0JBQXNCOztBQWpCdkM7SUFBakIsU0FBUyxDQUFDLEtBQUssQ0FBQztvREFBZ0I7QUFDSDtJQUE3QixZQUFZLENBQUMsY0FBYyxDQUFDOzhEQUFnQztBQUNuQztJQUF6QixTQUFTLENBQUMsYUFBYSxDQUFDOzZEQUF5QjtBQUd6QztJQUFSLEtBQUssRUFBRTt1REFBb0I7QUFDbkI7SUFBUixLQUFLLEVBQUU7MERBQWtCO0FBUGYsd0JBQXdCO0lBTnBDLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSxpQkFBaUI7UUFDM0IsK1RBQWdEOztLQUVqRCxDQUFDO0dBRVcsd0JBQXdCLENBb0RwQztTQXBEWSx3QkFBd0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIFZpZXdDaGlsZCwgSW5wdXQsIENvbnRlbnRDaGlsZCwgVGVtcGxhdGVSZWYsIE9uSW5pdCwgT25EZXN0cm95LCBBZnRlclZpZXdJbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE9QVElPTl9ERUZBVUxUIH0gZnJvbSAnLi4vY29uZmlnL2RlZmF1bHQnO1xyXG5pbXBvcnQgeyBGYW1pbHlIaWVyYXJjaHlTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZS9mYW1pbHktaGllcmFyY2h5LnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBGaENvbmZpZyB9IGZyb20gJy4uL21vZGVscy9tb2RlbHMnO1xyXG5pbXBvcnQgeyBEYXRhU2V0LCBOb2RlLCBFZGdlLCBOZXR3b3JrLCBEYXRhIH0gZnJvbSAndmlzLW5ldHdvcmsvc3RhbmRhbG9uZSc7XHJcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdGYW1pbHlIaWVyYXJjaHknLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9mYW1pbHktaGllcmFyY2h5LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9mYW1pbHktaGllcmFyY2h5LmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuXHJcbmV4cG9ydCBjbGFzcyBGYW1pbHlIaWVyYXJjaHlDb21wb25lbnQgaW1wbGVtZW50cyAgT25Jbml0LCBPbkRlc3Ryb3ksIEFmdGVyVmlld0luaXQge1xyXG4gIEBWaWV3Q2hpbGQoJ2JveCcpIGVsOiBFbGVtZW50UmVmO1xyXG4gIEBDb250ZW50Q2hpbGQoJ25vZGVUZW1wbGF0ZScpIG5vZGVUZW1wbGF0ZTogVGVtcGxhdGVSZWY8YW55PjtcclxuICBAVmlld0NoaWxkKCdjb250ZW50Tm9kZScpIGNvbnRlbnROb2RlOiBFbGVtZW50UmVmO1xyXG5cclxuXHJcbiAgQElucHV0KCkgY2xhc3M6IHN0cmluZyA9ICcnO1xyXG4gIEBJbnB1dCgpIGVkaXRNb2RlID0gZmFsc2U7XHJcblxyXG4gIGNvbmZpZzogRmhDb25maWc7XHJcbiAgZHNOb2RlOiBEYXRhU2V0PE5vZGU+O1xyXG4gIGRzRWRnZTogRGF0YVNldDxFZGdlPjtcclxuXHJcbiAgdmlzTmV0d29yazogTmV0d29yaztcclxuICB2aXNOZXR3b3JrRGF0YTogRGF0YTtcclxuXHJcbiAgc3VicyA9IG5ldyBTdWJzY3JpcHRpb24oKTtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBmYW1pbHlTZXJ2aWNlOiBGYW1pbHlIaWVyYXJjaHlTZXJ2aWNlKSB7IH1cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XHJcbiAgICBjb25zdCBpbml0ID0gdGhpcy5mYW1pbHlTZXJ2aWNlLl9pbml0XHJcbiAgICAgIC5zdWJzY3JpYmUoXHJcbiAgICAgICAgKGUpID0+IHtcclxuICAgICAgICAgIHRoaXMuY3JlYXRlTmV0d29yaygpO1xyXG4gICAgICAgIH1cclxuICAgICAgKTtcclxuICAgIHRoaXMuc3Vicy5hZGQoaW5pdCk7XHJcbiAgICB0aGlzLnN1YnMuYWRkKHRoaXMuZmFtaWx5U2VydmljZS5fY29uZmlnLnN1YnNjcmliZSgoY29uZmlnOiBGaENvbmZpZykgPT4gdGhpcy5jb25maWcgPSBjb25maWcpKTtcclxuICAgIHRoaXMuc3Vicy5hZGQodGhpcy5mYW1pbHlTZXJ2aWNlLkVkZ2VzLnN1YnNjcmliZSgoZWRnZXM6IERhdGFTZXQ8RWRnZT4pID0+IHRoaXMuZHNFZGdlID0gZWRnZXMpKTtcclxuICAgIHRoaXMuc3Vicy5hZGQodGhpcy5mYW1pbHlTZXJ2aWNlLk5vZGVzLnN1YnNjcmliZSgobm9kZXM6IERhdGFTZXQ8Tm9kZT4pID0+IHRoaXMuZHNOb2RlID0gbm9kZXMpKTtcclxuICB9XHJcblxyXG4gIGNyZWF0ZU5ldHdvcmsoKTogdm9pZCB7XHJcbiAgICB0aGlzLnZpc05ldHdvcmtEYXRhID0geyBub2RlczogdGhpcy5kc05vZGUgLCBlZGdlczogdGhpcy5kc0VkZ2V9O1xyXG4gICAgdGhpcy52aXNOZXR3b3JrID0gbmV3IE5ldHdvcmsodGhpcy5lbC5uYXRpdmVFbGVtZW50LCB0aGlzLnZpc05ldHdvcmtEYXRhLCBPUFRJT05fREVGQVVMVCk7XHJcblxyXG4gICAgdGhpcy52aXNOZXR3b3JrLm9uKCdzZWxlY3ROb2RlJywgKGUpID0+IHtcclxuICAgICAgdGhpcy5mYW1pbHlTZXJ2aWNlLnNlbmRDbGlja0V2ZW50KGUsICdub2RlJyk7XHJcbiAgICB9KTtcclxuXHJcbiAgICB0aGlzLnZpc05ldHdvcmsub24oJ3NlbGVjdEVkZ2UnLCAoZSkgPT4ge1xyXG4gICAgICB0aGlzLmZhbWlseVNlcnZpY2Uuc2VuZENsaWNrRXZlbnQoZSk7XHJcbiAgICB9KTtcclxuICB9XHJcblxyXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xyXG4gICAgdGhpcy5zdWJzLnVuc3Vic2NyaWJlKCk7XHJcbiAgfVxyXG59XHJcbiJdfQ==