ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
96 lines • 10.9 kB
JavaScript
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, NgZone } from '@angular/core';
import { take } from 'rxjs/operators';
import { curveBasis, curveLinear, line } from 'd3-shape';
import { NzGraphEdgeType } from './interface';
export class NzGraphEdgeComponent {
constructor(elementRef, ngZone, cdr) {
this.elementRef = elementRef;
this.ngZone = ngZone;
this.cdr = cdr;
this.line = line()
.x(d => d.x)
.y(d => d.y)
.curve(curveLinear);
this.el = this.elementRef.nativeElement;
}
get id() {
var _a;
return ((_a = this.edge) === null || _a === void 0 ? void 0 : _a.id) || `${this.edge.v}--${this.edge.w}`;
}
ngOnInit() {
this.initElementStyle();
}
ngOnChanges(changes) {
const { edge, customTemplate, edgeType } = changes;
if (edge) {
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
// Update path element if customTemplate set
if (customTemplate) {
this.initElementStyle();
}
this.setLine();
this.cdr.markForCheck();
});
}
if (edgeType) {
const type = this.edgeType === NzGraphEdgeType.LINE ? curveLinear : curveBasis;
this.line = line()
.x(d => d.x)
.y(d => d.y)
.curve(type);
}
}
initElementStyle() {
this.path = this.el.querySelector('path');
this.setElementData();
}
setLine() {
this.setPath(this.line(this.edge.points));
}
setPath(d) {
this.path.setAttribute('d', d);
}
setElementData() {
if (!this.path) {
return;
}
this.path.setAttribute('id', this.id);
this.path.setAttribute('data-edge', this.id);
this.path.setAttribute('data-v', `${this.edge.v}`);
this.path.setAttribute('data-w', `${this.edge.w}`);
}
}
NzGraphEdgeComponent.decorators = [
{ type: Component, args: [{
selector: '[nz-graph-edge]',
template: `
<ng-container
*ngIf="customTemplate"
[ngTemplateOutlet]="customTemplate"
[ngTemplateOutletContext]="{ $implicit: edge }"
></ng-container>
<svg:g *ngIf="!customTemplate">
<path class="nz-graph-edge-line" [attr.marker-end]="'url(#edge-end-arrow)'"></path>
<svg:text class="nz-graph-edge-text" text-anchor="middle" dy="10" *ngIf="edge.label">
<textPath [attr.href]="'#' + id" startOffset="50%">{{ edge.label }}</textPath>
</svg:text>
</svg:g>
`,
changeDetection: ChangeDetectionStrategy.OnPush
},] }
];
NzGraphEdgeComponent.ctorParameters = () => [
{ type: ElementRef },
{ type: NgZone },
{ type: ChangeDetectorRef }
];
NzGraphEdgeComponent.propDecorators = {
edge: [{ type: Input }],
edgeType: [{ type: Input }],
customTemplate: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JhcGgtZWRnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2dyYXBoL2dyYXBoLWVkZ2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7R0FHRztBQUVILE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsS0FBSyxFQUNMLE1BQU0sRUFLUCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFdEMsT0FBTyxFQUFFLFVBQVUsRUFBRSxXQUFXLEVBQUUsSUFBSSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBRXpELE9BQU8sRUFBZSxlQUFlLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFtQjNELE1BQU0sT0FBTyxvQkFBb0I7SUFtQi9CLFlBQW9CLFVBQW1DLEVBQVUsTUFBYyxFQUFVLEdBQXNCO1FBQTNGLGVBQVUsR0FBVixVQUFVLENBQXlCO1FBQVUsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQUFVLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBTHZHLFNBQUksR0FBRyxJQUFJLEVBQTRCO2FBQzVDLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7YUFDWCxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO2FBQ1gsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBR3BCLElBQUksQ0FBQyxFQUFFLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUM7SUFDMUMsQ0FBQztJQWJELElBQVcsRUFBRTs7UUFDWCxPQUFPLENBQUEsTUFBQSxJQUFJLENBQUMsSUFBSSwwQ0FBRSxFQUFFLEtBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsS0FBSyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBRSxDQUFDO0lBQzNELENBQUM7SUFhRCxRQUFRO1FBQ04sSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxNQUFNLEVBQUUsSUFBSSxFQUFFLGNBQWMsRUFBRSxRQUFRLEVBQUUsR0FBRyxPQUFPLENBQUM7UUFDbkQsSUFBSSxJQUFJLEVBQUU7WUFDUixJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLEdBQUcsRUFBRTtnQkFDaEQsNENBQTRDO2dCQUM1QyxJQUFJLGNBQWMsRUFBRTtvQkFDbEIsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7aUJBQ3pCO2dCQUVELElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztnQkFDZixJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO1lBQzFCLENBQUMsQ0FBQyxDQUFDO1NBQ0o7UUFDRCxJQUFJLFFBQVEsRUFBRTtZQUNaLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxRQUFRLEtBQUssZUFBZSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUM7WUFDL0UsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLEVBQTRCO2lCQUN6QyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO2lCQUNYLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7aUJBQ1gsS0FBSyxDQUFDLElBQUksQ0FBQyxDQUFDO1NBQ2hCO0lBQ0gsQ0FBQztJQUVELGdCQUFnQjtRQUNkLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFFLENBQUM7UUFDM0MsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO0lBQ3hCLENBQUM7SUFFRCxPQUFPO1FBQ0wsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFFLENBQUMsQ0FBQztJQUM3QyxDQUFDO0lBRUQsT0FBTyxDQUFDLENBQVM7UUFDZixJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDakMsQ0FBQztJQUVELGNBQWM7UUFDWixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRTtZQUNkLE9BQU87U0FDUjtRQUNELElBQUksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDdEMsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxFQUFFLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQztRQUM3QyxJQUFJLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxRQUFRLEVBQUUsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDbkQsSUFBSSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsUUFBUSxFQUFFLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ3JELENBQUM7OztZQXZGRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtnQkFDM0IsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7R0FZVDtnQkFDRCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTthQUNoRDs7O1lBOUJDLFVBQVU7WUFFVixNQUFNO1lBSk4saUJBQWlCOzs7bUJBa0NoQixLQUFLO3VCQUNMLEtBQUs7NkJBRUwsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9naXRodWIuY29tL05HLVpPUlJPL25nLXpvcnJvLWFudGQvYmxvYi9tYXN0ZXIvTElDRU5TRVxuICovXG5cbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgTmdab25lLFxuICBPbkNoYW5nZXMsXG4gIE9uSW5pdCxcbiAgU2ltcGxlQ2hhbmdlcyxcbiAgVGVtcGxhdGVSZWZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyB0YWtlIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5pbXBvcnQgeyBjdXJ2ZUJhc2lzLCBjdXJ2ZUxpbmVhciwgbGluZSB9IGZyb20gJ2QzLXNoYXBlJztcblxuaW1wb3J0IHsgTnpHcmFwaEVkZ2UsIE56R3JhcGhFZGdlVHlwZSB9IGZyb20gJy4vaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnW256LWdyYXBoLWVkZ2VdJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8bmctY29udGFpbmVyXG4gICAgICAqbmdJZj1cImN1c3RvbVRlbXBsYXRlXCJcbiAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImN1c3RvbVRlbXBsYXRlXCJcbiAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbXBsaWNpdDogZWRnZSB9XCJcbiAgICA+PC9uZy1jb250YWluZXI+XG4gICAgPHN2ZzpnICpuZ0lmPVwiIWN1c3RvbVRlbXBsYXRlXCI+XG4gICAgICA8cGF0aCBjbGFzcz1cIm56LWdyYXBoLWVkZ2UtbGluZVwiIFthdHRyLm1hcmtlci1lbmRdPVwiJ3VybCgjZWRnZS1lbmQtYXJyb3cpJ1wiPjwvcGF0aD5cbiAgICAgIDxzdmc6dGV4dCBjbGFzcz1cIm56LWdyYXBoLWVkZ2UtdGV4dFwiIHRleHQtYW5jaG9yPVwibWlkZGxlXCIgZHk9XCIxMFwiICpuZ0lmPVwiZWRnZS5sYWJlbFwiPlxuICAgICAgICA8dGV4dFBhdGggW2F0dHIuaHJlZl09XCInIycgKyBpZFwiIHN0YXJ0T2Zmc2V0PVwiNTAlXCI+e3sgZWRnZS5sYWJlbCB9fTwvdGV4dFBhdGg+XG4gICAgICA8L3N2Zzp0ZXh0PlxuICAgIDwvc3ZnOmc+XG4gIGAsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoXG59KVxuZXhwb3J0IGNsYXNzIE56R3JhcGhFZGdlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBlZGdlITogTnpHcmFwaEVkZ2U7XG4gIEBJbnB1dCgpIGVkZ2VUeXBlPzogTnpHcmFwaEVkZ2VUeXBlIHwgc3RyaW5nO1xuXG4gIEBJbnB1dCgpIGN1c3RvbVRlbXBsYXRlPzogVGVtcGxhdGVSZWY8e1xuICAgICRpbXBsaWNpdDogTnpHcmFwaEVkZ2U7XG4gIH0+O1xuXG4gIHB1YmxpYyBnZXQgaWQoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5lZGdlPy5pZCB8fCBgJHt0aGlzLmVkZ2Uudn0tLSR7dGhpcy5lZGdlLnd9YDtcbiAgfVxuICBwcml2YXRlIGVsITogU1ZHR0VsZW1lbnQ7XG4gIHByaXZhdGUgcGF0aCE6IFNWR1BhdGhFbGVtZW50O1xuXG4gIHByaXZhdGUgbGluZSA9IGxpbmU8eyB4OiBudW1iZXI7IHk6IG51bWJlciB9PigpXG4gICAgLngoZCA9PiBkLngpXG4gICAgLnkoZCA9PiBkLnkpXG4gICAgLmN1cnZlKGN1cnZlTGluZWFyKTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8U1ZHR0VsZW1lbnQ+LCBwcml2YXRlIG5nWm9uZTogTmdab25lLCBwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWYpIHtcbiAgICB0aGlzLmVsID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmluaXRFbGVtZW50U3R5bGUoKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBjb25zdCB7IGVkZ2UsIGN1c3RvbVRlbXBsYXRlLCBlZGdlVHlwZSB9ID0gY2hhbmdlcztcbiAgICBpZiAoZWRnZSkge1xuICAgICAgdGhpcy5uZ1pvbmUub25TdGFibGUucGlwZSh0YWtlKDEpKS5zdWJzY3JpYmUoKCkgPT4ge1xuICAgICAgICAvLyBVcGRhdGUgcGF0aCBlbGVtZW50IGlmIGN1c3RvbVRlbXBsYXRlIHNldFxuICAgICAgICBpZiAoY3VzdG9tVGVtcGxhdGUpIHtcbiAgICAgICAgICB0aGlzLmluaXRFbGVtZW50U3R5bGUoKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHRoaXMuc2V0TGluZSgpO1xuICAgICAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgICAgIH0pO1xuICAgIH1cbiAgICBpZiAoZWRnZVR5cGUpIHtcbiAgICAgIGNvbnN0IHR5cGUgPSB0aGlzLmVkZ2VUeXBlID09PSBOekdyYXBoRWRnZVR5cGUuTElORSA/IGN1cnZlTGluZWFyIDogY3VydmVCYXNpcztcbiAgICAgIHRoaXMubGluZSA9IGxpbmU8eyB4OiBudW1iZXI7IHk6IG51bWJlciB9PigpXG4gICAgICAgIC54KGQgPT4gZC54KVxuICAgICAgICAueShkID0+IGQueSlcbiAgICAgICAgLmN1cnZlKHR5cGUpO1xuICAgIH1cbiAgfVxuXG4gIGluaXRFbGVtZW50U3R5bGUoKTogdm9pZCB7XG4gICAgdGhpcy5wYXRoID0gdGhpcy5lbC5xdWVyeVNlbGVjdG9yKCdwYXRoJykhO1xuICAgIHRoaXMuc2V0RWxlbWVudERhdGEoKTtcbiAgfVxuXG4gIHNldExpbmUoKTogdm9pZCB7XG4gICAgdGhpcy5zZXRQYXRoKHRoaXMubGluZSh0aGlzLmVkZ2UucG9pbnRzKSEpO1xuICB9XG5cbiAgc2V0UGF0aChkOiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLnBhdGguc2V0QXR0cmlidXRlKCdkJywgZCk7XG4gIH1cblxuICBzZXRFbGVtZW50RGF0YSgpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMucGF0aCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLnBhdGguc2V0QXR0cmlidXRlKCdpZCcsIHRoaXMuaWQpO1xuICAgIHRoaXMucGF0aC5zZXRBdHRyaWJ1dGUoJ2RhdGEtZWRnZScsIHRoaXMuaWQpO1xuICAgIHRoaXMucGF0aC5zZXRBdHRyaWJ1dGUoJ2RhdGEtdicsIGAke3RoaXMuZWRnZS52fWApO1xuICAgIHRoaXMucGF0aC5zZXRBdHRyaWJ1dGUoJ2RhdGEtdycsIGAke3RoaXMuZWRnZS53fWApO1xuICB9XG59XG4iXX0=