ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
111 lines • 12.8 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 { NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, Injector, Input, afterNextRender, inject } from '@angular/core';
import { curveBasis, curveLinear, line } from 'd3-shape';
import { NzGraphEdgeType } from './interface';
import * as i0 from "@angular/core";
export class NzGraphEdgeComponent {
get id() {
return this.edge?.id || `${this.edge.v}--${this.edge.w}`;
}
constructor(elementRef, cdr) {
this.elementRef = elementRef;
this.cdr = cdr;
this.line = line()
.x(d => d.x)
.y(d => d.y)
.curve(curveLinear);
this.injector = inject(Injector);
this.el = this.elementRef.nativeElement;
}
ngOnInit() {
this.initElementStyle();
}
ngOnChanges(changes) {
const { edge, customTemplate, edgeType } = changes;
if (edge) {
afterNextRender(() => {
// Update path element if customTemplate set
if (customTemplate) {
this.initElementStyle();
}
this.setLine();
this.cdr.markForCheck();
}, { injector: this.injector });
}
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}`);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzGraphEdgeComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: NzGraphEdgeComponent, isStandalone: true, selector: "[nz-graph-edge]", inputs: { edge: "edge", edgeType: "edgeType", customTemplate: "customTemplate" }, usesOnChanges: true, ngImport: i0, template: `
(customTemplate) {
<ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{ $implicit: edge }" />
} {
<svg:g>
<path class="nz-graph-edge-line" [attr.marker-end]="'url(#edge-end-arrow)'"></path>
(edge.label) {
<svg:text class="nz-graph-edge-text" text-anchor="middle" dy="10">
<textPath [attr.href]="'#' + id" startOffset="50%">{{ edge.label }}</textPath>
</svg:text>
}
</svg:g>
}
`, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzGraphEdgeComponent, decorators: [{
type: Component,
args: [{
selector: '[nz-graph-edge]',
template: `
(customTemplate) {
<ng-container [ngTemplateOutlet]="customTemplate" [ngTemplateOutletContext]="{ $implicit: edge }" />
} {
<svg:g>
<path class="nz-graph-edge-line" [attr.marker-end]="'url(#edge-end-arrow)'"></path>
(edge.label) {
<svg:text class="nz-graph-edge-text" text-anchor="middle" dy="10">
<textPath [attr.href]="'#' + id" startOffset="50%">{{ edge.label }}</textPath>
</svg:text>
}
</svg:g>
}
`,
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [NgTemplateOutlet],
standalone: true
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { edge: [{
type: Input
}], edgeType: [{
type: Input
}], customTemplate: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JhcGgtZWRnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2dyYXBoL2dyYXBoLWVkZ2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7R0FHRztBQUVILE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ25ELE9BQU8sRUFDTCx1QkFBdUIsRUFFdkIsU0FBUyxFQUVULFFBQVEsRUFDUixLQUFLLEVBS0wsZUFBZSxFQUNmLE1BQU0sRUFDUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxJQUFJLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFFekQsT0FBTyxFQUFlLGVBQWUsRUFBRSxNQUFNLGFBQWEsQ0FBQzs7QUFzQjNELE1BQU0sT0FBTyxvQkFBb0I7SUFRL0IsSUFBVyxFQUFFO1FBQ1gsT0FBTyxJQUFJLENBQUMsSUFBSSxFQUFFLEVBQUUsSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxLQUFLLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxFQUFFLENBQUM7SUFDM0QsQ0FBQztJQVdELFlBQ1UsVUFBbUMsRUFDbkMsR0FBc0I7UUFEdEIsZUFBVSxHQUFWLFVBQVUsQ0FBeUI7UUFDbkMsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFUeEIsU0FBSSxHQUFHLElBQUksRUFBNEI7YUFDNUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQzthQUNYLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7YUFDWCxLQUFLLENBQUMsV0FBVyxDQUFDLENBQUM7UUFFZCxhQUFRLEdBQUcsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBTWxDLElBQUksQ0FBQyxFQUFFLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxh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dEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogVXNlIG9mIHRoaXMgc291cmNlIGNvZGUgaXMgZ292ZXJuZWQgYnkgYW4gTUlULXN0eWxlIGxpY2Vuc2UgdGhhdCBjYW4gYmVcbiAqIGZvdW5kIGluIHRoZSBMSUNFTlNFIGZpbGUgYXQgaHR0cHM6Ly9naXRodWIuY29tL05HLVpPUlJPL25nLXpvcnJvLWFudGQvYmxvYi9tYXN0ZXIvTElDRU5TRVxuICovXG5cbmltcG9ydCB7IE5nVGVtcGxhdGVPdXRsZXQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIEVsZW1lbnRSZWYsXG4gIEluamVjdG9yLFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBPbkluaXQsXG4gIFNpbXBsZUNoYW5nZXMsXG4gIFRlbXBsYXRlUmVmLFxuICBhZnRlck5leHRSZW5kZXIsXG4gIGluamVjdFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgY3VydmVCYXNpcywgY3VydmVMaW5lYXIsIGxpbmUgfSBmcm9tICdkMy1zaGFwZSc7XG5cbmltcG9ydCB7IE56R3JhcGhFZGdlLCBOekdyYXBoRWRnZVR5cGUgfSBmcm9tICcuL2ludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ1tuei1ncmFwaC1lZGdlXScsXG4gIHRlbXBsYXRlOiBgXG4gICAgQGlmIChjdXN0b21UZW1wbGF0ZSkge1xuICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJjdXN0b21UZW1wbGF0ZVwiIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbXBsaWNpdDogZWRnZSB9XCIgLz5cbiAgICB9IEBlbHNlIHtcbiAgICAgIDxzdmc6Zz5cbiAgICAgICAgPHBhdGggY2xhc3M9XCJuei1ncmFwaC1lZGdlLWxpbmVcIiBbYXR0ci5tYXJrZXItZW5kXT1cIid1cmwoI2VkZ2UtZW5kLWFycm93KSdcIj48L3BhdGg+XG4gICAgICAgIEBpZiAoZWRnZS5sYWJlbCkge1xuICAgICAgICAgIDxzdmc6dGV4dCBjbGFzcz1cIm56LWdyYXBoLWVkZ2UtdGV4dFwiIHRleHQtYW5jaG9yPVwibWlkZGxlXCIgZHk9XCIxMFwiPlxuICAgICAgICAgICAgPHRleHRQYXRoIFthdHRyLmhyZWZdPVwiJyMnICsgaWRcIiBzdGFydE9mZnNldD1cIjUwJVwiPnt7IGVkZ2UubGFiZWwgfX08L3RleHRQYXRoPlxuICAgICAgICAgIDwvc3ZnOnRleHQ+XG4gICAgICAgIH1cbiAgICAgIDwvc3ZnOmc+XG4gICAgfVxuICBgLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaW1wb3J0czogW05nVGVtcGxhdGVPdXRsZXRdLFxuICBzdGFuZGFsb25lOiB0cnVlXG59KVxuZXhwb3J0IGNsYXNzIE56R3JhcGhFZGdlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBlZGdlITogTnpHcmFwaEVkZ2U7XG4gIEBJbnB1dCgpIGVkZ2VUeXBlPzogTnpHcmFwaEVkZ2VUeXBlIHwgc3RyaW5nO1xuXG4gIEBJbnB1dCgpIGN1c3RvbVRlbXBsYXRlPzogVGVtcGxhdGVSZWY8e1xuICAgICRpbXBsaWNpdDogTnpHcmFwaEVkZ2U7XG4gIH0+O1xuXG4gIHB1YmxpYyBnZXQgaWQoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5lZGdlPy5pZCB8fCBgJHt0aGlzLmVkZ2Uudn0tLSR7dGhpcy5lZGdlLnd9YDtcbiAgfVxuICBwcml2YXRlIGVsITogU1ZHR0VsZW1lbnQ7XG4gIHByaXZhdGUgcGF0aCE6IFNWR1BhdGhFbGVtZW50O1xuXG4gIHByaXZhdGUgbGluZSA9IGxpbmU8eyB4OiBudW1iZXI7IHk6IG51bWJlciB9PigpXG4gICAgLngoZCA9PiBkLngpXG4gICAgLnkoZCA9PiBkLnkpXG4gICAgLmN1cnZlKGN1cnZlTGluZWFyKTtcblxuICBwcml2YXRlIGluamVjdG9yID0gaW5qZWN0KEluamVjdG9yKTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8U1ZHR0VsZW1lbnQ+LFxuICAgIHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZlxuICApIHtcbiAgICB0aGlzLmVsID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQ7XG4gIH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmluaXRFbGVtZW50U3R5bGUoKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBjb25zdCB7IGVkZ2UsIGN1c3RvbVRlbXBsYXRlLCBlZGdlVHlwZSB9ID0gY2hhbmdlcztcblxuICAgIGlmIChlZGdlKSB7XG4gICAgICBhZnRlck5leHRSZW5kZXIoXG4gICAgICAgICgpID0+IHtcbiAgICAgICAgICAvLyBVcGRhdGUgcGF0aCBlbGVtZW50IGlmIGN1c3RvbVRlbXBsYXRlIHNldFxuICAgICAgICAgIGlmIChjdXN0b21UZW1wbGF0ZSkge1xuICAgICAgICAgICAgdGhpcy5pbml0RWxlbWVudFN0eWxlKCk7XG4gICAgICAgICAgfVxuXG4gICAgICAgICAgdGhpcy5zZXRMaW5lKCk7XG4gICAgICAgICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gICAgICAgIH0sXG4gICAgICAgIHsgaW5qZWN0b3I6IHRoaXMuaW5qZWN0b3IgfVxuICAgICAgKTtcbiAgICB9XG5cbiAgICBpZiAoZWRnZVR5cGUpIHtcbiAgICAgIGNvbnN0IHR5cGUgPSB0aGlzLmVkZ2VUeXBlID09PSBOekdyYXBoRWRnZVR5cGUuTElORSA/IGN1cnZlTGluZWFyIDogY3VydmVCYXNpcztcbiAgICAgIHRoaXMubGluZSA9IGxpbmU8eyB4OiBudW1iZXI7IHk6IG51bWJlciB9PigpXG4gICAgICAgIC54KGQgPT4gZC54KVxuICAgICAgICAueShkID0+IGQueSlcbiAgICAgICAgLmN1cnZlKHR5cGUpO1xuICAgIH1cbiAgfVxuXG4gIGluaXRFbGVtZW50U3R5bGUoKTogdm9pZCB7XG4gICAgdGhpcy5wYXRoID0gdGhpcy5lbC5xdWVyeVNlbGVjdG9yKCdwYXRoJykhO1xuICAgIHRoaXMuc2V0RWxlbWVudERhdGEoKTtcbiAgfVxuXG4gIHNldExpbmUoKTogdm9pZCB7XG4gICAgdGhpcy5zZXRQYXRoKHRoaXMubGluZSh0aGlzLmVkZ2UucG9pbnRzKSEpO1xuICB9XG5cbiAgc2V0UGF0aChkOiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLnBhdGguc2V0QXR0cmlidXRlKCdkJywgZCk7XG4gIH1cblxuICBzZXRFbGVtZW50RGF0YSgpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMucGF0aCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLnBhdGguc2V0QXR0cmlidXRlKCdpZCcsIHRoaXMuaWQpO1xuICAgIHRoaXMucGF0aC5zZXRBdHRyaWJ1dGUoJ2RhdGEtZWRnZScsIHRoaXMuaWQpO1xuICAgIHRoaXMucGF0aC5zZXRBdHRyaWJ1dGUoJ2RhdGEtdicsIGAke3RoaXMuZWRnZS52fWApO1xuICAgIHRoaXMucGF0aC5zZXRBdHRyaWJ1dGUoJ2RhdGEtdycsIGAke3RoaXMuZWRnZS53fWApO1xuICB9XG59XG4iXX0=