ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
110 lines • 13 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 { NgIf, 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.0.7", ngImport: i0, type: NzGraphEdgeComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: NzGraphEdgeComponent, isStandalone: true, selector: "[nz-graph-edge]", inputs: { edge: "edge", edgeType: "edgeType", customTemplate: "customTemplate" }, usesOnChanges: true, ngImport: i0, 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>
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: 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,
imports: [NgIf, 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JhcGgtZWRnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9jb21wb25lbnRzL2dyYXBoL2dyYXBoLWVkZ2UuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7R0FHRztBQUVILE9BQU8sRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUN6RCxPQUFPLEVBQ0wsdUJBQXVCLEVBRXZCLFNBQVMsRUFFVCxLQUFLLEVBTU4sTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRXRDLE9BQU8sRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxNQUFNLFVBQVUsQ0FBQztBQUV6RCxPQUFPLEVBQWUsZUFBZSxFQUFFLE1BQU0sYUFBYSxDQUFDOztBQXFCM0QsTUFBTSxPQUFPLG9CQUFvQjtJQVEvQixJQUFXLEVBQUU7UUFDWCxPQUFPLElBQUksQ0FBQyxJQUFJLEVBQUUsRUFBRSxJQUFJLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLEtBQUssSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLEVBQUUsQ0FBQztJQUMzRCxDQUFDO0lBU0QsWUFDVSxVQUFtQyxFQUNuQyxNQUFjLEVBQ2QsR0FBc0I7UUFGdEIsZUFBVSxHQUFWLFVBQVUsQ0FBeUI7UUFDbkMsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQUNkLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBUnhCLFNBQUksR0FBRyxJQUFJLEVBQTRCO2FBQzVDLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7YUFDWCxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO2FBQ1gsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFDO1FBT3BCLElBQUksQ0FBQyxFQUFFLEdBQUcsSUFB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O3NCQUFoQixLQUFLO2dCQUVHLGNBQWM7c0JBQXRCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIFVzZSBvZiB0aGlzIHNvdXJjZSBjb2RlIGlzIGdvdmVybmVkIGJ5IGFuIE1JVC1zdHlsZSBsaWNlbnNlIHRoYXQgY2FuIGJlXG4gKiBmb3VuZCBpbiB0aGUgTElDRU5TRSBmaWxlIGF0IGh0dHBzOi8vZ2l0aHViLmNvbS9ORy1aT1JSTy9uZy16b3Jyby1hbnRkL2Jsb2IvbWFzdGVyL0xJQ0VOU0VcbiAqL1xuXG5pbXBvcnQgeyBOZ0lmLCBOZ1RlbXBsYXRlT3V0bGV0IH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgTmdab25lLFxuICBPbkNoYW5nZXMsXG4gIE9uSW5pdCxcbiAgU2ltcGxlQ2hhbmdlcyxcbiAgVGVtcGxhdGVSZWZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyB0YWtlIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5pbXBvcnQgeyBjdXJ2ZUJhc2lzLCBjdXJ2ZUxpbmVhciwgbGluZSB9IGZyb20gJ2QzLXNoYXBlJztcblxuaW1wb3J0IHsgTnpHcmFwaEVkZ2UsIE56R3JhcGhFZGdlVHlwZSB9IGZyb20gJy4vaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnW256LWdyYXBoLWVkZ2VdJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8bmctY29udGFpbmVyXG4gICAgICAqbmdJZj1cImN1c3RvbVRlbXBsYXRlXCJcbiAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImN1c3RvbVRlbXBsYXRlXCJcbiAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0Q29udGV4dF09XCJ7ICRpbXBsaWNpdDogZWRnZSB9XCJcbiAgICA+PC9uZy1jb250YWluZXI+XG4gICAgPHN2ZzpnICpuZ0lmPVwiIWN1c3RvbVRlbXBsYXRlXCI+XG4gICAgICA8cGF0aCBjbGFzcz1cIm56LWdyYXBoLWVkZ2UtbGluZVwiIFthdHRyLm1hcmtlci1lbmRdPVwiJ3VybCgjZWRnZS1lbmQtYXJyb3cpJ1wiPjwvcGF0aD5cbiAgICAgIDxzdmc6dGV4dCBjbGFzcz1cIm56LWdyYXBoLWVkZ2UtdGV4dFwiIHRleHQtYW5jaG9yPVwibWlkZGxlXCIgZHk9XCIxMFwiICpuZ0lmPVwiZWRnZS5sYWJlbFwiPlxuICAgICAgICA8dGV4dFBhdGggW2F0dHIuaHJlZl09XCInIycgKyBpZFwiIHN0YXJ0T2Zmc2V0PVwiNTAlXCI+e3sgZWRnZS5sYWJlbCB9fTwvdGV4dFBhdGg+XG4gICAgICA8L3N2Zzp0ZXh0PlxuICAgIDwvc3ZnOmc+XG4gIGAsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbTmdJZiwgTmdUZW1wbGF0ZU91dGxldF0sXG4gIHN0YW5kYWxvbmU6IHRydWVcbn0pXG5leHBvcnQgY2xhc3MgTnpHcmFwaEVkZ2VDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGVkZ2UhOiBOekdyYXBoRWRnZTtcbiAgQElucHV0KCkgZWRnZVR5cGU/OiBOekdyYXBoRWRnZVR5cGUgfCBzdHJpbmc7XG5cbiAgQElucHV0KCkgY3VzdG9tVGVtcGxhdGU/OiBUZW1wbGF0ZVJlZjx7XG4gICAgJGltcGxpY2l0OiBOekdyYXBoRWRnZTtcbiAgfT47XG5cbiAgcHVibGljIGdldCBpZCgpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmVkZ2U/LmlkIHx8IGAke3RoaXMuZWRnZS52fS0tJHt0aGlzLmVkZ2Uud31gO1xuICB9XG4gIHByaXZhdGUgZWwhOiBTVkdHRWxlbWVudDtcbiAgcHJpdmF0ZSBwYXRoITogU1ZHUGF0aEVsZW1lbnQ7XG5cbiAgcHJpdmF0ZSBsaW5lID0gbGluZTx7IHg6IG51bWJlcjsgeTogbnVtYmVyIH0+KClcbiAgICAueChkID0+IGQueClcbiAgICAueShkID0+IGQueSlcbiAgICAuY3VydmUoY3VydmVMaW5lYXIpO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZjxTVkdHRWxlbWVudD4sXG4gICAgcHJpdmF0ZSBuZ1pvbmU6IE5nWm9uZSxcbiAgICBwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWZcbiAgKSB7XG4gICAgdGhpcy5lbCA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xuICB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5pbml0RWxlbWVudFN0eWxlKCk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgY29uc3QgeyBlZGdlLCBjdXN0b21UZW1wbGF0ZSwgZWRnZVR5cGUgfSA9IGNoYW5nZXM7XG4gICAgaWYgKGVkZ2UpIHtcbiAgICAgIHRoaXMubmdab25lLm9uU3RhYmxlLnBpcGUodGFrZSgxKSkuc3Vic2NyaWJlKCgpID0+IHtcbiAgICAgICAgLy8gVXBkYXRlIHBhdGggZWxlbWVudCBpZiBjdXN0b21UZW1wbGF0ZSBzZXRcbiAgICAgICAgaWYgKGN1c3RvbVRlbXBsYXRlKSB7XG4gICAgICAgICAgdGhpcy5pbml0RWxlbWVudFN0eWxlKCk7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLnNldExpbmUoKTtcbiAgICAgICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gICAgICB9KTtcbiAgICB9XG4gICAgaWYgKGVkZ2VUeXBlKSB7XG4gICAgICBjb25zdCB0eXBlID0gdGhpcy5lZGdlVHlwZSA9PT0gTnpHcmFwaEVkZ2VUeXBlLkxJTkUgPyBjdXJ2ZUxpbmVhciA6IGN1cnZlQmFzaXM7XG4gICAgICB0aGlzLmxpbmUgPSBsaW5lPHsgeDogbnVtYmVyOyB5OiBudW1iZXIgfT4oKVxuICAgICAgICAueChkID0+IGQueClcbiAgICAgICAgLnkoZCA9PiBkLnkpXG4gICAgICAgIC5jdXJ2ZSh0eXBlKTtcbiAgICB9XG4gIH1cblxuICBpbml0RWxlbWVudFN0eWxlKCk6IHZvaWQge1xuICAgIHRoaXMucGF0aCA9IHRoaXMuZWwucXVlcnlTZWxlY3RvcigncGF0aCcpITtcbiAgICB0aGlzLnNldEVsZW1lbnREYXRhKCk7XG4gIH1cblxuICBzZXRMaW5lKCk6IHZvaWQge1xuICAgIHRoaXMuc2V0UGF0aCh0aGlzLmxpbmUodGhpcy5lZGdlLnBvaW50cykhKTtcbiAgfVxuXG4gIHNldFBhdGgoZDogc3RyaW5nKTogdm9pZCB7XG4gICAgdGhpcy5wYXRoLnNldEF0dHJpYnV0ZSgnZCcsIGQpO1xuICB9XG5cbiAgc2V0RWxlbWVudERhdGEoKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLnBhdGgpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5wYXRoLnNldEF0dHJpYnV0ZSgnaWQnLCB0aGlzLmlkKTtcbiAgICB0aGlzLnBhdGguc2V0QXR0cmlidXRlKCdkYXRhLWVkZ2UnLCB0aGlzLmlkKTtcbiAgICB0aGlzLnBhdGguc2V0QXR0cmlidXRlKCdkYXRhLXYnLCBgJHt0aGlzLmVkZ2Uudn1gKTtcbiAgICB0aGlzLnBhdGguc2V0QXR0cmlidXRlKCdkYXRhLXcnLCBgJHt0aGlzLmVkZ2Uud31gKTtcbiAgfVxufVxuIl19