family-hierarchy/esm5/lib/component/family-hierarchy.component.js

A small library for **Angular 9+** that implements [vis-network](https://github.com/visjs/vis-network) to generate a hierarchy chart of a family.

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';
var FamilyHierarchyComponent = /** @class */ (function () {
    function FamilyHierarchyComponent(familyService) {
        this.familyService = familyService;
        this.class = '';
        this.editMode = false;
        this.subs = new Subscription();
    }
    FamilyHierarchyComponent.prototype.ngOnInit = function () {
    };
    FamilyHierarchyComponent.prototype.ngAfterViewInit = function () {
        var _this = this;
        var init = this.familyService._init
            .subscribe(function (e) {
            _this.createNetwork();
        });
        this.subs.add(init);
        this.subs.add(this.familyService._config.subscribe(function (config) { return _this.config = config; }));
        this.subs.add(this.familyService.Edges.subscribe(function (edges) { return _this.dsEdge = edges; }));
        this.subs.add(this.familyService.Nodes.subscribe(function (nodes) { return _this.dsNode = nodes; }));
    };
    FamilyHierarchyComponent.prototype.createNetwork = function () {
        var _this = this;
        this.visNetworkData = { nodes: this.dsNode, edges: this.dsEdge };
        this.visNetwork = new Network(this.el.nativeElement, this.visNetworkData, OPTION_DEFAULT);
        this.visNetwork.on('selectNode', function (e) {
            _this.familyService.sendClickEvent(e, 'node');
        });
        this.visNetwork.on('selectEdge', function (e) {
            _this.familyService.sendClickEvent(e);
        });
    };
    FamilyHierarchyComponent.prototype.ngOnDestroy = function () {
        this.subs.unsubscribe();
    };
    FamilyHierarchyComponent.ctorParameters = function () { return [
        { 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);
    return FamilyHierarchyComponent;
}());
export { FamilyHierarchyComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFtaWx5LWhpZXJhcmNoeS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9mYW1pbHktaGllcmFyY2h5LyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudC9mYW1pbHktaGllcmFyY2h5LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxTQUFTLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBaUQsTUFBTSxlQUFlLENBQUM7QUFDckksT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBRTdFLE9BQU8sRUFBdUIsT0FBTyxFQUFRLE1BQU0sd0JBQXdCLENBQUM7QUFDNUUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLE1BQU0sQ0FBQztBQVFwQztJQWtCRSxrQ0FBb0IsYUFBcUM7UUFBckMsa0JBQWEsR0FBYixhQUFhLENBQXdCO1FBWmhELFVBQUssR0FBVyxFQUFFLENBQUM7UUFDbkIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQVMxQixTQUFJLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztJQUVtQyxDQUFDO0lBRTlELDJDQUFRLEdBQVI7SUFDQSxDQUFDO0lBRUQsa0RBQWUsR0FBZjtRQUFBLGlCQVdDO1FBVkMsSUFBTSxJQUFJLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLO2FBQ2xDLFNBQVMsQ0FDUixVQUFDLENBQUM7WUFDQSxLQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDdkIsQ0FBQyxDQUNGLENBQUM7UUFDSixJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNwQixJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsVUFBQyxNQUFnQixJQUFLLE9BQUEsS0FBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLEVBQXBCLENBQW9CLENBQUMsQ0FBQyxDQUFDO1FBQ2hHLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxVQUFDLEtBQW9CLElBQUssT0FBQSxLQUFJLENBQUMsTUFBTSxHQUFHLEtBQUssRUFBbkIsQ0FBbUIsQ0FBQyxDQUFDLENBQUM7UUFDakcsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLFVBQUMsS0FBb0IsSUFBSyxPQUFBLEtBQUksQ0FBQyxNQUFNLEdBQUcsS0FBSyxFQUFuQixDQUFtQixDQUFDLENBQUMsQ0FBQztJQUNuRyxDQUFDO0lBRUQsZ0RBQWEsR0FBYjtRQUFBLGlCQVdDO1FBVkMsSUFBSSxDQUFDLGNBQWMsR0FBRyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFHLEtBQUssRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFDLENBQUM7UUFDakUsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLE9BQU8sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxJQUFJLENBQUMsY0FBYyxFQUFFLGNBQWMsQ0FBQyxDQUFDO1FBRTFGLElBQUksQ0FBQyxVQUFVLENBQUMsRUFBRSxDQUFDLFlBQVksRUFBRSxVQUFDLENBQUM7WUFDakMsS0FBSSxDQUFDLGFBQWEsQ0FBQyxjQUFjLENBQUMsQ0FBQyxFQUFFLE1BQU0sQ0FBQyxDQUFDO1FBQy9DLENBQUMsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLFVBQVUsQ0FBQyxFQUFFLENBQUMsWUFBWSxFQUFFLFVBQUMsQ0FBQztZQUNqQyxLQUFJLENBQUMsYUFBYSxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUN2QyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCw4Q0FBVyxHQUFYO1FBQ0UsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUMxQixDQUFDOztnQkFqQ2tDLHNCQUFzQjs7SUFqQnZDO1FBQWpCLFNBQVMsQ0FBQyxLQUFLLENBQUM7d0RBQWdCO0lBQ0g7UUFBN0IsWUFBWSxDQUFDLGNBQWMsQ0FBQztrRUFBZ0M7SUFDbkM7UUFBekIsU0FBUyxDQUFDLGFBQWEsQ0FBQztpRUFBeUI7SUFHekM7UUFBUixLQUFLLEVBQUU7MkRBQW9CO0lBQ25CO1FBQVIsS0FBSyxFQUFFOzhEQUFrQjtJQVBmLHdCQUF3QjtRQU5wQyxTQUFTLENBQUM7WUFDVCxRQUFRLEVBQUUsaUJBQWlCO1lBQzNCLCtUQUFnRDs7U0FFakQsQ0FBQztPQUVXLHdCQUF3QixDQW9EcEM7SUFBRCwrQkFBQztDQUFBLEFBcERELElBb0RDO1NBcERZLHdCQUF3QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgVmlld0NoaWxkLCBJbnB1dCwgQ29udGVudENoaWxkLCBUZW1wbGF0ZVJlZiwgT25Jbml0LCBPbkRlc3Ryb3ksIEFmdGVyVmlld0luaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgT1BUSU9OX0RFRkFVTFQgfSBmcm9tICcuLi9jb25maWcvZGVmYXVsdCc7XHJcbmltcG9ydCB7IEZhbWlseUhpZXJhcmNoeVNlcnZpY2UgfSBmcm9tICcuLi9zZXJ2aWNlL2ZhbWlseS1oaWVyYXJjaHkuc2VydmljZSc7XHJcbmltcG9ydCB7IEZoQ29uZmlnIH0gZnJvbSAnLi4vbW9kZWxzL21vZGVscyc7XHJcbmltcG9ydCB7IERhdGFTZXQsIE5vZGUsIEVkZ2UsIE5ldHdvcmssIERhdGEgfSBmcm9tICd2aXMtbmV0d29yay9zdGFuZGFsb25lJztcclxuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ0ZhbWlseUhpZXJhcmNoeScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2ZhbWlseS1oaWVyYXJjaHkuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2ZhbWlseS1oaWVyYXJjaHkuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5cclxuZXhwb3J0IGNsYXNzIEZhbWlseUhpZXJhcmNoeUNvbXBvbmVudCBpbXBsZW1lbnRzICBPbkluaXQsIE9uRGVzdHJveSwgQWZ0ZXJWaWV3SW5pdCB7XHJcbiAgQFZpZXdDaGlsZCgnYm94JykgZWw6IEVsZW1lbnRSZWY7XHJcbiAgQENvbnRlbnRDaGlsZCgnbm9kZVRlbXBsYXRlJykgbm9kZVRlbXBsYXRlOiBUZW1wbGF0ZVJlZjxhbnk+O1xyXG4gIEBWaWV3Q2hpbGQoJ2NvbnRlbnROb2RlJykgY29udGVudE5vZGU6IEVsZW1lbnRSZWY7XHJcblxyXG5cclxuICBASW5wdXQoKSBjbGFzczogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KCkgZWRpdE1vZGUgPSBmYWxzZTtcclxuXHJcbiAgY29uZmlnOiBGaENvbmZpZztcclxuICBkc05vZGU6IERhdGFTZXQ8Tm9kZT47XHJcbiAgZHNFZGdlOiBEYXRhU2V0PEVkZ2U+O1xyXG5cclxuICB2aXNOZXR3b3JrOiBOZXR3b3JrO1xyXG4gIHZpc05ldHdvcmtEYXRhOiBEYXRhO1xyXG5cclxuICBzdWJzID0gbmV3IFN1YnNjcmlwdGlvbigpO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGZhbWlseVNlcnZpY2U6IEZhbWlseUhpZXJhcmNoeVNlcnZpY2UpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICB9XHJcblxyXG4gIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcclxuICAgIGNvbnN0IGluaXQgPSB0aGlzLmZhbWlseVNlcnZpY2UuX2luaXRcclxuICAgICAgLnN1YnNjcmliZShcclxuICAgICAgICAoZSkgPT4ge1xyXG4gICAgICAgICAgdGhpcy5jcmVhdGVOZXR3b3JrKCk7XHJcbiAgICAgICAgfVxyXG4gICAgICApO1xyXG4gICAgdGhpcy5zdWJzLmFkZChpbml0KTtcclxuICAgIHRoaXMuc3Vicy5hZGQodGhpcy5mYW1pbHlTZXJ2aWNlLl9jb25maWcuc3Vic2NyaWJlKChjb25maWc6IEZoQ29uZmlnKSA9PiB0aGlzLmNvbmZpZyA9IGNvbmZpZykpO1xyXG4gICAgdGhpcy5zdWJzLmFkZCh0aGlzLmZhbWlseVNlcnZpY2UuRWRnZXMuc3Vic2NyaWJlKChlZGdlczogRGF0YVNldDxFZGdlPikgPT4gdGhpcy5kc0VkZ2UgPSBlZGdlcykpO1xyXG4gICAgdGhpcy5zdWJzLmFkZCh0aGlzLmZhbWlseVNlcnZpY2UuTm9kZXMuc3Vic2NyaWJlKChub2RlczogRGF0YVNldDxOb2RlPikgPT4gdGhpcy5kc05vZGUgPSBub2RlcykpO1xyXG4gIH1cclxuXHJcbiAgY3JlYXRlTmV0d29yaygpOiB2b2lkIHtcclxuICAgIHRoaXMudmlzTmV0d29ya0RhdGEgPSB7IG5vZGVzOiB0aGlzLmRzTm9kZSAsIGVkZ2VzOiB0aGlzLmRzRWRnZX07XHJcbiAgICB0aGlzLnZpc05ldHdvcmsgPSBuZXcgTmV0d29yayh0aGlzLmVsLm5hdGl2ZUVsZW1lbnQsIHRoaXMudmlzTmV0d29ya0RhdGEsIE9QVElPTl9ERUZBVUxUKTtcclxuXHJcbiAgICB0aGlzLnZpc05ldHdvcmsub24oJ3NlbGVjdE5vZGUnLCAoZSkgPT4ge1xyXG4gICAgICB0aGlzLmZhbWlseVNlcnZpY2Uuc2VuZENsaWNrRXZlbnQoZSwgJ25vZGUnKTtcclxuICAgIH0pO1xyXG5cclxuICAgIHRoaXMudmlzTmV0d29yay5vbignc2VsZWN0RWRnZScsIChlKSA9PiB7XHJcbiAgICAgIHRoaXMuZmFtaWx5U2VydmljZS5zZW5kQ2xpY2tFdmVudChlKTtcclxuICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XHJcbiAgICB0aGlzLnN1YnMudW5zdWJzY3JpYmUoKTtcclxuICB9XHJcbn1cclxuIl19