ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
112 lines • 12.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 { NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { take } from 'rxjs/operators';
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, 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;
}
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}`);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: NzGraphEdgeComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", 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: "17.2.1", 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.NgZone }, { type: i0.ChangeDetectorRef }], propDecorators: { edge: [{
type: Input
}], edgeType: [{
type: Input
}], customTemplate: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JhcGgtZWRnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2dyYXBoL2dyYXBoLWVkZ2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7R0FHRztBQUVILE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ25ELE9BQU8sRUFDTCx1QkFBdUIsRUFFdkIsU0FBUyxFQUVULEtBQUssRUFNTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFdEMsT0FBTyxFQUFFLFVBQVUsRUFBRSxXQUFXLEVBQUUsSUFBSSxFQUFFLE1BQU0sVUFBVSxDQUFDO0FBRXpELE9BQU8sRUFBZSxlQUFlLEVBQUUsTUFBTSxhQUFhLENBQUM7O0FBc0IzRCxNQUFNLE9BQU8sb0JBQW9CO0lBUS9CLElBQVcsRUFBRTtRQUNYLE9BQU8sSUFBSSxDQUFDLElBQUksRUFBRSxFQUFFLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsS0FBSyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsRUFBRSxDQUFDO0lBQzNELENBQUM7SUFTRCxZQUNVLFVBQW1DLEVBQ25DLE1BQWMsRUFDZCxHQUFzQjtRQUZ0QixlQUFVLEdBQVYsVUFBVSxDQUF5QjtRQUNuQyxXQUFNLEdBQU4sTUFBTSxDQUFRO1FBQ2QsUUFBRyxHQUFILEdBQUcsQ0FBbUI7UUFSeEIsU0FBSSxHQUFHLElBQUksRUFBNEI7YUFDNUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQzthQUNYLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7YUFDWCxLQUFLLENBQUMsV0FBVyxDQUFDLENBQUM7UUFPcEIsSUFBSSxDQUFDLEVBQUUsR0FBRyxJQUFJLENBQUMsVUFB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Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFFRyxjQUFjO3NCQUF0QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2dpdGh1Yi5jb20vTkctWk9SUk8vbmctem9ycm8tYW50ZC9ibG9iL21hc3Rlci9MSUNFTlNFXG4gKi9cblxuaW1wb3J0IHsgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgRWxlbWVudFJlZixcbiAgSW5wdXQsXG4gIE5nWm9uZSxcbiAgT25DaGFuZ2VzLFxuICBPbkluaXQsXG4gIFNpbXBsZUNoYW5nZXMsXG4gIFRlbXBsYXRlUmVmXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgdGFrZSB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuaW1wb3J0IHsgY3VydmVCYXNpcywgY3VydmVMaW5lYXIsIGxpbmUgfSBmcm9tICdkMy1zaGFwZSc7XG5cbmltcG9ydCB7IE56R3JhcGhFZGdlLCBOekdyYXBoRWRnZVR5cGUgfSBmcm9tICcuL2ludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ1tuei1ncmFwaC1lZGdlXScsXG4gIHRlbXBsYXRlOiBgXG4gICAgQGlmIChjdXN0b21UZW1wbGF0ZSkge1xuICAgICAgPG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJjdXN0b21UZW1wbGF0ZVwiIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbXBsaWNpdDogZWRnZSB9XCIgLz5cbiAgICB9IEBlbHNlIHtcbiAgICAgIDxzdmc6Zz5cbiAgICAgICAgPHBhdGggY2xhc3M9XCJuei1ncmFwaC1lZGdlLWxpbmVcIiBbYXR0ci5tYXJrZXItZW5kXT1cIid1cmwoI2VkZ2UtZW5kLWFycm93KSdcIj48L3BhdGg+XG4gICAgICAgIEBpZiAoZWRnZS5sYWJlbCkge1xuICAgICAgICAgIDxzdmc6dGV4dCBjbGFzcz1cIm56LWdyYXBoLWVkZ2UtdGV4dFwiIHRleHQtYW5jaG9yPVwibWlkZGxlXCIgZHk9XCIxMFwiPlxuICAgICAgICAgICAgPHRleHRQYXRoIFthdHRyLmhyZWZdPVwiJyMnICsgaWRcIiBzdGFydE9mZnNldD1cIjUwJVwiPnt7IGVkZ2UubGFiZWwgfX08L3RleHRQYXRoPlxuICAgICAgICAgIDwvc3ZnOnRleHQ+XG4gICAgICAgIH1cbiAgICAgIDwvc3ZnOmc+XG4gICAgfVxuICBgLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgaW1wb3J0czogW05nVGVtcGxhdGVPdXRsZXRdLFxuICBzdGFuZGFsb25lOiB0cnVlXG59KVxuZXhwb3J0IGNsYXNzIE56R3JhcGhFZGdlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBlZGdlITogTnpHcmFwaEVkZ2U7XG4gIEBJbnB1dCgpIGVkZ2VUeXBlPzogTnpHcmFwaEVkZ2VUeXBlIHwgc3RyaW5nO1xuXG4gIEBJbnB1dCgpIGN1c3RvbVRlbXBsYXRlPzogVGVtcGxhdGVSZWY8e1xuICAgICRpbXBsaWNpdDogTnpHcmFwaEVkZ2U7XG4gIH0+O1xuXG4gIHB1YmxpYyBnZXQgaWQoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5lZGdlPy5pZCB8fCBgJHt0aGlzLmVkZ2Uudn0tLSR7dGhpcy5lZGdlLnd9YDtcbiAgfVxuICBwcml2YXRlIGVsITogU1ZHR0VsZW1lbnQ7XG4gIHByaXZhdGUgcGF0aCE6IFNWR1BhdGhFbGVtZW50O1xuXG4gIHByaXZhdGUgbGluZSA9IGxpbmU8eyB4OiBudW1iZXI7IHk6IG51bWJlciB9PigpXG4gICAgLngoZCA9PiBkLngpXG4gICAgLnkoZCA9PiBkLnkpXG4gICAgLmN1cnZlKGN1cnZlTGluZWFyKTtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8U1ZHR0VsZW1lbnQ+LFxuICAgIHByaXZhdGUgbmdab25lOiBOZ1pvbmUsXG4gICAgcHJpdmF0ZSBjZHI6IENoYW5nZURldGVjdG9yUmVmXG4gICkge1xuICAgIHRoaXMuZWwgPSB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcbiAgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuaW5pdEVsZW1lbnRTdHlsZSgpO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGNvbnN0IHsgZWRnZSwgY3VzdG9tVGVtcGxhdGUsIGVkZ2VUeXBlIH0gPSBjaGFuZ2VzO1xuICAgIGlmIChlZGdlKSB7XG4gICAgICB0aGlzLm5nWm9uZS5vblN0YWJsZS5waXBlKHRha2UoMSkpLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICAgIC8vIFVwZGF0ZSBwYXRoIGVsZW1lbnQgaWYgY3VzdG9tVGVtcGxhdGUgc2V0XG4gICAgICAgIGlmIChjdXN0b21UZW1wbGF0ZSkge1xuICAgICAgICAgIHRoaXMuaW5pdEVsZW1lbnRTdHlsZSgpO1xuICAgICAgICB9XG5cbiAgICAgICAgdGhpcy5zZXRMaW5lKCk7XG4gICAgICAgIHRoaXMuY2RyLm1hcmtGb3JDaGVjaygpO1xuICAgICAgfSk7XG4gICAgfVxuICAgIGlmIChlZGdlVHlwZSkge1xuICAgICAgY29uc3QgdHlwZSA9IHRoaXMuZWRnZVR5cGUgPT09IE56R3JhcGhFZGdlVHlwZS5MSU5FID8gY3VydmVMaW5lYXIgOiBjdXJ2ZUJhc2lzO1xuICAgICAgdGhpcy5saW5lID0gbGluZTx7IHg6IG51bWJlcjsgeTogbnVtYmVyIH0+KClcbiAgICAgICAgLngoZCA9PiBkLngpXG4gICAgICAgIC55KGQgPT4gZC55KVxuICAgICAgICAuY3VydmUodHlwZSk7XG4gICAgfVxuICB9XG5cbiAgaW5pdEVsZW1lbnRTdHlsZSgpOiB2b2lkIHtcbiAgICB0aGlzLnBhdGggPSB0aGlzLmVsLnF1ZXJ5U2VsZWN0b3IoJ3BhdGgnKSE7XG4gICAgdGhpcy5zZXRFbGVtZW50RGF0YSgpO1xuICB9XG5cbiAgc2V0TGluZSgpOiB2b2lkIHtcbiAgICB0aGlzLnNldFBhdGgodGhpcy5saW5lKHRoaXMuZWRnZS5wb2ludHMpISk7XG4gIH1cblxuICBzZXRQYXRoKGQ6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMucGF0aC5zZXRBdHRyaWJ1dGUoJ2QnLCBkKTtcbiAgfVxuXG4gIHNldEVsZW1lbnREYXRhKCk6IHZvaWQge1xuICAgIGlmICghdGhpcy5wYXRoKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMucGF0aC5zZXRBdHRyaWJ1dGUoJ2lkJywgdGhpcy5pZCk7XG4gICAgdGhpcy5wYXRoLnNldEF0dHJpYnV0ZSgnZGF0YS1lZGdlJywgdGhpcy5pZCk7XG4gICAgdGhpcy5wYXRoLnNldEF0dHJpYnV0ZSgnZGF0YS12JywgYCR7dGhpcy5lZGdlLnZ9YCk7XG4gICAgdGhpcy5wYXRoLnNldEF0dHJpYnV0ZSgnZGF0YS13JywgYCR7dGhpcy5lZGdlLnd9YCk7XG4gIH1cbn1cbiJdfQ==