ngx-diagrams
Version:
> Light Weight, Modular, Typed Diagram Engine for Angular
42 lines • 6.21 kB
JavaScript
import { ChangeDetectionStrategy, Component, ViewChild, ViewContainerRef } from '@angular/core';
import { filter, switchMap } from 'rxjs/operators';
import { DefaultNodeModel } from '../../models/default-node.model';
export class DefaultNodeComponent extends DefaultNodeModel {
constructor() {
super({ type: 'ngdx-default-node' });
}
ngOnInit() {
// when node is painted and port isn't, draw ports
this.paintChanges()
.pipe(filter((paintedE) => paintedE.isPainted), switchMap(() => this.selectPorts()))
.subscribe((ports) => {
ports.forEach((port) => {
if (!port.getPainted()) {
this.generatePort(port);
}
});
});
}
generatePort(port) {
const diagramEngine = this.getDiagramEngine();
diagramEngine.generateWidgetForPort(port, this.portsLayer);
port.paintChanges().subscribe((paintedEvent) => {
if (paintedEvent.isPainted) {
port.updateCoords(diagramEngine.getPortCoords(port));
}
});
}
}
DefaultNodeComponent.decorators = [
{ type: Component, args: [{
selector: 'ngdx-default-node',
template: "<div\n class=\"default-node\"\n [ngStyle]=\"{\n 'height.px': height$ | async,\n 'width.px': width$ | async,\n 'background-color': color\n }\"\n>\n <div class=\"ports\">\n <ng-template #portsLayer></ng-template>\n </div>\n</div>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [":host.selected .default-node{background-color:#fff!important;border-color:#00f}:host .default-node{border-radius:10px;cursor:auto;pointer-events:all;transition:all .3s ease-in-out;width:100%}:host .default-node .title{border-bottom:1px solid #00f;padding:10px;text-align:center}:host .ports{display:flex;flex-direction:column;flex-grow:1}"]
},] }
];
DefaultNodeComponent.ctorParameters = () => [];
DefaultNodeComponent.propDecorators = {
portsLayer: [{ type: ViewChild, args: ['portsLayer', { read: ViewContainerRef, static: true },] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi9saWJzL25neC1kaWFncmFtcy9zcmMvIiwic291cmNlcyI6WyJsaWIvZGVmYXVsdHMvY29tcG9uZW50cy9kZWZhdWx0LW5vZGUvZGVmYXVsdC1ub2RlLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFVLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN4RyxPQUFPLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRW5ELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBUW5FLE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxnQkFBZ0I7SUFJeEQ7UUFDRSxLQUFLLENBQUMsRUFBRSxJQUFJLEVBQUUsbUJBQW1CLEVBQUUsQ0FBQyxDQUFDO0lBQ3ZDLENBQUM7SUFFRCxRQUFRO1FBQ04sa0RBQWtEO1FBRWxELElBQUksQ0FBQyxZQUFZLEVBQUU7YUFDaEIsSUFBSSxDQUNILE1BQU0sQ0FBQyxDQUFDLFFBQVEsRUFBRSxFQUFFLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxFQUN4QyxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQ3BDO2FBQ0EsU0FBUyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7WUFDbkIsS0FBSyxDQUFDLE9BQU8sQ0FBQyxDQUFDLElBQXNCLEVBQUUsRUFBRTtnQkFDdkMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsRUFBRTtvQkFDdEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsQ0FBQztpQkFDekI7WUFDSCxDQUFDLENBQUMsQ0FBQztRQUNMLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELFlBQVksQ0FBQyxJQUFzQjtRQUNqQyxNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztRQUM5QyxhQUFhLENBQUMscUJBQXFCLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUUzRCxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsU0FBUyxDQUFDLENBQUMsWUFBWSxFQUFFLEVBQUU7WUFDN0MsSUFBSSxZQUFZLENBQUMsU0FBUyxFQUFFO2dCQUMxQixJQUFJLENBQUMsWUFBWSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQzthQUN0RDtRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs7O1lBeENGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsbUJBQW1CO2dCQUM3QixrUUFBNEM7Z0JBRTVDLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNOzthQUNoRDs7Ozt5QkFFRSxTQUFTLFNBQUMsWUFBWSxFQUFFLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBPbkluaXQsIFZpZXdDaGlsZCwgVmlld0NvbnRhaW5lclJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgZmlsdGVyLCBzd2l0Y2hNYXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBEZWZhdWx0UG9ydE1vZGVsIH0gZnJvbSAnLi4vLi4vbW9kZWxzJztcbmltcG9ydCB7IERlZmF1bHROb2RlTW9kZWwgfSBmcm9tICcuLi8uLi9tb2RlbHMvZGVmYXVsdC1ub2RlLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbmdkeC1kZWZhdWx0LW5vZGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGVmYXVsdC1ub2RlLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIERlZmF1bHROb2RlQ29tcG9uZW50IGV4dGVuZHMgRGVmYXVsdE5vZGVNb2RlbCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBWaWV3Q2hpbGQoJ3BvcnRzTGF5ZXInLCB7IHJlYWQ6IFZpZXdDb250YWluZXJSZWYsIHN0YXRpYzogdHJ1ZSB9KVxuICBwb3J0c0xheWVyOiBWaWV3Q29udGFpbmVyUmVmO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKHsgdHlwZTogJ25nZHgtZGVmYXVsdC1ub2RlJyB9KTtcbiAgfVxuXG4gIG5nT25Jbml0KCkge1xuICAgIC8vIHdoZW4gbm9kZSBpcyBwYWludGVkIGFuZCBwb3J0IGlzbid0LCBkcmF3IHBvcnRzXG5cbiAgICB0aGlzLnBhaW50Q2hhbmdlcygpXG4gICAgICAucGlwZShcbiAgICAgICAgZmlsdGVyKChwYWludGVkRSkgPT4gcGFpbnRlZEUuaXNQYWludGVkKSxcbiAgICAgICAgc3dpdGNoTWFwKCgpID0+IHRoaXMuc2VsZWN0UG9ydHMoKSlcbiAgICAgIClcbiAgICAgIC5zdWJzY3JpYmUoKHBvcnRzKSA9PiB7XG4gICAgICAgIHBvcnRzLmZvckVhY2goKHBvcnQ6IERlZmF1bHRQb3J0TW9kZWwpID0+IHtcbiAgICAgICAgICBpZiAoIXBvcnQuZ2V0UGFpbnRlZCgpKSB7XG4gICAgICAgICAgICB0aGlzLmdlbmVyYXRlUG9ydChwb3J0KTtcbiAgICAgICAgICB9XG4gICAgICAgIH0pO1xuICAgICAgfSk7XG4gIH1cblxuICBnZW5lcmF0ZVBvcnQocG9ydDogRGVmYXVsdFBvcnRNb2RlbCkge1xuICAgIGNvbnN0IGRpYWdyYW1FbmdpbmUgPSB0aGlzLmdldERpYWdyYW1FbmdpbmUoKTtcbiAgICBkaWFncmFtRW5naW5lLmdlbmVyYXRlV2lkZ2V0Rm9yUG9ydChwb3J0LCB0aGlzLnBvcnRzTGF5ZXIpO1xuXG4gICAgcG9ydC5wYWludENoYW5nZXMoKS5zdWJzY3JpYmUoKHBhaW50ZWRFdmVudCkgPT4ge1xuICAgICAgaWYgKHBhaW50ZWRFdmVudC5pc1BhaW50ZWQpIHtcbiAgICAgICAgcG9ydC51cGRhdGVDb29yZHMoZGlhZ3JhbUVuZ2luZS5nZXRQb3J0Q29vcmRzKHBvcnQpKTtcbiAgICAgIH1cbiAgICB9KTtcbiAgfVxuXG4gIC8vIGh0dHBzOi8vZ2l0aHViLmNvbS9wcm9qZWN0c3Rvcm0vcmVhY3QtZGlhZ3JhbXMvYmxvYi9tYXN0ZXIvc3JjL2RlZmF1bHRzL21vZGVscy9EZWZhdWx0Tm9kZU1vZGVsLnRzXG59XG4iXX0=